feat: show insufficient gas error messages on swap page

lifinance · Jul 11, 2022 · 0152fd1 · 0152fd1
1 parent 3172f9a
commit 0152fd1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/packages/widget/src/components/SwapButton/SwapButton.style.ts b/packages/widget/src/components/SwapButton/SwapButton.style.ts
@@ -1,6 +1,5 @@
 import { LoadingButton } from '@mui/lab';
 import { loadingButtonClasses } from '@mui/lab/LoadingButton';
-import { buttonClasses } from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils/colors';
 
@@ -9,9 +8,6 @@ export const Button = styled(LoadingButton)(({ theme }) => ({
   borderRadius: theme.shape.borderRadiusSecondary,
   padding: theme.spacing(1.25, 2),
   fontSize: '1rem',
-  [`&.${buttonClasses.disabled}`]: {
-    color: getContrastAlphaColor(theme, '70%'),
-  },
   [`&.${loadingButtonClasses.loading}`]: {
     color: 'transparent',
   },

diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -156,8 +156,8 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
         },
       },
       MuiButton: {
-        styleOverrides:
-          mode === 'dark'
+        styleOverrides: {
+          ...(mode === 'dark'
             ? {
                 outlined: {
                   color: palette.primary.light,
@@ -175,7 +175,16 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
                   },
                 },
               }
-            : undefined,
+            : {}),
+          root: {
+            '&.Mui-disabled': {
+              color:
+                mode === 'light'
+                  ? 'rgb(0 0 0 / 70%)'
+                  : 'rgb(255 255 255 / 70%)',
+            },
+          },
+        },
       },
       MuiIconButton: {
         styleOverrides: {

diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -1,7 +1,8 @@
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useRouteExecution } from '../../hooks';
+import { InsufficientGasOrFundsMessage } from '../../components/InsufficientGasOrFundsMessage';
+import { useHasSufficientBalance, useRouteExecution } from '../../hooks';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { StepDivider } from './StepDivider';
 import { StepItem } from './StepItem';
@@ -11,6 +12,11 @@ export const SwapPage: React.FC = () => {
   const { t } = useTranslation();
   const { state }: any = useLocation();
   const navigate = useNavigate();
+  const {
+    hasGasBalanceOnStartChain,
+    hasGasOnCrossChain,
+    hasSufficientBalance,
+  } = useHasSufficientBalance();
   const { route, status, executeRoute, restartRoute, removeRoute } =
     useRouteExecution(state.routeId as string);
 
@@ -19,6 +25,9 @@ export const SwapPage: React.FC = () => {
     navigate(-1);
   };
 
+  const isDisabled =
+    !hasSufficientBalance || !hasGasBalanceOnStartChain || !hasGasOnCrossChain;
+
   return (
     <Container>
       {route?.steps.map((step, index, steps) => (
@@ -41,12 +50,14 @@ export const SwapPage: React.FC = () => {
           ) : null}
         </Fragment>
       ))}
+      <InsufficientGasOrFundsMessage mt={2} />
       {status === 'idle' ? (
         <Button
           variant="contained"
           disableElevation
           fullWidth
           onClick={executeRoute}
+          disabled={isDisabled}
         >
           {t('button.startSwap')}
         </Button>
@@ -58,6 +69,7 @@ export const SwapPage: React.FC = () => {
             disableElevation
             fullWidth
             onClick={restartRoute}
+            disabled={isDisabled}
           >
             {t('button.restartSwap')}
           </Button>
@@ -66,6 +78,7 @@ export const SwapPage: React.FC = () => {
             disableElevation
             fullWidth
             onClick={handleRemoveRoute}
+            disabled={isDisabled}
           >
             {t('button.removeSwap')}
           </Button>