WT-1934 Not enough gas drawer (#1284)

immutable · Dec 14, 2023 · da2f3f3 · da2f3f3
1 parent 1802b18
commit da2f3f3
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 66 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx
@@ -3,30 +3,47 @@ import {
   Drawer, Box, Button, FramedImage, Heading, Logo,
 } from '@biom3/react';
 import { useCallback, useState } from 'react';
+import { ETH_TOKEN_SYMBOL } from 'lib';
 import {
   containerStyles,
   contentTextStyles,
   actionButtonStyles,
   actionButtonContainerStyles,
   logoContainerStyles,
+  ethLogoStyles,
+  imxLogoStyles,
 } from './NotEnoughGasStyles';
 import { text } from '../../resources/text/textConfig';
 
 type NotEnoughGasProps = {
-  onCloseDrawer?: () => void;
   visible?: boolean;
   showHeaderBar?: boolean;
   walletAddress: string;
   showAdjustAmount: boolean;
+  tokenSymbol: string;
+  onCloseDrawer?: () => void;
+  onAddCoinsClick?: () => void;
 };
 
 export function NotEnoughGas({
-  onCloseDrawer, visible, showHeaderBar, walletAddress, showAdjustAmount,
-}: NotEnoughGasProps) {
+  onCloseDrawer,
+  visible,
+  showHeaderBar,
+  walletAddress,
+  showAdjustAmount,
+  tokenSymbol,
+  onAddCoinsClick,
+}:
+NotEnoughGasProps) {
   const { content, buttons } = text.drawers.notEnoughGas;
 
   const [isCopied, setIsCopied] = useState(false);
 
+  const ethLogo = 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--eth.svg';
+  const imxLogo = 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--imx.svg';
+  const heading = tokenSymbol === ETH_TOKEN_SYMBOL ? `${content.eth.heading}` : `${content.imx.heading}`;
+  const body = tokenSymbol === ETH_TOKEN_SYMBOL ? `${content.eth.body}` : `${content.imx.body}`;
+
   const handleCopy = useCallback(() => {
     if (walletAddress && walletAddress !== '') {
       navigator.clipboard.writeText(walletAddress);
@@ -49,45 +66,55 @@ export function NotEnoughGas({
       <Drawer.Content>
         <Box testId="not-enough-gas-bottom-sheet" sx={containerStyles}>
           <FramedImage
-            imageUrl="https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--eth.svg"
+            imageUrl={tokenSymbol === 'ETH' ? ethLogo : imxLogo}
             circularFrame
-            sx={{
-              backgroundColor: 'white',
-              height: '100px',
-              width: '64px',
-              padding: '10px',
-            }}
+            sx={tokenSymbol === ETH_TOKEN_SYMBOL ? ethLogoStyles : imxLogoStyles}
           />
           <Heading
             size="small"
             sx={contentTextStyles}
             testId="not-enough-gas-heading"
           >
-            {content.heading}
+            {heading}
           </Heading>
           <Body sx={contentTextStyles}>
-            {content.body}
+            {body}
           </Body>
           <Box sx={actionButtonContainerStyles}>
             {showAdjustAmount && (
-            <Button
-              testId="not-enough-gas-adjust-amount-button"
-              sx={actionButtonStyles}
-              variant="tertiary"
-              onClick={onCloseDrawer}
-            >
-              {buttons.adjustAmount}
-            </Button>
+              <Button
+                testId="not-enough-gas-adjust-amount-button"
+                sx={actionButtonStyles}
+                variant="tertiary"
+                onClick={onCloseDrawer}
+              >
+                {buttons.adjustAmount}
+              </Button>
             )}
-            <Button
-              testId="not-enough-gas-copy-address-button"
-              sx={actionButtonStyles}
-              variant="tertiary"
-              onClick={handleCopy}
-            >
-              {buttons.copyAddress}
-              <Button.Icon icon={isCopied ? 'Tick' : 'CopyText'} />
-            </Button>
+            {
+              tokenSymbol === ETH_TOKEN_SYMBOL
+                ? (
+                  <Button
+                    testId="not-enough-gas-copy-address-button"
+                    sx={actionButtonStyles}
+                    variant="tertiary"
+                    onClick={handleCopy}
+                  >
+                    {buttons.copyAddress}
+                    <Button.Icon icon={isCopied ? 'Tick' : 'CopyText'} />
+                  </Button>
+                )
+                : (
+                  <Button
+                    testId="not-enough-gas-add-imx-button"
+                    sx={actionButtonStyles}
+                    variant="tertiary"
+                    onClick={onAddCoinsClick}
+                  >
+                    {buttons.addMoreImx}
+                  </Button>
+                )
+            }
             <Button
               sx={actionButtonStyles}
               variant="tertiary"

diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGasStyles.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGasStyles.tsx
@@ -35,3 +35,15 @@ export const logoContainerStyles = {
   alignItems: 'center',
   paddingTop: 'base.spacing.x6',
 };
+
+export const ethLogoStyles = {
+  backgroundColor: 'white',
+  height: '100px',
+  width: '64px',
+  padding: '10px',
+};
+
+export const imxLogoStyles = {
+  height: '110px',
+  width: '64px',
+};
diff --git a/packages/checkout/widgets-lib/src/resources/text/textConfig.ts b/packages/checkout/widgets-lib/src/resources/text/textConfig.ts
@@ -494,12 +494,19 @@ export const text = {
     },
     notEnoughGas: {
       content: {
-        heading: 'Balance too low',
-        body: "You're ETH balance is too low to cover the gas fee on this move. You could transfer more ETH into your wallet using MetaMask directly.",
+        eth: {
+          heading: 'Balance too low',
+          body: 'Your ETH balance is too low to cover the gas fee on this move. You could transfer more ETH into your wallet using MetaMask directly.',
+        },
+        imx: {
+          heading: "You'll need more IMX coins",
+          body: "In order to cover the fees for the amount specified, you'll need to add more IMX coins.",
+        },
       },
       buttons: {
         adjustAmount: 'Adjust amount',
         copyAddress: 'Copy wallet address',
+        addMoreImx: 'Add IMX coins',
         cancel: 'Dismiss',
       },
     },

diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpView.tsx
@@ -5,12 +5,14 @@ import {
 import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { StandardAnalyticsControlTypes } from '@imtbl/react-analytics';
 import {
+  Checkout,
   GasEstimateBridgeToL2Result,
   GasEstimateType,
   IMTBLWidgetEvents,
 } from '@imtbl/checkout-sdk';
 import { DEFAULT_TOKEN_SYMBOLS } from 'context/crypto-fiat-context/CryptoFiatProvider';
 import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
+import { Web3Provider } from '@ethersproject/providers';
 import { FooterLogo } from '../../components/Footer/FooterLogo';
 import { HeaderNavigation } from '../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../components/SimpleLayout/SimpleLayout';
@@ -27,14 +29,15 @@ import {
   getOnRampFeeEstimation,
 } from '../../lib/feeEstimation';
 import { CryptoFiatActions, CryptoFiatContext } from '../../context/crypto-fiat-context/CryptoFiatContext';
-import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
 import { isPassportProvider } from '../../lib/providerUtils';
 import { OnRampWidgetViews } from '../../context/view-context/OnRampViewContextTypes';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { TopUpMenuItem } from './TopUpMenuItem';
 
 interface TopUpViewProps {
   widgetEvent: IMTBLWidgetEvents,
+  checkout?: Checkout,
+  provider?: Web3Provider,
   showOnrampOption: boolean,
   showSwapOption: boolean,
   showBridgeOption: boolean,
@@ -49,6 +52,8 @@ interface TopUpViewProps {
 
 export function TopUpView({
   widgetEvent,
+  checkout,
+  provider,
   showOnrampOption,
   showSwapOption,
   showBridgeOption,
@@ -60,9 +65,6 @@ export function TopUpView({
 }: TopUpViewProps) {
   const { userJourney } = analytics;
 
-  const { connectLoaderState } = useContext(ConnectLoaderContext);
-
-  const { checkout, provider } = connectLoaderState;
   const { header, topUpOptions } = text.views[SharedViews.TOP_UP_VIEW];
   const { onramp, swap, bridge } = topUpOptions;
 

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
@@ -1,6 +1,7 @@
 import {
   BridgeWidgetParams,
   Checkout,
+  IMTBLWidgetEvents,
 } from '@imtbl/checkout-sdk';
 import {
   useCallback,
@@ -24,6 +25,8 @@ import {
   TokenBridge,
 } from '@imtbl/bridge-sdk';
 import { getL1ChainId, getL2ChainId } from 'lib';
+import { UserJourney } from 'context/analytics-provider/SegmentAnalyticsProvider';
+import { TopUpView } from 'views/top-up/TopUpView';
 import {
   ViewActions,
   ViewContext,
@@ -60,7 +63,12 @@ export function BridgeWidget({
   amount,
   contractAddress,
 }: BridgeWidgetInputs) {
-  const { environment } = config;
+  const {
+    environment,
+    isOnRampEnabled,
+    isSwapEnabled,
+    isBridgeEnabled,
+  } = config;
   const errorText = text.views[SharedViews.ERROR_VIEW];
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
   const bridgeFailureText = text.views[BridgeWidgetViews.BRIDGE_FAILURE];
@@ -201,6 +209,18 @@ export function BridgeWidget({
               onCloseClick={() => sendBridgeWidgetCloseEvent(eventTarget)}
             />
           )}
+          {viewState.view.type === SharedViews.TOP_UP_VIEW && (
+            <TopUpView
+              analytics={{ userJourney: UserJourney.BRIDGE }}
+              widgetEvent={IMTBLWidgetEvents.IMTBL_BRIDGE_WIDGET_EVENT}
+              checkout={checkout}
+              provider={web3Provider}
+              showOnrampOption={isOnRampEnabled}
+              showSwapOption={isSwapEnabled}
+              showBridgeOption={isBridgeEnabled}
+              onCloseButtonClick={() => sendBridgeWidgetCloseEvent(eventTarget)}
+            />
+          )}
         </CryptoFiatProvider>
       </BridgeContext.Provider>
     </ViewContext.Provider>

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx
@@ -18,7 +18,11 @@ import { FeesBreakdown } from 'components/FeesBreakdown/FeesBreakdown';
 import { BridgeFeeActions } from '@imtbl/bridge-sdk';
 import { amountInputValidation } from '../../../lib/validations/amountInputValidations';
 import { BridgeActions, BridgeContext } from '../context/BridgeContext';
-import { ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
+import {
+  ViewActions,
+  ViewContext,
+  SharedViews,
+} from '../../../context/view-context/ViewContext';
 import { CryptoFiatActions, CryptoFiatContext } from '../../../context/crypto-fiat-context/CryptoFiatContext';
 import { text } from '../../../resources/text/textConfig';
 import { TextInputForm } from '../../../components/FormComponents/TextInputForm/TextInputForm';
@@ -41,6 +45,8 @@ import {
   DEFAULT_QUOTE_REFRESH_INTERVAL,
   NATIVE,
   getL1ChainId,
+  IMX_TOKEN_SYMBOL,
+  ETH_TOKEN_SYMBOL,
 } from '../../../lib';
 import { TransactionRejected } from '../../../components/TransactionRejected/TransactionRejected';
 import { NotEnoughGas } from '../../../components/NotEnoughGas/NotEnoughGas';
@@ -257,18 +263,17 @@ export function BridgeForm(props: BridgeFormProps) {
     }
   };
 
-  // TODO: rename uses of ETH to native token
   const insufficientFundsForGas = useMemo(() => {
     const nativeTokenBalance = tokenBalances
       .find((balance) => isNativeToken(balance.token.address));
     if (!nativeTokenBalance) {
       return true;
     }
 
-    const tokenIsEth = isNativeToken(formToken?.token.address);
-    const gasAmount = utils.parseEther(gasFee.length !== 0 ? gasFee : '0');
-    const additionalAmount = tokenIsEth && !Number.isNaN(parseFloat(formAmount))
-      ? utils.parseEther(formAmount)
+    const tokenIsNative = isNativeToken(formToken?.token.address);
+    const gasAmount = utils.parseUnits(gasFee.length !== 0 ? gasFee : '0');
+    const additionalAmount = tokenIsNative && !Number.isNaN(parseFloat(formAmount))
+      ? utils.parseUnits(formAmount)
       : BigNumber.from('0');
 
     return gasAmount.add(additionalAmount).gt(nativeTokenBalance.balance);
@@ -505,6 +510,21 @@ export function BridgeForm(props: BridgeFormProps) {
           onCloseDrawer={() => setShowNotEnoughGasDrawer(false)}
           walletAddress={walletAddress}
           showAdjustAmount={isNativeToken(formToken?.token.address)}
+          tokenSymbol={
+            from?.network === getL1ChainId(checkout?.config)
+              ? ETH_TOKEN_SYMBOL
+              : IMX_TOKEN_SYMBOL
+          }
+          onAddCoinsClick={() => {
+            viewDispatch({
+              payload: {
+                type: ViewActions.UPDATE_VIEW,
+                view: {
+                  type: SharedViews.TOP_UP_VIEW,
+                },
+              },
+            });
+          }}
         />
       </Box>
     </Box>

diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.tsx
@@ -140,14 +140,16 @@ export function OnRampWidget({
       )}
 
       {viewState.view.type === SharedViews.TOP_UP_VIEW && (
-      <TopUpView
-        analytics={{ userJourney: UserJourney.ON_RAMP }}
-        widgetEvent={IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT}
-        showOnrampOption={isOnRampEnabled}
-        showSwapOption={isSwapEnabled}
-        showBridgeOption={isBridgeEnabled}
-        onCloseButtonClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
-      />
+        <TopUpView
+          analytics={{ userJourney: UserJourney.ON_RAMP }}
+          widgetEvent={IMTBLWidgetEvents.IMTBL_ONRAMP_WIDGET_EVENT}
+          checkout={checkout}
+          provider={provider}
+          showOnrampOption={isOnRampEnabled}
+          showSwapOption={isSwapEnabled}
+          showBridgeOption={isBridgeEnabled}
+          onCloseButtonClick={() => sendOnRampWidgetCloseEvent(eventTarget)}
+        />
       )}
     </ViewContext.Provider>
   );

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.tsx b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.tsx
@@ -332,14 +332,16 @@ export function SwapWidget({
           />
           )}
           {viewState.view.type === SharedViews.TOP_UP_VIEW && (
-          <TopUpView
-            analytics={{ userJourney: UserJourney.SWAP }}
-            widgetEvent={IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT}
-            showOnrampOption={isOnRampEnabled}
-            showSwapOption={isSwapEnabled}
-            showBridgeOption={isBridgeEnabled}
-            onCloseButtonClick={() => sendSwapWidgetCloseEvent(eventTarget)}
-          />
+            <TopUpView
+              analytics={{ userJourney: UserJourney.SWAP }}
+              checkout={checkout}
+              provider={provider}
+              widgetEvent={IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT}
+              showOnrampOption={isOnRampEnabled}
+              showSwapOption={isSwapEnabled}
+              showBridgeOption={isBridgeEnabled}
+              onCloseButtonClick={() => sendSwapWidgetCloseEvent(eventTarget)}
+            />
           )}
         </CryptoFiatProvider>
       </SwapContext.Provider>