From 5fc13a2a12abea0b968e9ae0c084a17595dbb8e0 Mon Sep 17 00:00:00 2001
From: mikasackermn <mikasa@rango.exchange>
Date: Tue, 7 Nov 2023 09:52:44 +0000
Subject: [PATCH] fix: comments

---
 widget/embedded/src/components/AppRouter.tsx  | 12 +++++-
 .../embedded/src/hooks/useForceAutoConnect.ts | 37 ++++++++++++++++
 widget/embedded/src/hooks/useReferrer.ts      | 42 -------------------
 widget/embedded/src/pages/Home.tsx            |  6 ---
 4 files changed, 48 insertions(+), 49 deletions(-)
 create mode 100644 widget/embedded/src/hooks/useForceAutoConnect.ts
 delete mode 100644 widget/embedded/src/hooks/useReferrer.ts

diff --git a/widget/embedded/src/components/AppRouter.tsx b/widget/embedded/src/components/AppRouter.tsx
index e3851858fa..e6ff510531 100644
--- a/widget/embedded/src/components/AppRouter.tsx
+++ b/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);
 
diff --git a/widget/embedded/src/hooks/useForceAutoConnect.ts b/widget/embedded/src/hooks/useForceAutoConnect.ts
new file mode 100644
index 0000000000..424ea48d24
--- /dev/null
+++ b/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]);
+}
diff --git a/widget/embedded/src/hooks/useReferrer.ts b/widget/embedded/src/hooks/useReferrer.ts
deleted file mode 100644
index 6b54bb3b7e..0000000000
--- a/widget/embedded/src/hooks/useReferrer.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { LoadingStatus } from '../store/meta';
-
-import { useWallets } from '@rango-dev/wallets-react';
-import { WalletTypes } from '@rango-dev/wallets-shared';
-import { useEffect, useRef } from 'react';
-
-type UseReferrerParams = {
-  referrer: string | null;
-  loadingStatus: LoadingStatus;
-};
-
-export function useReferrer(params: UseReferrerParams): void {
-  const { referrer, loadingStatus } = params;
-  console.log('hell', loadingStatus);
-
-  const { connect, state } = useWallets();
-  const initiated = useRef(false);
-
-  const wallet = Object.values(WalletTypes).find(
-    (walletType) => walletType.toLocaleLowerCase() === referrer
-  );
-  const walletState = wallet ? state(wallet) : null;
-
-  useEffect(() => {
-    const shouldTryConnect =
-      loadingStatus === 'success' &&
-      wallet &&
-      walletState &&
-      walletState.installed &&
-      !walletState.connecting &&
-      !walletState.connected;
-
-    if (shouldTryConnect && !initiated.current) {
-      initiated.current = true;
-      connect(wallet)
-        .then()
-        .catch((error: any) => {
-          console.error(error);
-        });
-    }
-  }, [referrer, walletState, loadingStatus]);
-}
diff --git a/widget/embedded/src/pages/Home.tsx b/widget/embedded/src/pages/Home.tsx
index 39b30e99fe..7cc64ad3c1 100644
--- a/widget/embedded/src/pages/Home.tsx
+++ b/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();