[NO CHANGELOG] [Add Tokens Widget] Check for sufficient gas (#2456)

immutable · Dec 10, 2024 · e172456 · e172456
1 parent 1cc306c
commit e172456
Show file tree

Hide file tree

Showing 15 changed files with 326 additions and 32 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/Hero/NoGasHero.tsx b/packages/checkout/widgets-lib/src/components/Hero/NoGasHero.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable max-len */
+import { Box } from '@biom3/react';
+
+export function NoGasHero() {
+  return (
+    <Box
+      testId="no-gas-hero"
+    >
+      <svg width="431" height="243" viewBox="0 0 431 243" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M143.152 175.023C143.116 180.739 146.858 186.445 154.383 190.79C161.909 195.135 171.795 197.295 181.697 197.274C191.598 197.254 201.51 195.053 209.093 190.677C216.675 186.301 220.484 180.574 220.52 174.863V185.172C220.484 190.888 216.67 196.609 209.093 200.986C201.51 205.362 191.598 207.563 181.697 207.583C171.795 207.604 161.909 205.444 154.383 201.099C146.858 196.754 143.116 191.048 143.152 185.332V175.023Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M181.697 197.275C171.795 197.295 161.909 195.135 154.383 190.79C146.858 186.445 143.116 180.739 143.152 175.023V185.332C143.116 191.048 146.858 196.754 154.383 201.099C161.909 205.444 171.795 207.604 181.697 207.583V197.275Z" fill="#0D0D0D" />
+        <path d="M181.964 197.301C203.329 197.167 220.585 187.059 220.508 174.724C220.43 162.389 203.048 152.499 181.683 152.633C160.319 152.767 143.063 162.875 143.14 175.21C143.218 187.545 160.6 197.435 181.964 197.301Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M176.573 168.751L176.382 167.359L175.717 162.535L179.202 160.499L180.46 169.725C180.46 169.725 178.661 169.648 178.058 169.627C177.253 169.591 176.614 169.215 176.573 168.756V168.751ZM161.496 170.849C161.496 170.849 175.094 171.472 179.63 171.483C180.346 171.483 180.754 171.787 180.81 172.194C181.027 173.689 181.016 173.72 181.016 173.72L158.033 172.874L161.496 170.849ZM188.8 180.622L188.99 182.013L189.655 186.838L186.171 188.874L184.913 179.647C184.913 179.647 186.712 179.725 187.315 179.745C188.119 179.781 188.758 180.158 188.8 180.616V180.622ZM181.357 176.215C181.851 179.957 183.32 190.539 183.32 190.539L179.578 192.729L177.692 178.395C177.63 177.936 176.991 177.57 176.213 177.55L151.559 176.653L155.161 174.544L179.991 175.467C180.676 175.519 181.3 175.818 181.362 176.209L181.357 176.215ZM203.825 178.555L186.923 177.905L186.042 177.848C185.248 177.818 184.599 177.436 184.558 176.977L182.073 158.818L185.666 156.715L187.836 174.797C187.877 175.256 188.526 175.637 189.32 175.668L207.577 176.359L203.825 178.555ZM210.449 174.684C210.449 174.684 196.799 174.153 192.243 173.977C191.722 173.957 191.253 173.787 190.995 173.539C190.872 173.39 190.794 173.189 190.779 173.029L190.671 171.849L213.856 172.694L210.449 174.689V174.684Z" fill="#0D0D0D" />
+        <path d="M143.152 159.559C143.116 165.276 146.858 170.982 154.383 175.327C161.909 179.672 171.795 181.832 181.697 181.811C191.598 181.791 201.51 179.59 209.093 175.214C216.675 170.837 220.484 165.111 220.52 159.4V169.709C220.484 175.425 216.67 181.146 209.093 185.523C201.51 189.899 191.598 192.1 181.697 192.12C171.795 192.141 161.909 189.981 154.383 185.636C146.858 181.291 143.116 175.585 143.152 169.868V159.559Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M181.697 181.811C171.795 181.832 161.909 179.672 154.383 175.327C146.858 170.982 143.116 165.276 143.152 159.56V169.869C143.116 175.585 146.858 181.291 154.383 185.636C161.909 189.981 171.795 192.141 181.697 192.12V181.811Z" fill="#0D0D0D" />
+        <path d="M181.964 181.838C203.329 181.704 220.585 171.595 220.508 159.261C220.43 146.926 203.048 137.036 181.683 137.17C160.319 137.304 143.063 147.412 143.14 159.747C143.218 172.082 160.6 181.972 181.964 181.838Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M176.573 153.287L176.382 151.895L175.717 147.071L179.202 145.035L180.46 154.261C180.46 154.261 178.661 154.184 178.058 154.163C177.253 154.127 176.614 153.751 176.573 153.292V153.287ZM161.496 155.385C161.496 155.385 175.094 156.009 179.63 156.019C180.346 156.019 180.754 156.323 180.81 156.73C181.027 158.225 181.016 158.256 181.016 158.256L158.033 157.411L161.496 155.385ZM188.8 165.158L188.99 166.549L189.655 171.374L186.171 173.41L184.913 164.183C184.913 164.183 186.712 164.261 187.315 164.282C188.119 164.318 188.758 164.694 188.8 165.153V165.158ZM181.357 160.751C181.851 164.493 183.32 175.075 183.32 175.075L179.578 177.266L177.692 162.931C177.63 162.472 176.991 162.106 176.213 162.086L151.559 161.189L155.161 159.081L179.991 160.003C180.676 160.055 181.3 160.354 181.362 160.745L181.357 160.751ZM203.825 163.091L186.923 162.441L186.042 162.385C185.248 162.354 184.599 161.972 184.558 161.514L182.073 143.354L185.666 141.251L187.836 159.333C187.877 159.792 188.526 160.173 189.32 160.204L207.577 160.895L203.825 163.091ZM210.449 159.22C210.449 159.22 196.799 158.689 192.243 158.514C191.722 158.493 191.253 158.323 190.995 158.076C190.872 157.926 190.794 157.725 190.779 157.565L190.671 156.385L213.856 157.23L210.449 159.225V159.22Z" fill="#0D0D0D" />
+        <path d="M143.152 144.096C143.116 149.812 146.858 155.518 154.383 159.864C161.909 164.209 171.795 166.369 181.697 166.348C191.598 166.327 201.51 164.126 209.093 159.75C216.675 155.374 220.484 149.647 220.52 143.936V154.245C220.484 159.962 216.67 165.683 209.093 170.059C201.51 174.435 191.598 176.636 181.697 176.657C171.795 176.678 161.909 174.518 154.383 170.173C146.858 165.827 143.116 160.121 143.152 154.405V144.096Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M181.697 166.348C171.795 166.369 161.909 164.209 154.383 159.864C146.858 155.518 143.116 149.813 143.152 144.096V154.405C143.116 160.121 146.858 165.827 154.383 170.173C161.909 174.518 171.795 176.678 181.697 176.657V166.348Z" fill="#0D0D0D" />
+        <path d="M181.964 166.374C203.329 166.24 220.585 156.132 220.508 143.797C220.43 131.463 203.048 121.572 181.683 121.707C160.319 121.841 143.063 131.949 143.14 144.284C143.218 156.618 160.6 166.509 181.964 166.374Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M176.573 137.824L176.382 136.432L175.717 131.608L179.202 129.572L180.46 138.798C180.46 138.798 178.661 138.721 178.058 138.7C177.253 138.664 176.614 138.288 176.573 137.829V137.824ZM161.496 139.922C161.496 139.922 175.094 140.546 179.63 140.556C180.346 140.556 180.754 140.86 180.81 141.267C181.027 142.762 181.016 142.793 181.016 142.793L158.033 141.948L161.496 139.922ZM188.8 149.695L188.99 151.087L189.655 155.911L186.171 157.947L184.913 148.721C184.913 148.721 186.712 148.798 187.315 148.819C188.119 148.855 188.758 149.231 188.8 149.69V149.695ZM181.357 145.288C181.851 149.03 183.32 159.612 183.32 159.612L179.578 161.803L177.692 147.468C177.63 147.009 176.991 146.643 176.213 146.623L151.559 145.726L155.161 143.618L179.991 144.54C180.676 144.592 181.3 144.891 181.362 145.283L181.357 145.288ZM203.825 147.628L186.923 146.978L186.042 146.922C185.248 146.891 184.599 146.509 184.558 146.051L182.073 127.891L185.666 125.788L187.836 143.87C187.877 144.329 188.526 144.71 189.32 144.741L207.577 145.432L203.825 147.628ZM210.449 143.757C210.449 143.757 196.799 143.226 192.243 143.051C191.722 143.03 191.253 142.86 190.995 142.613C190.872 142.463 190.794 142.262 190.779 142.102L190.671 140.922L213.856 141.767L210.449 143.762V143.757Z" fill="#0D0D0D" />
+        <path d="M143.152 128.632C143.116 134.349 146.858 140.055 154.383 144.4C161.909 148.745 171.795 150.905 181.697 150.884C191.598 150.864 201.51 148.663 209.093 144.287C216.675 139.91 220.484 134.184 220.52 128.473V138.782C220.484 144.498 216.67 150.219 209.093 154.596C201.51 158.972 191.598 161.173 181.697 161.193C171.795 161.214 161.909 159.054 154.383 154.709C146.858 150.364 143.116 144.658 143.152 138.941V128.632Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M181.697 150.884C171.795 150.905 161.909 148.745 154.383 144.4C146.858 140.055 143.116 134.349 143.152 128.633V138.942C143.116 144.658 146.858 150.364 154.383 154.709C161.909 159.054 171.795 161.214 181.697 161.193V150.884Z" fill="#0D0D0D" />
+        <path d="M181.964 150.911C203.329 150.777 220.585 140.668 220.508 128.334C220.43 115.999 203.048 106.109 181.683 106.243C160.319 106.377 143.063 116.485 143.14 128.82C143.218 141.155 160.6 151.045 181.964 150.911Z" fill="#F7F7F7" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M217.788 148.205C202.374 174.772 202.374 203.421 217.788 212.188C233.202 220.955 258.19 206.526 273.604 179.959C289.018 153.392 289.018 124.743 273.604 115.976C258.19 107.209 233.202 121.638 217.788 148.205ZM228.948 154.556C236.24 141.987 247.097 133.954 255.9 133.695L224.324 188.126C220.122 180.463 221.656 167.124 228.948 154.556ZM262.437 173.608C255.145 186.177 244.288 194.21 235.484 194.469L267.061 140.038C271.263 147.701 269.729 161.04 262.437 173.608Z" fill="#FF637F" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M273.612 115.976L260.777 108.565C245.363 99.7984 220.374 114.227 204.96 140.801C189.546 167.368 189.546 196.018 204.96 204.785L217.795 212.195C202.381 203.429 202.381 174.779 217.795 148.212C233.202 121.638 258.19 107.209 273.605 115.983" fill="#FF637F" />
+        <path d="M273.612 115.976L260.777 108.565C245.363 99.7984 220.374 114.227 204.96 140.801C189.546 167.368 189.546 196.018 204.96 204.785L217.795 212.195C202.381 203.429 202.381 174.779 217.795 148.212C233.202 121.638 258.19 107.209 273.605 115.983" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M228.948 154.555C236.24 141.987 247.097 133.954 255.901 133.695L224.324 188.126C220.122 180.463 221.656 167.124 228.948 154.555Z" fill="#0D0D0D" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M262.444 173.616C255.152 186.184 244.296 194.217 235.492 194.476L267.068 140.045C271.27 147.708 269.736 161.047 262.444 173.616Z" fill="#0D0D0D" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M204.953 140.794C189.539 167.361 189.539 196.011 204.953 204.777L217.788 212.188C202.374 203.421 202.374 174.772 217.788 148.205L204.953 140.794Z" fill="#0D0D0D" stroke="#0D0D0D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+
+    </Box>
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughGasDrawer/NotEnoughGasDrawer.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughGasDrawer/NotEnoughGasDrawer.tsx
@@ -0,0 +1,97 @@
+import {
+  Body,
+  Box,
+  Button,
+  Drawer,
+  Heading,
+} from '@biom3/react';
+import { useTranslation } from 'react-i18next';
+import { RouteData } from '../../lib/squid/types';
+import { NoGasHero } from '../Hero/NoGasHero';
+
+export function NotEnoughGasDrawer({
+  visible,
+  routeData,
+  onTryAgainClick,
+  onToolkitClick,
+}: {
+  visible: boolean;
+  routeData?: RouteData;
+  onTryAgainClick: () => void;
+  onToolkitClick: () => void;
+}) {
+  const { t } = useTranslation();
+  const tokenName = routeData?.route.route.estimate.gasCosts[0].token.symbol ?? '';
+
+  return (
+    <Drawer
+      size="full"
+      visible={visible}
+      showHeaderBar={false}
+    >
+      <Drawer.Content sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+      >
+        <NoGasHero />
+
+        <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          mb: 'base.spacing.x8',
+        }}
+        >
+          <Heading
+            size="small"
+            sx={{ textAlign: 'center', paddingX: 'base.spacing.x6', marginBottom: 'base.spacing.x3' }}
+          >
+            {t('views.ADD_TOKENS.noGasDrawer.heading', { token: tokenName })}
+          </Heading>
+
+          <Body sx={{
+            color: 'base.color.text.body.secondary',
+            textAlign: 'center',
+            paddingX: 'base.spacing.x6',
+          }}
+          >
+            {t('views.ADD_TOKENS.noGasDrawer.body')}
+          </Body>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            paddingX: 'base.spacing.x6',
+            width: '100%',
+            mb: 'base.spacing.x2',
+          }}
+        >
+          <Button
+            sx={{ width: '100%', mb: 'base.spacing.x4' }}
+            testId="non-passport-cta-button"
+            variant="primary"
+            size="large"
+            onClick={onTryAgainClick}
+          >
+            {t('views.ADD_TOKENS.noGasDrawer.primaryAction')}
+          </Button>
+
+          <Button
+            sx={{ width: '100%', marginBottom: 'base.spacing.x10' }}
+            testId="non-passport-cta-button"
+            variant="tertiary"
+            size="large"
+            onClick={onToolkitClick}
+          >
+            {t('views.ADD_TOKENS.noGasDrawer.secondaryAction', { token: tokenName })}
+          </Button>
+        </Box>
+      </Drawer.Content>
+    </Drawer>
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/lib/squid/functions/sortRoutesByFastestTime.ts b/packages/checkout/widgets-lib/src/lib/squid/functions/sortRoutesByFastestTime.ts
@@ -4,8 +4,15 @@ export const sortRoutesByFastestTime = (routes: RouteData[]): RouteData[] => {
   if (!routes) return [];
 
   return routes.slice().sort((a, b) => {
+    // Prioritize isInsufficientGas = false
+    if (a.isInsufficientGas !== b.isInsufficientGas) {
+      return a.isInsufficientGas ? 1 : -1;
+    }
+
+    // Sort by estimatedRouteDuration if isInsufficientGas is the same
     const timeA = a.route.route.estimate.estimatedRouteDuration;
     const timeB = b.route.route.estimate.estimatedRouteDuration;
+
     return timeA - timeB;
   });
 };
diff --git a/packages/checkout/widgets-lib/src/lib/squid/hooks/useRoutes.ts b/packages/checkout/widgets-lib/src/lib/squid/hooks/useRoutes.ts
@@ -13,6 +13,7 @@ import { isPassportProvider } from '../../provider';
 import {
   AmountData, RouteData, RouteResponseData, Token,
 } from '../types';
+import { SQUID_NATIVE_TOKEN } from '../config';
 
 const BASE_SLIPPAGE = 0.02;
 
@@ -293,28 +294,97 @@ export const useRoutes = () => {
     }
   };
 
