Merge branch 'main' into WT-1358

immutable · Jul 20, 2023 · f9324c6 · f9324c6
2 parents 3621da3 + f14965a
commit f9324c6
Show file tree

Hide file tree

Showing 21 changed files with 767 additions and 439 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx
@@ -14,14 +14,16 @@ import { text } from '../../resources/text/textConfig';
 type NotEnoughImxProps = {
   visible: boolean;
   showAdjustAmount: boolean;
+  hasZeroImx: boolean;
   onCloseBottomSheet?: () => void;
   onAddCoinsClick: () => void;
 };
 
 export function NotEnoughImx({
-  visible, showAdjustAmount, onCloseBottomSheet, onAddCoinsClick,
+  visible, showAdjustAmount, hasZeroImx, onCloseBottomSheet, onAddCoinsClick,
 }: NotEnoughImxProps) {
   const { content, buttons } = text.drawers.notEnoughImx;
+  const { noImx, insufficientImx } = content;
 
   const imxLogo = 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--imx.svg';
 
@@ -46,24 +48,24 @@ export function NotEnoughImx({
             sx={contentTextStyles}
             testId="not-enough-gas-heading"
           >
-            {content.heading}
+            {hasZeroImx ? noImx.heading : insufficientImx.heading}
           </Heading>
           <Body sx={contentTextStyles}>
-            {content.body}
+            {hasZeroImx ? noImx.body : insufficientImx.body}
           </Body>
           <Box sx={actionButtonContainerStyles}>
             {showAdjustAmount && (
-            <Button
-              testId="not-enough-gas-adjust-amount-button"
-              sx={actionButtonStyles}
-              variant="tertiary"
-              onClick={onCloseBottomSheet}
-            >
-              {buttons.adjustAmount}
-            </Button>
+              <Button
+                testId="not-enough-gas-adjust-amount-button"
+                sx={actionButtonStyles}
+                variant="tertiary"
+                onClick={onCloseBottomSheet}
+              >
+                {buttons.adjustAmount}
+              </Button>
             )}
             <Button
-              testId="not-enough-gas-copy-address-button"
+              testId="not-enough-gas-add-imx-button"
               sx={actionButtonStyles}
               variant="tertiary"
               onClick={onAddCoinsClick}

diff --git a/packages/checkout/widgets-lib/src/lib/constants.ts b/packages/checkout/widgets-lib/src/lib/constants.ts
@@ -6,6 +6,7 @@ export const NATIVE = 'NATIVE';
 export const DEFAULT_TOKEN_DECIMALS = 18;
 export const DEFAULT_TOKEN_FORMATTING_DECIMALS = 6;
 export const DEFAULT_GT_ONE_TOKEN_FORMATTING_DECIMALS = 2;
+export const IMX_TOKEN_SYMBOL = 'IMX';
 
 /**
  * Checkout Widget default env

diff --git a/packages/checkout/widgets-lib/src/lib/gasBalanceCheck.test.ts b/packages/checkout/widgets-lib/src/lib/gasBalanceCheck.test.ts
@@ -0,0 +1,38 @@
+import { BigNumber } from 'ethers';
+import { hasZeroBalance } from './gasBalanceCheck';
+
+describe('gasBalanceCheck', () => {
+  describe('hasZeroBalance', () => {
+    it('should return true if there are no tokens', () => {
+      expect(hasZeroBalance([], 'IMX')).toBeTruthy();
+    });
+
+    it('should return true if imx balance is 0', () => {
+      expect(hasZeroBalance([
+        {
+          token: {
+            name: 'ImmutableX',
+            symbol: 'IMX',
+            decimals: 18,
+          },
+          balance: BigNumber.from('0'),
+          formattedBalance: '0',
+        },
+      ], 'IMX')).toBeTruthy();
+    });
+
+    it('should return false if imx balance greater than 0', () => {
+      expect(hasZeroBalance([
+        {
+          token: {
+            name: 'ImmutableX',
+            symbol: 'IMX',
+            decimals: 18,
+          },
+          balance: BigNumber.from('1'),
+          formattedBalance: '1',
+        },
+      ], 'IMX')).toBeFalsy();
+    });
+  });
+});
diff --git a/packages/checkout/widgets-lib/src/lib/gasBalanceCheck.ts b/packages/checkout/widgets-lib/src/lib/gasBalanceCheck.ts
@@ -0,0 +1,13 @@
+import { GetBalanceResult } from '@imtbl/checkout-sdk';
+
+export const hasZeroBalance = (tokenBalances: GetBalanceResult[], symbol: string) => {
+  if (tokenBalances.length === 0) return true;
+  let zeroBalance = false;
+  tokenBalances
+    .forEach((t) => {
+      if (t.token.symbol === symbol && t.balance.eq(0)) {
+        zeroBalance = true;
+      }
+    });
+  return zeroBalance;
+};
diff --git a/packages/checkout/widgets-lib/src/resources/text/textConfig.ts b/packages/checkout/widgets-lib/src/resources/text/textConfig.ts
@@ -291,12 +291,18 @@ export const text = {
     },
     notEnoughImx: {
       content: {
-        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",
+        noImx: {
+          heading: "You'll need IMX coins to swap",
+          body: "Swap fees are paid in IMX coins, so you'll need to add this before you can swap",
+        },
+        insufficientImx: {
+          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',
-        addMoreImx: 'Add IMX Coins',
+        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
@@ -195,7 +195,7 @@ export function TopUpView({
     onClick: () => void,
     renderFeeFunction?: (fees: string, feesLoading: boolean) => ReactNode,
   ) => (
-    <Box sx={{ paddingY: '1px' }}>
+    <Box testId="top-up-view" sx={{ paddingY: '1px' }}>
       <MenuItem
         testId={`menu-item-${testId}`}
         size="medium"