feat: Ensure anonymousId is kept across multiple identify calls (#2422)

packages/checkout/widgets-lib/package.json

@@ -25,7 +25,7 @@
     "@imtbl/cryptofiat": "0.0.0",
     "@imtbl/dex-sdk": "0.0.0",
     "@imtbl/passport": "0.0.0",
-    "@imtbl/react-analytics": "0.2.1-alpha",
+    "@imtbl/react-analytics": "0.3.2-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",
     "@walletconnect/modal": "^2.6.2",

packages/checkout/widgets-lib/src/components/WalletDrawer/ConnectWalletDrawer.tsx

@@ -67,7 +67,7 @@ export function ConnectWalletDrawer({
     providersDispatch,
   } = useProvidersContext();
 
-  const { identify, track } = useAnalytics();
+  const { identify, track, user } = useAnalytics();
 
   const prevWalletChangeEvent = useRef<WalletChangeEvent | undefined>();
 
@@ -147,9 +147,12 @@ export function ConnectWalletDrawer({
         shouldRequestWalletPermissions,
       );
 
+      // Identify connected wallet, retaining current anonymousId
       if (shouldIdentifyUser) {
-        // Identify connected wallet
-        await identifyUser(identify, provider);
+        const userData = user ? await user() : undefined;
+        const anonymousId = userData?.anonymousId();
+
+        await identifyUser(identify, provider, { anonymousId });
       }
 
       // Store selected provider as fromProvider in context

packages/checkout/widgets-lib/src/lib/analytics/identifyUser.test.ts

@@ -22,10 +22,12 @@ describe('identifyUser', () => {
     } as any as Web3Provider;
 
     await identifyUser(identify, provider);
-    expect(identify).toBeCalledWith('0xtest', { isMetaMask: true, isPassportWallet: false });
+    expect(identify).toBeCalledWith('0xtest', { isMetaMask: true, isPassportWallet: false }, undefined);
   });
 
   it('should correctly identify users wallet as Passport', async () => {
+    const options = { foo: 'bar' };
+
     provider = {
       getSigner: jest.fn().mockReturnValue({
         getAddress: jest.fn().mockResolvedValue('0xtest'),
@@ -35,7 +37,7 @@ describe('identifyUser', () => {
         request: jest.fn(),
       },
     } as any as Web3Provider;
-    await identifyUser(identify, provider);
-    expect(identify).toBeCalledWith('0xtest', { isMetaMask: false, isPassportWallet: true });
+    await identifyUser(identify, provider, options);
+    expect(identify).toBeCalledWith('0xtest', { isMetaMask: false, isPassportWallet: true }, options);
   });
 });

packages/checkout/widgets-lib/src/lib/analytics/identifyUser.ts

@@ -7,8 +7,9 @@ import { isMetaMaskProvider, isPassportProvider } from '../provider';
  * @param provider - the Web3Provider used to find the user's walletAddress
  */
 export async function identifyUser(
-  identify: (id: string, attributes: Record<string, any>) => void,
+  identify: (id: string, attributes: Record<string, any>, options?: Record<string, any>) => void,
   provider: Web3Provider,
+  options?: Record<string, any>,
 ) {
   // WT-1698 Analytics - Identify user here then progress to widget
   const walletAddress = (await provider.getSigner().getAddress()).toLowerCase();
@@ -18,7 +19,7 @@ export async function identifyUser(
     identify(walletAddress, {
       isMetaMask,
       isPassportWallet: isPassport,
-    });
+    }, options);
   // eslint-disable-next-line no-console
   } catch (error: any) { console.error('analytics: unable to identify user: ', error); }
 }

sdk/package.json

@@ -24,7 +24,7 @@
     "@ethersproject/strings": "^5.7.0",
     "@ethersproject/units": "^5.7.0",
     "@ethersproject/wallet": "^5.7.0",
-    "@imtbl/react-analytics": "0.2.1-alpha",
+    "@imtbl/react-analytics": "0.3.2-alpha",
     "@jest/globals": "^29.5.0",
     "@magic-ext/oidc": "4.3.1",
     "@magic-sdk/provider": "^21.2.0",

yarn.lock

@@ -4667,7 +4667,7 @@ __metadata:
     "@imtbl/cryptofiat": 0.0.0
     "@imtbl/dex-sdk": 0.0.0
     "@imtbl/passport": 0.0.0
-    "@imtbl/react-analytics": 0.2.1-alpha
+    "@imtbl/react-analytics": 0.3.2-alpha
     "@jest/globals": ^29.5.0
     "@rive-app/react-canvas-lite": ^4.9.0
     "@rollup/plugin-commonjs": ^26.0.1
@@ -5057,6 +5057,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@imtbl/react-analytics@npm:0.3.2-alpha":
+  version: 0.3.2-alpha
+  resolution: "@imtbl/react-analytics@npm:0.3.2-alpha"
+  dependencies:
+    "@segment/analytics-next": ^1.53.2
+    react: ^18.3.0
+  checksum: 9d800d1848091a6e9606fe7511790cbc274895a9edb3ab0cf9e6dca3c5e158c058b81a075acb2a3040c081b2990e6fd565d7d9434f61f44c9efcbf62cf1144d5
+  languageName: node
+  linkType: hard
+
 "@imtbl/[email protected], @imtbl/sdk@workspace:sdk":
   version: 0.0.0-use.local
   resolution: "@imtbl/sdk@workspace:sdk"
@@ -5091,7 +5101,7 @@ __metadata:
     "@imtbl/minting-backend": 0.0.0
     "@imtbl/orderbook": 0.0.0
     "@imtbl/passport": 0.0.0
-    "@imtbl/react-analytics": 0.2.1-alpha
+    "@imtbl/react-analytics": 0.3.2-alpha
     "@imtbl/webhook": 0.0.0
     "@imtbl/x-client": 0.0.0
     "@imtbl/x-provider": 0.0.0
@@ -34446,7 +34456,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18":
+"react@npm:^18, react@npm:^18.3.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies: