Feature/wt 1691 analytics (#989)

Co-authored-by: Zach Couchman <zachary.couchman@immutable.com>
immutable · Oct 17, 2023 · cb5898d · cb5898d
1 parent 5697e0f
commit cb5898d
Show file tree

Hide file tree

Showing 29 changed files with 1,272 additions and 806 deletions.
diff --git a/packages/checkout/widgets-lib/src/lib/chainName.test.ts b/packages/checkout/widgets-lib/src/lib/chainName.test.ts
@@ -0,0 +1,18 @@
+import { ChainId, ChainName } from '@imtbl/checkout-sdk';
+import { getChainNameById } from './chainName';
+
+describe('getChainNameById', () => {
+  const chainNameTestCases = [
+    { id: ChainId.IMTBL_ZKEVM_DEVNET, expectedName: ChainName.IMTBL_ZKEVM_DEVNET },
+    { id: ChainId.IMTBL_ZKEVM_TESTNET, expectedName: ChainName.IMTBL_ZKEVM_TESTNET },
+    { id: ChainId.IMTBL_ZKEVM_MAINNET, expectedName: ChainName.IMTBL_ZKEVM_MAINNET },
+    { id: ChainId.ETHEREUM, expectedName: ChainName.ETHEREUM },
+    { id: ChainId.SEPOLIA, expectedName: ChainName.SEPOLIA },
+  ];
+
+  chainNameTestCases.forEach(({ id, expectedName }) => {
+    it(`should return ${expectedName} for chain id ${id}`, () => {
+      expect(getChainNameById(id)).toEqual(expectedName);
+    });
+  });
+});
diff --git a/packages/checkout/widgets-lib/src/lib/chainName.ts b/packages/checkout/widgets-lib/src/lib/chainName.ts
@@ -0,0 +1,12 @@
+import { ChainId, ChainName } from '@imtbl/checkout-sdk';
+
+export function getChainNameById(chainId: ChainId): ChainName {
+  switch (chainId) {
+    case ChainId.ETHEREUM: return ChainName.ETHEREUM;
+    case ChainId.IMTBL_ZKEVM_TESTNET: return ChainName.IMTBL_ZKEVM_TESTNET;
+    case ChainId.IMTBL_ZKEVM_MAINNET: return ChainName.IMTBL_ZKEVM_MAINNET;
+    case ChainId.IMTBL_ZKEVM_DEVNET: return ChainName.IMTBL_ZKEVM_DEVNET;
+    case ChainId.SEPOLIA: return ChainName.SEPOLIA;
+    default: return '' as ChainName;
+  }
+}
diff --git a/packages/checkout/widgets-lib/src/lib/testUtils.ts b/packages/checkout/widgets-lib/src/lib/testUtils.ts
@@ -90,7 +90,7 @@ export const cyIntercept = (overrides?: {
       201811419111: {
         tokens: [
           {
-            address: 0x0000000000000000000000000000000000001010,
+            address: '0x0000000000000000000000000000000000001010',
             name: 'IMX',
             symbol: 'IMX',
             decimals: 18,

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx
@@ -40,7 +40,7 @@ import { ErrorView } from '../../views/error/ErrorView';
 import { text } from '../../resources/text/textConfig';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { widgetTheme } from '../../lib/theme';
-import { useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
+import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { identifyUser } from '../../lib/analytics/identifyUser';
 
 export interface ConnectWidgetProps {
@@ -87,7 +87,7 @@ export function ConnectWidget(props: ConnectWidgetProps) {
   const checkout = new Checkout({ baseConfig: { environment } });
   const targetChainId = getTargetLayerChainId(checkout.config, targetLayer ?? ConnectTargetLayer.LAYER2);
 
-  const { identify } = useAnalytics();
+  const { identify, page } = useAnalytics();
 
   useEffect(() => {
     if (!web3Provider) return;
@@ -142,6 +142,10 @@ export function ConnectWidget(props: ConnectWidgetProps) {
   const handleConnectSuccess = useCallback(async () => {
     if (!provider) return;
     // WT-1698 Analytics - Identify user here
+    page({
+      userJourney: UserJourney.CONNECT,
+      screen: 'ConnectSuccess',
+    });
     await identifyUser(identify, provider);
     sendConnectSuccessEvent(eventTarget, provider, walletProviderName ?? undefined);
   }, [provider, identify]);

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkEth.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkEth.tsx
@@ -1,4 +1,6 @@
-import { useCallback, useContext, useState } from 'react';
+import {
+  useCallback, useContext, useEffect, useState,
+} from 'react';
 import { SimpleTextBody } from '../../../components/Body/SimpleTextBody';
 import { FooterButton } from '../../../components/Footer/FooterButton';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
@@ -14,6 +16,7 @@ import {
 } from '../../../context/view-context/ViewContext';
 import { isPassportProvider } from '../../../lib/providerUtils';
 import { BridgeComingSoon } from '../../bridge/views/BridgeComingSoon';
+import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 export function SwitchNetworkEth() {
   const { viewDispatch } = useContext(ViewContext);
@@ -23,9 +26,24 @@ export function SwitchNetworkEth() {
 
   const [buttonText, setButtonText] = useState(button.text);
 
+  const { page, track } = useAnalytics();
+
+  useEffect(() => {
+    page({
+      userJourney: UserJourney.CONNECT,
+      screen: 'SwitchNetworkEth',
+    });
+  }, []);
+
   const switchNetwork = useCallback(async () => {
     if (!provider || !checkout) return;
 
+    track({
+      userJourney: UserJourney.CONNECT,
+      screen: 'SwitchNetworkEth',
+      control: 'Switch',
+      controlType: 'Button',
+    });
     try {
       const switchRes = await checkout.switchNetwork({
         provider,
@@ -50,7 +68,7 @@ export function SwitchNetworkEth() {
     } catch (err: any) {
       setButtonText(button.retryText);
     }
-  }, [provider, checkout]);
+  }, [provider, checkout, track]);
 
   if (isPassportProvider(provider)) {
     return (

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx
@@ -1,4 +1,6 @@
-import { useCallback, useContext, useState } from 'react';
+import {
+  useCallback, useContext, useEffect, useState,
+} from 'react';
 import { SimpleTextBody } from '../../../components/Body/SimpleTextBody';
 import { FooterButton } from '../../../components/Footer/FooterButton';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
@@ -12,6 +14,7 @@ import {
 } from '../../../context/view-context/ViewContext';
 import { getL2ChainId } from '../../../lib';
 import { ImmutablePlanetHero } from '../../../components/Hero/ImmutablePlanetHero';
+import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 export function SwitchNetworkZkEVM() {
   const { viewDispatch } = useContext(ViewContext);
@@ -20,10 +23,25 @@ export function SwitchNetworkZkEVM() {
   const { heading, body, button } = text.views[ConnectWidgetViews.SWITCH_NETWORK].zkEVM;
 
   const [buttonText, setButtonText] = useState(button.text);
+  const { page, track } = useAnalytics();
+
+  useEffect(() => {
+    page({
+      userJourney: UserJourney.CONNECT,
+      screen: 'SwitchNetworkZkEVM',
+    });
+  }, []);
 
   const switchNetwork = useCallback(async () => {
     if (!provider || !checkout) return;
 
+    track({
+      userJourney: UserJourney.CONNECT,
+      screen: 'SwitchNetworkZkEVM',
+      control: 'Switch',
+      controlType: 'Button',
+    });
+
     try {
       const switchRes = await checkout.switchNetwork({
         provider,

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.cy.tsx
@@ -20,6 +20,7 @@ import { ConnectionStatus } from '../../context/connect-loader-context/ConnectLo
 import {
   ConnectLoaderTestComponent,
 } from '../../context/connect-loader-context/test-components/ConnectLoaderTestComponent';
+import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 
 describe('SwapWidget tests', () => {
   const mockProvider = {
@@ -122,14 +123,17 @@ describe('SwapWidget tests', () => {
         });
 
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            params={params}
-            config={config}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              params={params}
+              config={config}
+            />
+          </ConnectLoaderTestComponent>
+          ,
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('not-enough-gas-bottom-sheet').should('be.visible');
@@ -160,14 +164,17 @@ describe('SwapWidget tests', () => {
         });
 
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            params={params}
-            config={config}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              params={params}
+              config={config}
+            />
+          </ConnectLoaderTestComponent>
+          ,
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('not-enough-gas-bottom-sheet').should('be.visible');
@@ -198,14 +205,17 @@ describe('SwapWidget tests', () => {
         });
 
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            params={params}
-            config={config}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              params={params}
+              config={config}
+            />
+          </ConnectLoaderTestComponent>
+          ,
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('not-enough-gas-bottom-sheet').should('not.exist');
@@ -231,14 +241,17 @@ describe('SwapWidget tests', () => {
         });
 
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            params={params}
-            config={config}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              params={params}
+              config={config}
+            />
+          </ConnectLoaderTestComponent>
+          ,
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('not-enough-gas-add-imx-button').click();
@@ -290,14 +303,17 @@ describe('SwapWidget tests', () => {
 
     it('should show swap widget on mount', () => {
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            params={params}
-            config={config}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              params={params}
+              config={config}
+            />
+          </ConnectLoaderTestComponent>
+          ,
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible');
@@ -324,14 +340,17 @@ describe('SwapWidget tests', () => {
         });
 
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            config={config}
-            params={params}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              config={config}
+              params={params}
+            />
+          </ConnectLoaderTestComponent>
+          ,
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('fromTokenInputs-select-form-select__target').click();
@@ -360,14 +379,17 @@ describe('SwapWidget tests', () => {
         });
 
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            config={config}
-            params={params}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              config={config}
+              params={params}
+            />
+          </ConnectLoaderTestComponent>
+          ,
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('error-view').should('be.visible');
@@ -380,14 +402,16 @@ describe('SwapWidget tests', () => {
 
     it('should set fromTokens to user balances filtered by the token allow list', () => {
       mount(
-        <ConnectLoaderTestComponent
-          initialStateOverride={connectLoaderState}
-        >
-          <SwapWidget
-            config={config}
-            params={params}
-          />
-        </ConnectLoaderTestComponent>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoaderTestComponent
+            initialStateOverride={connectLoaderState}
+          >
+            <SwapWidget
+              config={config}
+              params={params}
+            />
+          </ConnectLoaderTestComponent>
+        </CustomAnalyticsProvider>,
       );
 
       cySmartGet('fromTokenInputs-select-form-select__target').click();
@@ -460,11 +484,13 @@ describe('SwapWidget tests', () => {
 
         mount(
           <BiomeCombinedProviders>
-            <ConnectLoaderTestComponent
-              initialStateOverride={connectLoaderState}
-            >
-              <SwapWidget params={params} config={config} />
-            </ConnectLoaderTestComponent>
+            <CustomAnalyticsProvider widgetConfig={config}>
+              <ConnectLoaderTestComponent
+                initialStateOverride={connectLoaderState}
+              >
+                <SwapWidget params={params} config={config} />
+              </ConnectLoaderTestComponent>
+            </CustomAnalyticsProvider>
           </BiomeCombinedProviders>,
         );
       });