@lifi/widget 3.12.4 → 3.12.6-beta.0

package/src/components/ContractComponent/ItemPrice.tsx

@@ -1,5 +1,6 @@
 import type { ContractCall } from '@lifi/sdk'
 import { useEffect } from 'react'
+import { formatUnits } from 'viem'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import type { TokenAmount } from '../../types/token.js'
 import { Token } from '../Token/Token.js'
@@ -19,9 +20,13 @@ export const ItemPrice: React.FC<ItemPriceProps> = ({
     if (token) {
       setFieldValue('toChain', token.chainId, { isTouched: true })
       setFieldValue('toToken', token.address, { isTouched: true })
-      setFieldValue('toAmount', token.amount?.toString(), {
-        isTouched: true,
-      })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
     }
     if (contractCalls) {
       setFieldValue('contractCalls', contractCalls, {

package/src/components/ContractComponent/NFT/NFT.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { formatUnits } from 'viem'
 import { useFieldActions } from '../../../stores/form/useFieldActions.js'
 import { NFTBase } from './NFTBase.js'
 import type { NFTProps } from './types.js'
@@ -18,9 +19,13 @@ export const NFT: React.FC<NFTProps> = ({
     if (token) {
       setFieldValue('toChain', token.chainId, { isTouched: true })
       setFieldValue('toToken', token.address, { isTouched: true })
-      setFieldValue('toAmount', token.amount?.toString(), {
-        isTouched: true,
-      })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
     }
     if (contractCall) {
       setFieldValue('contractCalls', [contractCall], {

package/src/components/Header/WalletHeader.tsx

@@ -33,15 +33,18 @@ const useInternalWalletManagement = () => {
   const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)
 
   const shouldShowWalletMenu =
-    !useExternalWalletProvidersOnly && !isSplitVariant && !isWalletMenuHidden
+    !useExternalWalletProvidersOnly && !isWalletMenuHidden
 
-  return shouldShowWalletMenu
+  return {
+    shouldShowWalletMenu,
+    isSplitVariant,
+  }
 }
 
 export const WalletHeader: React.FC = () => {
-  const shouldShowWalletMenu = useInternalWalletManagement()
+  const { shouldShowWalletMenu, isSplitVariant } = useInternalWalletManagement()
 
-  return shouldShowWalletMenu ? (
+  return shouldShowWalletMenu && !isSplitVariant ? (
     <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
       <WalletMenuButton />
     </HeaderAppBar>
@@ -49,8 +52,8 @@ export const WalletHeader: React.FC = () => {
 }
 
 export const SplitWalletMenuButton: React.FC = () => {
-  const shouldShowWalletMenu = useInternalWalletManagement()
-  return shouldShowWalletMenu ? <WalletMenuButton /> : null
+  const { shouldShowWalletMenu, isSplitVariant } = useInternalWalletManagement()
+  return shouldShowWalletMenu && isSplitVariant ? <WalletMenuButton /> : null
 }
 
 export const WalletMenuButton: React.FC = () => {

package/src/components/RouteCard/RouteCard.tsx

@@ -26,7 +26,7 @@ export const RouteCard: React.FC<
   ...other
 }) => {
   const { t } = useTranslation()
-  const { subvariant } = useWidgetConfig()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
   const [cardExpanded, setCardExpanded] = useState(defaulExpanded)
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -35,7 +35,7 @@ export const RouteCard: React.FC<
   }
 
   const token: TokenAmount =
-    subvariant === 'custom'
+    subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : { ...route.toToken, amount: BigInt(route.toAmount) }
   const impactToken: TokenAmount | undefined =

package/src/components/Routes/Routes.tsx

@@ -16,7 +16,8 @@ import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
 export const Routes: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { subvariant, useRecommendedRoute } = useWidgetConfig()
+  const { subvariant, subvariantOptions, useRecommendedRoute } =
+    useWidgetConfig()
   const {
     routes,
     isLoading,
@@ -42,11 +43,16 @@ export const Routes: React.FC<CardProps> = (props) => {
   const showAll =
     !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1
 
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.receive')
+        : t('header.youPay')
+      : t('header.receive')
+
   return (
     <Card {...props}>
-      <CardTitle>
-        {subvariant === 'custom' ? t('header.youPay') : t('header.receive')}
-      </CardTitle>
+      <CardTitle>{title}</CardTitle>
       <ProgressToNextUpdate
         updatedAt={dataUpdatedAt || new Date().getTime()}
         timeToUpdate={refetchTime}

package/src/components/Routes/RoutesExpanded.tsx

@@ -64,7 +64,7 @@ export const RoutesExpanded = () => {
 export const RoutesExpandedElement = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { subvariant } = useWidgetConfig()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
   const routesRef = useRef<Route[]>()
   const emitter = useWidgetEvents()
   const routesActiveRef = useRef(false)
@@ -118,6 +118,13 @@ export const RoutesExpandedElement = () => {
     emitter.emit(WidgetEvent.WidgetExpanded, expanded)
   }, [emitter, expanded])
 
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.deposit')
+        : t('header.youPay')
+      : t('header.receive')
+
   return (
     <RoutesExpandedCollapse
       timeout={timeout.enter}
@@ -130,9 +137,7 @@ export const RoutesExpandedElement = () => {
           <ScrollableContainer>
             <Header>
               <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
-                {subvariant === 'custom'
-                  ? t('header.youPay')
-                  : t('header.receive')}
+                {title}
               </Typography>
               <ProgressToNextUpdate
                 updatedAt={dataUpdatedAt || new Date().getTime()}

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -28,7 +28,14 @@ import { SendToWalletCardHeader } from './SendToWallet.style.js'
 export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { disabledUI, hiddenUI, toAddress, toAddresses } = useWidgetConfig()
+  const {
+    disabledUI,
+    hiddenUI,
+    toAddress,
+    toAddresses,
+    subvariant,
+    subvariantOptions,
+  } = useWidgetConfig()
   const { showSendToWallet } = useSendToWalletStore()
   const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
     'toAddress',
@@ -114,6 +121,11 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const isOpenCollapse =
     requiredToAddress || (showSendToWallet && !hiddenToAddress)
 
+  const title =
+    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'
+      ? t('header.depositTo')
+      : t('header.sendToWallet')
+
   return (
     <Collapse
       timeout={collapseTransitionTime.current}
@@ -127,9 +139,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
         onClick={disabledForChanges ? undefined : handleOnClick}
         sx={{ width: '100%', ...props.sx }}
       >
-        <CardTitle required={requiredToAddress}>
-          {t('header.sendToWallet')}
-        </CardTitle>
+        <CardTitle required={requiredToAddress}>{title}</CardTitle>
         <Box display="flex" justifyContent="center" alignItems="center">
           <SendToWalletCardHeader
             avatar={

package/src/components/Step/Step.tsx

@@ -58,8 +58,8 @@ export const Step: React.FC<{
       default:
         return subvariant === 'custom'
           ? subvariantOptions?.custom === 'deposit'
-            ? t('main.stepSwapAndDeposit')
-            : t('main.stepSwapAndBuy')
+            ? t('main.stepDeposit')
+            : t('main.stepBuy')
           : t('main.stepSwap')
     }
   }

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.12.4'
+export const version = '3.12.6-beta.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/MainPage/MainPage.tsx

@@ -31,22 +31,23 @@ 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}>

package/src/types/widget.ts

@@ -141,7 +141,8 @@ export interface CalculateFeeParams {
   toTokenAddress: string
   fromAddress?: string
   toAddress?: string
-  fromAmount: bigint
+  fromAmount?: bigint
+  toAmount?: bigint
   slippage: number
 }
 

package/tsconfig.json

@@ -7,7 +7,9 @@
     "outDir": "dist/esm",
     "rootDir": "./src",
     "module": "NodeNext",
-    "moduleResolution": "NodeNext"
+    "moduleResolution": "NodeNext",
+    "skipLibCheck": true
   },
-  "include": ["./src/**/*", "./src/**/*.json"]
+  "include": ["./src/**/*", "./src/**/*.json"],
+  "references": [{ "path": "../wallet-management" }]
 }