[NO CHANGELOG] [Add Funds Widget] Slice 3 (Squid) (#2256)

Co-authored-by: Ji Young Lee <[email protected]>

packages/checkout/widgets-lib/src/components/Handover/HandoverContent.tsx

@@ -1,6 +1,7 @@
 import {
   Body, Box, Button, Heading,
 } from '@biom3/react';
+import { ReactNode } from 'react';
 
 export function HandoverContent({
   headingText,
@@ -11,7 +12,7 @@ export function HandoverContent({
   onSecondaryButtonClick,
 }: {
   headingText: string;
-  subheadingText?: string;
+  subheadingText?: ReactNode;
   primaryButtonText?: string;
   onPrimaryButtonClick?: () => void;
   secondaryButtonText?: string;

packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts

@@ -4,10 +4,9 @@ import { ViewType } from './ViewType';
 export enum AddFundsWidgetViews {
   ADD_FUNDS = 'ADD_FUNDS',
   REVIEW = 'REVIEW',
-  CONFIRMATION = 'CONFIRMATION',
 }
 
-export type AddFundsWidgetView = AddFundsView | AddFundsReview | AddFundsConfirmation;
+export type AddFundsWidgetView = AddFundsView | AddFundsReview;
 
 interface AddFundsView extends ViewType {
   type: AddFundsWidgetViews.ADD_FUNDS;
@@ -18,11 +17,6 @@ interface AddFundsReview extends ViewType {
   data: AddFundsReviewData;
 }
 
-interface AddFundsConfirmation extends ViewType {
-  type: AddFundsWidgetViews.CONFIRMATION;
-  data: AddFundsConfirmationData;
-}
-
 export interface AddFundsReviewData {
   balance: TokenBalance;
   toAmount: string;

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

@@ -77,6 +77,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/AddFundsWidget.tsx

@@ -22,6 +22,8 @@ import { ErrorView } from '../../views/error/ErrorView';
 import { useSquid } from './hooks/useSquid';
 import { useAnalytics, UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { fetchChains } from './functions/fetchChains';
+import { Review } from './views/Review';
+import { fetchBalances } from './functions/fetchBalances';
 
 export type AddFundsWidgetInputs = AddFundsWidgetParams & {
   checkout: Checkout;
@@ -56,6 +58,10 @@ export default function AddFundsWidget({
 
   const [addFundsState, addFundsDispatch] = useReducer(addFundsReducer, initialAddFundsState);
 
+  const {
+    squid, provider, chains,
+  } = addFundsState;
+
   const addFundsReducerValues = useMemo(
     () => ({
       addFundsState,
@@ -64,55 +70,47 @@ export default function AddFundsWidget({
     [addFundsState, addFundsDispatch],
   );
 
-  const squid = useSquid(checkout);
+  const squidSdk = useSquid(checkout);
 
   useEffect(() => {
     (async () => {
-      const chains = await fetchChains();
+      const chainsResponse = await fetchChains();
 
       addFundsDispatch({
         payload: {
           type: AddFundsActions.SET_CHAINS,
-          chains,
+          chains: chainsResponse,
         },
       });
     })();
   }, []);
 
   useEffect(() => {
-    if (!addFundsState.squid || !addFundsState.chains || !addFundsState.provider) return;
+    if (!squid || !chains || !provider) return;
 
     (async () => {
-      const chainIds = addFundsState.chains?.map((chain) => chain.id);
-      const fromAddress = await addFundsState.provider?.getSigner().getAddress();
-
-      const balances = await addFundsState.squid?.getAllBalances({
-        chainIds,
-        evmAddress: fromAddress,
-      });
-      const filteredBalances = balances?.evmBalances?.filter(
-        (balance) => balance.balance !== '0',
-      );
+      const evmChains = chains.filter((chain) => chain.type === 'evm');
+      const balances = await fetchBalances(squid, evmChains, provider);
 
       addFundsDispatch({
         payload: {
           type: AddFundsActions.SET_BALANCES,
-          balances: filteredBalances ?? [],
+          balances: balances ?? [],
         },
       });
     })();
-  }, [addFundsState.squid, addFundsState.chains, addFundsState.provider]);
+  }, [squid, chains, provider]);
 
   useEffect(() => {
-    if (!squid || addFundsState.squid) return;
+    if (!squidSdk) return;
 
     addFundsDispatch({
       payload: {
         type: AddFundsActions.SET_SQUID,
-        squid,
+        squid: squidSdk,
       },
     });
-  }, [squid]);
+  }, [squidSdk]);
 
   useEffect(() => {
     if (!web3Provider) return;
@@ -162,6 +160,20 @@ export default function AddFundsWidget({
             onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
           />
         )}
+        {viewState.view.type === AddFundsWidgetViews.REVIEW && (
+          <Review
+            data={viewState.view.data}
+            onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
+            onBackButtonClick={() => {
+              viewDispatch({
+                payload: {
+                  type: ViewActions.GO_BACK,
+                },
+              });
+            }}
+            showBackButton
+          />
+        )}
         {viewState.view.type === SharedViews.ERROR_VIEW && (
           <ErrorView
             actionText={t('views.ERROR_VIEW.actionText')}

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>
   );
 }