fix: comments

widget/embedded/src/components/AppRouter.tsx

@@ -1,5 +1,5 @@
 import type { WidgetConfig } from '../types';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { WalletType, WalletTypes } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
@@ -10,6 +10,8 @@ import { MemoryRouter, useInRouterContext } from 'react-router';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { SearchParams } from '../constants/searchParams';
+import { useForceAutoConnect } from '../hooks/useForceAutoConnect';
 import { Home } from '../pages/Home';
 import { useMetaStore } from '../store/meta';
 
@@ -50,6 +52,14 @@ export function AppRouter({
   const Router = isRouterInContext ? Route : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();
   const { canSwitchNetworkTo } = useWallets();
+  const { loadingStatus } = useMetaStore();
+  const referrerWalletType = new URLSearchParams(location.search).get(
+    SearchParams.REFERRER
+  );
+  useForceAutoConnect({
+    walletType: referrerWalletType as WalletTypes,
+    loadingStatus,
+  });
 
   const evmChains = blockchains.filter(isEvmBlockchain);
 

widget/embedded/src/hooks/useForceAutoConnect.ts

@@ -0,0 +1,37 @@
+import type { MetaState } from '../store/meta';
+import type { WalletTypes } from '@rango-dev/wallets-shared';
+
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef } from 'react';
+
+type forceAutoConnectParams = {
+  loadingStatus: MetaState['loadingStatus'];
+  walletType: WalletTypes;
+};
+
+export function useForceAutoConnect(params: forceAutoConnectParams): void {
+  const { loadingStatus, walletType } = params;
+  const { connect, state } = useWallets();
+  const initiated = useRef(false);
+
+  const walletState = state(walletType);
+
+  useEffect(() => {
+    const shouldTryConnect =
+      loadingStatus === 'success' &&
+      walletType &&
+      walletState &&
+      walletState.installed &&
+      !walletState.connecting &&
+      !walletState.connected;
+
+    if (shouldTryConnect && !initiated.current) {
+      initiated.current = true;
+      connect(walletType)
+        .then()
+        .catch((error: any) => {
+          console.error(error);
+        });
+    }
+  }, [walletState, loadingStatus]);
+}

widget/embedded/src/pages/Home.tsx

@@ -34,8 +34,6 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../constants/routing';
-import { SearchParams } from '../constants/searchParams';
-import { useReferrer } from '../hooks/useReferrer';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
@@ -118,10 +116,6 @@ export function Home() {
     meta: { tokens, blockchains },
     loadingStatus: loadingMetaStatus,
   } = useMetaStore();
-  const referrer = new URLSearchParams(location.search).get(
-    SearchParams.REFERRER
-  );
-  useReferrer({ referrer, loadingStatus: loadingMetaStatus });
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();