fix: using events instead of delayed trigger sign (#2335)

src/background/controller/provider/controller.ts

@@ -56,7 +56,6 @@ import eventBus from '@/eventBus';
 import { StatsData } from '../../service/notification';
 import { customTestnetService } from '@/background/service/customTestnet';
 import { sendTransaction } from 'viem/actions';
-import { SIGN_TIMEOUT } from '@/constant/timeout';
 // import { customTestnetService } from '@/background/service/customTestnet';
 
 const reportSignText = (params: {
@@ -446,9 +445,6 @@ class ProviderController extends BaseController {
 
     const chainItem = findChainByEnum(chain);
 
-    // wait ui
-    await new Promise((r) => setTimeout(r, SIGN_TIMEOUT));
-
     const statsData: StatsData = {
       signed: false,
       signedSuccess: false,
@@ -793,9 +789,6 @@ class ProviderController extends BaseController {
   personalSign = async ({ data, approvalRes, session }) => {
     if (!data.params) return;
 
-    // wait ui
-    await new Promise((r) => setTimeout(r, SIGN_TIMEOUT));
-
     const currentAccount = preferenceService.getCurrentAccount()!;
     try {
       const [string, from] = data.params;
@@ -838,9 +831,6 @@ class ProviderController extends BaseController {
       }
     }
 
-    // wait ui
-    await new Promise((r) => setTimeout(r, SIGN_TIMEOUT));
-
     return keyringService.signTypedMessage(
       keyring,
       { from, data: _data },

src/background/controller/provider/rpcFlow.ts

@@ -14,6 +14,7 @@ import * as Sentry from '@sentry/browser';
 import stats from '@/stats';
 import { addHexPrefix, stripHexPrefix } from 'ethereumjs-util';
 import { findChain } from '@/utils/chain';
+import { waitSignComponentAmounted } from '@/utils/signEvent';
 
 const isSignApproval = (type: string) => {
   const SIGN_APPROVALS = ['SignText', 'SignTypedData', 'SignTx'];
@@ -228,7 +229,12 @@ const flowContext = flow
     } = request;
     const requestDeferFn = () =>
       new Promise((resolve, reject) => {
-        return Promise.resolve(
+        let waitSignComponentPromise = Promise.resolve();
+        if (isSignApproval(approvalType) && uiRequestComponent) {
+          waitSignComponentPromise = waitSignComponentAmounted();
+        }
+
+        const invokeProviderPromise = Promise.resolve(
           providerController[mapMethod]({
             ...request,
             approvalRes,
@@ -259,6 +265,8 @@ const flowContext = flow
               });
             }
           });
+
+        return waitSignComponentPromise.then(() => invokeProviderPromise);
       });
     notificationService.setCurrentRequestDeferFn(requestDeferFn);
     const requestDefer = requestDeferFn();

src/constant/index.ts

@@ -491,6 +491,8 @@ export const EVENTS = {
   },
   LOCK_WALLET: 'LOCK_WALLET',
   RELOAD_TX: 'RELOAD_TX',
+  SIGN_BEGIN: 'SIGN_BEGIN',
+  SIGN_WAITING_AMOUNTED: 'SIGN_WAITING_AMOUNTED',
   // FORCE_EXPIRE_ADDRESS_BALANCE: 'FORCE_EXPIRE_ADDRESS_BALANCE',
 };
 

src/constant/timeout.ts

@@ -1,11 +1,5 @@
 import { appIsDebugPkg, appIsDev } from '@/utils/env';
 
-/**
- * When calling signatures, it is not possible to receive event messages in time, 
- if the UI has not been initialized
- */
-export const SIGN_TIMEOUT = 100;
-
 export const DEFT_BALANCE_LOADING_TIMEOUT_PROD = 10 * 60 * 1e3;
 export const BALANCE_LOADING_TIMES = appIsDev
   ? {

src/ui/views/Approval/components/CoinbaseWaiting/index.tsx

@@ -16,6 +16,7 @@ import { message } from 'antd';
 import { useSessionStatus } from '@/ui/component/WalletConnect/useSessionStatus';
 import { adjustV } from '@/ui/utils/gnosis';
 import { findChain, findChainByEnum } from '@/utils/chain';
+import { emitSignComponentAmounted } from '@/utils/signEvent';
 
 interface ApprovalParams {
   address: string;
@@ -169,6 +170,8 @@ const CoinbaseWaiting = ({ params }: { params: ApprovalParams }) => {
       });
       isSignTriggered = true;
     }
+
+    emitSignComponentAmounted();
   };
 
   useEffect(() => {

src/ui/views/Approval/components/CommonWaiting.tsx

@@ -21,6 +21,7 @@ import { matomoRequestEvent } from '@/utils/matomo-request';
 import { adjustV } from '@/ui/utils/gnosis';
 import { message } from 'antd';
 import { findChain } from '@/utils/chain';
+import { emitSignComponentAmounted } from '@/utils/signEvent';
 
 interface ApprovalParams {
   address: string;
@@ -179,6 +180,8 @@ export const CommonWaiting = ({ params }: { params: ApprovalParams }) => {
         setErrorMessage(data.errorMsg);
       }
     });
+
+    emitSignComponentAmounted();
   };
 
   React.useEffect(() => {

src/ui/views/Approval/components/ImKeyHardwareWaiting.tsx

@@ -28,6 +28,7 @@ import {
 import { useImKeyStatus } from '@/ui/component/ConnectStatus/useImKeyStatus';
 import * as Sentry from '@sentry/browser';
 import { findChain } from '@/utils/chain';
+import { emitSignComponentAmounted } from '@/utils/signEvent';
 
 interface ApprovalParams {
   address: string;
@@ -199,6 +200,8 @@ export const ImKeyHardwareWaiting = ({
         setErrorMessage(data.errorMsg);
       }
     });
+
+    emitSignComponentAmounted();
   };
 
   React.useEffect(() => {

src/ui/views/Approval/components/LedgerHardwareWaiting.tsx

@@ -28,6 +28,7 @@ import {
 import { useLedgerStatus } from '@/ui/component/ConnectStatus/useLedgerStatus';
 import * as Sentry from '@sentry/browser';
 import { findChain } from '@/utils/chain';
+import { emitSignComponentAmounted } from '@/utils/signEvent';
 
 interface ApprovalParams {
   address: string;
@@ -197,6 +198,8 @@ const LedgerHardwareWaiting = ({ params }: { params: ApprovalParams }) => {
         setErrorMessage(data.errorMsg);
       }
     });
+
+    emitSignComponentAmounted();
   };
 
   React.useEffect(() => {

src/ui/views/Approval/components/PrivatekeyWaiting.tsx

@@ -23,6 +23,7 @@ import { useThemeMode } from '@/ui/hooks/usePreference';
 import { pickKeyringThemeIcon } from '@/utils/account';
 import { id } from 'ethers/lib/utils';
 import { findChain } from '@/utils/chain';
+import { emitSignComponentAmounted } from '@/utils/signEvent';
 
 interface ApprovalParams {
   address: string;
@@ -181,6 +182,8 @@ export const PrivatekeyWaiting = ({ params }: { params: ApprovalParams }) => {
         setErrorMessage(data.errorMsg);
       }
     });
+
+    emitSignComponentAmounted();
   };
 
   React.useEffect(() => {

src/ui/views/Approval/components/QRHardWareWaiting/QRHardWareWaiting.tsx

@@ -25,7 +25,7 @@ import {
   KeystoneWiredWaiting,
 } from './KeystoneWaiting';
 import clsx from 'clsx';
-import { SIGN_TIMEOUT } from '@/constant/timeout';
+import { emitSignComponentAmounted } from '@/utils/signEvent';
 
 const KEYSTONE_TYPE = HARDWARE_KEYRING_TYPES.Keystone.type;
 enum QRHARDWARE_STATUS {
@@ -148,10 +148,9 @@ const QRHardWareWaiting = ({ params }) => {
         // rejectApproval(data.errorMsg);
       }
     });
-    // Wait for the keyring to have called the signature method
-    setTimeout(() => {
-      wallet.acquireKeystoneMemStoreData();
-    }, SIGN_TIMEOUT);
+
+    emitSignComponentAmounted();
+    wallet.acquireKeystoneMemStoreData();
   }, []);
 
   React.useEffect(() => {

src/ui/views/Approval/components/WatchAddressWaiting/index.tsx

@@ -17,6 +17,7 @@ import { message } from 'antd';
 import { useSessionStatus } from '@/ui/component/WalletConnect/useSessionStatus';
 import { adjustV } from '@/ui/utils/gnosis';
 import { findChain, findChainByEnum } from '@/utils/chain';
+import { emitSignComponentAmounted } from '@/utils/signEvent';
 
 interface ApprovalParams {
   address: string;
@@ -279,7 +280,8 @@ const WatchAddressWaiting = ({ params }: { params: ApprovalParams }) => {
         }
       }
     );
-    initWalletConnect();
+    await initWalletConnect();
+    emitSignComponentAmounted();
   };
 
   useEffect(() => {

src/utils/signEvent.ts

@@ -0,0 +1,17 @@
+import { EVENTS } from '@/constant';
+import eventBus from '@/eventBus';
+
+export const waitSignComponentAmounted = async () => {
+  return new Promise<void>((r) =>
+    eventBus.once(EVENTS.SIGN_WAITING_AMOUNTED, () => {
+      console.log('sign component amounted');
+      r();
+    })
+  );
+};
+
+export const emitSignComponentAmounted = () => {
+  eventBus.emit(EVENTS.broadcastToBackground, {
+    method: EVENTS.SIGN_WAITING_AMOUNTED,
+  });
+};