@lifi/widget 3.0.0-alpha.20 → 3.0.0-alpha.21

package/i18n/zh.json

@@ -9,10 +9,15 @@
   },
   "button": {
     "auto": "自动",
+    "bookmark": "",
+    "bookmarks": "",
     "bridge": "跨链",
     "buy": "购买",
     "buyNow": "立即购买",
     "cancel": "取消",
+    "changeWallet": "更换钱包",
+    "close": "关闭",
+    "confirm": "",
     "connectWallet": "关联钱包",
     "contactSupport": "联系技术支持",
     "continue": "继续",
@@ -30,6 +35,7 @@
     "light": "浅色主题",
     "max": "最大",
     "ok": "确认",
+    "options": "",
     "removeTransaction": "删除交易",
     "reset": "重置",
     "resetSettings": "恢复默认设置",
@@ -47,6 +53,7 @@
   },
   "header": {
     "activeTransactions": "进行中的交易",
+    "bookmarkedWallets": "",
     "bridge": "跨链",
     "checkout": "支付",
     "exchange": "兑换",
@@ -55,8 +62,10 @@
     "payWith": "支付方式",
     "purchase": "购买",
     "purchaseDetails": "交易明细",
+    "recentWallets": "",
     "selectChain": "选择网络",
     "selectWallet": "选择你的钱包",
+    "sendToWallet": "",
     "settings": "设置",
     "swap": "兑换",
     "to": "兑换为",
@@ -71,7 +80,8 @@
       "emptyActiveTransactions": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
       "emptyTokenList": "我们无法在 {{chainName}} 链上找到这些代币，或者你的钱包内没有这些代币。请再次搜索或者选择其他链再试一次。",
       "emptyTransactionHistory": "交易记录只存储在本地，如果您清除浏览器数据，交易记录将被删除。",
-      "routeNotFound": "导致其的原因可能是：流动性低，所选定代币的数额太低，燃气费过高，或者当前没有合适的交易路径。"
+      "routeNotFound": "导致其的原因可能是：流动性低，所选定代币的数额太低，燃气费过高，或者当前没有合适的交易路径。",
+      "fundsToExchange": ""
     },
     "title": {
       "autoRefuel": "获得燃气费",
@@ -103,7 +113,8 @@
       "insufficientFunds": "你没有足够的资金来完成这笔交易。",
       "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
       "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
-      "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。"
+      "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。",
+      "slippageOutsideRecommendedLimits": "过高的滑点可能会导致交易被抢跑，造成财产损失"
     },
     "title": {
       "deleteActiveTransactions": "确定要删除所有正在进行的交易吗？",
@@ -128,27 +139,28 @@
       "unknown": "请再试一次或者联系支持。"
     },
     "title": {
+      "addressRequired": "",
       "allowanceRequired": "余额不足",
       "balanceIsTooLow": "余额太低",
+      "bookmarkAlreadyExists": "",
+      "bookmarkNameRequired": "",
       "chainSwitch": "请切换当前网络",
+      "exchangeRateUpdateCanceled": "兑换率更新已取消",
       "gasLimitIsTooLow": "燃气费设置过低",
       "insufficientFunds": "资金不足",
       "signatureRejected": "交易需要签名。",
       "slippageNotMet": "滑点未满足",
       "transactionCanceled": "交易取消",
-      "exchangeRateUpdateCanceled": "兑换率更新已取消",
       "transactionFailed": "交易失败",
       "transactionUnderpriced": "交易定价过低",
       "transactionUnprepared": "无法开始该交易",
       "unknown": "未知错误",
-      "walletAddressInvalid": "钱包地址无效。",
+      "walletAddressInvalid": "",
       "walletAddressRequired": "请输入钱包地址。",
-      "walletEnsAddressInvalid": "钱包地址或 ENS 无效，或者当前网络不支持 ENS。"
+      "walletChainTypeInvalid": ""
     }
   },
   "tooltip": {
-    "additionalProviderFee": "跨链和交易所的手续费。",
-    "estimatedNetworkFee": "预估网络手续费。",
     "estimatedTime": "预计兑换的执行时间（分钟）。",
     "notFound": {
       "text": "我们找不到这个页面。",
@@ -157,18 +169,25 @@
     "numberOfSteps": "一系列的兑换步骤，每个步骤可能包含1-2个需要签名的交易。",
     "progressToNextUpdate": "数据将在{{value}} 秒后自动刷新，点击这里可以手动更新。",
     "recommended": "一个价格低廉但是兼顾复杂性和易用性的路由方案。",
-    "settingsModified": "设置(已修改)"
+    "settingsModified": "设置(已修改)",
+    "selectAll": "全选",
+    "deselectAll": "取消全选"
   },
   "main": {
     "crossStepDetails": "通过{{tool}}把资产从{{from}}链跨到{{to}}链上",
     "currentAmount": "当前余额",
-    "estimatedTime": "{{value}}分钟",
     "featuredTokens": "精选代币",
+    "fees": {
+      "estimated": "预估费用",
+      "networkEstimated": "预估网络费用:",
+      "networkPaid": "已支付网络费用：",
+      "paid": "已支付费用",
+      "providerEstimated": "预估流动性提供商费用：",
+      "providerPaid": "已支付流动性提供商费用："
+    },
     "from": "从",
     "fromAmount": "需要支付",
     "gasCost": "燃气费消耗",
-    "gasFeeEstimated": "预估燃气费",
-    "gasFeePaid": "已支付燃气费",
     "inProgress": "进行中",
     "nftStepDetails": "通过 {{tool}} 购买 NFT",
     "onChain": "在{{chainName}} 上",
@@ -238,8 +257,7 @@
     "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
     "tokenOnChainAmount": "{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}}",
     "tokenSearch": "按代币名称或者地址搜索",
-    "valueLoss": "资金损失",
-    "walletAddressOrEns": "钱包地址或ENS名称"
+    "valueLoss": "资金损失"
   },
   "insurance": {
     "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
@@ -248,8 +266,9 @@
     "slippageError": "目标链代币的滑点错误"
   },
   "settings": {
-    "enabledBridges": "已选中的跨链桥",
-    "enabledExchanges": "已选中的交易所",
+    "theme": "主题",
+    "enabledBridges": "跨链桥",
+    "enabledExchanges": "交易所",
     "gasPrice": {
       "fast": "快速",
       "normal": "正常",
@@ -257,10 +276,22 @@
       "title": "燃气费"
     },
     "routePriority": "路由优先级",
-    "showDestinationWallet": "显示收款钱包",
+    "sendToWalletOption": "发送到指定的钱包地址",
     "slippage": "滑点",
+    "custom": "自定义",
     "resetSettings": "您正在使用自定义设置过滤可用路由。"
   },
+  "sendToWallet": {
+    "enterAddress": "",
+    "enterName": "",
+    "confirmWalletAddress": "",
+    "connectedWallets": "",
+    "bookmarkWallet": "",
+    "addBookmark": "",
+    "noBookmarkedWallets": "",
+    "noConnectedWallets": "",
+    "noRecentWallets": ""
+  },
   "wallet": {
     "extensionNotFound": "在选择钱包之前，请确保只有{{name}} 浏览器的扩展应用处于激活状态。"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.20",
+  "version": "3.0.0-alpha.21",
   "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": "./_cjs/index.js",
@@ -35,29 +35,29 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@lifi/sdk": "^3.0.0-alpha.51",
-    "@lifi/wallet-management": "^3.0.0-alpha.13",
-    "@mui/icons-material": "^5.15.6",
-    "@mui/lab": "^5.0.0-alpha.162",
-    "@mui/material": "^5.15.6",
+    "@lifi/sdk": "^3.0.0-alpha.53",
+    "@lifi/wallet-management": "^3.0.0-alpha.14",
+    "@mui/icons-material": "^5.15.7",
+    "@mui/lab": "^5.0.0-alpha.163",
+    "@mui/material": "^5.15.7",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/wallet-adapter-wallets": "^0.19.25",
+    "@solana/wallet-adapter-wallets": "^0.19.26",
     "@solana/web3.js": "^1.89.1",
-    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query": "^5.18.0",
     "@tanstack/react-virtual": "^3.0.2",
-    "i18next": "^23.7.18",
+    "i18next": "^23.8.2",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.1",
-    "react-intersection-observer": "^9.5.3",
+    "react-intersection-observer": "^9.6.0",
     "react-router-dom": "^6.21.3",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.5.0",
-    "wagmi": "^2.5.1",
+    "viem": "^2.7.1",
+    "wagmi": "^2.5.5",
     "zustand": "^4.5.0"
   },
   "peerDependencies": {

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -1,5 +1,8 @@
 import { ChainType } from '@lifi/sdk';
-import { getWalletIcon, isWalletInstalledAsync } from '@lifi/wallet-management';
+import {
+  getConnectorIcon,
+  isWalletInstalledAsync,
+} from '@lifi/wallet-management';
 import { Avatar, ListItemAvatar } from '@mui/material';
 import type { Connector } from 'wagmi';
 import { useConnect, useDisconnect } from 'wagmi';
@@ -51,10 +54,7 @@ export const EVMListItemButton = ({
   return (
     <ListItemButton key={connector.uid} onClick={handleEVMConnect}>
       <ListItemAvatar>
-        <Avatar
-          src={connector.icon || getWalletIcon(connector.id)}
-          alt={connector.name}
-        >
+        <Avatar src={getConnectorIcon(connector)} alt={connector.name}>
           {connector.name[0]}
         </Avatar>
       </ListItemAvatar>

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -1,3 +1,4 @@
+import { ChainType } from '@lifi/sdk';
 import { isWalletInstalled } from '@lifi/wallet-management';
 import type { Theme } from '@mui/material';
 import {
@@ -17,12 +18,15 @@ import type { Connector } from 'wagmi';
 import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
 import { Dialog } from '../../components/Dialog';
 import { PageContainer } from '../../components/PageContainer';
+import { useWidgetConfig } from '../../providers';
+import { isItemAllowed } from '../../utils';
 import { EVMListItemButton } from './EVMListItemButton';
 import { SVMListItemButton } from './SVMListItemButton';
 import { walletComparator } from './utils';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();
+  const { chains } = useWidgetConfig();
   const account = useWagmiAccount();
   const { connectors } = useConnect();
   const [walletIdentity, setWalletIdentity] = useState<{
@@ -50,25 +54,31 @@ export const SelectWalletPage = () => {
   }, []);
 
   const wallets = useMemo(() => {
-    const evmInstalled = connectors.filter(
-      (connector) =>
-        isWalletInstalled(connector.id) &&
-        // We should not show already connected connectors
-        account.connector?.id !== connector.id,
-    );
-    const evmNotDetected = connectors.filter(
-      (connector) => !isWalletInstalled(connector.id),
-    );
-    const svmInstalled = solanaWallets?.filter(
-      (connector) =>
-        connector.adapter.readyState === WalletReadyState.Installed &&
-        // We should not show already connected connectors
-        !connector.adapter.connected,
-    );
-    const svmNotDetected = solanaWallets?.filter(
-      (connector) =>
-        connector.adapter.readyState !== WalletReadyState.Installed,
-    );
+    const evmInstalled = isItemAllowed(ChainType.EVM, chains?.types)
+      ? connectors.filter(
+          (connector) =>
+            isWalletInstalled(connector.id) &&
+            // We should not show already connected connectors
+            account.connector?.id !== connector.id,
+        )
+      : [];
+    const evmNotDetected = isItemAllowed(ChainType.EVM, chains?.types)
+      ? connectors.filter((connector) => !isWalletInstalled(connector.id))
+      : [];
+    const svmInstalled = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState === WalletReadyState.Installed &&
+            // We should not show already connected connectors
+            !connector.adapter.connected,
+        )
+      : [];
+    const svmNotDetected = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState !== WalletReadyState.Installed,
+        )
+      : [];
 
     const installedWallets = [...evmInstalled, ...svmInstalled].sort(
       walletComparator,
@@ -82,7 +92,13 @@ export const SelectWalletPage = () => {
     }
 
     return installedWallets;
-  }, [account.connector?.id, connectors, isDesktopView, solanaWallets]);
+  }, [
+    account.connector?.id,
+    chains?.types,
+    connectors,
+    isDesktopView,
+    solanaWallets,
+  ]);
 
   return (
     <PageContainer disableGutters>

package/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -41,7 +41,9 @@ export const ConfirmAddressSheet = forwardRef<
 
   const handleConfirm = () => {
     if (validatedBookmark) {
-      setFieldValue('toAddress', validatedBookmark.address);
+      setFieldValue('toAddress', validatedBookmark.address, {
+        isTouched: true,
+      });
       onConfirm?.(validatedBookmark);
       setSendToWallet(true);
       handleClose();

package/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -0,0 +1,149 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { AccountAvatar } from '../../components/AccountAvatar';
+import { ListItem, ListItemButton } from '../../components/ListItem';
+import { Menu } from '../../components/Menu';
+import { useChains, useToAddressRequirements } from '../../hooks';
+import { useBookmarkActions, useFieldActions } from '../../stores';
+import {
+  defaultChainIdsByType,
+  navigationRoutes,
+  shortenAddress,
+} from '../../utils';
+import {
+  ListContainer,
+  OptionsMenuButton,
+  SendToWalletPageContainer,
+} from './SendToWalletPage.style';
+import { useWidgetConfig } from '../../providers';
+import type { ToAddress } from '../../types';
+
+export const SendToConfiguredWalletPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { toAddresses } = useWidgetConfig();
+  const [selectedToAddress, setSelectedToAddress] = useState<ToAddress>();
+  const { requiredToChainType } = useToAddressRequirements();
+  const { setSelectedBookmark } = useBookmarkActions();
+  const { setFieldValue } = useFieldActions();
+  const { getChainById } = useChains();
+  const moreMenuId = useId();
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
+  const open = Boolean(moreMenuAnchorEl);
+
+  const handleCuratedSelected = (toAddress: ToAddress) => {
+    setSelectedBookmark(toAddress);
+    setFieldValue('toAddress', toAddress.address, { isTouched: true });
+    navigate(navigationRoutes.home);
+  };
+
+  const closeMenu = () => {
+    setMenuAnchorEl(null);
+  };
+
+  const handleMenuOpen = (el: HTMLElement, toAddress: ToAddress) => {
+    setMenuAnchorEl(el);
+    setSelectedToAddress(toAddress);
+  };
+
+  const handleCopyAddress = () => {
+    if (selectedToAddress) {
+      navigator.clipboard.writeText(selectedToAddress.address);
+    }
+    closeMenu();
+  };
+
+  const handleViewOnExplorer = () => {
+    if (selectedToAddress) {
+      const chain = getChainById(
+        defaultChainIdsByType[selectedToAddress.chainType],
+      );
+      window.open(
+        `${chain?.metamask.blockExplorerUrls[0]}address/${selectedToAddress.address}`,
+        '_blank',
+      );
+    }
+    closeMenu();
+  };
+
+  return (
+    <SendToWalletPageContainer disableGutters>
+      <ListContainer sx={{ minHeight: 418 }}>
+        {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]}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={toAddress.name || shortenAddress(toAddress.address)}
+                secondary={
+                  toAddress.name ? shortenAddress(toAddress.address) : undefined
+                }
+              />
+            </ListItemButton>
+            <OptionsMenuButton
+              aria-label={t('button.options')}
+              aria-controls={
+                open && toAddress.address === selectedToAddress?.address
+                  ? moreMenuId
+                  : undefined
+              }
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={(e) =>
+                handleMenuOpen(e.target as HTMLElement, toAddress)
+              }
+              sx={{
+                opacity:
+                  requiredToChainType &&
+                  requiredToChainType !== toAddress.chainType
+                    ? 0.5
+                    : 1,
+              }}
+            >
+              <MoreHorizIcon fontSize="small" />
+            </OptionsMenuButton>
+          </ListItem>
+        ))}
+        <Menu
+          id={moreMenuId}
+          elevation={0}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          anchorEl={moreMenuAnchorEl}
+          open={open}
+          onClose={closeMenu}
+        >
+          <MenuItem onClick={handleCopyAddress}>
+            <ContentCopyIcon />
+            {t('button.copyAddress')}
+          </MenuItem>
+          <MenuItem onClick={handleViewOnExplorer}>
+            <OpenInNewIcon />
+            {t('button.viewOnExplorer')}
+          </MenuItem>
+        </Menu>
+      </ListContainer>
+    </SendToWalletPageContainer>
+  );
+};

package/pages/SendToWallet/index.ts

@@ -2,3 +2,4 @@ export * from './BookmarksPage';
 export * from './ConnectedWalletsPage';
 export * from './RecentWalletsPage';
 export * from './SendToWalletPage';
+export * from './SendToConfiguredWalletPage';

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,4 +1,4 @@
-import { FullStatusData } from '@lifi/sdk';
+import type { FullStatusData } from '@lifi/sdk';
 import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useEffect, useMemo } from 'react';

