@lifi/widget 3.12.6-alpha.0 → 3.13.0

package/src/components/Token/Token.tsx

@@ -98,15 +98,36 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
   ) : null
 
   return (
-    <Box flex={1} display="flex" alignItems="center" {...other}>
+    <Box
+      {...other}
+      sx={[
+        {
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
       <TokenAvatar
         token={token}
         chain={chain}
         isLoading={isLoading}
         sx={{ marginRight: 2 }}
       />
-      <Box flex={1}>
-        <Box mb={0.5} height={24} display="flex" alignItems="center">
+      <Box
+        sx={{
+          flex: 1,
+        }}
+      >
+        <Box
+          sx={{
+            mb: 0.5,
+            height: 24,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
           <TextFitter
             height={30}
             textStyle={{
@@ -118,7 +139,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
             })}
           </TextFitter>
         </Box>
-        <TextSecondaryContainer component="span">
+        <TextSecondaryContainer as="span">
           <TextSecondary>
             {t('format.currency', {
               value: tokenPrice,
@@ -175,7 +196,14 @@ const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
   children,
 }) => {
   return (
-    <Box flex={1} position="relative" overflow="hidden" height={16}>
+    <Box
+      sx={{
+        flex: 1,
+        position: 'relative',
+        overflow: 'hidden',
+        height: 16,
+      }}
+    >
       <Grow
         in={!stepVisible && !disableDescription}
         style={{
@@ -184,7 +212,13 @@ const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
         appear={false}
         timeout={225}
       >
-        <Box display="flex" alignItems="center" height={16}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            height: 16,
+          }}
+        >
           {children as ReactElement}
         </Box>
       </Grow>
@@ -196,8 +230,19 @@ const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
         appear={false}
         timeout={225}
       >
-        <Box display="flex" alignItems="center" height={16}>
-          <Box mr={0.75} height={16}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            height: 16,
+          }}
+        >
+          <Box
+            sx={{
+              mr: 0.75,
+              height: 16,
+            }}
+          >
             <SmallAvatar
               src={step?.toolDetails.logoURI}
               alt={step?.toolDetails.name}
@@ -218,12 +263,30 @@ export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
   ...other
 }) => {
   return (
-    <Box flex={1} {...other}>
-      <Box display="flex" flex={1} alignItems="center">
+    <Box
+      {...other}
+      sx={[
+        {
+          flex: 1,
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          alignItems: 'center',
+        }}
+      >
         <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />
-        <Box flex={1}>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
           <Skeleton width={112} height={24} variant="text" />
-          <TextSecondaryContainer component="span">
+          <TextSecondaryContainer as="span">
             <Skeleton
               width={48}
               height={12}

package/src/components/TokenList/TokenListItem.tsx

@@ -112,7 +112,13 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
           component: 'div',
         }}
         secondary={
-          <Box position="relative" height={20} ref={container}>
+          <Box
+            ref={container}
+            sx={{
+              position: 'relative',
+              height: 20,
+            }}
+          >
             <Slide
               direction="down"
               in={!showAddress}
@@ -122,7 +128,13 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
               }}
               appear={false}
             >
-              <Box pt={0.25}>{token.name}</Box>
+              <Box
+                sx={{
+                  pt: 0.25,
+                }}
+              >
+                {token.name}
+              </Box>
             </Slide>
             <Slide
               direction="up"
@@ -134,8 +146,18 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
               appear={false}
               mountOnEnter
             >
-              <Box display="flex">
-                <Box display="flex" alignItems="center" pt={0.125}>
+              <Box
+                sx={{
+                  display: 'flex',
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    pt: 0.125,
+                  }}
+                >
                   {shortenAddress(tokenAddress)}
                 </Box>
                 <IconButton
@@ -159,7 +181,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
         ) : (
           <Box sx={{ textAlign: 'right' }}>
             {token.amount ? (
-              <Typography fontWeight={600} noWrap>
+              <Typography
+                noWrap
+                sx={{
+                  fontWeight: 600,
+                }}
+              >
                 {t('format.number', {
                   value: formatTokenAmount(token.amount, token.decimals),
                 })}
@@ -167,10 +194,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
             ) : null}
             {tokenPrice ? (
               <Typography
-                fontWeight={500}
-                fontSize={12}
-                color="text.secondary"
                 data-price={token.priceUSD}
+                sx={{
+                  fontWeight: 500,
+                  fontSize: 12,
+                  color: 'text.secondary',
+                }}
               >
                 {t('format.currency', {
                   value: tokenPrice,

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -131,12 +131,14 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             startAdornment={
               startAdornmentLabel ? (
                 <Typography
-                  fontSize={14}
-                  fontWeight={600}
-                  lineHeight="16px"
-                  px={1.5}
-                  pt={isFirstFeaturedToken ? 0 : 1}
-                  pb={1}
+                  sx={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                    lineHeight: '16px',
+                    px: 1.5,
+                    pt: isFirstFeaturedToken ? 0 : 1,
+                    pb: 1,
+                  }}
                 >
                   {startAdornmentLabel}
                 </Typography>

package/src/components/TransactionDetails.tsx

@@ -71,30 +71,48 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
 
   return (
     <Card selectionColor="secondary" {...props}>
-      <Box display="flex" alignItems="center" px={2} py={1.75}>
-        <Box display="flex" flex={1} alignItems="center" justifyContent="left">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          px: 2,
+          py: 1.75,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'left',
+          }}
+        >
           <TokenRate route={route} />
         </Box>
         <Collapse timeout={100} in={!cardExpanded} mountOnEnter>
           <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
             <Box
-              display="flex"
-              alignItems="center"
               onClick={toggleCard}
               // biome-ignore lint/a11y/useSemanticElements:
               role="button"
-              sx={{ cursor: 'pointer' }}
-              px={1}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                px: 1,
+                cursor: 'pointer',
+              }}
             >
               <IconTypography mr={0.5} fontSize={16}>
                 <LocalGasStationRounded fontSize="inherit" />
               </IconTypography>
               <Typography
-                fontSize={14}
-                color="text.primary"
-                fontWeight="600"
-                lineHeight={1.429}
                 data-value={combinedFeesUSD}
+                sx={{
+                  fontSize: 14,
+                  color: 'text.primary',
+                  fontWeight: '600',
+                  lineHeight: 1.429,
+                }}
               >
                 {t('format.currency', { value: combinedFeesUSD })}
               </Typography>
@@ -110,8 +128,19 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         </CardIconButton>
       </Box>
       <Collapse timeout={225} in={cardExpanded} mountOnEnter>
-        <Box px={2} pb={2}>
-          <Box display="flex" justifyContent="space-between" mb={0.5}>
+        <Box
+          sx={{
+            px: 2,
+            pb: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              mb: 0.5,
+            }}
+          >
             <Typography variant="body2">{t('main.fees.network')}</Typography>
             <FeeBreakdownTooltip gasCosts={gasCosts}>
               <Typography variant="body2">
@@ -122,7 +151,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             </FeeBreakdownTooltip>
           </Box>
           {feeCosts.length ? (
-            <Box display="flex" justifyContent="space-between" mb={0.5}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                mb: 0.5,
+              }}
+            >
               <Typography variant="body2">{t('main.fees.provider')}</Typography>
               <FeeBreakdownTooltip feeCosts={feeCosts}>
                 <Typography variant="body2">
@@ -134,7 +169,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             </Box>
           ) : null}
           {showIntegratorFeeCollectionDetails ? (
-            <Box display="flex" justifyContent="space-between" mb={0.5}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                mb: 0.5,
+              }}
+            >
               <Typography variant="body2">
                 {feeConfig?.name
                   ? t('main.fees.integrator', { tool: feeConfig.name })
@@ -160,7 +201,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               )}
             </Box>
           ) : null}
-          <Box display="flex" justifyContent="space-between" mb={0.5}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              mb: 0.5,
+            }}
+          >
             <Typography variant="body2">{t('main.priceImpact')}</Typography>
             <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
               <Typography variant="body2">
