fix: fixed WalletConnect automatic connection issue

node-real · Nov 29, 2023 · 1341665 · 1341665
1 parent d1fb170
commit 1341665
Show file tree

Hide file tree

Showing 14 changed files with 76 additions and 89 deletions.
diff --git a/.changeset/hot-items-love.md b/.changeset/hot-items-love.md
@@ -0,0 +1,7 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed `WalletConnect` automatic connection issue in the follow scenario: connect the WalletConnect
+-> close browser -> reopen browser -> disconnect -> select WalletConnect, will automatically
+connect.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -7,8 +7,5 @@
     "@totejs/walletkit": "1.0.6",
     "website": "0.0.1"
   },
-  "changesets": [
-    "moody-eels-compete",
-    "pretty-zoos-type"
-  ]
+  "changesets": []
 }
diff --git a/packages/walletkit/CHANGELOG.md b/packages/walletkit/CHANGELOG.md
@@ -1,12 +1,5 @@
 # @totejs/walletkit
 
-## 1.0.7-alpha.0
-
-### Patch Changes
-
-- 5d859fc: Add chains type declaration for dev example
-- Fixed typescript declaration files export path error, remove `dev` in tsconfig.json includes field
-
 ## 1.0.6
 
 ### Patch Changes

diff --git a/packages/walletkit/src/defaultConfig/getDefaultConfig.ts b/packages/walletkit/src/defaultConfig/getDefaultConfig.ts
@@ -14,7 +14,7 @@ import { WalletProps } from '../wallets/types';
 import { WALLET_CONNECT_PROJECT_ID } from '../constants/common';
 import { setGlobalData } from '../globalData';
 import { getDefaultWallets } from './getDefaultWallets';
