feat: handle wallet referrer in widget

widget/embedded/src/components/AppRouter.tsx

@@ -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,
+    loadingStatus,
+  });
 
   const evmChains = blockchains.filter(isEvmBlockchain);
 

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/useForceAutoConnect.ts

@@ -0,0 +1,37 @@
+import type { MetaState } from '../store/meta';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef } from 'react';
+
+type forceAutoConnectParams = {
+  loadingStatus: MetaState['loadingStatus'];
+  walletType?: WalletType;
+};
+
+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]);
+}