Revert "fix: walletconnect v2 disconnect event (#1749)" (#1752)

* Revert "fix: walletconnect v2 disconnect event (#1749)" This reverts commit a5b9fa3. * Revert "WIP feat: init WalletConnect V2 (#1726)" This reverts commit 7713dcc.
RabbyHub · Sep 15, 2023 · b74856d · b74856d
1 parent b51df40
commit b74856d
Show file tree

Hide file tree

Showing 17 changed files with 396 additions and 642 deletions.
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "@rabby-wallet/eth-lattice-keyring": "^1.0.5",
     "@rabby-wallet/eth-simple-keyring": "^4.2.1",
     "@rabby-wallet/eth-trezor-keyring": "^2.2.0",
-    "@rabby-wallet/eth-walletconnect-keyring": "^2.0.1",
+    "@rabby-wallet/eth-walletconnect-keyring": "^1.7.21",
     "@rabby-wallet/eth-watch-keyring": "^1.0.0",
     "@rabby-wallet/gnosis-sdk": "^1.3.5",
     "@rabby-wallet/page-provider": "^0.1.20",

diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts
@@ -3,7 +3,7 @@ import Wallet, { thirdparty } from 'ethereumjs-wallet';
 import { ethErrors } from 'eth-rpc-errors';
 import * as bip39 from 'bip39';
 import { ethers, Contract } from 'ethers';
-import { chain, groupBy, uniq } from 'lodash';
+import { groupBy, uniq } from 'lodash';
 import abiCoder, { AbiCoder } from 'web3-eth-abi';
 import * as optimismContracts from '@eth-optimism/contracts';
 import {
@@ -60,7 +60,7 @@ import {
 } from '@rabby-wallet/rabby-security-engine/dist/rules';
 import DisplayKeyring from '../service/keyring/display';
 import provider from './provider';
-import { WalletConnectKeyring } from '@rabby-wallet/eth-walletconnect-keyring';
+import WalletConnectKeyring from '@rabby-wallet/eth-walletconnect-keyring';
 import eventBus from '@/eventBus';
 import {
   setPageStateCacheWhenPopupClose,
@@ -98,7 +98,6 @@ import { t } from 'i18next';
 import { getWeb3Provider } from './utils';
 import { CoboSafeAccount } from '@/utils/cobo-agrus-sdk/cobo-agrus-sdk';
 import CoboArgusKeyring from '../service/keyring/eth-cobo-argus-keyring';
-import { GET_WALLETCONNECT_CONFIG } from '@/utils/walletconnect';
 
 const stashKeyrings: Record<string | number, any> = {};
 
@@ -1713,11 +1712,7 @@ export class WalletController extends BaseController {
     return null;
   };
 
-  initWalletConnect = async (
-    brandName: string,
-    curStashId?: number | null,
-    chainId = 1
-  ) => {
+  initWalletConnect = async (brandName: string, curStashId?: number | null) => {
     let keyring: WalletConnectKeyring, isNewKey;
     const keyringType = KEYRING_CLASS.WALLETCONNECT;
     try {
@@ -1729,24 +1724,28 @@ export class WalletController extends BaseController {
       }
     } catch {
       const WalletConnect = keyringService.getKeyringClassForType(keyringType);
-      keyring = new WalletConnect(GET_WALLETCONNECT_CONFIG());
+      keyring = new WalletConnect({
+        accounts: [],
+        brandName: brandName,
+        // 1h
+        maxDuration: 3600000,
+        clientMeta: {
+          description: t('global.appDescription'),
+          url: 'https://rabby.io',
+          icons: ['https://rabby.io/assets/images/logo.png'],
+          name: 'Rabby',
+        },
+      });
       isNewKey = true;
     }
-    const { uri } = await keyring.initConnector(
-      brandName,
-      !chainId ? 1 : chainId
-    );
+    const { uri } = await keyring.initConnector(brandName);
     let stashId = curStashId;
     if (isNewKey) {
       stashId = this.addKeyringToStash(keyring);
       eventBus.addEventListener(
         EVENTS.WALLETCONNECT.INIT,
-        ({ address, brandName, chainId }) => {
-          (keyring as WalletConnectKeyring).init(
-            address,
-            brandName,
-            !chainId ? 1 : chainId
-          );
+        ({ address, brandName }) => {
+          (keyring as WalletConnectKeyring).init(address, brandName);
         }
       );
       (keyring as WalletConnectKeyring).on('inited', (uri) => {
@@ -1801,6 +1800,40 @@ export class WalletController extends BaseController {
     };
   };
 
+  getWalletConnectBridge = (address: string, brandName: string) => {
+    const keyringType = KEYRING_CLASS.WALLETCONNECT;
+    const keyring: WalletConnectKeyring = this._getKeyringByType(keyringType);
+    if (keyring) {
+      const target = keyring.accounts.find(
+        (account) =>
+          account.address.toLowerCase() === address.toLowerCase() &&
+          brandName === account.brandName
+      );
+
+      if (target) return target.bridge;
+
+      return null;
+    }
+    return null;
+  };
+
+  getWalletConnectConnectors = () => {
+    const keyringType = KEYRING_CLASS.WALLETCONNECT;
+    const keyring: WalletConnectKeyring = this._getKeyringByType(keyringType);
+    if (keyring) {
+      const result: { address: string; brandName: string }[] = [];
+      for (const key in keyring.connectors) {
+        const target = keyring.connectors[key];
+        result.push({
+          address: key.split('-')[1],
+          brandName: target.brandName,
+        });
+      }
+      return result;
+    }
+    return [];
+  };
+
   killWalletConnectConnector = async (
     address: string,
     brandName: string,
@@ -1810,11 +1843,17 @@ export class WalletController extends BaseController {
     const keyringType = KEYRING_CLASS.WALLETCONNECT;
     const keyring: WalletConnectKeyring = this._getKeyringByType(keyringType);
     if (keyring) {
-      const topic = keyring.cached.findTopic({ address, brandName });
-      if (topic) {
-        await keyring.closeConnector({ topic }, silent);
+      const connector =
+        keyring.connectors[`${brandName}-${address.toLowerCase()}`];
+      if (connector) {
+        await keyring.closeConnector(
+          connector.connector,
+          address,
+          brandName,
+          silent
+        );
         // reset onAfterConnect
-        if (resetConnect) keyring.onAfterSessionCreated = undefined;
+        if (resetConnect) keyring.onAfterConnect = null;
       }
     }
   };
@@ -1856,6 +1895,7 @@ export class WalletController extends BaseController {
     keyring.setAccountToAdd({
       address,
       brandName,
+      bridge,
       realBrandName,
       realBrandUrl,
     });
@@ -3256,31 +3296,6 @@ export class WalletController extends BaseController {
       isModuleEnabled,
     };
   };
-
-  walletConnectScanAccount = async () => {
-    let keyring: WalletConnectKeyring, isNewKey;
-    const keyringType = KEYRING_CLASS.WALLETCONNECT;
-    try {
-      keyring = this._getKeyringByType(keyringType);
-    } catch {
-      const WalletConnect = keyringService.getKeyringClassForType(keyringType);
-      keyring = new WalletConnect(GET_WALLETCONNECT_CONFIG());
-      isNewKey = true;
-    }
-
-    if (isNewKey) {
-      this.addKeyringToStash(keyring);
-    }
-
-    keyring.on('scanAccount', (payload) => {
-      eventBus.emit(EVENTS.broadcastToUI, {
-        method: EVENTS.WALLETCONNECT.SCAN_ACCOUNT,
-        params: payload,
-      });
-    });
-
-    return await keyring.scanAccount();
-  };
 }
 
 const wallet = new WalletController();

diff --git a/src/background/service/keyring/index.ts b/src/background/service/keyring/index.ts
@@ -21,7 +21,9 @@ import LatticeKeyring from './eth-lattice-keyring';
 import WatchKeyring from '@rabby-wallet/eth-watch-keyring';
 import KeystoneKeyring from './eth-keystone-keyring';
 import CoboArgusKeyring from './eth-cobo-argus-keyring';
-import { WalletConnectKeyring } from '@rabby-wallet/eth-walletconnect-keyring';
+import WalletConnectKeyring, {
+  keyringType,
+} from '@rabby-wallet/eth-walletconnect-keyring';
 import GnosisKeyring, {
   TransactionBuiltEvent,
   TransactionConfirmedEvent,
@@ -35,7 +37,6 @@ import { isSameAddress } from 'background/utils';
 import contactBook from '../contactBook';
 import { generateAliasName } from '@/utils/account';
 import * as Sentry from '@sentry/browser';
-import { GET_WALLETCONNECT_CONFIG } from '@/utils/walletconnect';
 
 export const KEYRING_SDK_TYPES = {
   SimpleKeyring,
@@ -858,10 +859,7 @@ export class KeyringService extends EventEmitter {
   async _restoreKeyring(serialized: any): Promise<any> {
     const { type, data } = serialized;
     const Keyring = this.getKeyringClassForType(type);
-    const keyring =
-      Keyring?.type === KEYRING_CLASS.WALLETCONNECT
-        ? new Keyring(GET_WALLETCONNECT_CONFIG())
-        : new Keyring();
+    const keyring = new Keyring();
     await keyring.deserialize(data);
     if (
       keyring.type === HARDWARE_KEYRING_TYPES.Ledger.type &&
@@ -872,12 +870,8 @@ export class KeyringService extends EventEmitter {
     if (keyring.type === KEYRING_CLASS.WALLETCONNECT) {
       eventBus.addEventListener(
         EVENTS.WALLETCONNECT.INIT,
-        ({ address, brandName, chainId }) => {
-          (keyring as WalletConnectKeyring).init(
-            address,
-            brandName,
-            !chainId ? 1 : chainId
-          );
+        ({ address, brandName }) => {
+          (keyring as WalletConnectKeyring).init(address, brandName);
         }
       );
       (keyring as WalletConnectKeyring).on('inited', (uri) => {

diff --git a/src/constant/index.ts b/src/constant/index.ts
@@ -318,7 +318,6 @@ export const EVENTS = {
     INIT: 'WALLETCONNECT_INIT',
     INITED: 'WALLETCONNECT_INITED',
     TRANSPORT_ERROR: 'TRANSPORT_ERROR',
-    SCAN_ACCOUNT: 'SCAN_ACCOUNT',
   },
   GNOSIS: {
     TX_BUILT: 'TransactionBuilt',

diff --git a/src/ui/component/ScanCopyQRCode.tsx b/src/ui/component/ScanCopyQRCode.tsx
@@ -13,13 +13,15 @@ import IconRefresh from 'ui/assets/urlrefresh.svg';
 import { ConnectStatus } from './WalletConnect/ConnectStatus';
 import { useSessionStatus } from './WalletConnect/useSessionStatus';
 import { Account } from '@/background/service/preference';
-import Spin from './Spin';
 
 interface Props {
   showURL: boolean;
   changeShowURL: (active: boolean) => void;
   refreshFun(): void;
   qrcodeURL: string;
+  onBridgeChange(val: string): void;
+  bridgeURL: string;
+  defaultBridge: string;
   canChangeBridge?: boolean;
   brandName?: string;
   account?: Account;
@@ -29,6 +31,9 @@ const ScanCopyQRCode: React.FC<Props> = ({
   changeShowURL,
   qrcodeURL,
   refreshFun,
+  onBridgeChange,
+  bridgeURL,
+  defaultBridge,
   canChangeBridge = true,
   brandName,
   account,
@@ -64,6 +69,11 @@ const ScanCopyQRCode: React.FC<Props> = ({
     });
   };
 
+  const handleBridgeServerChange = (val: string) => {
+    onBridgeChange(val);
+    setShowOpenApiModal(false);
+  };
+
   React.useEffect(() => {
     // refresh when status is not connected
     if (status && status !== 'CONNECTED') {
@@ -88,19 +98,8 @@ const ScanCopyQRCode: React.FC<Props> = ({
         </div>
       </div>
       {!showURL && (
-        <div className="qrcode mb-0 relative" {...hoverProps}>
-          {!qrcodeURL ? (
-            <div
-              className={clsx(
-                'bg-white bg-opacity-70 absolute inset-0',
-                'flex items-center justify-center'
-              )}
-            >
-              <Spin />
-            </div>
-          ) : (
-            <QRCode value={qrcodeURL} size={170} />
-          )}
+        <div className="qrcode mb-0" {...hoverProps}>
+          <QRCode value={qrcodeURL} size={170} />
           {isHovering && (
             <div className="refresh-container">
               <div className="refresh-wrapper">
@@ -146,6 +145,13 @@ const ScanCopyQRCode: React.FC<Props> = ({
           {t('page.newAddress.walletConnect.changeBridgeServer')}
         </div>
       )}
+      <WalletConnectBridgeModal
+        defaultValue={defaultBridge}
+        value={bridgeURL}
+        visible={showOpenApiModal}
+        onChange={handleBridgeServerChange}
+        onCancel={() => setShowOpenApiModal(false)}
+      />
       <ConnectStatus account={account} uri={qrcodeURL} brandName={brandName} />
     </div>
   );

diff --git a/src/ui/component/WalletConnect/ReconnectView.tsx b/src/ui/component/WalletConnect/ReconnectView.tsx
@@ -1,6 +1,7 @@
 import { EVENTS, KEYRING_CLASS } from '@/constant';
 import eventBus from '@/eventBus';
 import { noop, useCommonPopupView, useWallet } from '@/ui/utils';
+import { DEFAULT_BRIDGE } from '@rabby-wallet/eth-walletconnect-keyring';
 import React from 'react';
 import { Account } from 'background/service/preference';
 import Scan from '@/ui/views/Approval/components/WatchAddressWaiting/Scan';
@@ -24,6 +25,7 @@ export const ReconnectView: React.FC = () => {
     null
   );
   const { status, errorAccount } = useSessionStatus(account);
+  const [bridgeURL, setBridge] = React.useState<string>(DEFAULT_BRIDGE);
   const [displayBrandName] = useDisplayBrandName(
     account?.realBrandName || account?.brandName
   );
@@ -53,11 +55,16 @@ export const ReconnectView: React.FC = () => {
 
   const init = async () => {
     if (!account) return;
+    const bridge = await wallet.getWalletConnectBridge(
+      account.address,
+      account.brandName
+    );
     setCurrentAccount({
       ...account,
       brandName: account.realBrandName || account.brandName,
       type: KEYRING_CLASS.WALLETCONNECT,
     });
+    setBridge(bridge || DEFAULT_BRIDGE);
     setPopupViewTitle(
       t('page.newAddress.walletConnect.title', { brandName: displayBrandName })
     );
@@ -98,8 +105,11 @@ export const ReconnectView: React.FC = () => {
       {currentAccount && visible && (
         <Scan
           uri={qrCodeContent}
+          bridgeURL={bridgeURL}
           onRefresh={handleRefreshQrCode}
+          defaultBridge={DEFAULT_BRIDGE}
           account={currentAccount}
+          onBridgeChange={noop}
         />
       )}
     </div>

diff --git a/src/ui/component/WalletConnect/useSessionStatus.ts b/src/ui/component/WalletConnect/useSessionStatus.ts
@@ -1,7 +1,7 @@
 import { EVENTS, WALLET_BRAND_TYPES } from '@/constant';
 import eventBus from '@/eventBus';
 import { isSameAddress, useWallet } from '@/ui/utils';
-import { WALLETCONNECT_SESSION_STATUS_MAP } from '@rabby-wallet/eth-walletconnect-keyring/dist/type';
+import { WALLETCONNECT_SESSION_STATUS_MAP } from '@rabby-wallet/eth-walletconnect-keyring';
 import React from 'react';
 
 type Status = keyof typeof WALLETCONNECT_SESSION_STATUS_MAP;

diff --git a/src/ui/component/WalletConnectBridgeModal.tsx b/src/ui/component/WalletConnectBridgeModal.tsx
@@ -8,11 +8,13 @@ import { useMedia } from 'react-use';
 
 const OpenApiModal = ({
   value,
+  defaultValue,
   visible,
   onChange,
   onCancel,
 }: {
   value: string;
+  defaultValue: string;
   visible: boolean;
   onChange(val: string): void;
   onCancel(): void;
@@ -34,7 +36,9 @@ const OpenApiModal = ({
   };
 
   const restoreInitial = () => {
-    form.setFieldsValue({});
+    form.setFieldsValue({
+      host: defaultValue,
+    });
   };
 
   useEffect(() => {