@@ -170,7 +217,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           </Box>
           {!isRouteDone(route) ? (
             <>
-              <Box display="flex" justifyContent="space-between" mb={0.5}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  mb: 0.5,
+                }}
+              >
                 <Typography variant="body2">{t('main.maxSlippage')}</Typography>
                 <Tooltip title={t('tooltip.slippage')} sx={{ cursor: 'help' }}>
                   <Typography variant="body2">
@@ -180,7 +233,12 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   </Typography>
                 </Tooltip>
               </Box>
-              <Box display="flex" justifyContent="space-between">
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                }}
+              >
                 <Typography variant="body2">{t('main.minReceived')}</Typography>
                 <Tooltip
                   title={t('tooltip.minReceived')}

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.12.6-alpha.0'
+export const version = '3.13.0'

package/src/hooks/useGasRefuel.ts

@@ -19,29 +19,18 @@ export const useGasRefuel = () => {
   const toChain = getChainById(toChainId)
   const fromChain = getChainById(fromChainId)
 
-  const { accounts } = useAccount()
+  const { account: toAccount } = useAccount({ chainType: toChain?.chainType })
 
-  const fromAccount = accounts.find(
-    (account) => account.chainType === fromChain?.chainType
-  )
-
-  const toAccount = accounts.find(
-    (account) => account.chainType === toChain?.chainType
-  )
+  const effectiveToAddress = toAddress || toAccount?.address
 
-  const isFromContractAddress = useIsContractAddress(
-    fromAccount?.address,
-    fromChainId,
-    fromAccount?.chainType
-  )
   const isToContractAddress = useIsContractAddress(
-    toAddress,
+    effectiveToAddress,
     toChainId,
     toChain?.chainType
   )
 
   const { token: destinationNativeToken } = useTokenBalance(
-    toAddress || toAccount?.address,
+    effectiveToAddress,
     toChainId ? toChain?.nativeToken : undefined
   )
 
@@ -55,9 +44,8 @@ export const useGasRefuel = () => {
   const isChainTypeSatisfied =
     fromChain?.chainType !== toChain?.chainType ? Boolean(toAddress) : true
 
-  const isToAddressSatisfied = isFromContractAddress
-    ? toAddress && toAddress !== fromAccount?.address && !isToContractAddress
-    : true
+  // We should not refuel to the contract address
+  const isToAddressSatisfied = effectiveToAddress && !isToContractAddress
 
   const enabled = useMemo(() => {
     if (

package/src/hooks/useIsContractAddress.ts

@@ -16,6 +16,7 @@ export const useIsContractAddress = (
       enabled: Boolean(chainType === ChainType.EVM && chainId),
     },
   })
+
   const isContractAddress = !!contractCode
   return isContractAddress
 }

package/src/hooks/useRoutes.ts

@@ -177,6 +177,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         signal,
       }) => {
         const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals)