package/providers/WalletProvider/SDKProviders.tsx

@@ -1,5 +1,5 @@
 import type { SDKProvider } from '@lifi/sdk';
-import { EVM, Solana, config } from '@lifi/sdk';
+import { ChainType, EVM, Solana, config } from '@lifi/sdk';
 import type { WalletAdapter } from '@solana/wallet-adapter-base';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { getWalletClient, switchChain } from '@wagmi/core';
@@ -14,16 +14,25 @@ export const SDKProviders = () => {
 
   useEffect(() => {
     // Configure SDK Providers
-    const providers: SDKProvider[] = [
-      EVM({
-        getWalletClient: () => getWalletClient(wagmiConfig),
-        switchChain: async (chainId: number) => {
-          const chain = await switchChain(wagmiConfig, { chainId });
-          return getWalletClient(wagmiConfig, { chainId: chain.id });
-        },
-      }),
-    ];
-    if (wallet?.adapter) {
+    const providers: SDKProvider[] = [];
+    const hasConfiguredEVMProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.EVM,
+    );
+    const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.SVM,
+    );
+    if (!hasConfiguredEVMProvider) {
+      providers.push(
+        EVM({
+          getWalletClient: () => getWalletClient(wagmiConfig),
+          switchChain: async (chainId: number) => {
+            const chain = await switchChain(wagmiConfig, { chainId });
+            return getWalletClient(wagmiConfig, { chainId: chain.id });
+          },
+        }),
+      );
+    }
+    if (!hasConfiguredSVMProvider) {
       providers.push(
         Solana({
           async getWalletAdapter() {

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -4,6 +4,7 @@ import { version } from '../../config/version';
 import { setDefaultSettings } from '../../stores';
 import { formatInputAmount } from '../../utils';
 import type { WidgetContextProps, WidgetProviderProps } from './types';
+import { attemptToFindMatchingToAddressInConfig } from './utils';
 
 const initialContext: WidgetContextProps = {
   elementId: '',
@@ -60,7 +61,12 @@ export const WidgetProvider: React.FC<
           !isNaN(parseFloat(searchParams.fromAmount))
             ? formatInputAmount(searchParams.fromAmount)
             : widgetConfig.fromAmount,
-        toAddress: searchParams.toAddress || widgetConfig.toAddress,
+        toAddress: searchParams.toAddress
+          ? attemptToFindMatchingToAddressInConfig(
+              searchParams.toAddress,
+              widgetConfig,
+            )
+          : widgetConfig.toAddress,
         integrator: widgetConfig.integrator,
         elementId,
       } as WidgetContextProps;
@@ -101,7 +107,6 @@ export const WidgetProvider: React.FC<
       };
     }
   }, [elementId, widgetConfig]);
-
   return (
     <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
   );

package/providers/WidgetProvider/utils.ts

@@ -0,0 +1,26 @@
+import type { WidgetConfig } from '../../types';
+import { getChainTypeFromAddress } from '../../utils';
+
+export const attemptToFindMatchingToAddressInConfig = (
+  address: string,
+  config: WidgetConfig,
+) => {
+  if (config.toAddress && config.toAddress.address === address) {
+    return config.toAddress;
+  }
+
+  if (config.toAddresses?.length) {
+    const matchingToAddress = config.toAddresses.find(
+      (toAddress) => toAddress.address === address,
+    );
+
+    if (matchingToAddress) {
+      return matchingToAddress;
+    }
+  }
+
+  return {
+    address: address,
+    chainType: getChainTypeFromAddress(address),
+  };
+};

package/stores/bookmarks/BookmarkStore.tsx

@@ -3,6 +3,7 @@ import { shallow } from 'zustand/shallow';
 import type { PersistStoreProviderProps } from '../types';
 import { createBookmarksStore } from './createBookmarkStore';
 import type { BookmarkState, BookmarkStore } from './types';
+import { useWidgetConfig } from '../../providers';
 
 export const BookmarkStoreContext = createContext<BookmarkStore | null>(null);
 
@@ -10,10 +11,11 @@ export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
   children,
   ...props
 }) => {
+  const { toAddress } = useWidgetConfig();
   const storeRef = useRef<BookmarkStore>();
 
   if (!storeRef.current) {
-    storeRef.current = createBookmarksStore(props);
+    storeRef.current = createBookmarksStore({ ...props, toAddress });
   }
 
   return (

package/stores/bookmarks/createBookmarkStore.ts

@@ -1,16 +1,22 @@
 import type { StateCreator } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { createWithEqualityFn } from 'zustand/traditional';
+import type { ToAddress } from '../../types';
 import type { PersistStoreProps } from '../types';
 import type { BookmarkState } from './types';
 
 const recentWalletsLimit = 5;
-
-export const createBookmarksStore = ({ namePrefix }: PersistStoreProps) =>
+interface PersistBookmarkProps extends PersistStoreProps {
+  toAddress?: ToAddress;
+}
+export const createBookmarksStore = ({
+  namePrefix,
+  toAddress,
+}: PersistBookmarkProps) =>
   createWithEqualityFn<BookmarkState>(
     persist(
       (set, get) => ({
-        selectedBookmark: undefined,
+        selectedBookmark: toAddress,
         bookmarks: [],
         recentWallets: [],
         getBookmark: (address) =>
@@ -57,6 +63,16 @@ export const createBookmarksStore = ({ namePrefix }: PersistStoreProps) =>
           bookmarks: state.bookmarks,
           recentWallets: state.recentWallets,
         }),
+        onRehydrateStorage: () => {
+          return (state) => {
+            if (state && toAddress && !toAddress.name) {
+              const existingBookmark = state.getBookmark(toAddress.address);
+              if (existingBookmark) {
+                state.setSelectedBookmark(existingBookmark);
+              }
+            }
+          };
+        },
       },
     ) as StateCreator<BookmarkState, [], [], BookmarkState>,
     Object.is,