Skip to content

Commit 5fbb066

Browse files
sharonsheahsharonsheah
authored
Feat: wt 1772 disabled swap in top up view (#982)
1 parent 941f5e8 commit 5fbb066

File tree

6 files changed

+117
-38
lines changed

6 files changed

+117
-38
lines changed

‎packages/checkout/widgets-lib/src/resources/text/textConfig.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,16 +305,19 @@ export const text = {
305305
heading: 'Buy with card',
306306
caption: 'Google pay & Apple pay available. Minimum $5.',
307307
subcaption: 'Fees',
308+
disabledCaption: '',
308309
},
309310
swap: {
310311
heading: 'Swap my coins',
311312
caption: 'Using the coins I have on the same network',
312313
subcaption: 'Fees',
314+
disabledCaption: 'Not available in your region',
313315
},
314316
bridge: {
315317
heading: 'Move my coins',
316318
caption: 'From the coins I have on a different network',
317319
subcaption: 'Fees ',
320+
disabledCaption: '',
318321
},
319322
},
320323
},

‎packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,23 @@ export interface TopUpMenuItemProps {
77
heading: string;
88
caption: string,
99
subcaption: string,
10+
disabledCaption: string,
1011
onClick: () => void,
1112
renderFeeFunction: (fees: string, feesLoading: boolean) => ReactNode,
13+
isDisabled :boolean
1214
}
1315

