Feature/wt 1698 identify checkout users (#870)

Co-authored-by: Zach Couchman <[email protected]>
immutable · Sep 19, 2023 · 556b194 · 556b194
1 parent 7418b8b
commit 556b194
Show file tree

Hide file tree

Showing 15 changed files with 329 additions and 170 deletions.
diff --git a/packages/checkout/widgets-lib/package.json b/packages/checkout/widgets-lib/package.json
@@ -24,7 +24,7 @@
     "@imtbl/cryptofiat": "0.0.0",
     "@imtbl/dex-sdk": "0.0.0",
     "@imtbl/passport": "0.0.0",
-    "@imtbl/react-analytics": "0.0.3-alpha",
+    "@imtbl/react-analytics": "0.0.5-alpha",
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",

diff --git a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.cy.tsx b/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.cy.tsx
@@ -5,10 +5,11 @@ import { describe, it, cy } from 'local-cypress';
 import { mount } from 'cypress/react18';
 import { Environment } from '@imtbl/config';
 import { Web3Provider } from '@ethersproject/providers';
-import { cySmartGet } from '../../lib/testUtils';
+import { cyIntercept, cySmartGet } from '../../lib/testUtils';
 import { ConnectLoader, ConnectLoaderParams } from './ConnectLoader';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
 import { ProviderEvent, WidgetTheme } from '../../lib';
+import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 
 describe('ConnectLoader', () => {
   const config: StrongCheckoutWidgetsConfig = {
@@ -23,6 +24,7 @@ describe('ConnectLoader', () => {
   let providerRemoveListenerStub;
   beforeEach(() => {
     cy.viewport('ipad-2');
+    cyIntercept();
     providerOnStub = cy.stub().as('providerOnStub');
     providerRemoveListenerStub = cy.stub().as('providerRemoveListenerStub');
   });
@@ -32,20 +34,30 @@ describe('ConnectLoader', () => {
       allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
     } as ConnectLoaderParams;
     mount(
-      <ConnectLoader
-        widgetConfig={config}
-        params={params}
-        closeEvent={() => {}}
-      >
-        <div id="inner-widget">Inner Widget</div>
-      </ConnectLoader>,
+      <CustomAnalyticsProvider widgetConfig={config}>
+        <ConnectLoader
+          widgetConfig={config}
+          params={params}
+          closeEvent={() => {}}
+        >
+          <div id="inner-widget">Inner Widget</div>
+        </ConnectLoader>
+        ,
+      </CustomAnalyticsProvider>,
     );
     cySmartGet('wallet-list-metamask').should('be.visible');
     cy.get('#inner-widget').should('not.exist');
   });
 
   it('should show ready to connect view when provider but not connected', () => {
-    const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub, request: () => {} };
+    const provider = {
+      on: providerOnStub,
+      removeListener: providerRemoveListenerStub,
+      request: () => {},
+      getSigner: () => ({
+        getAddress: async () => Promise.resolve(''),
+      }),
+    };
     const params = {
       web3Provider: { provider } as any as Web3Provider,
       allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
@@ -58,13 +70,15 @@ describe('ConnectLoader', () => {
       });
 
     mount(
-      <ConnectLoader
-        widgetConfig={config}
-        params={params}
-        closeEvent={() => {}}
-      >
-        <div id="inner-widget">Inner Widget</div>
-      </ConnectLoader>,
+      <CustomAnalyticsProvider widgetConfig={config}>
+        <ConnectLoader
+          widgetConfig={config}
+          params={params}
+          closeEvent={() => {}}
+        >
+          <div id="inner-widget">Inner Widget</div>
+        </ConnectLoader>
+      </CustomAnalyticsProvider>,
     );
 
     cySmartGet('footer-button').should('have.text', 'Ready to connect');
@@ -110,23 +124,35 @@ describe('ConnectLoader', () => {
       });
 
     mount(
-      <ConnectLoader
-        widgetConfig={config}
-        params={params}
-        closeEvent={() => {}}
-      >
-        <div id="inner-widget">Inner Widget</div>
-      </ConnectLoader>,
+      <CustomAnalyticsProvider widgetConfig={config}>
+        <ConnectLoader
+          widgetConfig={config}
+          params={params}
+          closeEvent={() => {}}
+        >
+          <div id="inner-widget">Inner Widget</div>
+        </ConnectLoader>
+      </CustomAnalyticsProvider>,
     );
 
     cySmartGet('switch-network-view').should('be.visible');
     cy.get('#inner-widget').should('not.exist');
   });
 
   it('should go through connect flow and show inner widget if provider not connected', () => {
-    const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub, request: () => {} };
+    const provider = {
+      on: providerOnStub,
+      removeListener: providerRemoveListenerStub,
+      request: () => {},
+    };
     const params = {
-      web3Provider: { provider } as any as Web3Provider,
+      web3Provider: {
+        provider,
+        getSigner: () => ({
+          getAddress: async () => Promise.resolve(''),
+        }),
+        isMetaMask: true,
+      } as any as Web3Provider,
       allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
     };
 
@@ -144,24 +170,30 @@ describe('ConnectLoader', () => {
     cy.stub(Checkout.prototype, 'createProvider')
       .as('createProviderStub')
       .resolves({
-        provider: { provider } as any as Web3Provider,
+        provider: {
+          provider,
+          getSigner: () => ({
+            getAddress: async () => Promise.resolve(''),
+          }),
+          isMetaMask: true,
+        } as any as Web3Provider,
       });
 
     cy.stub(Checkout.prototype, 'connect')
       .as('connectStub')
       .resolves({
         provider: {
           provider: {
-            getSigner: () => ({
-              getAddress: async () => Promise.resolve(''),
-            }),
-            getNetwork: async () => ({
-              chainId: ChainId.IMTBL_ZKEVM_TESTNET,
-              name: ChainName.IMTBL_ZKEVM_TESTNET,
-            }),
             on: providerOnStub,
             removeListener: providerRemoveListenerStub,
           },
+          getSigner: () => ({
+            getAddress: async () => Promise.resolve(''),
+          }),
+          getNetwork: async () => ({
+            chainId: ChainId.IMTBL_ZKEVM_TESTNET,
+            name: ChainName.IMTBL_ZKEVM_TESTNET,
+          }),
         },
       });
 
@@ -173,13 +205,16 @@ describe('ConnectLoader', () => {
       });
 
     mount(
-      <ConnectLoader
-        widgetConfig={config}
-        params={params}
-        closeEvent={() => {}}
-      >
-        <div id="inner-widget">Inner Widget</div>
-      </ConnectLoader>,
+      <CustomAnalyticsProvider widgetConfig={config}>
+        <ConnectLoader
+          widgetConfig={config}
+          params={params}
+          closeEvent={() => {}}
+        >
+          <div id="inner-widget">Inner Widget</div>
+        </ConnectLoader>
+        ,
+      </CustomAnalyticsProvider>,
     );
 
     cySmartGet('footer-button').click();
@@ -189,7 +224,16 @@ describe('ConnectLoader', () => {
   it('should not show connect flow when user already connected', () => {
     const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub, request: () => {} };
     const params = {
-      web3Provider: { provider } as any as Web3Provider,
+      web3Provider: {
+        provider,
+        getSigner: () => ({
+          getAddress: async () => Promise.resolve(''),
+        }),
+        getNetwork: async () => ({
+          chainId: ChainId.IMTBL_ZKEVM_TESTNET,
+          name: ChainName.IMTBL_ZKEVM_TESTNET,
+        }),
+      } as any as Web3Provider,
       allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
     } as ConnectLoaderParams;
 
@@ -204,16 +248,16 @@ describe('ConnectLoader', () => {
       .resolves({
         provider: {
           provider: {
-            getSigner: () => ({
-              getAddress: async () => Promise.resolve(''),
-            }),
-            getNetwork: async () => ({
-              chainId: ChainId.IMTBL_ZKEVM_TESTNET,
-              name: ChainName.IMTBL_ZKEVM_TESTNET,
-            }),
             on: providerOnStub,
             removeListener: providerRemoveListenerStub,
           },
+          getSigner: () => ({
+            getAddress: async () => Promise.resolve(''),
+          }),
+          getNetwork: async () => ({
+            chainId: ChainId.IMTBL_ZKEVM_TESTNET,
+            name: ChainName.IMTBL_ZKEVM_TESTNET,
+          }),
         },
       });
 
@@ -229,13 +273,15 @@ describe('ConnectLoader', () => {
       });
 
     mount(
-      <ConnectLoader
-        widgetConfig={config}
-        params={params}
-        closeEvent={() => {}}
-      >
-        <div id="inner-widget">Inner Widget</div>
-      </ConnectLoader>,
+      <CustomAnalyticsProvider widgetConfig={config}>
+        <ConnectLoader
+          widgetConfig={config}
+          params={params}
+          closeEvent={() => {}}
+        >
+          <div id="inner-widget">Inner Widget</div>
+        </ConnectLoader>
+      </CustomAnalyticsProvider>,
     );
 
     cy.get('#inner-widget').should('be.visible');
@@ -245,7 +291,16 @@ describe('ConnectLoader', () => {
     it('should set up event listeners for accountsChanged and chainChanged', () => {
       const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub };
       const params = {
-        web3Provider: { provider } as any as Web3Provider,
+        web3Provider: {
+          provider,
+          getSigner: () => ({
+            getAddress: async () => Promise.resolve(''),
+          }),
+          getNetwork: async () => ({
+            chainId: ChainId.IMTBL_ZKEVM_TESTNET,
+            name: ChainName.IMTBL_ZKEVM_TESTNET,
+          }),
+        } as any as Web3Provider,
         allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
       } as ConnectLoaderParams;
 
@@ -260,16 +315,16 @@ describe('ConnectLoader', () => {
         .resolves({
           provider: {
             provider: {
-              getSigner: () => ({
-                getAddress: async () => Promise.resolve(''),
-              }),
-              getNetwork: async () => ({
-                chainId: ChainId.IMTBL_ZKEVM_TESTNET,
-                name: ChainName.IMTBL_ZKEVM_TESTNET,
-              }),
               on: providerOnStub,
               removeListener: providerRemoveListenerStub,
             },
+            getSigner: () => ({
+              getAddress: async () => Promise.resolve(''),
+            }),
+            getNetwork: async () => ({
+              chainId: ChainId.IMTBL_ZKEVM_TESTNET,
+              name: ChainName.IMTBL_ZKEVM_TESTNET,
+            }),
           },
         });
 
@@ -285,13 +340,15 @@ describe('ConnectLoader', () => {
         });
 
       mount(
-        <ConnectLoader
-          widgetConfig={config}
-          params={params}
-          closeEvent={() => {}}
-        >
-          <div id="inner-widget">Inner Widget</div>
-        </ConnectLoader>,
+        <CustomAnalyticsProvider widgetConfig={config}>
+          <ConnectLoader
+            widgetConfig={config}
+            params={params}
+            closeEvent={() => {}}
+          >
+            <div id="inner-widget">Inner Widget</div>
+          </ConnectLoader>
+        </CustomAnalyticsProvider>,
       );
 
       cy.get('#inner-widget').should('be.visible');