@lifi/widget 4.7.1 → 4.9.0

package/src/hooks/useTools.ts

@@ -1,56 +1,61 @@
-import { getTools, type ToolsResponse } from '@lifi/sdk'
+import type { ToolsResponse } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
+import { useCallback, useEffect } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getToolsQueryOptions } from '../queries/getTools.js'
 import { useSettingsStoreContext } from '../stores/settings/SettingsStore.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
-import { getQueryKey } from '../utils/queries.js'
+
+const refetchInterval = 180_000
 
 export const useTools = (): { tools: ToolsResponse | undefined } => {
-  const { bridges, exchanges, keyPrefix } = useWidgetConfig()
+  const { bridges, exchanges, queryScopeKey } = useWidgetConfig()
   const settingsStore = useSettingsStoreContext()
   const sdkClient = useSDKClient()
 
-  const { data } = useQuery({
-    queryKey: [
-      getQueryKey('tools', keyPrefix),
-      bridges?.allow,
-      bridges?.deny,
-      exchanges?.allow,
-      exchanges?.deny,
-    ],
-    queryFn: async (): Promise<ToolsResponse> => {
-      const tools = await getTools(sdkClient)
-      const bridgesConfigSets = getConfigItemSets(
-        bridges,
-        (bridges) => new Set(bridges)
-      )
-      const exchangesConfigSets = getConfigItemSets(
-        exchanges,
-        (exchanges) => new Set(exchanges)
-      )
-      const result = {
+  const selectAllowedTools = useCallback(
+    (tools: ToolsResponse): ToolsResponse => {
+      const bridgeSets = getConfigItemSets(bridges, (keys) => new Set(keys))
+      const exchangeSets = getConfigItemSets(exchanges, (keys) => new Set(keys))
+      return {
         bridges: tools.bridges.filter((bridge) =>
-          isItemAllowedForSets(bridge.key, bridgesConfigSets)
+          isItemAllowedForSets(bridge.key, bridgeSets)
         ),
         exchanges: tools.exchanges.filter((exchange) =>
-          isItemAllowedForSets(exchange.key, exchangesConfigSets)
+          isItemAllowedForSets(exchange.key, exchangeSets)
         ),
       }
-      const { initializeTools } = settingsStore.getState()
-      initializeTools(
-        'Bridges',
-        result.bridges.map((bridge) => bridge.key)
-      )
-      initializeTools(
-        'Exchanges',
-        result.exchanges.map((exchange) => exchange.key)
-      )
-      return result
     },
-    refetchInterval: 180_000,
-    staleTime: 180_000,
-  })
+    [bridges, exchanges]
+  )
+
+  const { data } = useQuery(
+    getToolsQueryOptions(sdkClient, {
+      scopeKey: queryScopeKey,
+      query: {
+        refetchInterval,
+        staleTime: refetchInterval,
+        select: selectAllowedTools,
+      },
+    })
+  )
+
+  // A host may fill the shared entry, so seed from the data, not in a queryFn.
+  useEffect(() => {
+    if (!data) {
+      return
+    }
+    const { initializeTools } = settingsStore.getState()
+    initializeTools(
+      'Bridges',
+      data.bridges.map((bridge) => bridge.key)
+    )
+    initializeTools(
+      'Exchanges',
+      data.exchanges.map((exchange) => exchange.key)
+    )
+  }, [data, settingsStore])
 
   return { tools: data }
 }

package/src/hooks/useTransactionDetails.ts

@@ -19,12 +19,12 @@ export const useTransactionDetails = (
 } => {
   const { account, accounts } = useAccount()
   const queryClient = useQueryClient()
-  const { keyPrefix } = useWidgetConfig()
+  const { storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
 
   const transactionHistoryQueryKey = useMemo(
-    () => getQueryKey('transaction-history', keyPrefix),
-    [keyPrefix]
+    () => getQueryKey('transaction-history', storageScopeKey),
+    [storageScopeKey]
   )
 
   const { data, isLoading } = useQuery({

package/src/hooks/useTransactionHistory.ts

@@ -22,14 +22,14 @@ export const useTransactionHistory = (): {
 } => {
   const store = useRouteExecutionStoreContext()
   const { accounts } = useAccount()
-  const { keyPrefix } = useWidgetConfig()
+  const { storageScopeKey } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const { tools } = useTools()
 
   const { data: routeExecutions, isLoading } = useQueries({
     queries: accounts.map((account) => ({
       queryKey: [
-        getQueryKey('transaction-history', keyPrefix),
+        getQueryKey('transaction-history', storageScopeKey),
         account.address,
       ],
       queryFn: (async ({ queryKey: [, accountAddress], signal }) => {

package/src/index.ts

@@ -8,13 +8,14 @@ export * from './components/ContractComponent/NFT/NFTBase.js'
 export * from './components/ContractComponent/NFT/types.js'
 export * from './components/Skeleton/WidgetSkeleton.js'
 export { defaultMaxHeight } from './config/constants.js'
-export * from './config/version.js'
+export { name, version } from './config/version.js'
 export { useWidgetChains } from './hooks/useWidgetChains.js'
 export {
   useWidgetEvents,
   type WidgetEventEmitter,
   widgetEvents,
 } from './hooks/useWidgetEvents.js'
+export * from './queries/index.js'
 export * from './stores/bookmarks/types.js'
 export * from './stores/form/types.js'
 export { useFieldActions } from './stores/form/useFieldActions.js'

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -9,6 +9,7 @@ import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { Input } from '../../components/Input.js'
 import { AlertMessage } from '../../components/Messages/AlertMessage.js'
+import { addressInputMaxLength } from '../../config/constants.js'
 import { useAddressValidation } from '../../hooks/useAddressValidation.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
@@ -63,6 +64,7 @@ export const BookmarkAddressSheet = ({
       name: nameValue,
       address: validationResult.address,
       chainType: validationResult.chainType,
+      chainId: validationResult.chainId,
     }
   }
 
@@ -74,6 +76,7 @@ export const BookmarkAddressSheet = ({
       name: nameValue,
       address: validatedWallet.address,
       chainType: validatedWallet.chainType,
+      chainId: validatedWallet.chainId,
     }
   }
 
@@ -119,6 +122,7 @@ export const BookmarkAddressSheet = ({
         name: validatedBookmark.name,
         address: validatedBookmark.address,
         chainType: validatedBookmark.chainType,
+        chainId: validatedBookmark.chainId,
       })
     }
   }
@@ -198,7 +202,7 @@ export const BookmarkAddressSheet = ({
                   context: 'long',
                 })}
                 maxRows={2}
-                inputProps={{ maxLength: 128 }}
+                inputProps={{ maxLength: addressInputMaxLength }}
                 multiline
               />
             </SendToWalletCard>

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -34,7 +34,7 @@ export const BookmarksPage = (): JSX.Element => {
   const listParentRef = useRef<HTMLUListElement | null>(null)
   const buttonRef = useRef<HTMLDivElement | null>(null)
   const { bookmarks } = useBookmarks()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const { addBookmark, removeBookmark, setSelectedBookmark } =
     useBookmarkActions()
   const navigate = useNavigate()
@@ -70,59 +70,49 @@ export const BookmarksPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {bookmarks.map((bookmark) => (
-          <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              onClick={() => handleBookmarkSelected(bookmark)}
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== bookmark.chainType
-              }
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[bookmark.chainType]}
+        {bookmarks.map((bookmark) => {
+          const disabled = !isValidReceiver(bookmark.address)
+          const chainId =
+            bookmark.chainId ?? defaultChainIdsByType[bookmark.chainType]
+          return (
+            <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                onClick={() => handleBookmarkSelected(bookmark)}
+                disabled={disabled}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={bookmark.name}
+                  secondary={shortenAddress(bookmark.address)}
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={bookmark.name}
-                secondary={shortenAddress(bookmark.address)}
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(bookmark.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(getAddressLink(bookmark.address, chainId)),
+                  },
+                  {
+                    icon: <DeleteOutline />,
+                    label: t('button.delete'),
+                    onClick: () => removeBookmark(bookmark.address),
+                  },
+                ]}
               />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== bookmark.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(bookmark.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        bookmark.address,
-                        defaultChainIdsByType[bookmark.chainType]
-                      )
-                    ),
-                },
-                {
-                  icon: <DeleteOutline />,
-                  label: t('button.delete'),
-                  onClick: () => removeBookmark(bookmark.address),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+            </ListItem>
+          )
+        })}
         {!bookmarks.length && (
           <EmptyListIndicator
             icon={<TurnedIn />}

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -27,7 +27,7 @@ export const ConnectedWalletsPage = (): JSX.Element => {
   const { t } = useTranslation()
   const { accounts } = useAccount()
   const { setSelectedBookmark } = useBookmarkActions()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const navigate = useNavigate()
   const { setFieldValue } = useFieldActions()
   const { getAddressLink } = useExplorer()
@@ -91,15 +91,13 @@ export const ConnectedWalletsPage = (): JSX.Element => {
                 ]
               : []),
           ]
+          const disabled = !isValidReceiver(account.address)
 
           return (
             <ListItem key={account.address} sx={{ position: 'relative' }}>
               <ListItemButton
                 onClick={() => handleWalletSelected(account)}
-                disabled={
-                  requiredToChainType &&
-                  requiredToChainType !== account.chainType
-                }
+                disabled={disabled}
               >
                 <ListItemAvatar>
                   <AccountAvatar chainId={account.chainId} account={account} />
@@ -109,15 +107,7 @@ export const ConnectedWalletsPage = (): JSX.Element => {
                   secondary={walletAddress}
                 />
               </ListItemButton>
-              <ContextMenu
-                items={menuItems}
-                disabled={
-                  !!(
-                    requiredToChainType &&
-                    requiredToChainType !== account.chainType
-                  )
-                }
-              />
+              <ContextMenu items={menuItems} disabled={disabled} />
             </ListItem>
           )
         })}

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -35,7 +35,7 @@ export const RecentWalletsPage = (): JSX.Element => {
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
   const listParentRef = useRef<HTMLUListElement | null>(null)
   const { recentWallets } = useBookmarks()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const {
     removeRecentWallet,
     addBookmark,
@@ -76,73 +76,66 @@ export const RecentWalletsPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {recentWallets.map((recentWallet) => (
-          <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== recentWallet.chainType
-              }
-              onClick={() => handleRecentSelected(recentWallet)}
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[recentWallet.chainType]}
+        {recentWallets.map((recentWallet) => {
+          const disabled = !isValidReceiver(recentWallet.address)
+          const chainId =
+            recentWallet.chainId ??
+            defaultChainIdsByType[recentWallet.chainType]
+          return (
+            <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                disabled={disabled}
+                onClick={() => handleRecentSelected(recentWallet)}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={
+                    recentWallet.name || shortenAddress(recentWallet.address)
+                  }
+                  secondary={
+                    recentWallet.name
+                      ? shortenAddress(recentWallet.address)
+                      : undefined
+                  }
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={
-                  recentWallet.name || shortenAddress(recentWallet.address)
-                }
-                secondary={
-                  recentWallet.name
-                    ? shortenAddress(recentWallet.address)
-                    : undefined
-                }
-              />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== recentWallet.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(recentWallet.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        recentWallet.address,
-                        defaultChainIdsByType[recentWallet.chainType]
-                      )
-                    ),
-                },
-                {
-                  icon: <TurnedInNot />,
-                  label: t('button.bookmark'),
-                  onClick: () => {
-                    setBookmarkTarget(recentWallet)
-                    bookmarkAddressSheetRef.current?.open()
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(recentWallet.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(
+                        getAddressLink(recentWallet.address, chainId)
+                      ),
+                  },
+                  {
+                    icon: <TurnedInNot />,
+                    label: t('button.bookmark'),
+                    onClick: () => {
+                      setBookmarkTarget(recentWallet)
+                      bookmarkAddressSheetRef.current?.open()
+                    },
                   },
-                },
-                {
-                  icon: <DeleteOutline />,
-                  label: t('button.delete'),
-                  onClick: () => removeRecentWallet(recentWallet.address),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+                  {
+                    icon: <DeleteOutline />,
+                    label: t('button.delete'),
+                    onClick: () => removeRecentWallet(recentWallet.address),
+                  },
+                ]}
+              />
+            </ListItem>
+          )
+        })}
         {!recentWallets.length && (
           <EmptyListIndicator
             icon={<AccountBalanceWalletIcon />}

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,3 +1,4 @@
+import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { List, ListItemAvatar, ListItemText } from '@mui/material'
@@ -25,7 +26,8 @@ export const SendToConfiguredWalletPage = (): JSX.Element => {
   const { t } = useTranslation()
   const navigateBack = useNavigateBack()
   const { toAddresses } = useWidgetConfig()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
+  const { getChainFromAddress } = useChainTypeFromAddress()
   const { setSelectedBookmark } = useBookmarkActions()
   const { setFieldValue } = useFieldActions()
   const { getAddressLink } = useExplorer()
@@ -53,57 +55,50 @@ export const SendToConfiguredWalletPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {toAddresses?.map((toAddress) => (
-          <ListItem key={toAddress.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== toAddress.chainType
-              }
-              onClick={() => handleCuratedSelected(toAddress)}
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[toAddress.chainType]}
-                  toAddress={toAddress}
+        {toAddresses?.map((toAddress) => {
+          const disabled = !isValidReceiver(toAddress.address)
+          // A configured receiver has no chainId; its provider knows the chain.
+          const chainId =
+            getChainFromAddress(toAddress.address)?.chainId ??
+            defaultChainIdsByType[toAddress.chainType]
+          return (
+            <ListItem key={toAddress.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                disabled={disabled}
+                onClick={() => handleCuratedSelected(toAddress)}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} toAddress={toAddress} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={toAddress.name || shortenAddress(toAddress.address)}
+                  secondary={
+                    toAddress.name
+                      ? shortenAddress(toAddress.address)
+                      : undefined
+                  }
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={toAddress.name || shortenAddress(toAddress.address)}
-                secondary={
-                  toAddress.name ? shortenAddress(toAddress.address) : undefined
-                }
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(toAddress.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(getAddressLink(toAddress.address, chainId)),
+                  },
+                ]}
               />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== toAddress.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(toAddress.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        toAddress.address,
-                        defaultChainIdsByType[toAddress.chainType]
-                      )
-                    ),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+            </ListItem>
+          )
+        })}
       </List>
     </PageContainer>
   )