perf: optimize loading states in Dapp connector views

input-output-hk · Oct 4, 2024 · d91bea4 · d91bea4
1 parent e85915f
commit d91bea4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 38 deletions.
diff --git a/.../browser-extension-wallet/src/features/dapp/components/collateral/CollateralContainer.tsx b/.../browser-extension-wallet/src/features/dapp/components/collateral/CollateralContainer.tsx
@@ -148,29 +148,30 @@ export const DappCollateralContainer = (): React.ReactElement => {
     }
   }, [redirectToCreateFailure]);
 
-  if (!isCalculatingCollateral) {
-    if (insufficientBalance) {
-      return <InsufficientFunds />;
-    } else if (lockableUtxos.length > 0 && isInstanceOfCollateralInfoWithCollateralAmount(collateralInfo)) {
-      return (
-        <DappSetCollateral
-          dappInfo={dappInfo}
-          collateralInfo={collateralInfo}
-          reject={reject}
-          confirm={() => confirmCollateral(lockableUtxos)}
-        />
-      );
-    }
-    // Allow user to create tx to set collateral
+  if (isCalculatingCollateral || !inMemoryWallet) {
+    return <MainLoader text={t('dapp.collateral.calculating')} />;
+  }
+
+  if (insufficientBalance) {
+    return <InsufficientFunds />;
+  } else if (lockableUtxos.length > 0 && isInstanceOfCollateralInfoWithCollateralAmount(collateralInfo)) {
     return (
-      <CreateCollateral
+      <DappSetCollateral
         dappInfo={dappInfo}
         collateralInfo={collateralInfo}
-        confirm={(utxos: Wallet.Cardano.Utxo[]) => confirmCollateral(utxos)}
         reject={reject}
+        confirm={() => confirmCollateral(lockableUtxos)}
       />
     );
   }
 
-  return <MainLoader text={t('dapp.collateral.calculating')} />;
+  // Allow user to create tx to set collateral
+  return (
+    <CreateCollateral
+      dappInfo={dappInfo}
+      collateralInfo={collateralInfo}
+      confirm={(utxos: Wallet.Cardano.Utxo[]) => confirmCollateral(utxos)}
+      reject={reject}
+    />
+  );
 };
diff --git a/...-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx b/...-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx
@@ -27,7 +27,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
     setDappInfo,
     signTxRequest: { request: req, set: setSignTxRequest }
   } = useViewsFlowContext();
-  const { walletType, isHardwareWallet } = useWalletStore();
+  const { walletType, isHardwareWallet, walletInfo, inMemoryWallet } = useWalletStore();
   const analytics = useAnalyticsContext();
   const [confirmTransactionError] = useState(false);
   const disallowSignTx = useDisallowSignTx(req);
@@ -83,7 +83,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
 
   return (
     <Layout layoutClassname={cn(confirmTransactionError && styles.layoutError)} pageClassname={styles.spaceBetween}>
-      {req ? <DappTransactionContainer /> : <Skeleton loading />}
+      {req && walletInfo && inMemoryWallet ? <DappTransactionContainer /> : <Skeleton loading />}
       {!confirmTransactionError && (
         <div className={styles.actions}>
           <Button

diff --git a/apps/browser-extension-wallet/src/routes/DappConnectorView.tsx b/apps/browser-extension-wallet/src/routes/DappConnectorView.tsx
@@ -4,7 +4,6 @@ import { UnlockWalletContainer } from '@src/features/unlock-wallet';
 import { useAppInit } from '@src/hooks';
 import { dAppRoutePaths, walletRoutePaths } from '@routes';
 import '@lib/i18n';
-import 'antd/dist/antd.css';
 import { Route, Switch } from 'react-router-dom';
 import { MainLayout } from '@components/Layout';
 import {
@@ -39,7 +38,7 @@ const isLastValidationExpired = (lastVerification: string, frequency: string): b
 export const DappConnectorView = (): React.ReactElement => {
   const { t } = useTranslation();
   const [{ lastMnemonicVerification, mnemonicVerificationFrequency }] = useAppSettingsContext();
-  const { inMemoryWallet, cardanoWallet, walletInfo, initialHdDiscoveryCompleted } = useWalletStore();
+  const { cardanoWallet, hdDiscoveryStatus } = useWalletStore();
   const { isWalletLocked, walletLock } = useWalletStore(lockWalletSelector);
   const isSharedWallet = useWalletStore((state) => state.isSharedWallet);
 
@@ -108,21 +107,20 @@ export const DappConnectorView = (): React.ReactElement => {
     return <UnlockWalletContainer />;
   }
 
-  if (!!cardanoWallet && walletInfo && inMemoryWallet && initialHdDiscoveryCompleted) {
-    return (
-      <MainLayout useSimpleHeader hideFooter showAnnouncement={false}>
-        <Switch>
-          <Route exact path={dAppRoutePaths.dappConnect} component={DappConnect} />
-          <Route exact path={dAppRoutePaths.dappSignTx} component={SignTxFlowContainer} />
-          <Route exact path={dAppRoutePaths.dappSignData} component={SignDataFlowContainer} />
-          <Route exact path={dAppRoutePaths.dappTxSignSuccess} component={DappTransactionSuccess} />
-          <Route exact path={dAppRoutePaths.dappTxSignFailure} component={DappTransactionFail} />
-          <Route exact path={dAppRoutePaths.dappDataSignSuccess} component={DappSignDataSuccess} />
-          <Route exact path={dAppRoutePaths.dappDataSignFailure} component={DappSignDataFail} />
-          <Route exact path={dAppRoutePaths.dappSetCollateral} component={DappCollateralContainer} />
-        </Switch>
-      </MainLayout>
-    );
-  }
-  return <Loader className={styles.loader} />;
+  if (hdDiscoveryStatus !== 'Idle') return <Loader className={styles.loader} />;
+
+  return (
+    <MainLayout useSimpleHeader hideFooter showAnnouncement={false}>
+      <Switch>
+        <Route exact path={dAppRoutePaths.dappConnect} component={DappConnect} />
+        <Route exact path={dAppRoutePaths.dappSignTx} component={SignTxFlowContainer} />
+        <Route exact path={dAppRoutePaths.dappSignData} component={SignDataFlowContainer} />
+        <Route exact path={dAppRoutePaths.dappTxSignSuccess} component={DappTransactionSuccess} />
+        <Route exact path={dAppRoutePaths.dappTxSignFailure} component={DappTransactionFail} />
+        <Route exact path={dAppRoutePaths.dappDataSignSuccess} component={DappSignDataSuccess} />
+        <Route exact path={dAppRoutePaths.dappDataSignFailure} component={DappSignDataFail} />
+        <Route exact path={dAppRoutePaths.dappSetCollateral} component={DappCollateralContainer} />
+      </Switch>
+    </MainLayout>
+  );
 };