fix: update multisig loading (#243)

* fix: update multisig loading

https://github.com/subscan-explorer/subscan/issues/5152

* chore: update tab fetch

Author: carlhong

src/components/Entries.tsx

@@ -1,6 +1,6 @@
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import { KeyringAddress, KeyringJson } from '@polkadot/ui-keyring/types';
-import { Button, Collapse, Empty, Progress, Space, Table, Typography } from 'antd';
+import { Button, Collapse, Empty, Progress, Space, Spin, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { intersection, isEmpty } from 'lodash';
 import { useCallback, useRef, useState } from 'react';
@@ -258,10 +258,12 @@ export function Entries({
         return !(isConfirmed || isCancelled) ? (
           <>
             <Typography.Text copyable={!isEmpty(data) && { text: data }}>
-              {!isEmpty(data)
-                ? // ? `${data.substring(0, CALL_DATA_LENGTH)}${data.length > CALL_DATA_LENGTH ? '...' : ''}`
-                  toShortString(data, CALL_DATA_LENGTH)
-                : '-'}
+              {!isEmpty(data) ? (
+                // ? `${data.substring(0, CALL_DATA_LENGTH)}${data.length > CALL_DATA_LENGTH ? '...' : ''}`
+                toShortString(data, CALL_DATA_LENGTH)
+              ) : (
+                <Spin spinning={true} />
+              )}
             </Typography.Text>
           </>
         ) : (

src/components/ExtrinsicLaunch.tsx

@@ -25,9 +25,10 @@ interface Props {
   className?: string;
   onTxSuccess?: (res: SubmittableResult) => void;
   onTxFail?: (res: SubmittableResult | null) => void;
+  onTxUpdate?: (res: SubmittableResult) => void;
 }
 
-export function ExtrinsicLaunch({ className, onTxSuccess }: Props): React.ReactElement<Props> {
+export function ExtrinsicLaunch({ className, onTxSuccess, onTxUpdate }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -181,6 +182,7 @@ export function ExtrinsicLaunch({ className, onTxSuccess }: Props): React.ReactE
               icon="sign-in-alt"
               label={t<string>('Submit Transaction')}
               onSuccess={onTxSuccess}
+              onUpdate={onTxUpdate}
               isBusy={isBusy}
               multiRoot={multisigAccount?.address}
             />

src/components/ExtrinsicRecords.tsx

@@ -230,22 +230,23 @@ export function ExtrinsicRecords() {
       setFirst(false);
       if (inProgress.length === 0 && confirmedAccount > 0) {
         setTabKey('confirmed');
+        fetchConfirmed();
       }
     }
-  }, [loadingInProgress, confirmedAccount, first, inProgress]);
+  }, [loadingInProgress, confirmedAccount, first, inProgress, fetchConfirmed]);
 
+  // Re-fetch list when page changes, only if already on that tab
   useEffect(() => {
-    fetchConfirmed();
-    fetchCancelled();
-  }, [networkConfig, fetchCancelled, fetchConfirmed]);
-
-  useEffect(() => {
-    fetchConfirmed();
-  }, [confirmedPage, fetchConfirmed, networkConfig]);
+    if (tabKey === 'confirmed') {
+      fetchConfirmed();
+    }
+  }, [confirmedPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    fetchCancelled();
-  }, [cancelledPage, fetchCancelled, networkConfig]);
+    if (tabKey === 'cancelled') {
+      fetchCancelled();
+    }
+  }, [cancelledPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // eslint-disable-next-line complexity
   const handleChangeTab = (key: string) => {

src/components/WalletState.tsx

@@ -323,6 +323,12 @@ export function WalletState(props: WalletStateProps) {
             setIsExtrinsicDisplay(false);
             queryInProgress();
           }}
+          onTxUpdate={(status) => {
+            if (status.isInBlock) {
+              setIsExtrinsicDisplay(false);
+              queryInProgress();
+            }
+          }}
         />
       </Modal>
 

src/hooks/combineQuery.ts

@@ -15,7 +15,7 @@ import {
 } from './subscan';
 
 export interface MultisigAccountDetailResult {
-  multisigAccount: { id: string; threshold: number; members: string[] };
+  multisigAccount: { id: string; threshold: number; members: string[] } | null;
 }
 
 export interface MultisigRecordCountResult {
@@ -26,31 +26,43 @@ export function useMultisigAccountDetail(network: NetConfigV2 | undefined) {
   const subquery = useSubqueryMultisigAccountDetail(network);
   const subscan = useSubscanMultisigAccountDetail(network);
 
-  const fetcher = network?.api?.subscan ? subscan : subquery;
+  const useSubscan = !!network?.api?.subscan;
+  const fetchFn = useSubscan ? subscan.fetchData : subquery.fetchData;
+  const data = useSubscan ? subscan.data : subquery.data;
+  const loading = useSubscan ? subscan.loading : subquery.loading;
 
-  const fetchData = useCallback((account: string) => {
-    if (!account) {
-      return;
-    }
-    fetcher.fetchData(account);
-  }, []);
+  const fetchData = useCallback(
+    (account: string) => {
+      if (!account) {
+        return;
+      }
+      fetchFn(account);
+    },
+    [fetchFn]
+  );
 
-  return { fetchData, data: fetcher.data, loading: fetcher.loading };
+  return { fetchData, data, loading };
 }
 
 export function useMultisigRecordCount(network: NetConfigV2 | undefined) {
   const subquery = usSubqueryMultisigRecordCount(network);
   const subscan = usSubscanMultisigRecordCount(network);
 
-  const fetcher = network?.api?.subscan ? subscan : subquery;
+  const useSubscan = !!network?.api?.subscan;
+  const fetchFn = useSubscan ? subscan.fetchData : subquery.fetchData;
+  const data = useSubscan ? subscan.data : subquery.data;
+  const loading = useSubscan ? subscan.loading : subquery.loading;
 
-  const fetchData = useCallback((account: string, status: string) => {
-    if (!account) {
-      return;
-    }
-    fetcher.fetchData(account, status);
-  }, []);
-  return { fetchData, data: fetcher.data, loading: fetcher.loading };
+  const fetchData = useCallback(
+    (account: string, status: string) => {
+      if (!account) {
+        return;
+      }
+      fetchFn(account, status);
+    },
+    [fetchFn]
+  );
+  return { fetchData, data, loading };
 }
 
 export function useMultisigRecords(
@@ -70,16 +82,19 @@ export function useMultisigRecords(
   const subquery = useSubqueryMultisigRecords(network);
   const subscan = useSubscanMultisigRecords(network);
 
-  const fetcher = network?.api?.subscan ? subscan : subquery;
+  const useSubscan = !!network?.api?.subscan;
+  const fetchFn = useSubscan ? subscan.fetchData : subquery.fetchData;
+  const data = useSubscan ? subscan.data : subquery.data;
+  const loading = useSubscan ? subscan.loading : subquery.loading;
 
   // eslint-disable-next-line no-magic-numbers
   const fetchData = useCallback(() => {
     if (!account) {
       return;
     }
-    fetcher.fetchData(account, status, offset, limit);
-  }, [account, offset, status]);
-  return { fetchData, data: fetcher.data, loading: fetcher.loading };
+    fetchFn(account, status, offset, limit);
+  }, [account, offset, status, limit, fetchFn]);
+  return { fetchData, data, loading };
 }
 
 export function useDataSourceTools(network: NetConfigV2 | undefined) {

src/hooks/multisig.ts

@@ -27,10 +27,6 @@ export function useMultisig(acc?: string) {
   };
   const { fetchData: fetchInProgress, data: inProgressData } = useMultisigRecords(networkConfig, fetchInprogressParams);
 
-  useEffect(() => {
-    fetchInProgress();
-  }, [networkConfig, fetchInProgress]);
-
   const queryInProgress = useCallback(
     // eslint-disable-next-line complexity
     async (silent = false) => {