-import { WALLET_CONNECT_ID, walletConnect } from '@/wallets';
+import { isWalletConnectConnector, walletConnect } from '@/wallets';
 
 export interface DefaultConfigProps {
   appName: string;
@@ -68,13 +68,11 @@ export const getDefaultConfig = (props: DefaultConfigProps) => {
   } = props;
 
   setGlobalData({
-    walletConnectDefaultOptions: {
-      walletConnectProjectId,
-      appName,
-      appIcon,
-      appDescription,
-      appUrl,
-    },
+    appName,
+    walletConnectProjectId,
+    appIcon,
+    appDescription,
+    appUrl,
   });
 
   const providers: ChainProviderFn[] = [];
@@ -126,33 +124,18 @@ function createConnectors(wallets: WalletProps[], chains: Chain[]) {
   return connectors;
 }
 
-// !!!hack
-// If creating WalletConnect connector after wagmi initialization,
-// the speed of creating qr code and displaying WalletConnect modal will be very slow.
+// !!! notice
+// Try to keep only one walletConnect connector in a project
+// or multiple walletConnect connectors may lead some competition issues.
 function createGlobalWalletConnect(connectors: Connector[], chains: Chain[]) {
-  const wc = connectors.find((c) => c.id === WALLET_CONNECT_ID);
-
-  const { createConnector, ...restWalletProps } = wc?._wallet ?? walletConnect();
-  const options = wc?.options;
-
-  const qrCodeWalletConnectConnector = walletConnect({
-    ...restWalletProps,
-    connectorOptions: {
-      ...options,
-      showQrModal: false,
-    },
-  }).createConnector(chains);
-
-  const modalWalletConnectConnector = walletConnect({
-    ...restWalletProps,
-    connectorOptions: {
-      ...options,
-      showQrModal: true,
-    },
-  }).createConnector(chains);
+  let wc = connectors.find((c) => isWalletConnectConnector(c));
+  if (!wc) {
+    // for hiding in the wallet list, there is no need to mount the `_wallet`
+    wc = walletConnect().createConnector(chains);
+    connectors.push(wc);
+  }
 
   setGlobalData({
-    qrCodeWalletConnectConnector,
-    modalWalletConnectConnector,
+    walletConnectConnector: wc,
   });
 }
diff --git a/packages/walletkit/src/globalData/index.ts b/packages/walletkit/src/globalData/index.ts
@@ -1,21 +1,16 @@
 import { Connector } from 'wagmi/connectors';
 
 export interface GlobalDataType {
-  qrCodeWalletConnectConnector?: Connector;
-  modalWalletConnectConnector?: Connector;
-  walletConnectDefaultOptions: {
-    walletConnectProjectId?: string;
-    appName: string;
-    appIcon?: string;
-    appDescription?: string;
-    appUrl?: string;
-  };
+  appName: string;
+  appIcon?: string;
+  appDescription?: string;
+  appUrl?: string;
+  walletConnectProjectId?: string;
+  walletConnectConnector?: Connector;
 }
 
 let globalData: GlobalDataType = {
-  walletConnectDefaultOptions: {
-    appName: 'Connect Wallet',
-  },
+  appName: 'Connect Wallet',
 };
 
 export const setGlobalData = (value: Partial<GlobalDataType>) => {

diff --git a/packages/walletkit/src/hooks/useClickWallet.ts b/packages/walletkit/src/hooks/useClickWallet.ts
@@ -39,10 +39,10 @@ export function useClickWallet() {
       clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => {
         if (isWalletConnectConnector(connector)) {
-          if (connector.options.showQrModal) {
-            onOpenWcModal();
-          } else {
+          if (connector._wallet.showQRCode) {
             gotoQRcodePage();
+          } else {
+            onOpenWcModal();
           }
         } else if (!connector._wallet.installed) {
           if (mobile) {

diff --git a/packages/walletkit/src/hooks/useQRCodeUri.ts b/packages/walletkit/src/hooks/useQRCodeUri.ts
@@ -4,7 +4,6 @@ import { commonErrorHandler } from '@/utils/common';
 import { useState, useEffect } from 'react';
 import { useAccount, useConnect } from 'wagmi';
 
-let lastWcUri: string;
 let timer: any;
 
 export function useQRCodeUri() {
@@ -15,29 +14,34 @@ export function useQRCodeUri() {
   const [wcUri, setWcUri] = useState<string>('');
 
   useEffect(() => {
-    const { qrCodeWalletConnectConnector: connector } = getGlobalData();
+    const { walletConnectConnector: connector } = getGlobalData();
     if (isConnected || !connector) return;
 
     const onUpdateWcUri = ({ type, data }: any) => {
       if (type === 'display_uri') {
-        lastWcUri = data;
         setWcUri(data);
       }
     };
 
     const connectWallet = async () => {
       try {
+        log('[qrcode uri]', 'connecting');
+        const provider = await connector?.getProvider();
+        provider.rpc.showQrModal = false;
+
         await connectAsync({ connector });
       } catch (error: any) {
         clearTimeout(timer);
 
         timer = setTimeout(() => {
-          commonErrorHandler({
-            log,
-            error,
-            handler: options.onError,
-          });
-          connectWallet(); // refresh qr code
+          if (error?.code === 4001) {
+            commonErrorHandler({
+              log,
+              error,
+              handler: options.onError,
+            });
+            connectWallet(); // refresh qr code
+          }
         }, 100);
       }
     };

diff --git a/packages/walletkit/src/hooks/useWalletConnectModal.ts b/packages/walletkit/src/hooks/useWalletConnectModal.ts
@@ -26,12 +26,11 @@ export function useWalletConnectModal() {
   return {
     isOpenWcModal: isOpen,
     onOpenWcModal: async () => {
-      const w3mcss = document.createElement('style');
-      w3mcss.innerHTML = `#walletconnect-wrapper{z-index:2147483647;}`;
-      document.head.appendChild(w3mcss);
       document.body.style.setProperty('--wcm-z-index', '2147483647');
 
-      const { modalWalletConnectConnector: connector } = getGlobalData();
+      const { walletConnectConnector: connector } = getGlobalData();
+      const provider = await connector?.getProvider();
+      provider.rpc.showQrModal = true;
 
       if (connector) {
         setIsOpen(true);
@@ -43,7 +42,6 @@ export function useWalletConnectModal() {
         }
 
         setIsOpen(false);
-        document.head.removeChild(w3mcss);
       }
     },
   };

diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/index.tsx b/packages/walletkit/src/pages/Connectors/GridLayout/index.tsx
@@ -2,13 +2,17 @@ import { ModalBody } from '@/base/components/Modal/ModalBody';
 import { ModalFooter } from '@/base/components/Modal/ModalFooter';
 import { WalletIcon } from '@/base/icons/WalletIcon';
 import { useWalletKitContext, cx } from '@/index';
-import { useConnect } from 'wagmi';
+import { Connector } from 'wagmi';
 import { clsNoWalletButton, clsWallets } from './styles.css';
 import { WalletOption } from './WalletOption';
 import { Button } from '@/base/components/Button';
 
-export function GridLayout() {
-  const { connectors } = useConnect();
+export interface GridLayoutProps {
+  connectors: Connector[];
+}
+
+export function GridLayout(props: GridLayoutProps) {
+  const { connectors } = props;
   const { options } = useWalletKitContext();
 
   return (

diff --git a/packages/walletkit/src/pages/Connectors/ListLayout/index.tsx b/packages/walletkit/src/pages/Connectors/ListLayout/index.tsx
@@ -3,13 +3,17 @@ import { ModalBody } from '@/base/components/Modal/ModalBody';
 import { ModalFooter } from '@/base/components/Modal/ModalFooter';
 import { WalletIcon } from '@/base/icons/WalletIcon';
 import { useWalletKitContext, cx } from '@/index';
-import { useConnect } from 'wagmi';
 
 import { WalletOption } from './WalletOption';
 import { clsWallets, clsNoWalletLink } from './styles.css';
+import { Connector } from 'wagmi/connectors';
 
-export function ListLayout() {
-  const { connectors } = useConnect();
+export interface ListLayoutProps {
+  connectors: Connector[];
+}
+
+export function ListLayout(props: ListLayoutProps) {
+  const { connectors } = props;
   const { options } = useWalletKitContext();
 
   return (

diff --git a/packages/walletkit/src/pages/Connectors/index.tsx b/packages/walletkit/src/pages/Connectors/index.tsx
@@ -14,7 +14,8 @@ export function ConnectorsPage() {
   const { options } = useWalletKitContext();
 
   const { isMobileLayout } = useResponsive();
-  const useGridLayout = connectors.length > LIST_LAYOUT_THRESHOLD || isMobileLayout;
+  const visibleConnectors = connectors.filter((c) => !!c._wallet);
+  const useGridLayout = visibleConnectors.length > LIST_LAYOUT_THRESHOLD || isMobileLayout;
 
   return (
     <>
@@ -25,7 +26,11 @@ export function ConnectorsPage() {
         <Box className={cx('wk-disclaimer', clsDisclaimer)}>{options.disclaimer}</Box>
       )}
 
-      {useGridLayout ? <GridLayout /> : <ListLayout />}
+      {useGridLayout ? (
+        <GridLayout connectors={visibleConnectors} />
+      ) : (
+        <ListLayout connectors={visibleConnectors} />
+      )}
     </>
   );
 }
diff --git a/packages/walletkit/src/typings.d.ts b/packages/walletkit/src/typings.d.ts
@@ -1,5 +1,4 @@
 import { Connector as WagmiConnector } from 'wagmi';
-import type { WindowProvider } from 'wagmi/window';
 
 import { WalletProps } from './wallets/types';
 

diff --git a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx
@@ -32,8 +32,7 @@ export function coinbaseWallet(props: CoinbaseWalletProps = {}): WalletProps {
     showQRCode: false,
     installed: isCoinbaseWallet(),
     createConnector: (chains: Chain[]) => {
-      const { walletConnectDefaultOptions } = getGlobalData();
-      const { appName } = walletConnectDefaultOptions;
+      const { appName } = getGlobalData();
 
       return new CoinbaseWalletConnector({
         chains,

diff --git a/packages/walletkit/src/wallets/walletConnect/index.tsx b/packages/walletkit/src/wallets/walletConnect/index.tsx
@@ -28,11 +28,10 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps {
     downloadUrls: {
       default: undefined,
     },
+    showQRCode: isMobile() ? false : !connectorOptions?.showQrModal,
     installed: undefined,
     createConnector: (chains: Chain[]) => {
-      const { walletConnectDefaultOptions } = getGlobalData();
-      const { walletConnectProjectId, appName, appIcon, appDescription, appUrl } =
-        walletConnectDefaultOptions;
+      const { walletConnectProjectId, appName, appIcon, appDescription, appUrl } = getGlobalData();
 
       const hasAllAppData = appName && appIcon && appDescription && appUrl;
 
@@ -44,8 +43,7 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps {
         chains,
         options: {
           // https://github.com/WalletConnect/walletconnect-monorepo/issues/2830
-          relayUrl: 'wss://relay.walletconnect.org',
-          showQrModal: isMobile() ? true : false,
+          // relayUrl: 'wss://relay.walletconnect.org',
           projectId: walletConnectProjectId,
           metadata: hasAllAppData
             ? {
@@ -63,6 +61,7 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps {
             ],
           },
           ...connectorOptions,
+          showQrModal: true,
         },
       });
     },