@lifi/widget 4.3.1 → 4.4.0

package/package.json

@@ -1,10 +1,28 @@
 {
   "name": "@lifi/widget",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/esm/components/Skeleton/WidgetSkeleton.d.ts",
+      "import": "./dist/esm/components/Skeleton/WidgetSkeleton.js",
+      "default": "./dist/esm/components/Skeleton/WidgetSkeleton.js"
+    },
+    "./shared": {
+      "types": "./dist/esm/shared.d.ts",
+      "import": "./dist/esm/shared.js",
+      "default": "./dist/esm/shared.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "author": "Eugene Chybisov <eugene@li.finance>",
   "homepage": "https://github.com/lifinance/widget",
@@ -41,15 +59,15 @@
     "@tanstack/react-router": "^1.170.17",
     "@tanstack/react-virtual": "^3.14.5",
     "eventemitter3": "^5.0.4",
-    "i18next": "^26.3.4",
+    "i18next": "^26.3.6",
     "microdiff": "^1.5.0",
     "motion": "^12.42.2",
-    "react-i18next": "^17.0.8",
-    "react-intersection-observer": "^10.0.3",
+    "react-i18next": "^17.0.9",
+    "react-intersection-observer": "^10.1.0",
     "react-transition-group": "^4.4.5",
     "zustand": "^5.0.14",
-    "@lifi/wallet-management": "4.1.1",
-    "@lifi/widget-provider": "4.2.0"
+    "@lifi/wallet-management": "4.1.2",
+    "@lifi/widget-provider": "4.3.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.90.0",
@@ -61,6 +79,9 @@
     "*": {
       "skeleton": [
         "./dist/esm/components/Skeleton/WidgetSkeleton.d.ts"
+      ],
+      "shared": [
+        "./dist/esm/shared.d.ts"
       ]
     }
   },
@@ -78,18 +99,5 @@
     "!*.tmp",
     "!*.env",
     "!tsconfig.json"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./skeleton": {
-      "types": "./dist/esm/components/Skeleton/WidgetSkeleton.d.ts",
-      "import": "./dist/esm/components/Skeleton/WidgetSkeleton.js",
-      "default": "./dist/esm/components/Skeleton/WidgetSkeleton.js"
-    },
-    "./package.json": "./package.json"
-  }
+  ]
 }

package/src/components/RouteCard/RouteTokens.tsx

