WT-1358 Show need ETH for gas drawer from top up view

immutable · Jul 19, 2023 · 3621da3 · 3621da3
1 parent 49ec313
commit 3621da3
Show file tree

Hide file tree

Showing 5 changed files with 257 additions and 57 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx
@@ -33,14 +33,13 @@ describe('BalanceItem', () => {
 
   beforeEach(() => {
     cy.stub(orchestrationEvents, 'sendRequestSwapEvent').as('requestSwapEventStub');
-    cy.stub(orchestrationEvents, 'sendRequestBridgeEvent').as('requestBridgeEventStub');
     cy.stub(orchestrationEvents, 'sendRequestOnrampEvent').as('requestOnrampEventStub');
   });
 
   it('should show balance details', () => {
     mount(
       <WalletWidgetTestComponent>
-        <BalanceItem balanceInfo={testBalanceInfo} />
+        <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
       </WalletWidgetTestComponent>,
     );
 
@@ -76,7 +75,7 @@ describe('BalanceItem', () => {
 
     mount(
       <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-        <BalanceItem balanceInfo={testBalanceInfo} />
+        <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
       </WalletWidgetTestComponent>,
     );
 
@@ -106,7 +105,7 @@ describe('BalanceItem', () => {
 
     mount(
       <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-        <BalanceItem balanceInfo={testBalanceInfo} />
+        <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
       </WalletWidgetTestComponent>,
     );
 
@@ -142,7 +141,7 @@ describe('BalanceItem', () => {
 
     mount(
       <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-        <BalanceItem balanceInfo={testBalanceInfo} />
+        <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
       </WalletWidgetTestComponent>,
     );
 
@@ -177,7 +176,7 @@ describe('BalanceItem', () => {
 
     mount(
       <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-        <BalanceItem balanceInfo={testBalanceInfo} />
+        <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
       </WalletWidgetTestComponent>,
     );
     cySmartGet('token-menu').should('exist');
@@ -199,7 +198,7 @@ describe('BalanceItem', () => {
     };
     mount(
       <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-        <BalanceItem balanceInfo={testBalanceInfo} />
+        <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
       </WalletWidgetTestComponent>,
     );
 
@@ -233,7 +232,7 @@ describe('BalanceItem', () => {
     it('should emit sendRequestSwapEvent when swap menu button is clicked', () => {
       mount(
         <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-          <BalanceItem balanceInfo={testBalanceInfo} />
+          <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
         </WalletWidgetTestComponent>,
       );
 
@@ -251,7 +250,7 @@ describe('BalanceItem', () => {
     it('should emit sendRequestOnrampEvent when add menu button is clicked', () => {
       mount(
         <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-          <BalanceItem balanceInfo={testBalanceInfo} />
+          <BalanceItem balanceInfo={testBalanceInfo} bridgeToL2OnClick={() => {}} />
         </WalletWidgetTestComponent>,
       );
 
@@ -269,39 +268,5 @@ describe('BalanceItem', () => {
         },
       );
     });
-
-    it('should emit sendRequestBridgeEvent when move menu button is clicked', () => {
-      testWalletState = {
-        ...testWalletState,
-        network: {
-          chainId: ChainId.SEPOLIA,
-          name: 'Immutable zkEVM Testnet',
-          nativeCurrency: {
-            name: 'ETH',
-            symbol: 'ETH',
-            decimals: 18,
-          },
-          isSupported: true,
-        },
-      };
-      mount(
-        <WalletWidgetTestComponent initialStateOverride={testWalletState}>
-          <BalanceItem balanceInfo={testBalanceInfo} />
-        </WalletWidgetTestComponent>,
-      );
-
-      cySmartGet('token-menu').should('exist');
-      cySmartGet('token-menu').click();
-      cySmartGet('balance-item-move-option').click();
-      cySmartGet('@requestBridgeEventStub').should('have.been.called');
-      cySmartGet('@requestBridgeEventStub').should(
-        'have.been.calledWith',
-        IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT,
-        {
-          tokenAddress: '',
-          amount: '',
-        },
-      );
-    });
   });
 });
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.tsx
@@ -25,10 +25,10 @@ import { formatZeroAmount, tokenValueFormat } from '../../../../lib/utils';
 
 export interface BalanceItemProps {
   balanceInfo: BalanceInfo;
+  bridgeToL2OnClick: (address?: string) => void;
 }
 
-export function BalanceItem(props: BalanceItemProps) {
-  const { balanceInfo } = props;
+export function BalanceItem({ balanceInfo, bridgeToL2OnClick }: BalanceItemProps) {
   const fiatAmount = `≈ USD $${formatZeroAmount(balanceInfo.fiatAmount)}`;
   const { walletState } = useContext(WalletContext);
   const { supportedTopUps, network, checkout } = walletState;
@@ -104,12 +104,7 @@ export function BalanceItem(props: BalanceItemProps) {
             <MenuItem
               testId="balance-item-move-option"
               sx={ShowMenuItem(isBridgeEnabled)}
-              onClick={() => {
-                orchestrationEvents.sendRequestBridgeEvent(IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
-                  tokenAddress: balanceInfo.address ?? '',
-                  amount: '',
-                });
-              }}
+              onClick={() => bridgeToL2OnClick(balanceInfo.address)}
             >
               <MenuItem.Icon icon="Minting" />
               <MenuItem.Label>{`Move ${balanceInfo.symbol}`}</MenuItem.Label>

diff --git a/.../checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.tsx b/.../checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.tsx
@@ -7,16 +7,23 @@ import { WalletWidgetViews } from '../../../../context/view-context/WalletViewCo
 
 interface TokenBalanceListProps {
   balanceInfoItems: BalanceInfo[];
+  bridgeToL2OnClick: (address?: string) => void;
 }
-export function TokenBalanceList(props: TokenBalanceListProps) {
-  const { balanceInfoItems } = props;
+export function TokenBalanceList({
+  balanceInfoItems,
+  bridgeToL2OnClick,
+}: TokenBalanceListProps) {
   const { noTokensFound } = text.views[WalletWidgetViews.WALLET_BALANCES].tokenBalancesList;
 
   return (
     <Box sx={tokenBalanceListStyle}>
       {balanceInfoItems.length === 0 && <Body testId="no-tokens-found">{noTokensFound}</Body>}
       {balanceInfoItems.map((balance) => (
-        <BalanceItem key={balance.id} balanceInfo={balance} />
+        <BalanceItem
+          key={balance.id}
+          balanceInfo={balance}
+          bridgeToL2OnClick={bridgeToL2OnClick}
+        />
       ))}
     </Box>
   );

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
@@ -1,16 +1,18 @@
 import {
-  Checkout, WalletProviderName, TokenInfo, ChainId, ChainName,
+  Checkout, WalletProviderName, TokenInfo, ChainId, ChainName, GasEstimateType,
 } from '@imtbl/checkout-sdk';
 import { describe, it, cy } from 'local-cypress';
 import { mount } from 'cypress/react18';
 import { BiomeCombinedProviders } from '@biom3/react';
 import { Web3Provider } from '@ethersproject/providers';
 import { Environment } from '@imtbl/config';
 import { BigNumber } from 'ethers';
+import { IMTBLWidgetEvents } from '@imtbl/checkout-widgets';
 import { WalletBalances } from './WalletBalances';
 import { WalletContext, WalletState } from '../context/WalletContext';
 import { cyIntercept, cySmartGet } from '../../../lib/testUtils';
 import { WalletWidgetTestComponent } from '../test-components/WalletWidgetTestComponent';
+import { orchestrationEvents } from '../../../lib/orchestrationEvents';
 
 describe('WalletBalances', () => {
   beforeEach(() => {
@@ -100,6 +102,157 @@ describe('WalletBalances', () => {
     });
   });
 
+  describe('move coins gas check', () => {
+    it('should show not enough gas drawer when trying to bridge to L2 with 0 eth balance', () => {
+      const walletState: WalletState = {
+        checkout,
+        network: {
+          chainId: ChainId.SEPOLIA,
+          name: 'Sepolia',
+          nativeCurrency: {} as unknown as TokenInfo,
+          isSupported: true,
+        },
+        provider,
+        walletProvider: WalletProviderName.METAMASK,
+        tokenBalances: [
+          {
+            id: 'eth',
+            balance: '0.0',
+            symbol: 'ETH',
+            fiatAmount: '0',
+          },
+        ],
+        supportedTopUps: {
+          isBridgeEnabled: true,
+        },
+      };
+      mount(
+        <BiomeCombinedProviders>
+          <WalletContext.Provider
+            value={{ walletState, walletDispatch: () => {} }}
+          >
+            <WalletBalances />
+          </WalletContext.Provider>
+        </BiomeCombinedProviders>,
+      );
+      cySmartGet('token-menu').click();
+      cySmartGet('balance-item-move-option').click();
+      cySmartGet('not-enough-gas-bottom-sheet').should('be.visible');
+      cySmartGet('not-enough-gas-copy-address-button').should('be.visible');
+      cySmartGet('not-enough-gas-cancel-button').should('be.visible');
+      cySmartGet('not-enough-gas-cancel-button').click();
+      cySmartGet('not-enough-gas-bottom-sheet').should('not.exist');
+    });
+
+    it('should show not enough gas drawer when trying to bridge to L2 with eth balance less than gas', () => {
+      cy.stub(Checkout.prototype, 'gasEstimate')
+        .as('gasEstimateStub')
+        .resolves({
+          gasEstimateType: GasEstimateType.BRIDGE_TO_L2,
+          gasFee: {
+            estimatedAmount: BigNumber.from('10000000000000000'),
+          },
+        });
+
+      const walletState: WalletState = {
+        checkout,
+        network: {
+          chainId: ChainId.SEPOLIA,
+          name: 'Sepolia',
+          nativeCurrency: {} as unknown as TokenInfo,
+          isSupported: true,
+        },
+        provider,
+        walletProvider: WalletProviderName.METAMASK,
+        tokenBalances: [
+          {
+            id: 'eth',
+            balance: '0.001',
+            symbol: 'ETH',
+            fiatAmount: '0',
+          },
+        ],
+        supportedTopUps: {
+          isBridgeEnabled: true,
+        },
+      };
+      mount(
+        <BiomeCombinedProviders>
+          <WalletContext.Provider
+            value={{ walletState, walletDispatch: () => {} }}
+          >
+            <WalletBalances />
+          </WalletContext.Provider>
+        </BiomeCombinedProviders>,
+      );
+      cySmartGet('token-menu').click();
+      cySmartGet('balance-item-move-option').click();
+      cySmartGet('not-enough-gas-bottom-sheet').should('be.visible');
+      cySmartGet('not-enough-gas-copy-address-button').should('be.visible');
+      cySmartGet('not-enough-gas-cancel-button').should('be.visible');
+      cySmartGet('not-enough-gas-cancel-button').click();
+      cySmartGet('not-enough-gas-bottom-sheet').should('not.exist');
+    });
+
+    it('should not show not enough gas drawer when enough eth to cover gas and call request bridge event', () => {
+      cy.stub(orchestrationEvents, 'sendRequestBridgeEvent').as('requestBridgeEventStub');
+      cy.stub(Checkout.prototype, 'gasEstimate')
+        .as('gasEstimateStub')
+        .resolves({
+          gasEstimateType: GasEstimateType.BRIDGE_TO_L2,
+          gasFee: {
+            estimatedAmount: BigNumber.from('10000000000000000'),
+          },
+        });
+
+      const walletState: WalletState = {
+        checkout,
+        network: {
+          chainId: ChainId.SEPOLIA,
+          name: 'Sepolia',
+          nativeCurrency: {} as unknown as TokenInfo,
+          isSupported: true,
+        },
+        provider,
+        walletProvider: WalletProviderName.METAMASK,
+        tokenBalances: [
+          {
+            id: 'eth',
+            balance: '100',
+            symbol: 'ETH',
+            fiatAmount: '0',
+            address: 'NATIVE',
+          },
+        ],
+        supportedTopUps: {
+          isBridgeEnabled: true,
+        },
+      };
+      mount(
+        <BiomeCombinedProviders>
+          <WalletContext.Provider
+            value={{ walletState, walletDispatch: () => {} }}
+          >
+            <WalletBalances />
+          </WalletContext.Provider>
+        </BiomeCombinedProviders>,
+      );
+      cySmartGet('token-menu').click();
+      cySmartGet('balance-item-move-option').click();
+      cySmartGet('not-enough-gas-bottom-sheet').should('not.exist');
+
+      cySmartGet('@requestBridgeEventStub').should('have.been.called');
+      cySmartGet('@requestBridgeEventStub').should(
+        'have.been.calledWith',
+        IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT,
+        {
+          tokenAddress: 'NATIVE',
+          amount: '',
+        },
+      );
+    });
+  });
+
   describe('add coins button', () => {
     it('should show add coins button on zkEVM when topUps are supported', () => {
       const topUpFeatureTestCases = [