Skip to content

Commit 556b194

Browse files
ZacharyCouchmanZacharyCouchman
authored
Feature/wt 1698 identify checkout users (#870)
Co-authored-by: Zach Couchman <[email protected]>
1 parent 7418b8b commit 556b194

File tree

15 files changed

+329
-170
lines changed

15 files changed

+329
-170
lines changed

‎packages/checkout/widgets-lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"@imtbl/cryptofiat": "0.0.0",
2525
"@imtbl/dex-sdk": "0.0.0",
2626
"@imtbl/passport": "0.0.0",
27-
"@imtbl/react-analytics": "0.0.3-alpha",
27+
"@imtbl/react-analytics": "0.0.5-alpha",
2828
"assert": "^2.0.0",
2929
"buffer": "^6.0.3",
3030
"crypto-browserify": "^3.12.0",

‎packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.cy.tsx‎

Lines changed: 127 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { describe, it, cy } from 'local-cypress';
55
import { mount } from 'cypress/react18';
66
import { Environment } from '@imtbl/config';
77
import { Web3Provider } from '@ethersproject/providers';
8-
import { cySmartGet } from '../../lib/testUtils';
8+
import { cyIntercept, cySmartGet } from '../../lib/testUtils';
99
import { ConnectLoader, ConnectLoaderParams } from './ConnectLoader';
1010
import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
1111
import { ProviderEvent, WidgetTheme } from '../../lib';
12+
import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
1213

1314
describe('ConnectLoader', () => {
1415
const config: StrongCheckoutWidgetsConfig = {
@@ -23,6 +24,7 @@ describe('ConnectLoader', () => {
2324
let providerRemoveListenerStub;
2425
beforeEach(() => {
2526
cy.viewport('ipad-2');
27+
cyIntercept();
2628
providerOnStub = cy.stub().as('providerOnStub');
2729
providerRemoveListenerStub = cy.stub().as('providerRemoveListenerStub');
2830
});
@@ -32,20 +34,30 @@ describe('ConnectLoader', () => {
3234
allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
3335
} as ConnectLoaderParams;
3436
mount(
35-
<ConnectLoader
36-
widgetConfig={config}
37-
params={params}
38-
closeEvent={() => {}}
39-
>
40-
<div id="inner-widget">Inner Widget</div>
41-
</ConnectLoader>,
37+
<CustomAnalyticsProvider widgetConfig={config}>
38+
<ConnectLoader
39+
widgetConfig={config}
40+
params={params}
41+
closeEvent={() => {}}
42+
>
43+
<div id="inner-widget">Inner Widget</div>
44+
</ConnectLoader>
45+
,
46+
</CustomAnalyticsProvider>,
4247
);
4348
cySmartGet('wallet-list-metamask').should('be.visible');
4449
cy.get('#inner-widget').should('not.exist');
4550
});
4651

4752
it('should show ready to connect view when provider but not connected', () => {
48-
const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub, request: () => {} };
53+
const provider = {
54+
on: providerOnStub,
55+
removeListener: providerRemoveListenerStub,
56+
request: () => {},
57+
getSigner: () => ({
58+
getAddress: async () => Promise.resolve(''),
59+
}),
60+
};
4961
const params = {
5062
web3Provider: { provider } as any as Web3Provider,
5163
allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
@@ -58,13 +70,15 @@ describe('ConnectLoader', () => {
5870
});
5971

6072
mount(
61-
<ConnectLoader
62-
widgetConfig={config}
63-
params={params}
64-
closeEvent={() => {}}
65-
>
66-
<div id="inner-widget">Inner Widget</div>
67-
</ConnectLoader>,
73+
<CustomAnalyticsProvider widgetConfig={config}>
74+
<ConnectLoader
75+
widgetConfig={config}
76+
params={params}
77+
closeEvent={() => {}}
78+
>
79+
<div id="inner-widget">Inner Widget</div>
80+
</ConnectLoader>
81+
</CustomAnalyticsProvider>,
6882
);
6983

7084
cySmartGet('footer-button').should('have.text', 'Ready to connect');
@@ -110,23 +124,35 @@ describe('ConnectLoader', () => {
110124
});
111125

112126
mount(
113-
<ConnectLoader
114-
widgetConfig={config}
115-
params={params}
116-
closeEvent={() => {}}
117-
>
118-
<div id="inner-widget">Inner Widget</div>
119-
</ConnectLoader>,
127+
<CustomAnalyticsProvider widgetConfig={config}>
128+
<ConnectLoader
129+
widgetConfig={config}
130+
params={params}
131+
closeEvent={() => {}}
132+
>
133+
<div id="inner-widget">Inner Widget</div>
134+
</ConnectLoader>
135+
</CustomAnalyticsProvider>,
120136
);
121137

122138
cySmartGet('switch-network-view').should('be.visible');
123139
cy.get('#inner-widget').should('not.exist');
124140
});
125141

126142
it('should go through connect flow and show inner widget if provider not connected', () => {
127-
const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub, request: () => {} };
143+
const provider = {
144+
on: providerOnStub,
145+
removeListener: providerRemoveListenerStub,
146+
request: () => {},
147+
};
128148
const params = {
129-
web3Provider: { provider } as any as Web3Provider,
149+
web3Provider: {
150+
provider,
151+
getSigner: () => ({
152+
getAddress: async () => Promise.resolve(''),
153+
}),
154+
isMetaMask: true,
155+
} as any as Web3Provider,
130156
allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
131157
};
132158

@@ -144,24 +170,30 @@ describe('ConnectLoader', () => {
144170
cy.stub(Checkout.prototype, 'createProvider')
145171
.as('createProviderStub')
146172
.resolves({
147-
provider: { provider } as any as Web3Provider,
173+
provider: {
174+
provider,
175+
getSigner: () => ({
176+
getAddress: async () => Promise.resolve(''),
177+
}),
178+
isMetaMask: true,
179+
} as any as Web3Provider,
148180
});
149181

150182
cy.stub(Checkout.prototype, 'connect')
151183
.as('connectStub')
152184
.resolves({
153185
provider: {
154186
provider: {
155-
getSigner: () => ({
156-
getAddress: async () => Promise.resolve(''),
157-
}),
158-
getNetwork: async () => ({
159-
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
160-
name: ChainName.IMTBL_ZKEVM_TESTNET,
161-
}),
162187
on: providerOnStub,
163188
removeListener: providerRemoveListenerStub,
164189
},
190+
getSigner: () => ({
191+
getAddress: async () => Promise.resolve(''),
192+
}),
193+
getNetwork: async () => ({
194+
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
195+
name: ChainName.IMTBL_ZKEVM_TESTNET,
196+
}),
165197
},
166198
});
167199

@@ -173,13 +205,16 @@ describe('ConnectLoader', () => {
173205
});
174206

175207
mount(
176-
<ConnectLoader
177-
widgetConfig={config}
178-
params={params}
179-
closeEvent={() => {}}
180-
>
181-
<div id="inner-widget">Inner Widget</div>
182-
</ConnectLoader>,
208+
<CustomAnalyticsProvider widgetConfig={config}>
209+
<ConnectLoader
210+
widgetConfig={config}
211+
params={params}
212+
closeEvent={() => {}}
213+
>
214+
<div id="inner-widget">Inner Widget</div>
215+
</ConnectLoader>
216+
,
217+
</CustomAnalyticsProvider>,
183218
);
184219

185220
cySmartGet('footer-button').click();
@@ -189,7 +224,16 @@ describe('ConnectLoader', () => {
189224
it('should not show connect flow when user already connected', () => {
190225
const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub, request: () => {} };
191226
const params = {
192-
web3Provider: { provider } as any as Web3Provider,
227+
web3Provider: {
228+
provider,
229+
getSigner: () => ({
230+
getAddress: async () => Promise.resolve(''),
231+
}),
232+
getNetwork: async () => ({
233+
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
234+
name: ChainName.IMTBL_ZKEVM_TESTNET,
235+
}),
236+
} as any as Web3Provider,
193237
allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
194238
} as ConnectLoaderParams;
195239

@@ -204,16 +248,16 @@ describe('ConnectLoader', () => {
204248
.resolves({
205249
provider: {
206250
provider: {
207-
getSigner: () => ({
208-
getAddress: async () => Promise.resolve(''),
209-
}),
210-
getNetwork: async () => ({
211-
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
212-
name: ChainName.IMTBL_ZKEVM_TESTNET,
213-
}),
214251
on: providerOnStub,
215252
removeListener: providerRemoveListenerStub,
216253
},
254+
getSigner: () => ({
255+
getAddress: async () => Promise.resolve(''),
256+
}),
257+
getNetwork: async () => ({
258+
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
259+
name: ChainName.IMTBL_ZKEVM_TESTNET,
260+
}),
217261
},
218262
});
219263

@@ -229,13 +273,15 @@ describe('ConnectLoader', () => {
229273
});
230274

231275
mount(
232-
<ConnectLoader
233-
widgetConfig={config}
234-
params={params}
235-
closeEvent={() => {}}
236-
>
237-
<div id="inner-widget">Inner Widget</div>
238-
</ConnectLoader>,
276+
<CustomAnalyticsProvider widgetConfig={config}>
277+
<ConnectLoader
278+
widgetConfig={config}
279+
params={params}
280+
closeEvent={() => {}}
281+
>
282+
<div id="inner-widget">Inner Widget</div>
283+
</ConnectLoader>
284+
</CustomAnalyticsProvider>,
239285
);
240286

241287
cy.get('#inner-widget').should('be.visible');
@@ -245,7 +291,16 @@ describe('ConnectLoader', () => {
245291
it('should set up event listeners for accountsChanged and chainChanged', () => {
246292
const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub };
247293
const params = {
248-
web3Provider: { provider } as any as Web3Provider,
294+
web3Provider: {
295+
provider,
296+
getSigner: () => ({
297+
getAddress: async () => Promise.resolve(''),
298+
}),
299+
getNetwork: async () => ({
300+
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
301+
name: ChainName.IMTBL_ZKEVM_TESTNET,
302+
}),
303+
} as any as Web3Provider,
249304
allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET],
250305
} as ConnectLoaderParams;
251306

@@ -260,16 +315,16 @@ describe('ConnectLoader', () => {
260315
.resolves({
261316
provider: {
262317
provider: {
263-
getSigner: () => ({
264-
getAddress: async () => Promise.resolve(''),
265-
}),
266-
getNetwork: async () => ({
267-
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
268-
name: ChainName.IMTBL_ZKEVM_TESTNET,
269-
}),
270318
on: providerOnStub,
271319
removeListener: providerRemoveListenerStub,
272320
},
321+
getSigner: () => ({
322+
getAddress: async () => Promise.resolve(''),
323+
}),
324+
getNetwork: async () => ({
325+
chainId: ChainId.IMTBL_ZKEVM_TESTNET,
326+
name: ChainName.IMTBL_ZKEVM_TESTNET,
327+
}),
273328
},
274329
});
275330

@@ -285,13 +340,15 @@ describe('ConnectLoader', () => {
285340
});
286341

287342
mount(
288-
<ConnectLoader
289-
widgetConfig={config}
290-
params={params}
291-
closeEvent={() => {}}
292-
>
293-
<div id="inner-widget">Inner Widget</div>
294-
</ConnectLoader>,
343+
<CustomAnalyticsProvider widgetConfig={config}>
344+
<ConnectLoader
345+
widgetConfig={config}
346+
params={params}
347+
closeEvent={() => {}}
348+
>
349+
<div id="inner-widget">Inner Widget</div>
350+
</ConnectLoader>
351+
</CustomAnalyticsProvider>,
295352
);
296353

297354
cy.get('#inner-widget').should('be.visible');

0 commit comments

Comments
 (0)