fix: Ensure anonymousId is kept through every Segment identify call (#…

…2429)
immutable · Nov 28, 2024 · abc296a · abc296a
1 parent 307be70
commit abc296a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx b/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx
@@ -77,7 +77,7 @@ export function ConnectLoader({
     connectionStatus, deepLink, provider,
   } = connectLoaderState;
 
-  const { identify } = useAnalytics();
+  const { identify, user } = useAnalytics();
 
   const hasNoWalletProviderNameAndNoWeb3Provider = (localProvider?: Web3Provider): boolean => {
     if (!walletProviderName && !localProvider) {
@@ -212,7 +212,9 @@ export function ConnectLoader({
         try {
           // WT-1698 Analytics - Identify user here then progress to widget
           // TODO: Identify user should be separated out into a use Effect with only the provider (from connect loader state) as dependency
-          await identifyUser(identify, web3Provider!);
+          const userData = user ? await user() : undefined;
+          const anonymousId = userData?.anonymousId();
+          await identifyUser(identify, web3Provider!, { anonymousId });
         } catch (err) {
           return;
         }

diff --git a/packages/checkout/widgets-lib/src/lib/analytics/identifyUser.ts b/packages/checkout/widgets-lib/src/lib/analytics/identifyUser.ts
@@ -5,6 +5,7 @@ import { isMetaMaskProvider, isPassportProvider } from '../provider';
  * identifyUser - function to identify a user by their wallet address and call the function to raise analytics
  * @param identify - The identify function from the useAnalytics() hook
  * @param provider - the Web3Provider used to find the user's walletAddress
+ * @param options - additional options to pass to the identify function
  */
 export async function identifyUser(
   identify: (id: string, attributes: Record<string, any>, options?: Record<string, any>) => void,

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx
@@ -110,7 +110,7 @@ export default function ConnectWidget({
     [viewState, viewDispatch],
   );
 
-  const { identify, page } = useAnalytics();
+  const { identify, page, user } = useAnalytics();
 
   let targetChain = targetChainId;
   if (!targetChain) {
@@ -186,7 +186,11 @@ export default function ConnectWidget({
     });
     // Set up EIP-1193 provider event listeners for widget root instances
     addProviderListenersForWidgetRoot(provider);
-    await identifyUser(identify, provider);
+
+    const userData = user ? await user() : undefined;
+    const anonymousId = userData?.anonymousId();
+
+    await identifyUser(identify, provider, { anonymousId });
     sendProviderUpdatedEvent({ provider });
 
     // Find the wallet provider info via injected with Passport and MetaMask fallbacks

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx
@@ -73,7 +73,7 @@ export function WalletList(props: WalletListProps) {
     connectState: { checkout },
   } = useContext(ConnectContext);
   const { viewDispatch } = useContext(ViewContext);
-  const { track, identify } = useAnalytics();
+  const { track, identify, user } = useAnalytics();
   const { providers } = useInjectedProviders({ checkout });
   const [showWalletDrawer, setShowWalletDrawer] = useState(false);
   const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect();
@@ -180,7 +180,10 @@ export function WalletList(props: WalletListProps) {
 
           // Set up EIP-1193 provider event listeners for widget root instances
           addProviderListenersForWidgetRoot(connectResult.provider);
-          await identifyUser(identify, connectResult.provider);
+
+          const userData = user ? await user() : undefined;
+          const anonymousId = userData?.anonymousId();
+          await identifyUser(identify, connectResult.provider, { anonymousId });
 
           selectWeb3Provider(
             web3Provider,

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/ReadyToConnect.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/ReadyToConnect.tsx
@@ -36,7 +36,9 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP
   const isPassport = isPassportProvider(provider);
   const isMetaMask = isMetaMaskProvider(provider);
 
-  const { page, identify, track } = useAnalytics();
+  const {
+    page, identify, track, user,
+  } = useAnalytics();
 
   useEffect(() => {
     page({
@@ -145,7 +147,9 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP
       // Set up EIP-1193 provider event listeners for widget root instances
       addProviderListenersForWidgetRoot(connectResult.provider);
 
-      await identifyUser(identify, connectResult.provider);
+      const userData = user ? await user() : undefined;
+      const anonymousId = userData?.anonymousId();
+      await identifyUser(identify, connectResult.provider, { anonymousId });
 
       connectDispatch({
         payload: {