@lifi/widget 3.12.3-beta.1 → 3.12.4

package/src/components/AmountInput/AmountInput.tsx

@@ -70,7 +70,6 @@ export const AmountInputBase: React.FC<
   ...props
 }) => {
   const { t } = useTranslation()
-  const { subvariant, subvariantOptions } = useWidgetConfig()
   const ref = useRef<HTMLInputElement>(null)
   const amountKey = FormKeyHelper.getAmountKey(formType)
   const { onChange, onBlur, value } = useFieldController({ name: amountKey })
@@ -99,16 +98,9 @@ export const AmountInputBase: React.FC<
     }
   }, [value])
 
-  const title =
-    subvariant === 'custom'
-      ? subvariantOptions?.custom === 'deposit'
-        ? t('header.amount')
-        : t('header.youPay')
-      : t('header.send')
-
   return (
     <InputCard {...props}>
-      <CardTitle>{title}</CardTitle>
+      <CardTitle>{t('header.send')}</CardTitle>
       <FormContainer>
         <AmountInputStartAdornment formType={formType} />
         <FormControl fullWidth>

package/src/components/ContractComponent/ItemPrice.tsx

@@ -1,6 +1,5 @@
 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'
@@ -20,13 +19,9 @@ export const ItemPrice: React.FC<ItemPriceProps> = ({
     if (token) {
       setFieldValue('toChain', token.chainId, { isTouched: true })
       setFieldValue('toToken', token.address, { isTouched: true })
-      setFieldValue(
-        'toAmount',
-        token.amount ? formatUnits(token.amount, token.decimals) : '',
-        {
-          isTouched: true,
-        }
-      )
+      setFieldValue('toAmount', token.amount?.toString(), {
+        isTouched: true,
+      })
     }
     if (contractCalls) {
       setFieldValue('contractCalls', contractCalls, {

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

@@ -1,5 +1,4 @@
 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'
@@ -19,13 +18,9 @@ export const NFT: React.FC<NFTProps> = ({
     if (token) {
       setFieldValue('toChain', token.chainId, { isTouched: true })
       setFieldValue('toToken', token.address, { isTouched: true })
-      setFieldValue(
-        'toAmount',
-        token.amount ? formatUnits(token.amount, token.decimals) : '',
-        {
-          isTouched: true,
-        }
-      )
+      setFieldValue('toAmount', token.amount?.toString(), {
+        isTouched: true,
+      })
     }
     if (contractCall) {
       setFieldValue('contractCalls', [contractCall], {

package/src/components/PoweredBy/PoweredBy.tsx

@@ -1,8 +1,22 @@
 import { Box, Tooltip, Typography } from '@mui/material'
 import { version } from '../../config/version.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { Link } from './PoweredBy.style.js'
 
+const poweredByConfig = {
+  default: {
+    url: 'https://li.fi',
+    text: 'LI.FI',
+  },
+  jumper: {
+    url: 'https://jumper.exchange',
+    text: 'Jumper',
+  },
+}
+
 export const PoweredBy: React.FC = () => {
+  const { poweredBy = 'default' } = useWidgetConfig()
+
   return (
     <Box
       pt={1}
@@ -16,7 +30,7 @@ export const PoweredBy: React.FC = () => {
     >
       <Tooltip title={`v${version}`} enterDelay={1000}>
         <Link
-          href="https://li.fi"
+          href={poweredByConfig[poweredBy].url}
           target="_blank"
           underline="none"
           color="text.primary"
@@ -30,7 +44,7 @@ export const PoweredBy: React.FC = () => {
             Powered by
           </Typography>
           <Typography color="text.primary" fontSize={12} fontWeight={600}>
-            LI.FI
+            {poweredByConfig[poweredBy].text}
           </Typography>
         </Link>
       </Tooltip>

package/src/components/RouteCard/RouteCard.tsx

@@ -26,7 +26,7 @@ export const RouteCard: React.FC<
   ...other
 }) => {
   const { t } = useTranslation()
-  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const { subvariant } = 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' && subvariantOptions?.custom !== 'deposit'
+    subvariant === 'custom'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : { ...route.toToken, amount: BigInt(route.toAmount) }
   const impactToken: TokenAmount | undefined =

package/src/components/Routes/Routes.tsx

@@ -16,8 +16,7 @@ import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
 export const Routes: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { subvariant, subvariantOptions, useRecommendedRoute } =
-    useWidgetConfig()
+  const { subvariant, useRecommendedRoute } = useWidgetConfig()
   const {
     routes,
     isLoading,
@@ -43,16 +42,11 @@ 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>{title}</CardTitle>
+      <CardTitle>
+        {subvariant === 'custom' ? t('header.youPay') : t('header.receive')}
+      </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, subvariantOptions } = useWidgetConfig()
+  const { subvariant } = useWidgetConfig()
   const routesRef = useRef<Route[]>()
   const emitter = useWidgetEvents()
   const routesActiveRef = useRef(false)
@@ -118,13 +118,6 @@ 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}
@@ -137,7 +130,9 @@ export const RoutesExpandedElement = () => {
           <ScrollableContainer>
             <Header>
               <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
-                {title}
+                {subvariant === 'custom'
+                  ? t('header.youPay')
+                  : t('header.receive')}
               </Typography>
               <ProgressToNextUpdate
                 updatedAt={dataUpdatedAt || new Date().getTime()}

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -28,14 +28,7 @@ import { SendToWalletCardHeader } from './SendToWallet.style.js'
 export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const {
-    disabledUI,
-    hiddenUI,
-    toAddress,
-    toAddresses,
-    subvariant,
-    subvariantOptions,
-  } = useWidgetConfig()
+  const { disabledUI, hiddenUI, toAddress, toAddresses } = useWidgetConfig()
   const { showSendToWallet } = useSendToWalletStore()
   const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
     'toAddress',
@@ -121,11 +114,6 @@ 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}
@@ -139,7 +127,9 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
         onClick={disabledForChanges ? undefined : handleOnClick}
         sx={{ width: '100%', ...props.sx }}
       >
-        <CardTitle required={requiredToAddress}>{title}</CardTitle>
+        <CardTitle required={requiredToAddress}>
+          {t('header.sendToWallet')}
+        </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.stepDeposit')
-            : t('main.stepBuy')
+            ? t('main.stepSwapAndDeposit')
+            : t('main.stepSwapAndBuy')
           : t('main.stepSwap')
     }
   }

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.12.3-beta.1'
+export const version = '3.12.4'

package/src/hooks/useFromTokenSufficiency.ts

@@ -77,7 +77,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
     enabled: Boolean(account.address && token && !isTokenAddressBalanceLoading),
     refetchInterval,
     staleTime: refetchInterval,
-    placeholderData: keepPreviousData,
+    placeholderData: account.address ? keepPreviousData : undefined,
   })
 
   return {

package/src/hooks/useGasRefuel.ts

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

package/src/hooks/useIsContractAddress.ts

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

package/src/hooks/useRoutes.ts

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

package/src/i18n/en.json

@@ -52,14 +52,12 @@
   },
   "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",
@@ -267,15 +265,13 @@
     "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",
-    "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "transferId": "Transfer ID",
+    "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {
       "cheapest": "Best Return",
       "fastest": "Fastest"

package/src/i18n/i18next.d.ts

@@ -2,9 +2,13 @@ import en from './en.json' with { type: 'json' }
 
 const defaultResource = { translation: en }
 
-declare module 'i18next' {
-  interface CustomTypeOptions {
-    defaultNS: 'translation'
-    resources: typeof defaultResource
+declare global {
+  namespace GeneralTranslation {
+    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, CoinKey } from '@lifi/sdk'
+export { ChainType, ChainId } 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,23 +31,22 @@ export const MainPage: React.FC = () => {
       : subvariant === 'refuel'
         ? t('header.gas')
         : t('header.exchange')
-
   useHeader(title)
 
-  const marginSx = { marginBottom: 2 }
-
   return (
     <PageContainer>
-      <ActiveTransactions sx={marginSx} />
+      <ActiveTransactions sx={{ marginBottom: 2 }} />
       {custom ? (
-        <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
+        <ContractComponent sx={{ marginBottom: 2 }}>
+          {contractComponent}
+        </ContractComponent>
       ) : null}
       <SelectChainAndToken mb={2} />
-      {!custom || subvariantOptions?.custom === 'deposit' ? (
-        <AmountInput formType="from" sx={marginSx} />
+      {!custom ? (
+        <AmountInput formType="from" sx={{ marginBottom: 2 }} />
       ) : null}
-      {!wideVariant ? <Routes sx={marginSx} /> : null}
-      <SendToWalletButton sx={marginSx} />
+      {!wideVariant ? <Routes sx={{ marginBottom: 2 }} /> : null}
+      <SendToWalletButton sx={{ marginBottom: 2 }} />
       <GasRefuelMessage mb={2} />
       <MainMessages mb={2} />
       <Box display="flex" mb={showPoweredBy ? 1 : 3} gap={1.5}>

package/src/types/widget.ts

@@ -141,8 +141,7 @@ export interface CalculateFeeParams {
   toTokenAddress: string
   fromAddress?: string
   toAddress?: string
-  fromAmount?: bigint
-  toAmount?: bigint
+  fromAmount: bigint
   slippage: number
 }
 
@@ -189,6 +188,8 @@ export type WidgetLanguages = {
   default?: LanguageKey
 } & AllowDeny<LanguageKey>
 
+export type PoweredByType = 'default' | 'jumper'
+
 export interface WidgetConfig {
   fromChain?: number
   toChain?: number
@@ -240,6 +241,7 @@ export interface WidgetConfig {
   languageResources?: LanguageResources
   explorerUrls?: Record<number, string[]> &
     Partial<Record<'internal', string[]>>
+  poweredBy?: PoweredByType
 }
 
 export interface FormFieldOptions {

package/tsconfig.json

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