-  const getRoutes = async (
+  const getRoutesWithFeesValidation = async (
     squid: Squid,
-    amountDataArray: AmountData[],
     toTokenAddress: string,
+    balances: TokenBalance[],
+    fromAmountArray: AmountData[],
   ): Promise<RouteData[]> => {
-    const routePromises = amountDataArray.map((data) => getRoute(
-      squid,
-      data.fromToken,
-      data.toToken,
-      toTokenAddress,
-      data.fromAmount,
-      data.toAmount,
-    ).then((route) => ({
-      amountData: { ...data, additionalBuffer: route.additionalBuffer },
-      route: route.route,
-    })));
+    const getGasCost = (
+      route: RouteResponseData,
+      chainId: string | number,
+    ) => (route.route?.route.estimate.gasCosts || [])
+      .filter((gasCost) => gasCost.token.chainId === chainId.toString())
+      .reduce(
+        (sum, gasCost) => sum + parseFloat(utils.formatUnits(gasCost.amount, gasCost.token.decimals)),
+        0,
+      );
+
+    const getTotalFees = (
+      route: RouteResponseData,
+      chainId: string | number,
+    ) => (route.route?.route.estimate.feeCosts || [])
+      .filter((fee) => fee.token.chainId === chainId.toString())
+      .reduce(
+        (sum, fee) => sum + parseFloat(utils.formatUnits(fee.amount, fee.token.decimals)),
+        0,
+      );
+
+    const findUserGasBalance = (chainId: string | number) => balances.find(
+      (balance: TokenBalance) => balance.address.toLowerCase() === SQUID_NATIVE_TOKEN.toLowerCase()
+        && balance.chainId.toString() === chainId.toString(),
+    );
+
+    const hasSufficientNativeTokenBalance = (
+      userGasBalance: TokenBalance | undefined,
+      fromAmount: string,
+      fromToken: Token,
+      totalGasCost: number,
+      totalFeeCost: number,
+    ) => {
+      if (!userGasBalance) return false;
+
+      const userBalance = parseFloat(
+        utils.formatUnits(userGasBalance.balance, userGasBalance.decimals),
+      );
+
+      // If the fromToken is the native token, validate balance for both fromAmount and gas + fee costs
+      // Otherwise, only validate balance for gas + fee costs
+      const requiredAmount = fromToken.address.toLowerCase() === SQUID_NATIVE_TOKEN.toLowerCase()
+        ? parseFloat(fromAmount) + totalGasCost + totalFeeCost
+        : totalGasCost + totalFeeCost;
+
+      return userBalance >= requiredAmount;
+    };
 
-    const routesData = await Promise.all(routePromises);
+    const routePromises = fromAmountArray.map(async (data: AmountData) => {
+      try {
+        const routeResponse = await getRoute(
+          squid,
+          data.fromToken,
+          data.toToken,
+          toTokenAddress,
+          data.fromAmount,
+          data.toAmount,
+        );
+
+        if (!routeResponse?.route) return null;
+
+        const gasCost = getGasCost(routeResponse, data.balance.chainId);
+        const feeCost = getTotalFees(routeResponse, data.balance.chainId);
+        const userGasBalance = findUserGasBalance(data.balance.chainId);
+
+        return {
+          amountData: data,
+          route: routeResponse.route,
+          isInsufficientGas: !hasSufficientNativeTokenBalance(
+            userGasBalance,
+            data.fromAmount,
+            data.fromToken,
+            gasCost,
+            feeCost,
+          ),
+        } as RouteData;
+      } catch (error) {
+        return null;
+      }
+    });
 
-    return routesData.filter(
-      (route): route is RouteData => route?.route !== undefined,
+    const routesData = (await Promise.all(routePromises)).filter(
+      (route): route is RouteData => route !== null,
     );
+
+    return routesData;
   };
 
   const fetchRoutesWithRateLimit = async (
@@ -330,7 +400,7 @@ export const useRoutes = () => {
   ): Promise<RouteData[]> => {
     const currentRequestId = ++latestRequestIdRef.current;
 
-    let amountDataArray = getSufficientFromAmounts(
+    let fromAmountDataArray = getSufficientFromAmounts(
       tokens,
       balances,
       toChanId,
@@ -339,23 +409,28 @@ export const useRoutes = () => {
     );
 
     if (!isSwapAllowed) {
-      amountDataArray = amountDataArray.filter(
+      fromAmountDataArray = fromAmountDataArray.filter(
         (amountData) => amountData.balance.chainId !== toChanId,
       );
     }
 
     let allRoutes: RouteData[] = [];
     await Promise.all(
-      amountDataArray
+      fromAmountDataArray
         .reduce((acc, _, i) => {
           if (i % bulkNumber === 0) {
-            acc.push(amountDataArray.slice(i, i + bulkNumber));
+            acc.push(fromAmountDataArray.slice(i, i + bulkNumber));
           }
           return acc;
-        }, [] as (typeof amountDataArray)[])
-        .map(async (slicedAmountDataArray) => {
+        }, [] as (typeof fromAmountDataArray)[])
+        .map(async (slicedFromAmountDataArray) => {
           allRoutes.push(
-            ...(await getRoutes(squid, slicedAmountDataArray, toTokenAddress)),
+            ...(await getRoutesWithFeesValidation(
+              squid,
+              toTokenAddress,
+              balances,
+              slicedFromAmountDataArray,
+            )),
           );
           await delay(delayMs);
         }),
@@ -370,7 +445,6 @@ export const useRoutes = () => {
     }
 
     const sortedRoutes = sortRoutesByFastestTime(allRoutes);
-
     // Only update routes if the request is the latest one
     if (currentRequestId === latestRequestIdRef.current) {
       setRoutes(sortedRoutes);

diff --git a/packages/checkout/widgets-lib/src/lib/squid/types.ts b/packages/checkout/widgets-lib/src/lib/squid/types.ts
@@ -38,6 +38,7 @@ export type AmountData = {
 export type RouteData = {
   amountData: AmountData;
   route: RouteResponse;
+  isInsufficientGas: boolean;
 };
 
 export type RouteResponseData = {

diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -866,7 +866,14 @@
         "fiatPricePrefix": "≈ USD",
         "zeroFees": "Zero fees",
         "includedFees": "Fees"
-      }
+      },
+      "noGasDrawer": {
+        "heading": "You'll need more {{token}} for gas",
+        "body": "Add more gas and return to complete this transaction, or try another option such as lowering your amount, using another wallet, or buying with card.",
+        "primaryAction": "Try another option",
+        "secondaryAction": "Add more {{token}}"
+      },
+      "noGasRouteMessage": "Insufficient {{token}} for gas"
     }
   },
   "footers": {