[WC] Add waiting when signing transaction with WC

Koniverse · Nov 15, 2024 · 97b8cf9 · 97b8cf9
1 parent 77d8773
commit 97b8cf9
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 44 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx
@@ -5,6 +5,7 @@ import { ConfirmationDefinitions, ConfirmationResult, EvmSendTransactionRequest,
 import { WC_DEFAULT_CHAIN_ID } from '@subwallet/extension-base/services/wallet-connect-service/constants';
 import { CONFIRMATION_QR_MODAL } from '@subwallet/extension-koni-ui/constants/modal';
 import { InjectContext } from '@subwallet/extension-koni-ui/contexts/InjectContext';
+import { WalletConnectContext } from '@subwallet/extension-koni-ui/contexts/WalletConnectContext';
 import { useGetChainInfoByChainId, useLedger, useNotification } from '@subwallet/extension-koni-ui/hooks';
 import useUnlockChecker from '@subwallet/extension-koni-ui/hooks/common/useUnlockChecker';
 import { completeConfirmation, wcSendTransactionRequest, wcSignMessageRequest } from '@subwallet/extension-koni-ui/messaging';
@@ -63,6 +64,7 @@ const Component: React.FC<Props> = (props: Props) => {
   const notify = useNotification();
 
   const { activeModal } = useContext(ModalContext);
+  const { waitingSigningModal: { close: closeWaiting, open: openWaiting } } = useContext(WalletConnectContext);
   const { evmWallet } = useContext(InjectContext);
 
   const chain = useGetChainInfoByChainId(chainId);
@@ -223,17 +225,25 @@ const Component: React.FC<Props> = (props: Props) => {
     }
 
     setLoading(true);
+    openWaiting();
     promise
       .then(({ signature }) => {
+        closeWaiting();
         onApproveSignature({ signature: signature as `0x${string}` });
       })
       .catch((e) => {
-        console.error(e);
+        const error = e as Error;
+
+        closeWaiting();
+        notify({
+          message: error.message,
+          type: 'error'
+        });
       })
       .finally(() => {
         setLoading(false);
       });
-  }, [account.address, isMessage, onApproveSignature, payload, chainId]);
+  }, [isMessage, openWaiting, payload.payload, account.address, chainId, closeWaiting, onApproveSignature, notify]);
 
   const onConfirm = useCallback(() => {
     removeTransactionPersist(extrinsicType);

diff --git a/packages/extension-koni-ui/src/Popup/Root.tsx b/packages/extension-koni-ui/src/Popup/Root.tsx
@@ -276,11 +276,9 @@ export function Root (): React.ReactElement {
   return (
     <SecurityContextProvider>
       <WalletModalContextProvider>
-        <WalletConnectContextProvider>
-          <DefaultRoute>
-            <Outlet />
-          </DefaultRoute>
-        </WalletConnectContextProvider>
+        <DefaultRoute>
+          <Outlet />
+        </DefaultRoute>
       </WalletModalContextProvider>
     </SecurityContextProvider>
   );

diff --git a/...extension-koni-ui/src/components/Modal/WalletConnect/WalletConnectWaitingSigningModal.tsx b/...extension-koni-ui/src/components/Modal/WalletConnect/WalletConnectWaitingSigningModal.tsx
@@ -24,6 +24,7 @@ function Component (props: Props): React.ReactElement<Props> {
     <SwModal
       className={CN(className, '-light-theme')}
       closable={false}
+      destroyOnClose={true}
       id={modalId}
       maskClosable={false}
       title={t('Success')}

diff --git a/packages/extension-koni-ui/src/contexts/WalletModalContextProvider.tsx b/packages/extension-koni-ui/src/contexts/WalletModalContextProvider.tsx
@@ -15,6 +15,7 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom';
 
 import { UnlockModal } from '../components/Modal/UnlockModal';
+import { WalletConnectContextProvider } from './WalletConnectContext';
 
 interface Props {
   children: React.ReactNode;
@@ -127,42 +128,46 @@ export const WalletModalContextProvider = ({ children }: Props) => {
 
   // todo: will remove ClaimDappStakingRewardsModal after Astar upgrade to v3
 
-  return <WalletModalContext.Provider value={contextValue}>
-    <div
-      id='popup-container'
-      style={{ zIndex: hasActiveModal ? undefined : -1 }}
-    />
-    {children}
-    <SwModal
-      className={'modal-full'}
-      closable={false}
-      destroyOnClose={true}
-      id={'confirmations'}
-      onCancel={onCloseModal}
-      transitionName={'fade'}
-      wrapClassName={CN({ 'd-none': !hasConfirmations })}
-    >
-      <Confirmations />
-    </SwModal>
-    <CreateAccountModal />
-    <RemindBackupSeedPhraseModal />
-    <ImportAccountModal />
-    <AttachAccountModal />
-    <NewSeedModal />
-    <ImportSeedModal />
-    <DeriveAccountModal />
-    <ClaimDappStakingRewardsModal />
-    <RequestCreatePasswordModal />
-    <RequestCameraAccessModal />
-    <CustomizeModal />
-    <UnlockModal />
-    {
-      !!leaderboardModalProps && (
-        <LeaderboardModal
-          {...leaderboardModalProps}
-          onCancel={closeLeaderboardModal}
+  return (
+    <WalletModalContext.Provider value={contextValue}>
+      <WalletConnectContextProvider>
+        <div
+          id='popup-container'
+          style={{ zIndex: hasActiveModal ? undefined : -1 }}
         />
-      )
-    }
-  </WalletModalContext.Provider>;
+        {children}
+        <SwModal
+          className={'modal-full'}
+          closable={false}
+          destroyOnClose={true}
+          id={'confirmations'}
+          onCancel={onCloseModal}
+          transitionName={'fade'}
+          wrapClassName={CN({ 'd-none': !hasConfirmations })}
+        >
+          <Confirmations />
+        </SwModal>
+        <CreateAccountModal />
+        <RemindBackupSeedPhraseModal />
+        <ImportAccountModal />
+        <AttachAccountModal />
+        <NewSeedModal />
+        <ImportSeedModal />
+        <DeriveAccountModal />
+        <ClaimDappStakingRewardsModal />
+        <RequestCreatePasswordModal />
+        <RequestCameraAccessModal />
+        <CustomizeModal />
+        <UnlockModal />
+        {
+          !!leaderboardModalProps && (
+            <LeaderboardModal
+              {...leaderboardModalProps}
+              onCancel={closeLeaderboardModal}
+            />
+          )
+        }
+      </WalletConnectContextProvider>
+    </WalletModalContext.Provider>
+  );
 };