feat: handle wallet referrer in widget

widget/embedded/src/components/UpdateUrl.tsx

@@ -60,6 +60,7 @@ export function UpdateUrl(props: Props) {
         toChainString = '',
         toTokenString = '',
         fromAmount = '';
+      const referrer = searchParamsRef.current[SearchParams.REFERRER];
       if (loadingStatus !== 'success') {
         fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
@@ -94,6 +95,9 @@ export function UpdateUrl(props: Props) {
           ...(fromAmount && {
             [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
           }),
+          ...(referrer && {
+            [SearchParams.REFERRER]: referrer,
+          }),
         },
         { replace: true }
       );

widget/embedded/src/constants/searchParams.ts

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

widget/embedded/src/hooks/useReferrer.ts

@@ -0,0 +1,42 @@
+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]);
+}

widget/embedded/src/pages/Home.tsx

@@ -34,6 +34,8 @@ 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';
@@ -116,6 +118,10 @@ 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();