feat: update how we select user id (#1912)

Author: jaredvu

scripts/inject-amplitude.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'url';
 
 const AMPLITUDE_API_KEY = process.env.AMPLITUDE_API_KEY;
 const AMPLITUDE_SERVER_URL = process.env.AMPLITUDE_SERVER_URL;
-const AMPLITUDE_SERVER_ZONE = process.env.AMPLITUDE_SERVER_ZONE || "US";
+const AMPLITUDE_SERVER_ZONE = process.env.AMPLITUDE_SERVER_ZONE || 'US';
 
 const currentPath = fileURLToPath(import.meta.url);
 const projectRoot = path.dirname(currentPath);
@@ -14,7 +14,7 @@ if (AMPLITUDE_API_KEY) {
     const files = await fs.readdir('entry-points');
     for (const file of files) {
       inject(file);
-    };
+    }
   } catch (err) {
     console.error('Error injecting Amplitude scripts:', err);
   }
@@ -33,13 +33,14 @@ async function inject(fileName) {
     !(function () {
       var e = "${AMPLITUDE_API_KEY}";
       e &&
-        (globalThis.amplitude.init(e${AMPLITUDE_SERVER_URL
-      ? `, undefined, {
+        (globalThis.amplitude.init(e${
+          AMPLITUDE_SERVER_URL
+            ? `, undefined, {
               serverUrl: "${AMPLITUDE_SERVER_URL}",
               serverZone: "${AMPLITUDE_SERVER_ZONE}"
             }`
-      : ''
-    }),
+            : ''
+        }),
         globalThis.amplitude.setOptOut(!1),
         globalThis.addEventListener("dydx:track", function (e) {
           var t = e.detail.eventType,
@@ -49,7 +50,7 @@ async function inject(fileName) {
         globalThis.addEventListener("dydx:identify", function (e) {
           var t = e.detail.property,
             d = e.detail.propertyValue;
-          if ("walletAddress" === t) globalThis.amplitude.setUserId(d);
+          if ("userId" === t) globalThis.amplitude.setUserId(d);
           else {
             var i = new globalThis.amplitude.Identify();
             i.set(t, d), globalThis.amplitude.identify(i);
@@ -67,4 +68,4 @@ async function inject(fileName) {
   await fs.writeFile(htmlFilePath, injectedHtml, 'utf-8');
 
   console.log(`Amplitude scripts successfully injected (${fileName}).`);
-}
+}

src/constants/analytics.ts

@@ -84,6 +84,10 @@ export const AnalyticsUserProperties = unionize(
 
     // validators
     BonsaiValidatorUrl: ofType<string | null>(),
+
+    // User
+    UserId: ofType<string | null>(),
+    IsNewUser: ofType<boolean | null>(),
   },
   { tag: 'type' as const, value: 'payload' as const }
 );
@@ -106,6 +110,8 @@ export const AnalyticsUserPropertyLoggableTypes = {
   AffiliateAddress: 'affiliateAddress',
   BonsaiValidatorUrl: 'bonsaiValidator',
   CustomFlags: 'customFlags',
+  UserId: 'userId',
+  IsNewUser: 'isNewUser',
 } as const satisfies Record<AnalyticsUserPropertyTypes, string>;
 
 export type AnalyticsUserProperty = UnionOf<typeof AnalyticsUserProperties>;
@@ -196,6 +202,8 @@ export const AnalyticsEvents = unionize(
       state: OnboardingState;
       step?: OnboardingSteps;
     }>(),
+    OnboardingSignInWithWalletClick: ofType<{}>(),
+    OnboardingSignInWithSocialsClick: ofType<{}>(),
     OnboardingAccountDerived: ofType<{
       hasPreviousTransactions: boolean;
     }>(),

src/hooks/Onboarding/useGenerateKeys.ts

@@ -4,13 +4,13 @@ import { log } from 'console';
 import { AES } from 'crypto-js';
 
 import { EvmDerivedAccountStatus } from '@/constants/account';
-import { AnalyticsEvents } from '@/constants/analytics';
+import { AnalyticsEvents, AnalyticsUserProperties } from '@/constants/analytics';
 import { DydxAddress } from '@/constants/wallets';
 
 import { useAppDispatch } from '@/state/appTypes';
 import { setSavedEncryptedSignature } from '@/state/wallet';
 
-import { track } from '@/lib/analytics/analytics';
+import { identify, track } from '@/lib/analytics/analytics';
 import { parseWalletError } from '@/lib/wallet';
 
 import { useAccounts } from '../useAccounts';
@@ -119,6 +119,7 @@ export function useGenerateKeys(generateKeysProps?: GenerateKeysProps) {
         track(AnalyticsEvents.OnboardingAccountDerived({ hasPreviousTransactions }));
 
         if (!hasPreviousTransactions) {
+          identify(AnalyticsUserProperties.IsNewUser(true));
           setDerivationStatus(EvmDerivedAccountStatus.EnsuringDeterminism);
 
           // Second signature
@@ -134,6 +135,8 @@ export function useGenerateKeys(generateKeysProps?: GenerateKeysProps) {
               'Your wallet does not support deterministic signing. Please switch to a different wallet provider.'
             );
           }
+        } else {
+          identify(AnalyticsUserProperties.IsNewUser(false));
         }
       } catch (err) {
         setDerivationStatus(EvmDerivedAccountStatus.NotDerived);

src/hooks/useAnalytics.ts

@@ -8,7 +8,7 @@ import {
   lastSuccessfulWebsocketRequestByOrigin,
 } from '@/constants/analytics';
 import { DialogTypesTypes } from '@/constants/dialogs';
-import { WalletInfo } from '@/constants/wallets';
+import { ConnectorType, WalletInfo } from '@/constants/wallets';
 
 import { calculateOnboardingStep } from '@/state/accountCalculators';
 import { getSubaccountId } from '@/state/accountInfoSelectors';
@@ -19,6 +19,7 @@ import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getTradeFormValues } from '@/state/tradeFormSelectors';
 
 import { identify, track } from '@/lib/analytics/analytics';
+import { runFn } from '@/lib/do';
 
 import { useAccounts } from './useAccounts';
 import { useApiState } from './useApiState';
@@ -103,6 +104,51 @@ export const useAnalytics = () => {
     identify(AnalyticsUserProperties.Network(selectedNetwork));
   }, [selectedNetwork]);
 
+  // AnalyticsUserProperty.UserId
+  const [analyticsUserId, setAnalyticsUserId] = useState<string | null>(null);
+
+  useEffect(() => {
+    let dead = false;
+
+    runFn(async () => {
+      if (dead) return;
+      if (sourceAccount.walletInfo?.connectorType === ConnectorType.Test) {
+        setAnalyticsUserId(null);
+      }
+
+      if (sourceAccount.walletInfo?.connectorType === ConnectorType.Turnkey) {
+        if (sourceAccount.walletInfo.userEmail && typeof globalThis.crypto !== 'undefined') {
+          const normalizedEmail = sourceAccount.walletInfo.userEmail.trim().toLowerCase();
+          const hashedEmail = await globalThis.crypto.subtle.digest(
+            'SHA-256',
+            new TextEncoder().encode(normalizedEmail)
+          );
+
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          if (dead) return;
+
+          setAnalyticsUserId(
+            Array.from(new Uint8Array(hashedEmail))
+              .map((b) => b.toString(16).padStart(2, '0'))
+              .join('')
+          );
+
+          return;
+        }
+      }
+
+      setAnalyticsUserId(sourceAccount.address ?? null);
+    });
+
+    return () => {
+      dead = true;
+    };
+  }, [sourceAccount.address, sourceAccount.walletInfo]);
+
+  useEffect(() => {
+    identify(AnalyticsUserProperties.UserId(analyticsUserId));
+  }, [analyticsUserId]);
+
   // AnalyticsUserProperty.WalletType
   useEffect(() => {
     identify(AnalyticsUserProperties.WalletType(sourceAccount.walletInfo?.name ?? null));

src/providers/TurnkeyAuthProvider.tsx

@@ -8,7 +8,7 @@ import { useTurnkey } from '@turnkey/sdk-react';
 import { jwtDecode } from 'jwt-decode';
 import { useSearchParams } from 'react-router-dom';
 
-import { AnalyticsEvents } from '@/constants/analytics';
+import { AnalyticsEvents, AnalyticsUserProperties } from '@/constants/analytics';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { ConnectorType, WalletType } from '@/constants/wallets';
@@ -34,7 +34,7 @@ import {
 } from '@/state/wallet';
 import { getSourceAccount, getTurnkeyEmailOnboardingData } from '@/state/walletSelectors';
 
-import { track } from '@/lib/analytics/analytics';
+import { identify, track } from '@/lib/analytics/analytics';
 import { parseTurnkeyError } from '@/lib/turnkey/turnkeyUtils';
 
 import { useTurnkeyWallet } from './TurnkeyWalletProvider';
@@ -135,7 +135,10 @@ const useTurnkeyAuthContext = () => {
 
       if (response.dydxAddress === '') {
         setIsNewTurnkeyUser(true);
+        identify(AnalyticsUserProperties.IsNewUser(true));
         dispatch(setRequiresAddressUpload(true));
+      } else {
+        identify(AnalyticsUserProperties.IsNewUser(false));
       }
 
       if (loginMethod === LoginMethod.OAuth && response.alreadyExists) {

src/views/dialogs/OnboardingDialog.tsx

@@ -5,6 +5,7 @@ import styled, { css } from 'styled-components';
 import tw from 'twin.macro';
 
 import { EvmDerivedAccountStatus, OnboardingSteps } from '@/constants/account';
+import { AnalyticsEvents } from '@/constants/analytics';
 import { DialogProps, DialogTypes, OnboardingDialogProps } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { StatsigFlags } from '@/constants/statsig';
@@ -38,6 +39,7 @@ import { calculateOnboardingStep } from '@/state/accountCalculators';
 import { useAppDispatch } from '@/state/appTypes';
 import { openDialog } from '@/state/dialogs';
 
+import { track } from '@/lib/analytics/analytics';
 import { testFlags } from '@/lib/testFlags';
 
 import { LanguageSelector } from '../menus/LanguageSelector';
@@ -93,10 +95,12 @@ export const OnboardingDialog = ({
   );
 
   const onDisplayChooseWallet = () => {
+    track(AnalyticsEvents.OnboardingSignInWithWalletClick());
     dispatch(setDisplayChooseWallet(true));
   };
 
   const onSignInWithSocials = () => {
+    track(AnalyticsEvents.OnboardingSignInWithSocialsClick());
     dispatch(setDisplayChooseWallet(false));
   };