feat(widget): handle wallet referrer in widget

widget/embedded/src/components/AppRouter.tsx

@@ -9,6 +9,7 @@ import { MemoryRouter, useInRouterContext } from 'react-router';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useForceAutoConnect } from '../hooks/useForceAutoConnect';
 import { Home } from '../pages/Home';
 import { useAppStore } from '../store/AppStore';
 
@@ -49,6 +50,8 @@ export function AppRouter({
   const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();
 
+  useForceAutoConnect();
+
   const evmChains = blockchains.filter(isEvmBlockchain);
 
   useQueueManager({

widget/embedded/src/components/UpdateUrl.tsx

@@ -57,6 +57,7 @@ export function UpdateUrl() {
         toChainString = '',
         toTokenString = '',
         fromAmount = '';
+      const autoConnect = searchParamsRef.current[SearchParams.AUTO_CONNECT];
       if (fetchMetaStatus !== 'success') {
         fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
@@ -91,6 +92,9 @@ export function UpdateUrl() {
           ...(fromAmount && {
             [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
           }),
+          ...(autoConnect && {
+            [SearchParams.AUTO_CONNECT]: autoConnect,
+          }),
         },
         { replace: true }
       );

widget/embedded/src/constants/searchParams.ts

@@ -4,4 +4,5 @@ export enum SearchParams {
   'TO_CHAIN' = 'toBlockchain',
   'TO_TOKEN' = 'toToken',
   'FROM_AMOUNT' = 'fromAmount',
+  'AUTO_CONNECT' = 'autoConnect',
 }

widget/embedded/src/hooks/useForceAutoConnect.ts

@@ -0,0 +1,27 @@
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef } from 'react';
+
+import { SearchParams } from '../constants/searchParams';
+import { useAppStore } from '../store/AppStore';
+
+export function useForceAutoConnect(): void {
+  const { connect, state } = useWallets();
+  const initiated = useRef<{ [key: string]: boolean }>({});
+  const { fetchStatus } = useAppStore();
+  const walletType =
+    new URLSearchParams(location.search).get(SearchParams.AUTO_CONNECT) || '';
+  const walletState = state(walletType);
+
+  useEffect(() => {
+    const shouldTryConnect =
+      fetchStatus === 'success' &&
+      walletType &&
+      walletState.installed &&
+      !walletState.connecting &&
+      !walletState.connected;
+    if (shouldTryConnect && !initiated.current[walletType]) {
+      initiated.current[walletType] = true;
+      void connect(walletType);
+    }
+  }, [walletState, fetchStatus]);
+}