1416
export function TopUpMenuItem({
15-
testId, icon, heading, caption, subcaption, onClick, renderFeeFunction,
17+
testId, icon, heading, caption, subcaption, disabledCaption, onClick, renderFeeFunction, isDisabled,
1618
}: TopUpMenuItemProps) {
1719
return (
1820
<Box testId="top-up-view" sx={{ paddingY: '1px' }}>
1921
<MenuItem
2022
testId={`menu-item-${testId}`}
2123
size="medium"
2224
emphasized
23-
onClick={onClick}
25+
onClick={!isDisabled ? onClick : undefined}
26+
sx={isDisabled ? { opacity: '0.5', cursor: 'not-allowed' } : {}}
2427
>
2528
<MenuItem.Icon
2629
icon={icon}
@@ -30,11 +33,11 @@ export function TopUpMenuItem({
3033
</MenuItem.Label>
3134
<MenuItem.IntentIcon />
3235
<MenuItem.Caption testId={`menu-item-caption-${testId}`}>
33-
{caption}
36+
{isDisabled ? disabledCaption : caption}
3437
<br />
35-
{subcaption}
38+
{isDisabled ? '' : subcaption}
3639
{' '}
37-
{renderFeeFunction('-.--', false)}
40+
{isDisabled ? '' : renderFeeFunction('-.--', false)}
3841
</MenuItem.Caption>
3942
</MenuItem>
4043
</Box>

‎packages/checkout/widgets-lib/src/views/top-up/TopUpView.cy.tsx‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { TopUpView } from './TopUpView';
1212
import { cyIntercept, cySmartGet } from '../../lib/testUtils';
1313
import { orchestrationEvents } from '../../lib/orchestrationEvents';
1414
import { WalletWidgetTestComponent } from '../../widgets/wallet/test-components/WalletWidgetTestComponent';
15-
import { WalletState } from '../../widgets/wallet/context/WalletContext';
15+
import { TopUpFeature, WalletState } from '../../widgets/wallet/context/WalletContext';
1616
import { ConnectionStatus } from '../../context/connect-loader-context/ConnectLoaderContext';
1717
import {
1818
ConnectLoaderTestComponent,
@@ -200,6 +200,13 @@ describe('Top Up View', () => {
200200
});
201201

202202
it('should fire swap event with swap data on event when swap clicked', () => {
203+
const supportedTopUps: TopUpFeature = {
204+
isOnRampEnabled: true,
205+
isSwapEnabled: true,
206+
isBridgeEnabled: true,
207+
isSwapAvailable: true,
208+
};
209+
203210
cy.stub(orchestrationEvents, 'sendRequestSwapEvent').as('sendRequestSwapEventStub');
204211

205212
mount(
@@ -215,6 +222,7 @@ describe('Top Up View', () => {
215222
tokenAddress="0x123"
216223
amount="10"
217224
onCloseButtonClick={() => {}}
225+
supportedTopUps={supportedTopUps}
218226
/>
219227
</ConnectLoaderTestComponent>
220228
</BiomeCombinedProviders>,
@@ -266,14 +274,57 @@ describe('Top Up View', () => {
266274
});
267275
});
268276

277+
describe('TopUpView render with disabled options', () => {
278+
describe('when swap is unavailable', () => {
279+
it('should not fire swap event', () => {
280+
const supportedTopUps: TopUpFeature = {
281+
isOnRampEnabled: true,
282+
isSwapEnabled: true,
283+
isBridgeEnabled: true,
284+
isSwapAvailable: false,
285+
};
286+
287+
cy.stub(orchestrationEvents, 'sendRequestSwapEvent').as('sendRequestSwapEventStub');
288+
289+
mount(
290+
<BiomeCombinedProviders>
291+
<ConnectLoaderTestComponent
292+
initialStateOverride={connectLoaderState}
293+
>
294+
<TopUpView
295+
showOnrampOption
296+
showSwapOption
297+
showBridgeOption
298+
widgetEvent={IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT}
299+
tokenAddress="0x123"
300+
amount="10"
301+
onCloseButtonClick={() => {}}
302+
supportedTopUps={supportedTopUps}
303+
/>
304+
</ConnectLoaderTestComponent>
305+
</BiomeCombinedProviders>,
306+
);
307+
308+
cySmartGet('menu-item-caption-swap').should('have.text', 'Not available in your region ');
309+
cySmartGet('menu-item-swap').click();
310+
cy.get('@sendRequestSwapEventStub').should('not.have.been.called');
311+
});
312+
});
313+
});
314+
269315
describe('Fee display', () => {
270316
const cryptoConversions = new Map<string, number>([['eth', 2000], ['imx', 1.5], ['usdc', 1]]);
271317

272318
const baseWalletState: WalletState = {
273319
network: null,
274320
walletProvider: WalletProviderName.METAMASK,
275321
tokenBalances: [],
276-
supportedTopUps: null,
322+
supportedTopUps: {
323+
isOnRampEnabled: true,
324+
isSwapEnabled: true,
325+
isBridgeEnabled: true,
326+
isSwapAvailable: true,
327+
},
277328
};
278329

279330
beforeEach(() => {
@@ -337,6 +388,7 @@ describe('Top Up View', () => {
337388
showBridgeOption
338389
widgetEvent={IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT}
339390
onCloseButtonClick={() => {}}
391+
supportedTopUps={baseWalletState.supportedTopUps}
340392
/>
341393
</WalletWidgetTestComponent>
342394
</ConnectLoaderTestComponent>,
@@ -376,6 +428,7 @@ describe('Top Up View', () => {
376428
showBridgeOption
377429
widgetEvent={IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT}
378430
onCloseButtonClick={() => {}}
431+
supportedTopUps={baseWalletState.supportedTopUps}
379432
/>
380433
</WalletWidgetTestComponent>
381434
</ConnectLoaderTestComponent>,
@@ -407,6 +460,7 @@ describe('Top Up View', () => {
407460
showBridgeOption
408461
widgetEvent={IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT}
409462
onCloseButtonClick={() => {}}
463+
supportedTopUps={baseWalletState.supportedTopUps}
410464
/>
411465

412466
</CryptoFiatProvider>

‎packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { isPassportProvider } from '../../lib/providerUtils';
2929
import { OnRampWidgetViews } from '../../context/view-context/OnRampViewContextTypes';
3030
import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
3131
import { TopUpMenuItem } from './TopUpMenuItem';
32+
import { TopUpFeature } from '../../widgets/wallet/context/WalletContext';
3233

3334
interface TopUpViewProps {
3435
widgetEvent: IMTBLWidgetEvents,
@@ -39,6 +40,7 @@ interface TopUpViewProps {
3940
amount?: string,
4041
onCloseButtonClick: () => void,
4142
onBackButtonClick?: () => void,
43+
supportedTopUps?: TopUpFeature | null,
4244
}
4345

4446
const DEFAULT_FEE_REFRESH_INTERVAL = 30000;
@@ -52,6 +54,7 @@ export function TopUpView({
5254
amount,
5355
onCloseButtonClick,
5456
onBackButtonClick,
57+
supportedTopUps,
5558
}: TopUpViewProps) {
5659
const { connectLoaderState } = useContext(ConnectLoaderContext);
5760
const { checkout, provider } = connectLoaderState;
@@ -222,6 +225,35 @@ export function TopUpView({
222225
return ` ≈ ${fees}%`;
223226
};
224227

228+
const topUpFeatures = [
229+
{
230+
testId: 'onramp',
231+
icon: 'Wallet',
232+
textConfig: onramp,
233+
onClickEvent: onClickOnRamp,
234+
fee: () => renderFeePercentage(onRampFeesPercentage, loadingOnRampFees),
235+
isAvailable: true,
236+
isEnabled: showOnrampOption,
237+
}, {
238+
testId: 'swap',
239+
icon: 'Coins',
240+
textConfig: swap,
241+
onClickEvent: onClickSwap,
242+
fee: () => renderFees(swapFeesInFiat, loadingSwapFees),
243+
isAvailable: supportedTopUps?.isSwapAvailable,
244+
isEnabled: showSwapOption,
245+
},
246+
{
247+
testId: 'bridge',
248+
icon: 'Minting',
249+
textConfig: bridge,
250+
onClickEvent: onClickBridge,
251+
fee: () => renderFees(bridgeFeesInFiat, loadingBridgeFees),
252+
isAvailable: true,
253+
isEnabled: showBridgeOption && !isPassport,
254+
},
255+
];
256+
225257
return (
226258
<SimpleLayout
227259
header={(
@@ -238,39 +270,21 @@ export function TopUpView({
238270
<Box sx={{ paddingX: 'base.spacing.x4', paddingY: 'base.spacing.x4' }}>
239271
<Heading size="small">{header.title}</Heading>
240272
<Box sx={{ paddingY: 'base.spacing.x4' }}>
241-
{showOnrampOption && (
242-
<TopUpMenuItem
243-
testId="onramp"
244-
icon="Wallet"
245-
heading={onramp.heading}
246-
caption={onramp.caption}
247-
subcaption={onramp.subcaption}
248-
onClick={onClickOnRamp}
249-
renderFeeFunction={() => renderFeePercentage(onRampFeesPercentage, loadingOnRampFees)}
250-
/>
251-
)}
252-
{showSwapOption && (
253-
<TopUpMenuItem
254-
testId="swap"
255-
icon="Coins"
256-
heading={swap.heading}
257-
caption={swap.caption}
258-
subcaption={swap.subcaption}
259-
onClick={onClickSwap}
260-
renderFeeFunction={() => renderFees(swapFeesInFiat, loadingSwapFees)}
261-
/>
262-
)}
263-
{showBridgeOption && !isPassport && (
273+
{topUpFeatures
274+
.sort((a, b) => Number(b.isAvailable) - Number(a.isAvailable))
275+
.map((element) => element.isEnabled && (
264276
<TopUpMenuItem
265-
testId="bridge"
266-
icon="Minting"
267-
heading={bridge.heading}
268-
caption={bridge.caption}
269-
subcaption={bridge.subcaption}
270-
onClick={onClickBridge}
271-
renderFeeFunction={() => renderFees(bridgeFeesInFiat, loadingBridgeFees)}
277+
testId={element.testId}
278+
icon={element.icon as 'Wallet' | 'Coins' | 'Minting'}
279+
heading={element.textConfig.heading}
280+
caption={element.textConfig.caption}
281+
subcaption={element.textConfig.subcaption}
282+
disabledCaption={element.textConfig.disabledCaption}
283+
onClick={element.onClickEvent}
284+
renderFeeFunction={element.fee}
285+
isDisabled={!element.isAvailable}
272286
/>
273-
)}
287+
))}
274288
</Box>
275289
</Box>
276290
</SimpleLayout>

‎packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.cy.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,10 @@ describe('WalletWidget tests', () => {
123123
symbol: 'eth',
124124
},
125125
});
126+
const isSwapAvailableStub = cy
127+
.stub(Checkout.prototype, 'isSwapAvailable')
128+
.as('isSwapAvailableStub');
129+
isSwapAvailableStub.resolves(true);
126130

127131
mount(
128132
<ConnectLoaderTestComponent

‎packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ export function WalletWidget(props: WalletWidgetProps) {
185185
showSwapOption={isSwapEnabled}
186186
showBridgeOption={isBridgeEnabled}
187187
onCloseButtonClick={() => sendWalletWidgetCloseEvent(eventTarget)}
188+
supportedTopUps={walletState.supportedTopUps}
188189
/>
189190
)}
190191
</WalletContext.Provider>

0 commit comments

Comments
 (0)