fix: gas message is not shown in some cases

lifinance · Jul 27, 2022 · 52fcfaf · 52fcfaf
1 parent d5840e8
commit 52fcfaf
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx b/packages/widget/src/components/GasSufficiencyMessage/GasSufficiencyMessage.tsx
@@ -14,18 +14,10 @@ export const GasSufficiencyMessage: React.FC<{ route?: Route } & BoxProps> = ({
   const { t } = useTranslation();
   const { insufficientFunds, insufficientGas } = useGasSufficiency(route);
 
-  if (!insufficientFunds || !insufficientGas.length) {
+  if (!insufficientFunds && !insufficientGas.length) {
     return null;
   }
 
-  let title;
-  let message;
-  if (insufficientFunds) {
-    message = t(`swap.warning.message.insufficientFunds`);
-  } else if (insufficientGas.length) {
-    title = t(`swap.warning.title.insufficientGas`);
-    message = t(`swap.warning.message.insufficientGas`);
-  }
   return (
     <MessageCard {...props}>
       <WarningIcon
@@ -35,16 +27,27 @@ export const GasSufficiencyMessage: React.FC<{ route?: Route } & BoxProps> = ({
         }}
       />
       <Box>
-        {title ? <CardTitle>{title}</CardTitle> : null}
-        <Typography
-          variant="body2"
-          px={2}
-          pb={!insufficientFunds && insufficientGas.length ? 0 : 2}
-          pt={title ? 1 : 2}
-        >
-          {message}
-        </Typography>
-        {!insufficientFunds && insufficientGas.length
+        {insufficientGas.length ? (
+          <CardTitle>{t(`swap.warning.title.insufficientGas`)}</CardTitle>
+        ) : null}
+        {insufficientFunds ? (
+          <Typography
+            variant="body2"
+            px={2}
+            pb={insufficientGas.length ? 0 : 2}
+            pt={insufficientGas.length ? 1 : 2}
+          >
+            {insufficientFunds
+              ? t(`swap.warning.message.insufficientFunds`)
+              : null}
+          </Typography>
+        ) : null}
+        {insufficientGas.length ? (
+          <Typography variant="body2" px={2} pt={1}>
+            {t(`swap.warning.message.insufficientGas`)}
+          </Typography>
+        ) : null}
+        {insufficientGas.length
           ? insufficientGas.map((item, index) => (
               <Typography
                 key={index}

diff --git a/packages/widget/src/hooks/useGasSufficiency.ts b/packages/widget/src/hooks/useGasSufficiency.ts
@@ -123,7 +123,7 @@ export const useGasSufficiency = (route?: Route) => {
     const balance = Big(
       fromChainTokenBalances?.find((t) => t.address === fromToken)?.amount ?? 0,
     );
-    return Big(fromAmount).gte(balance);
+    return Big(fromAmount).gt(balance);
   }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
 
   return {

diff --git a/packages/widget/src/pages/MainPage/SwapRoutes.tsx b/packages/widget/src/pages/MainPage/SwapRoutes.tsx
@@ -106,9 +106,10 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
           </Box>
         </Box>
       </Card>
-      {!isFetching ? (
-        <GasSufficiencyMessage route={currentRoute} {...props} />
-      ) : null}
+      <GasSufficiencyMessage
+        route={!isFetching ? currentRoute : undefined}
+        {...props}
+      />
     </>
   );
 };