+        const toAmount = parseUnits(toTokenAmount, toToken!.decimals)
         const formattedSlippage = Number.parseFloat(slippage) / 100
 
         const allowBridges = swapOnly
@@ -210,17 +211,18 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           fromAddress,
           toAddress,
           fromAmount,
+          toAmount,
           slippage: formattedSlippage,
         })
 
-        if (subvariant === 'custom' && contractCalls && toTokenAmount) {
+        if (subvariant === 'custom' && contractCalls && toAmount) {
           const contractCallQuote = await getContractCallsQuote(
             {
               // Contract calls are enabled only when fromAddress is set
               fromAddress: fromAddress as string,
               fromChain: fromChainId,
               fromToken: fromTokenAddress,
-              toAmount: toTokenAmount,
+              toAmount: toAmount.toString(),
               toChain: toChainId,
               toToken: toTokenAddress,
               contractCalls,
@@ -265,8 +267,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             fromAddress: contractCallQuote.action.fromAddress,
             toChainId: contractCallQuote.action.toChainId,
             toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
-            toAmount: toTokenAmount,
-            toAmountMin: toTokenAmount,
+            toAmount: contractCallQuote.estimate.toAmount,
+            toAmountMin: contractCallQuote.estimate.toAmountMin,
             toToken: toToken!,
             toAddress:
               contractCallQuote.action.toAddress ||

package/src/i18n/en.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "Active transactions",
+    "amount": "Amount",
     "bookmarkedWallets": "Bookmarked wallets",
     "bridge": "Bridge",
     "checkout": "Checkout",
     "checkoutDetails": "Checkout details",
     "deposit": "Deposit",
     "depositDetails": "Deposit details",
+    "depositTo": "Deposit to",
     "exchange": "Exchange",
     "from": "Exchange from",
     "gas": "Gas",
@@ -265,13 +267,15 @@
     "stepBridge": "Bridge",
     "stepBridgeAndBuy": "Bridge and buy",
     "stepBridgeAndDeposit": "Bridge and deposit",
+    "stepBuy": "Buy",
+    "stepDeposit": "Deposit",
     "stepDetails": "{{tool}} via LI.FI",
     "stepSwap": "Swap",
     "stepSwapAndBridge": "Swap and bridge",
     "stepSwapAndBuy": "Swap and buy",
     "stepSwapAndDeposit": "Swap and deposit",
-    "transferId": "Transfer ID",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
+    "transferId": "Transfer ID",
     "tags": {
       "cheapest": "Best Return",
       "fastest": "Fastest"

package/src/i18n/i18next.d.ts

@@ -2,13 +2,9 @@ import en from './en.json' with { type: 'json' }
 
 const defaultResource = { translation: en }
 
-declare global {
-  namespace GeneralTranslation {
-    declare module 'i18next' {
-      interface CustomTypeOptions {
-        defaultNS: 'translation'
-        resources: typeof defaultResource
-      }
-    }
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'translation'
+    resources: typeof defaultResource
   }
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 export type * from '@lifi/sdk'
-export { ChainType, ChainId } from '@lifi/sdk'
+export { ChainType, ChainId, CoinKey } from '@lifi/sdk'
 export { App as LiFiWidget } from './App.js'
 export type { WidgetDrawer } from './AppDrawer.js'
 export * from './components/ContractComponent/ItemPrice.js'

package/src/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -15,17 +15,28 @@ export const ActiveTransactionsEmpty: React.FC = () => {
         paddingY: 12,
       }}
     >
-      <Typography fontSize={48}>
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
         <SwapHoriz fontSize="inherit" />
       </Typography>
-      <Typography fontSize={18} fontWeight={700}>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
         {t('info.title.emptyActiveTransactions')}
       </Typography>
       <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
       >
         {t('info.message.emptyActiveTransactions')}
       </Typography>

package/src/pages/MainPage/MainPage.tsx

@@ -31,25 +31,32 @@ export const MainPage: React.FC = () => {
       : subvariant === 'refuel'
         ? t('header.gas')
         : t('header.exchange')
+
   useHeader(title)
 
+  const marginSx = { marginBottom: 2 }
+
   return (
     <PageContainer>
-      <ActiveTransactions sx={{ marginBottom: 2 }} />
+      <ActiveTransactions sx={marginSx} />
       {custom ? (
-        <ContractComponent sx={{ marginBottom: 2 }}>
-          {contractComponent}
-        </ContractComponent>
+        <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
       ) : null}
       <SelectChainAndToken mb={2} />
-      {!custom ? (
-        <AmountInput formType="from" sx={{ marginBottom: 2 }} />
+      {!custom || subvariantOptions?.custom === 'deposit' ? (
+        <AmountInput formType="from" sx={marginSx} />
       ) : null}
-      {!wideVariant ? <Routes sx={{ marginBottom: 2 }} /> : null}
-      <SendToWalletButton sx={{ marginBottom: 2 }} />
+      {!wideVariant ? <Routes sx={marginSx} /> : null}
+      <SendToWalletButton sx={marginSx} />
       <GasRefuelMessage mb={2} />
       <MainMessages mb={2} />
-      <Box display="flex" mb={showPoweredBy ? 1 : 3} gap={1.5}>
+      <Box
+        sx={{
+          display: 'flex',
+          mb: showPoweredBy ? 1 : 3,
+          gap: 1.5,
+        }}
+      >
         <ReviewButton />
         <SendToWalletExpandButton />
       </Box>

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -41,13 +41,27 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   return (
     <FullPageContainer disableGutters>
-      <Box pb={2} px={3} ref={headerRef}>
+      <Box
+        ref={headerRef}
+        sx={{
+          pb: 2,
+          px: 3,
+        }}
+      >
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
-        <Box mt={!hideChainSelect ? 2 : 0}>
+        <Box
+          sx={{
+            mt: !hideChainSelect ? 2 : 0,
+          }}
+        >
           <SearchTokenInput />
         </Box>
       </Box>
-      <Box height={minListHeight}>
+      <Box
+        sx={{
+          height: minListHeight,
+        }}
+      >
         <TokenList
           parentRef={listParentRef}
           height={tokenListHeight}

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -148,7 +148,12 @@ export const BookmarkAddressSheet = forwardRef<
         {validatedWallet ? (
           <SheetAddressContainer>
             {validatedWallet?.name ? (
-              <Typography fontWeight={600} mb={0.5}>
+              <Typography
+                sx={{
+                  fontWeight: 600,
+                  mb: 0.5,
+                }}
+              >
                 {validatedWallet?.name}
               </Typography>
             ) : null}