fix: Move identify call to destination wallet on Add Tokens flow (#2451)

immutable · Dec 4, 2024 · f8623bc · f8623bc
1 parent 8ffab27
commit f8623bc
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/WalletDrawer/DeliverToWalletDrawer.tsx b/packages/checkout/widgets-lib/src/components/WalletDrawer/DeliverToWalletDrawer.tsx
@@ -53,7 +53,6 @@ export function DeliverToWalletDrawer({
       getShouldRequestWalletPermissions={
         selectedSameFromWalletType
       }
-      shouldIdentifyUser={false}
     />
   );
 }
diff --git a/packages/checkout/widgets-lib/src/components/WalletDrawer/PayWithWalletDrawer.tsx b/packages/checkout/widgets-lib/src/components/WalletDrawer/PayWithWalletDrawer.tsx
@@ -79,6 +79,7 @@ export function PayWithWalletDrawer({
       disabledOptions={disabledOptions}
       bottomSlot={payWithCardItem}
       onConnect={handleOnConnect}
+      shouldIdentifyUser={false}
     />
   );
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
@@ -71,6 +71,7 @@ import { checkSanctionedAddresses } from '../functions/checkSanctionedAddresses'
 import { getFormattedAmounts } from '../functions/getFormattedNumber';
 import { RouteData } from '../../../lib/squid/types';
 import { SQUID_NATIVE_TOKEN } from '../../../lib/squid/config';
+import { identifyUser } from '../../../lib/analytics/identifyUser';
 
 interface AddTokensProps {
   checkout: Checkout;
@@ -119,8 +120,13 @@ export function AddTokens({
     isSwapAvailable,
   } = addTokensState;
 
+  const {
+    track,
+    page,
+    identify,
+    user,
+  } = useAnalytics();
   const { viewDispatch } = useContext(ViewContext);
-  const { track, page } = useAnalytics();
   const { t } = useTranslation();
 
   const {
@@ -259,6 +265,17 @@ export function AddTokens({
     [providers],
   );
 
+  useEffect(() => {
+    if (!lockedToProvider) { return; }
+
+    (async () => {
+      const userData = user ? await user() : undefined;
+      const anonymousId = userData?.anonymousId();
+
+      await identifyUser(identify, toProvider!, { anonymousId });
+    })();
+  }, [toProvider, lockedToProvider]);
+
   const toChain = useMemo(
     () => chains?.find((chain) => chain.id === ChainId.IMTBL_ZKEVM_MAINNET.toString()),
     [chains],
@@ -638,7 +655,7 @@ export function AddTokens({
               />
 
               <HeroFormControl.Caption>
-                {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} 
+                {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')}
                 $${getFormattedAmounts(selectedAmountUsd)}`}
               </HeroFormControl.Caption>
             </HeroFormControl>

diff --git a/packages/checkout/widgets-sample-app/src/components/ui/add-tokens/addTokens.tsx b/packages/checkout/widgets-sample-app/src/components/ui/add-tokens/addTokens.tsx
@@ -45,7 +45,8 @@ function AddTokensUI() {
     [checkout]
   );
 
-  const [presetToProvider, setPresetToProvider] = useState<boolean>(false);
+  const getPersistedToPresetProvider = () => localStorage.getItem('imtbl/addtokens_presetToProvider') === 'true';
+  const [presetToProvider, setPresetToProvider] = useState<boolean>(getPersistedToPresetProvider());
   const [toProvider, setToProvider] = useState<Web3Provider | undefined>(undefined);
 
   const [toTokenAddress, setToTokenAddress] = useState<string | undefined>(undefined);
@@ -81,6 +82,12 @@ function AddTokensUI() {
   }, []);
 
   useEffect(() => {
+    const presetToProviderValue = getPersistedToPresetProvider();
+
+    if (presetToProviderValue !== presetToProvider) {
+      localStorage.setItem('imtbl/addtokens_presetToProvider', presetToProvider.toString());
+    }
+
     if (!checkout || !factory) return;
     if (!presetToProvider) {
       toProvider && addTokens.unmount();