@@ -9,7 +9,8 @@ export const RouteTokens: React.FC<{
   route: RouteExtended
   showEssentials?: boolean
   defaultExpanded?: boolean
-}> = ({ route, showEssentials, defaultExpanded }) => {
+  fromSlot?: React.ReactNode
+}> = ({ route, showEssentials, defaultExpanded, fromSlot }) => {
   const { mode } = useWidgetConfig()
 
   const fromToken = {
@@ -30,7 +31,7 @@ export const RouteTokens: React.FC<{
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-      {fromToken ? <Token token={fromToken} /> : null}
+      {fromSlot ?? (fromToken ? <Token token={fromToken} /> : null)}
       <Box
         sx={{
           width: 40,

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -27,7 +27,16 @@ import {
   SendToWalletRequiredLabelText,
 } from './SendToWalletButton.style.js'
 
-export const SendToWalletButton: React.FC<CardProps> = (props) => {
+export const SendToWalletButton: React.FC<
+  CardProps & {
+    onEditAddress?: (() => void) | null
+    onClearAddress?: () => void
+    // Keep the card visible (and flag it required when empty) even when the
+    // widget's own toAddress requirement is off, e.g. a user-settable checkout
+    // recipient that must be filled before continuing.
+    requireAddress?: boolean
+  }
+> = ({ onEditAddress, onClearAddress, requireAddress, ...props }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =
@@ -87,7 +96,15 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
 
   const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress
 
+  // `onEditAddress === null` renders the card read-only (consumer-controlled,
+  // e.g. a fixed checkout recipient); a function overrides the default route nav.
+  const readOnly = onEditAddress === null || disabledForChanges
+
   const handleOnClick = () => {
+    if (onEditAddress !== undefined) {
+      onEditAddress?.()
+      return
+    }
     navigate({
       to: toAddresses?.length
         ? navigationRoutes.configuredWallets
@@ -97,6 +114,10 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
 
   const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation()
+    if (onClearAddress) {
+      onClearAddress()
+      return
+    }
     setFieldValue('toAddress', '', { isTouched: true })
     setSelectedBookmark()
   }
@@ -114,8 +135,9 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
     return () => clearTimeout(timeout)
   }, [])
 
+  const addressRequired = requireAddress || requiredToAddress
   const isOpenCollapse =
-    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)
+    !hiddenToAddress && (addressRequired || !!toAddressFieldValue)
 
   const title =
     mode === 'custom' && modeOptions?.custom?.type === 'deposit'
@@ -131,12 +153,12 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
     >
       <Card
         role="button"
-        onClick={disabledForChanges ? undefined : handleOnClick}
+        onClick={readOnly ? undefined : handleOnClick}
         sx={{ width: '100%', ...props.sx }}
       >
         <SendToWalletCardTitleRow>
           <CardTitle sx={{ p: 0 }}>{title}</CardTitle>
-          {requiredToAddress && !toAddressFieldValue ? (
+          {addressRequired && !toAddressFieldValue ? (
             <SendToWalletRequiredLabel variant="warning">
               <WarningRounded sx={{ fontSize: 14 }} />
               <SendToWalletRequiredLabelText type="icon">
@@ -165,7 +187,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
             subheader={headerSubheader}
             selected={!!toAddressFieldValue || disabledToAddress}
             action={
-              toAddressFieldValue && !disabledForChanges ? (
+              toAddressFieldValue && !readOnly ? (
                 <CardIconButton onClick={clearSelectedBookmark} size="small">
                   <CloseRounded fontSize="inherit" />
                 </CardIconButton>

package/src/components/TransactionCard/ActiveTransactionCard.style.tsx

@@ -22,3 +22,14 @@ export const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =
     width: 24,
     height: 24,
   }))
+
+export const RetryButton: React.FC<React.ComponentProps<typeof IconButton>> =
+  styled(IconButton)(({ theme }) => ({
+    fontWeight: 700,
+    fontSize: 12,
+    height: 24,
+    borderRadius: theme.vars.shape.borderRadius,
+    padding: theme.spacing(0.5, 1.5),
+    color: theme.vars.palette.text.primary,
+    backgroundColor: theme.vars.palette.background.paper,
+  }))

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.3.1'
+export const version = '4.4.0'

package/src/hooks/useDisplayedTokens.ts

@@ -0,0 +1,70 @@
+import type { TokenExtended } from '@lifi/sdk'
+import { useMemo } from 'react'
+import type { FormType } from '../stores/form/types.js'
+import { usePinnedTokensStore } from '../stores/pinnedTokens/PinnedTokensStore.js'
+import { isSearchMatch } from '../utils/tokenList.js'
+import { useTokens } from './useTokens.js'
+
+export type IsPinnedToken = (chainId: number, tokenAddress: string) => boolean
+
+// Balance-free core shared by useTokenList and useTokenBalances.
+export const useDisplayedTokens = (
+  selectedChainId?: number,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  search?: string
+): {
+  allTokens: Record<number, TokenExtended[]> | undefined
+  displayedTokensList: TokenExtended[]
+  isPinnedToken: IsPinnedToken | undefined
+  isTokensLoading: boolean
+  isSearchLoading: boolean
+} => {
+  const {
+    allTokens,
+    isLoading: isTokensLoading,
+    isSearchLoading,
+  } = useTokens(formType, search, isAllNetworks ? undefined : selectedChainId)
+
+  const pinnedTokens = usePinnedTokensStore((state) => state.pinnedTokens)
+
+  const isPinnedToken = useMemo<IsPinnedToken | undefined>(() => {
+    if (isAllNetworks) {
+      const pinnedSet = new Set<string>()
+      Object.entries(pinnedTokens).forEach(([chainIdStr, addresses]) => {
+        const chainId = Number.parseInt(chainIdStr, 10)
+        addresses.forEach((address) => {
+          pinnedSet.add(`${chainId}-${address.toLowerCase()}`)
+        })
+      })
+      return (chainId, tokenAddress) =>
+        pinnedSet.has(`${chainId}-${tokenAddress.toLowerCase()}`)
+    }
+    if (selectedChainId) {
+      const chainPinnedTokens = pinnedTokens[selectedChainId] || []
+      const pinnedSet = new Set(
+        chainPinnedTokens.map((addr) => addr.toLowerCase())
+      )
+      return (chainId, tokenAddress) =>
+        chainId === selectedChainId && pinnedSet.has(tokenAddress.toLowerCase())
+    }
+    return undefined
+  }, [isAllNetworks, selectedChainId, pinnedTokens])
+
+  const displayedTokensList = useMemo(() => {
+    const tokensByChain = isAllNetworks
+      ? Object.values(allTokens ?? {}).flat()
+      : selectedChainId
+        ? allTokens?.[selectedChainId]
+        : undefined
+    return tokensByChain?.filter((t) => isSearchMatch(t, search)) ?? []
+  }, [allTokens, isAllNetworks, selectedChainId, search])
+
+  return {
+    allTokens,
+    displayedTokensList,
+    isPinnedToken,
+    isTokensLoading,
+    isSearchLoading,
+  }
+}

package/src/hooks/useListHeight.ts

@@ -32,6 +32,10 @@ const getContentHeight = (
     console.warn(
       `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`
     )
+    // Restore the height we zeroed above before returning early
+    if (listParentElement && oldHeight !== undefined) {
+      listParentElement.style.height = oldHeight
+    }
     return 0
   }
   const { height: containerHeight } = containerElement.getBoundingClientRect()