feat: Make walletConnect uri as global variable

.changeset/quick-dragons-laugh.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Make walletConnect uri as global variable

packages/walletkit/src/core/modals/ConnectModal/index.tsx

@@ -1,9 +1,9 @@
 import { Modal } from '@/core/base/components/Modal';
-import { useEventConfig, useEvmConfig } from '@/core/providers/WalletKitProvider/context';
+import { useEventConfig } from '@/core/providers/WalletKitProvider/context';
 import { useRouter } from './RouteProvider/context';
 import { useConnectModal } from './context';
 import { Navbar } from '@/core/components/Navbar';
-import { EvmWalletConnectUriGenerator } from '@/evm/components/EvmWalletConnectUriProvider';
+import { EvmConnectorUriProvider } from '@/evm/components/EvmConnectorUriProvider';
 
 export function ConnectModal() {
   const eventConfig = useEventConfig();
@@ -12,8 +12,6 @@ export function ConnectModal() {
 
   const showBack = history.length > 1;
 
-  const evmConfig = useEvmConfig();
-
   return (
     <>
       <Modal
@@ -27,7 +25,7 @@ export function ConnectModal() {
         {view}
       </Modal>
 
-      {evmConfig && <EvmWalletConnectUriGenerator />}
+      <EvmConnectorUriProvider />
     </>
   );
 }

packages/walletkit/src/evm/components/EvmConnectWithQRCodeView/index.tsx

@@ -1,9 +1,9 @@
 import { TemplateConnectWithQRCodeView } from '@/core/modals/ConnectModal/TemplateConnectWithQRCodeView';
 import { useSelectedWallet } from '@/core/providers/WalletKitProvider/context';
 import { useEvmIsConnected } from '@/evm/hooks/useEvmIsConnected';
+import { useEvmWalletConnectUri } from '@/evm/hooks/useEvmWalletConnectUri';
 import { useWalletConnectModal } from '@/evm/hooks/useWalletConnectModal';
 import { EvmWallet, isWalletConnect } from '@/evm/wallets';
-import { useEvmWalletConnectUri } from '../EvmWalletConnectUriProvider';
 
 export function EvmConnectWithQRCodeView() {
   const { selectedWallet } = useSelectedWallet();

packages/walletkit/src/evm/components/EvmConnectWithWalletConnectView/index.tsx

@@ -4,15 +4,14 @@ import { useSelectedWallet } from '@/core/providers/WalletKitProvider/context';
 import { useEvmIsConnected } from '@/evm/hooks/useEvmIsConnected';
 import { useCallback, useEffect, useState } from 'react';
 import { EventEmitter } from '@/core/utils/eventEmitter';
-import { useEvmWalletConnectUri } from '../EvmWalletConnectUriProvider';
 import { EvmWallet } from '@/evm/wallets';
 import { openUri } from '@/core/utils/common';
+import { getEvmGlobalData } from '@/evm/globalData';
 
 export function EvmConnectWithWalletConnectView() {
   const { selectedWallet } = useSelectedWallet();
 
   const [status, setStatus] = useState(CONNECT_STATUS.CONNECTING);
-  const { wcUri } = useEvmWalletConnectUri();
 
   useEffect(() => {
     const onError = (error: any) => {
@@ -55,9 +54,11 @@ export function EvmConnectWithWalletConnectView() {
   const onTryAgain = useCallback(() => {
     setStatus(CONNECT_STATUS.CONNECTING);
 
-    const walletUri = (selectedWallet as EvmWallet).getUri(wcUri);
+    const wcUri = getEvmGlobalData().walletConnectUri;
+
+    const walletUri = (selectedWallet as EvmWallet).getUri(wcUri!);
     openUri(walletUri);
-  }, [selectedWallet, wcUri]);
+  }, [selectedWallet]);
 
   return (
     <TemplateConnectingView

packages/walletkit/src/evm/components/EvmConnectorUriProvider/index.tsx

@@ -0,0 +1,19 @@
+import { isMobile, isTMA } from '@/core/base/utils/mobile';
+import { useEvmConfig } from '@/core/providers/WalletKitProvider/context';
+import { setEvmGlobalData } from '@/evm/globalData';
+import { useEvmWalletConnectUri } from '@/evm/hooks/useEvmWalletConnectUri';
+
+export function EvmConnectorUriProvider() {
+  const { wallets } = useEvmConfig();
+
+  const isWcUriEnabled = (!!wallets.find((item) => item.useWalletConnect) || isTMA()) && isMobile();
+  const { wcUri } = useEvmWalletConnectUri({
+    enabled: isWcUriEnabled,
+  });
+
+  setEvmGlobalData({
+    walletConnectUri: wcUri,
+  });
+
+  return null;
+}

packages/walletkit/src/evm/components/EvmWalletProvider/index.tsx

@@ -1,6 +1,5 @@
 import { WagmiProvider } from 'wagmi';
 import { useEvmConfig } from '@/core/providers/WalletKitProvider/context';
-import { EvmWalletConnectUriProvider } from '../EvmWalletConnectUriProvider';
 
 export interface EvmWalletProviderProps {
   children: React.ReactNode;
@@ -17,7 +16,7 @@ export function EvmWalletProvider(props: EvmWalletProviderProps) {
 
   return (
     <WagmiProvider config={evmConfig.wagmiConfig} reconnectOnMount={evmConfig.autoConnect}>
-      <EvmWalletConnectUriProvider>{children}</EvmWalletConnectUriProvider>
+      {children}
     </WagmiProvider>
   );
 }

packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx

@@ -10,11 +10,11 @@ import {
   useSelectedWallet,
 } from '@/core/providers/WalletKitProvider/context';
 import { openUri } from '@/core/utils/common';
+import { getEvmGlobalData } from '@/evm/globalData';
 import { useWalletConnectModal } from '@/evm/hooks/useWalletConnectModal';
 import { EvmWallet, isWalletConnect } from '@/evm/wallets';
 import { useRef } from 'react';
 import { useConnectors, useDisconnect } from 'wagmi';
-import { useEvmWalletConnectUri } from '../EvmWalletConnectUriProvider';
 
 interface SetEvmWalletClickRefProps {
   clickRef: UseWalletRenderProps['clickRef'];
@@ -30,7 +30,6 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
   const connectors = useConnectors();
   const { disconnect } = useDisconnect();
   const wcModal = useWalletConnectModal();
-  const { wcUri } = useEvmWalletConnectUri();
 
   const connectModal = useConnectModal();
   const router = useRouter();
@@ -70,10 +69,11 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
     };
 
     const jumpToWalletConnectView = () => {
-      if (!wcUri) return;
-
-      openUri(wallet.getUri(wcUri));
-      jumpTo(ViewRoutes.EVM_CONNECT_WITH_WALLET_CONNECT);
+      const wcUri = getEvmGlobalData().walletConnectUri;
+      if (wcUri) {
+        openUri(wallet.getUri(wcUri));
+        jumpTo(ViewRoutes.EVM_CONNECT_WITH_WALLET_CONNECT);
+      }
     };
 
     disconnect();

packages/walletkit/src/evm/globalData/index.ts

@@ -3,7 +3,7 @@ import { Metadata } from '@/core/providers/WalletKitProvider/context';
 interface EvmGlobalData {
   metadata?: Metadata;
   walletConnectProjectId?: string;
-  walletConnectModalIsOpen?: boolean;
+  walletConnectUri?: string;
 }
 
 let evmGlobalData: EvmGlobalData = {};

packages/walletkit/src/evm/hooks/useEvmWalletConnectUri.ts

@@ -0,0 +1,81 @@
+import {
+  useEvmConfig,
+  useEventConfig,
+  useLogger,
+} from '@/core/providers/WalletKitProvider/context';
+import { EventEmitter } from '@/core/utils/eventEmitter';
+import { useEffect, useState } from 'react';
+import { useConnect } from 'wagmi';
+import { evmCommonErrorHandler } from '../utils/evmCommonErrorHandler';
+import { useEvmIsConnected } from './useEvmIsConnected';
+import { useWalletConnectConnector } from './useWalletConnectConnector';
+
+interface UseEvmWalletConnectUriProps {
+  enabled?: boolean;
+}
+
+let timer: any;
+
+export function useEvmWalletConnectUri(props: UseEvmWalletConnectUriProps = {}) {
+  const { enabled = true } = props;
+
+  const { connectAsync } = useConnect();
+  const { initialChainId } = useEvmConfig();
+  const eventConfig = useEventConfig();
+  const log = useLogger();
+
+  const connector = useWalletConnectConnector();
+  const isConnected = useEvmIsConnected();
+
+  const [wcUri, setWcUri] = useState<string>();
+
+  useEffect(() => {
+    if (isConnected || !connector || !enabled) return;
+
+    const onUpdateWcUri = ({ type, data }: any) => {
+      if (type === 'display_uri') {
+        setWcUri(data);
+      }
+    };
+
+    const connectWallet = async () => {
+      try {
+        log('[qrcode uri]', 'connecting');
+        const provider: any = await connector?.getProvider();
+
+        provider.rpc.showQrModal = false;
+
+        await connectAsync({ connector, chainId: initialChainId });
+      } catch (error: any) {
+        clearTimeout(timer);
+
+        timer = setTimeout(() => {
+          // props?.onError?.(error);
+
+          EventEmitter.emit(EventEmitter.EVM_WC_URI_ERROR, error);
+
+          if (error?.code === 4001) {
+            evmCommonErrorHandler({
+              log,
+              error,
+              handler: eventConfig.onError,
+            });
+            connectWallet(); // refresh qr code
+          }
+        }, 100);
+      }
+    };
+
+    connectWallet();
+
+    connector.emitter.on('message', onUpdateWcUri);
+    return () => {
+      connector?.emitter.off('message', onUpdateWcUri);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected, enabled]);
+
+  return {
+    wcUri,
+  };
+}

packages/walletkit/src/evm/hooks/useWalletConnectModal.ts

@@ -3,7 +3,6 @@ import { useWalletConnectConnector } from './useWalletConnectConnector';
 import { useEvmConnect } from './useEvmConnect';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { useLogger } from '@/core/providers/WalletKitProvider/context';
-import { setEvmGlobalData } from '../globalData';
 
 export function useWalletConnectModal() {
   const { connectAsync } = useEvmConnect();
@@ -22,10 +21,6 @@ export function useWalletConnectModal() {
         clearTimeout(timer);
       };
     }
-
-    setEvmGlobalData({
-      walletConnectModalIsOpen: isOpen,
-    });
   }, [connectModal, isOpen]);
 
   const connector = useWalletConnectConnector();

packages/walletkit/src/evm/utils/evmConfig.ts

@@ -34,7 +34,6 @@ export function evmConfig(params: CustomizedEvmConfig) {
   setEvmGlobalData({
     metadata,
     walletConnectProjectId,
-    walletConnectModalIsOpen: false,
   });
 
   const transports: CreateConfigParameters['transports'] =