Add funds routes view

packages/checkout/widgets-lib/src/locales/en.json

@@ -643,19 +643,14 @@
     "ADD_FUNDS": {
       "drawer": {
         "options": {
-          "swap": {
-            "heading": "Swap",
-            "caption": "Swap tokens on this network.",
-            "disabledCaption": "Currently not available."
-          },
           "debit": {
             "heading": "Debit Card",
-            "caption": "The recommended way to pay with card.",
+            "caption": "The recommended way to add funds with card",
             "disabledCaption": "Unavailable for your selection. We recommend adding tokens."
           },
           "credit": {
             "heading": "Credit Card",
-            "caption": "Not recommended since transactions may be blocked by your bank.",
+            "caption": "Not recommended due to failure rates & charges",
             "disabledCaption": "Unavailable for your selection. We recommend adding tokens."
           }
         }

packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx

@@ -71,6 +71,7 @@ export class AddFunds extends Base<WidgetType.ADD_FUNDS> {
         getL1ChainId(this.checkout.config),
         getL2ChainId(this.checkout.config),
       ],
+      isCheckNetworkEnabled: false,
     };
 
     this.reactRoot.render(

packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx

@@ -1,43 +1,103 @@
-import { Box, MenuItemSize } from '@biom3/react';
-
+import {
+  Box, LoadingOverlay, MenuItemSize,
+} from '@biom3/react';
 import { motion } from 'framer-motion';
-import { useMemo } from 'react';
+import { TokenBalance } from '@0xsquid/sdk/dist/types';
 import {
   listItemVariants,
   listVariants,
 } from '../../../lib/animation/listAnimation';
-import { Option, OptionTypes } from './Option';
+import { FiatOption } from './FiatOption';
+import { Chain, FiatOptionType, RouteData } from '../types';
+import { RouteOption } from './RouteOption';
+import { convertTokenBalanceToUsd } from '../functions/convertTokenBalanceToUsd';
+import { sortRoutesByFastestTime } from '../functions/sortRoutesByFastestTime';
 
-const defaultOptions: OptionTypes[] = [
-  OptionTypes.SWAP,
-  OptionTypes.DEBIT,
-  OptionTypes.CREDIT,
+const defaultFiatOptions: FiatOptionType[] = [
+  FiatOptionType.DEBIT,
+  FiatOptionType.CREDIT,
 ];
 
 export interface OptionsProps {
-  onClick: (type: OptionTypes) => void;
-  disabledOptions?: OptionTypes[];
-  options?: OptionTypes[];
-  captions?: Partial<Record<OptionTypes, string>>;
+  chains: Chain[] | null;
+  balances: TokenBalance[] | null;
+  onCardClick?: (type: FiatOptionType) => void;
+  onRouteClick?: (route: RouteData) => void;
+  routes?: RouteData[];
   size?: MenuItemSize;
-  hideDisabledOptions?: boolean;
+  showOnrampOption?: boolean;
 }
 
-export function Options(props: OptionsProps) {
-  const {
-    disabledOptions = [],
-    options,
-    onClick,
-    captions,
-    size,
-    hideDisabledOptions,
-  } = props;
-  const filteredOptions = useMemo(
-    () => (options || defaultOptions).filter(
-      (option) => !hideDisabledOptions || !disabledOptions.includes(option),
-    ),
-    [options, disabledOptions, hideDisabledOptions],
-  );
+export function Options({
+  routes,
+  chains,
+  balances,
+  onCardClick,
+  onRouteClick,
+  size,
+  showOnrampOption,
+}: OptionsProps) {
+  const getUsdBalance = (balance: TokenBalance | undefined, route: RouteData) => {
+    if (!balance) return undefined;
+
+    try {
+      return convertTokenBalanceToUsd(balance, route.route)?.toString();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error calculating USD balance:', error);
+      return undefined;
+    }
+  };
+
+  const sortedRoutes = sortRoutesByFastestTime(routes);
+
+  if (!sortedRoutes) {
+    return (
+      <LoadingOverlay visible>
+        <LoadingOverlay.Content>
+          <LoadingOverlay.Content.LoopingText
+            text={['Fetching balances', 'Fetching routes']}
+            textDuration={5000}
+          />
+        </LoadingOverlay.Content>
+      </LoadingOverlay>
+    );
+  }
+
+  const routeOptions = sortedRoutes.map((route: RouteData) => {
+    const { fromToken } = route.amountData;
+
+    const chain = chains?.find((c) => c.id === fromToken.chainId);
+    const balance = balances?.find(
+      (bal) => bal.address === fromToken.address && bal.chainId === fromToken.chainId,
+    );
+
+    const usdBalance = getUsdBalance(balance, route);
+
+    return (
+      <RouteOption
+        key={`route-option-${fromToken.chainId}-${fromToken.address}`}
+        chain={chain}
+        route={route}
+        usdBalance={usdBalance}
+        onClick={onRouteClick}
+        size={size}
+        rc={<motion.div variants={listItemVariants} />}
+      />
+    );
+  });
+
+  const fiatOptions = showOnrampOption
+    ? defaultFiatOptions.map((type, idx) => (
+      <FiatOption
+        key={`fiat-option-${type}`}
+        type={type}
+        size={size}
+        onClick={onCardClick}
+        rc={<motion.div custom={idx} variants={listItemVariants} />}
+      />
+    ))
+    : null;
 
   return (
     <Box
@@ -49,21 +109,10 @@ export function Options(props: OptionsProps) {
         justifyContent: 'center',
         alignItems: 'flex-start',
       }}
-      rc={
-        <motion.div variants={listVariants} initial="hidden" animate="show" />
-      }
+      rc={<motion.div variants={listVariants} initial="hidden" animate="show" />}
     >
-      {filteredOptions.map((type, idx: number) => (
-        <Option
-          key={`option-type-${type}`}
-          type={type}
-          size={size}
-          onClick={onClick}
-          disabled={disabledOptions.includes(type)}
-          caption={captions?.[type]}
-          rc={<motion.div custom={idx} variants={listItemVariants} />}
-        />
-      ))}
+      {routeOptions}
+      {fiatOptions}
     </Box>
   );
 }

packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx

@@ -1,35 +1,37 @@
 import { Box, Drawer } from '@biom3/react';
 import { motion } from 'framer-motion';
+import { useContext } from 'react';
 import { listVariants } from '../../../lib/animation/listAnimation';
 import { Options } from './Options';
-import { OptionTypes } from './Option';
+import { FiatOptionType, RouteData } from '../types';
+import { AddFundsContext } from '../context/AddFundsContext';
 
 type OptionsDrawerProps = {
+  routes: RouteData[] | undefined;
+  visible: boolean;
+  onClose: () => void;
+  onRouteClick: (route: RouteData | undefined) => void;
+  onCardClick: (type: FiatOptionType) => void;
   showOnrampOption?: boolean;
   showSwapOption?: boolean;
   showBridgeOption?: boolean;
-  visible: boolean;
-  onClose: () => void;
-  onPayWithCard?: (paymentType: OptionTypes) => void;
 };
 
 export function OptionsDrawer({
+  routes,
+  visible,
+  onClose,
+  onRouteClick,
+  onCardClick,
   showOnrampOption,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   showSwapOption,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   showBridgeOption,
-  visible,
-  onClose,
-  onPayWithCard,
 }: OptionsDrawerProps) {
-  const disabledOptions: OptionTypes[] = [];
-  if (!showOnrampOption) {
-    disabledOptions.push(OptionTypes.CREDIT);
-    disabledOptions.push(OptionTypes.DEBIT);
-  }
-  if (!showSwapOption) {
-    disabledOptions.push(OptionTypes.SWAP);
-  }
+  const {
+    addFundsState: { chains, balances },
+  } = useContext(AddFundsContext);
 
   return (
     <Drawer
@@ -42,7 +44,7 @@ export function OptionsDrawer({
       <Drawer.Content
         rc={
           <motion.div variants={listVariants} initial="hidden" animate="show" />
-                }
+  }
       >
         <Box
           sx={{
@@ -54,21 +56,13 @@ export function OptionsDrawer({
           }}
         >
           <Options
-            onClick={onPayWithCard ?? (() => {
-            })}
             size="medium"
-            hideDisabledOptions
-            options={[
-              OptionTypes.SWAP,
-              OptionTypes.DEBIT,
-              OptionTypes.CREDIT,
-            ]}
-            disabledOptions={disabledOptions}
-            captions={{
-              [OptionTypes.SWAP]: 'Swap',
-              [OptionTypes.DEBIT]: 'Debit',
-              [OptionTypes.CREDIT]: 'Credit',
-            }}
+            routes={routes}
+            chains={chains}
+            balances={balances}
+            onCardClick={onCardClick}
+            onRouteClick={onRouteClick}
+            showOnrampOption={showOnrampOption}
           />
         </Box>
       </Drawer.Content>

packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useRoutes.ts

@@ -7,7 +7,7 @@ import { delay } from '../functions/delay';
 import { AmountData, RouteData } from '../types';
 
 export const useRoutes = () => {
-  const [routes, setRoutes] = useState<RouteData[]>([]);
+  const [routes, setRoutes] = useState<RouteData[] | undefined>(undefined);
 
   const getFromAmount = async (
     squid: Squid,