diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx index 881fabf788..5b3e8fd6dd 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx @@ -26,9 +26,7 @@ export function FiatOption({ }; const handleClick = () => { - if (onClick) { - onClick(type); - } + onClick?.(type); }; const menuItemProps = { diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx new file mode 100644 index 0000000000..739619d312 --- /dev/null +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx @@ -0,0 +1,99 @@ +import { + MenuItem, MenuItemSize, Sticker, +} from '@biom3/react'; +import { ReactElement, useMemo } from 'react'; +import { ethers } from 'ethers'; +import { Chain, RouteData } from '../types'; + +export interface RouteOptionProps { + route: RouteData; + onClick?: (route: RouteData) => void; + chain?: Chain; + usdBalance?: string; + disabled?: boolean; + isFastest?: boolean; + size?: MenuItemSize; + rc?: RC; +} + +export function RouteOption({ + route, + onClick, + chain, + usdBalance, + disabled = false, + isFastest = false, + size, + rc = , +}: RouteOptionProps) { + const { fromToken } = route.amountData; + + const { estimate } = route.route.route; + + const formattedFromAmount = useMemo(() => Number(ethers.utils.formatUnits( + estimate.fromAmount, + estimate.fromToken.decimals, + )).toFixed(4), [estimate.fromAmount, estimate.fromToken.decimals]); + + const formattedUsdBalance = useMemo(() => (usdBalance ? Number(usdBalance).toFixed(2) : undefined), [usdBalance]); + + const handleClick = () => { + onClick?.(route); + }; + + const menuItemProps = { + disabled, + emphasized: true, + onClick: disabled ? undefined : handleClick, + }; + + return ( + + {fromToken.name} + + {formattedUsdBalance && ( + + {`Balance: $${formattedUsdBalance}`} + + )} + + {chain && ( + + } + sx={{ w: 'base.icon.size.200' }} + /> + + } + /> + + )} + + {formattedFromAmount && estimate.fromAmountUSD && ( + + + {`USD $${estimate.fromAmountUSD}`} + + + )} + + {isFastest && ( + + )} + + + ); +} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useSquid.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useSquid.ts index 2e7dce29d1..90bce7ce6c 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useSquid.ts +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useSquid.ts @@ -19,9 +19,10 @@ export const useSquid = (checkout: Checkout) => { }, [checkout]); useEffect(() => { - if (squid || !squidConfig) { + if (squid) { return; } + const initialiseSquid = async () => { const config = await squidConfig(); @@ -33,6 +34,7 @@ export const useSquid = (checkout: Checkout) => { }); await squidSDK.init(); + setSquid(squidSDK); };