Id 2758 balances routes

packages/checkout/widgets-lib/src/components/RouteOptionsDrawer/RouteOption.tsx

@@ -28,6 +28,7 @@ export interface RouteOptionProps<
   size?: MenuItemSize;
   rc?: RC;
   selected?: boolean;
+  displayPriceDetails?: boolean;
 }
 
 export function RouteOption<RC extends ReactElement | undefined = undefined>({
@@ -39,6 +40,7 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
   size = 'small',
   rc = <span />,
   selected = false,
+  displayPriceDetails = true,
 }: RouteOptionProps<RC>) {
   const { t } = useTranslation();
 
@@ -97,7 +99,7 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
 
       <MenuItem.Caption>
         {`${t('views.ADD_TOKENS.fees.balance')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`}
-        {routeData.isInsufficientGas && (
+        { displayPriceDetails && routeData.isInsufficientGas && (
         <>
           <br />
           <span style={{ color: '#FF637F' }}>
@@ -108,9 +110,18 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
           </span>
         </>
         )}
+
+        { displayPriceDetails && routeData.isInsufficientBalance && (
+        <>
+          <br />
+          <span style={{ color: '#FF637F' }}>
+            {t('views.ADD_TOKENS.noBalanceRouteMessage')}
+          </span>
+        </>
+        )}
       </MenuItem.Caption>
 
-      <MenuItem.PriceDisplay price={fromAmount}>
+      <MenuItem.PriceDisplay price={fromAmount} sx={{ visibility: displayPriceDetails ? 'visible' : 'hidden' }}>
         <MenuItem.PriceDisplay.Caption>
           {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}`}
         </MenuItem.PriceDisplay.Caption>
@@ -155,7 +166,7 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
               />
             )}
             {
-              `${t('views.ADD_TOKENS.fees.fee')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} 
+              `${t('views.ADD_TOKENS.fees.fee')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')}
               $${getFormattedAmounts(totalFeesUsd)}`
             }
           </Body>

packages/checkout/widgets-lib/src/components/RouteOptionsDrawer/RouteOptions.tsx

@@ -26,6 +26,7 @@ export interface OptionsProps {
   showOnrampOption?: boolean;
   insufficientBalance?: boolean;
   selectedIndex: number;
+  displayPriceDetails?: boolean;
 }
 
 export function RouteOptions({
@@ -38,6 +39,7 @@ export function RouteOptions({
   showOnrampOption,
   insufficientBalance,
   selectedIndex,
+  displayPriceDetails,
 }: OptionsProps) {
   const { t } = useTranslation();
 
@@ -94,6 +96,7 @@ export function RouteOptions({
           isFastest={index === 0}
           selected={index === selectedIndex}
           rc={<motion.div variants={listItemVariants} />}
+          displayPriceDetails={displayPriceDetails}
         />
       ))}
       {noRoutes && (

packages/checkout/widgets-lib/src/components/RouteOptionsDrawer/RouteOptionsDrawer.tsx

@@ -25,6 +25,7 @@ type OptionsDrawerProps = {
   showSwapOption?: boolean;
   showBridgeOption?: boolean;
   insufficientBalance?: boolean;
+  displayPriceDetails?: boolean;
 };
 
 export function RouteOptionsDrawer({
@@ -40,6 +41,7 @@ export function RouteOptionsDrawer({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   showBridgeOption,
   insufficientBalance,
+  displayPriceDetails,
 }: OptionsDrawerProps) {
   const { t } = useTranslation();
   const { track } = useAnalytics();
@@ -126,6 +128,7 @@ export function RouteOptionsDrawer({
           showOnrampOption={showOnrampOption}
           insufficientBalance={insufficientBalance}
           selectedIndex={selectedRouteIndex.current}
+          displayPriceDetails={displayPriceDetails}
         />
       </Drawer.Content>
     </Drawer>

packages/checkout/widgets-lib/src/components/SelectedRouteOption/SelectedRouteOption.tsx

@@ -1,6 +1,8 @@
 import {
   AllDualVariantIconKeys,
+  Box,
   MenuItem,
+  ShimmerBox,
   Stack,
   Sticker,
   Tooltip,
@@ -28,6 +30,7 @@ export interface SelectedRouteOptionProps {
   withSelectedWallet?: boolean;
   insufficientBalance?: boolean;
   showOnrampOption?: boolean;
+  displayPriceDetails?: boolean;
 }
 
 function SelectedRouteOptionContainer({
@@ -67,6 +70,7 @@ export function SelectedRouteOption({
   withSelectedWallet = false,
   insufficientBalance = false,
   showOnrampOption = false,
+  displayPriceDetails = true,
   onClick,
 }: SelectedRouteOptionProps) {
   const { t } = useTranslation();
@@ -182,24 +186,58 @@ export function SelectedRouteOption({
             {`${t('views.ADD_TOKENS.fees.balance')} ${t(
               'views.ADD_TOKENS.fees.fiatPricePrefix',
             )} $${routeBalanceUsd}`}
-            {routeData?.isInsufficientGas && (
+            { displayPriceDetails && routeData?.isInsufficientGas && (
+              <>
+                <br />
+                <span style={{ color: '#FF637F' }}>
+                  {t('views.ADD_TOKENS.noGasRouteMessage', {
+                    token:
+              routeData.route.route.estimate.gasCosts[0].token.symbol,
+                  })}
+                </span>
+              </>
+            )}
+
+            { displayPriceDetails && routeData?.isInsufficientBalance && (
             <>
               <br />
               <span style={{ color: '#FF637F' }}>
-                {t('views.ADD_TOKENS.noGasRouteMessage', {
-                  token:
-              routeData.route.route.estimate.gasCosts[0].token.symbol,
-                })}
+                {t('views.ADD_TOKENS.noBalanceRouteMessage')}
               </span>
             </>
             )}
           </MenuItem.Caption>
         </Stack>
-        <MenuItem.PriceDisplay price={fromAmount}>
-          <MenuItem.PriceDisplay.Caption>
-            {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}`}
-          </MenuItem.PriceDisplay.Caption>
-        </MenuItem.PriceDisplay>
+        {loading && displayPriceDetails ? (
+          <Box sx={{
+            display: 'inline-flex',
+            flexDirection: 'column',
+            alignItems: 'end',
+            gap: 'base.spacing.x2',
+          }}
+          >
+            <ShimmerBox
+              rc={<span />}
+              sx={{
+                w: '36px',
+                h: '16px',
+              }}
+            />
+            <ShimmerBox
+              rc={<span />}
+              sx={{
+                w: '72px',
+                h: '16px',
+              }}
+            />
+          </Box>
+        ) : (
+          <MenuItem.PriceDisplay price={fromAmount} sx={{ visibility: displayPriceDetails ? 'visible' : 'hidden' }}>
+            <MenuItem.PriceDisplay.Caption>
+              {`${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${fromAmountUsd}`}
+            </MenuItem.PriceDisplay.Caption>
+          </MenuItem.PriceDisplay>
+        )}
       </Stack>
     </SelectedRouteOptionContainer>
   );

packages/checkout/widgets-lib/src/lib/squid/config.ts

@@ -1,3 +1,9 @@
+import { ChainId } from '@imtbl/checkout-sdk';
+
 export const SQUID_SDK_BASE_URL = 'https://apiplus.squidrouter.com';
 
 export const SQUID_NATIVE_TOKEN = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
+
+export const DEFAULT_DESTINATION_TOKEN = {
+  [ChainId.IMTBL_ZKEVM_MAINNET]: '0x6de8aCC0D406837030CE4dd28e7c08C5a96a30d2',
+};

packages/checkout/widgets-lib/src/lib/squid/functions/sortRoutesByFastestTime.ts

@@ -4,15 +4,25 @@ 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;
+    // 1.: Prioritise routes where both isInsufficientGas and isInsufficientBalance are false
+    if (a.isInsufficientGas !== b.isInsufficientGas || a.isInsufficientBalance !== b.isInsufficientBalance) {
+      if (!a.isInsufficientGas && !a.isInsufficientBalance) return -1;
+      if (!b.isInsufficientGas && !b.isInsufficientBalance) return 1;
+      if (a.isInsufficientGas && !a.isInsufficientBalance) return -1; // isInsufficientGas = true has higher priority
+      if (b.isInsufficientGas && !b.isInsufficientBalance) return 1;
     }
 
-    // Sort by estimatedRouteDuration if isInsufficientGas is the same
+    // 2.: Sort by estimatedRouteDuration
     const timeA = a.route.route.estimate.estimatedRouteDuration;
     const timeB = b.route.route.estimate.estimatedRouteDuration;
 
-    return timeA - timeB;
+    if (timeA !== timeB) return timeA - timeB;
+
+    // 3.: Place isInsufficientGas before isInsufficientBalance
+    if (a.isInsufficientGas !== b.isInsufficientGas) {
+      return a.isInsufficientGas ? -1 : 1;
+    }
+
+    return 0;
   });
 };