@lifi/widget 3.0.0-alpha.12 → 3.0.0-alpha.13

package/hooks/useGasRefuel.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { useAvailableChains } from '.';
+import { useFieldValues } from '../stores';
 import { useGasRecommendation } from './useGasRecommendation';
 import { useTokenBalance } from './useTokenBalance';
-import { useFieldValues } from '../stores';
 
 export const useGasRefuel = () => {
   const { getChainById } = useAvailableChains();
@@ -19,7 +19,7 @@ export const useGasRefuel = () => {
 
   const { token: nativeToken } = useTokenBalance(
     toAddress,
-    toChainId && toChain?.nativeToken,
+    toChainId ? toChain?.nativeToken : undefined,
     toChain,
   );
 

package/hooks/useGasSufficiency.ts

@@ -17,16 +17,21 @@ export interface GasSufficiency {
 const refetchInterval = 30_000;
 
 export const useGasSufficiency = (route?: RouteExtended) => {
-  const { account } = useAccount();
+  const { accounts } = useAccount();
   const { getChainById } = useAvailableChains();
 
   const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
   const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
   const enabledRefuel = enabled && enabledAutoRefuel;
 
+  const account = accounts.find(
+    (account) =>
+      account.chainType === getChainById(route?.fromChainId)?.chainType,
+  );
+
   const { data: insufficientGas, isLoading } = useQuery({
-    queryKey: ['gas-sufficiency-check', account.address, route?.id],
-    queryFn: async () => {
+    queryKey: ['gas-sufficiency-check', account?.address, route?.id],
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
       // TODO: include LI.Fuel into calculation once steps and tools are properly typed
       // const refuelSteps = route.steps
       //   .flatMap((step) => step.includedSteps)
@@ -38,7 +43,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
           (groupedGasCosts, step) => {
             if (
               step.estimate.gasCosts &&
-              (account.connector as Connector)?.id !== 'safe'
+              (account?.connector as Connector)?.id !== 'safe'
             ) {
               const { token } = step.estimate.gasCosts[0];
               const gasCostAmount = step.estimate.gasCosts.reduce(
@@ -82,7 +87,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       }
 
       const tokenBalances = await getTokenBalancesWithRetry(
-        account.address!,
+        accountAddress!,
         Object.values(gasCosts).map((item) => item.token),
       );
 
@@ -125,7 +130,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       return gasCostResult;
     },
 
-    enabled: Boolean(account.address && route),
+    enabled: Boolean(account?.address && route),
     refetchInterval,
     staleTime: refetchInterval,
   });

package/hooks/useRouteExecution.ts

@@ -31,7 +31,7 @@ export const useRouteExecution = ({
   onAcceptExchangeRateUpdate,
 }: RouteExecutionProps) => {
   const queryClient = useQueryClient();
-  const { account } = useAccount();
+  const { isConnected } = useAccount();
   const resumedAfterMount = useRef(false);
   const emitter = useWidgetEvents();
   const routeExecutionStoreContext = useRouteExecutionStoreContext();
@@ -87,7 +87,7 @@ export const useRouteExecution = ({
 
   const executeRouteMutation = useMutation({
     mutationFn: () => {
-      if (!account.isConnected) {
+      if (!isConnected) {
         throw Error('Account is not connected.');
       }
       if (!routeExecution?.route) {
@@ -111,7 +111,7 @@ export const useRouteExecution = ({
 
   const resumeRouteMutation = useMutation({
     mutationFn: (resumedRoute?: Route) => {
-      if (!account.isConnected) {
+      if (!isConnected) {
         throw Error('Account is not connected.');
       }
       if (!routeExecution?.route) {
@@ -170,14 +170,14 @@ export const useRouteExecution = ({
     // Check if route is eligible for automatic resuming
     if (
       isRouteActive(routeExecution?.route) &&
-      account.isConnected &&
+      isConnected &&
       !resumedAfterMount.current
     ) {
       resumedAfterMount.current = true;
       _resumeRoute();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [account.isConnected]);
+  }, [isConnected]);
 
   useEffect(() => {
     return () => {

package/hooks/useRoutes.ts

@@ -8,7 +8,7 @@ import { normalize } from 'viem/ens';
 import { useConfig } from 'wagmi';
 import { useChain, useDebouncedWatch, useGasRefuel, useToken } from '.';
 import { useWidgetConfig } from '../providers';
-import { useFieldValues, useSettings } from '../stores';
+import { defaultSlippage, useFieldValues, useSettings } from '../stores';
 import { isSVMAddress } from '../utils';
 import { useAccount } from './useAccount';
 import { useSwapOnly } from './useSwapOnly';
@@ -21,7 +21,7 @@ interface RoutesProps {
 
 export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const { subvariant, sdkConfig, insurance, contractTool } = useWidgetConfig();
-  const { account } = useAccount();
+  const { accounts } = useAccount();
   const queryClient = useQueryClient();
   const config = useConfig();
   const swapOnly = useSwapOnly();
@@ -38,7 +38,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     'enabledBridges',
     'enabledExchanges',
   ]);
-  const [fromTokenAmount] = useDebouncedWatch(['fromAmount'], 320);
+  const [fromTokenAmount] = useDebouncedWatch(320, 'fromAmount');
   const [
     fromChainId,
     fromTokenAddress,
@@ -67,13 +67,21 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel();
 
-  const hasAmount =
-    (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
-    (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
+  const accountAddress = fromChain?.chainType
+    ? accounts.find((account) => account.chainType === fromChain.chainType)
+        ?.address
+    : undefined;
+
+  const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0;
 
   const contractCallQuoteEnabled: boolean =
     subvariant === 'nft'
-      ? Boolean(toContractAddress && toContractCallData && toContractGasLimit)
+      ? Boolean(
+          toContractAddress &&
+            toContractCallData &&
+            toContractGasLimit &&
+            accountAddress,
+        )
       : true;
 
   // When we bridge between ecosystems we need to be sure toAddress is set
@@ -81,8 +89,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     fromChain?.chainType !== toChain?.chainType ? Boolean(toAddress) : true;
 
   const isEnabled =
-    !isNaN(fromChainId) &&
-    !isNaN(toChainId) &&
+    Boolean(Number(fromChainId)) &&
+    Boolean(Number(toChainId)) &&
     Boolean(fromToken?.address) &&
     Boolean(toToken?.address) &&
     !Number.isNaN(slippage) &&
@@ -90,18 +98,16 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     isChainTypeSatisfied &&
     contractCallQuoteEnabled;
 
-  const accountAddress =
-    fromChain?.chainType === account.chainType ? account.address : undefined;
-
+  // Some values should be strictly typed and isEnabled ensures that
   const queryKey = [
     'routes',
     accountAddress,
-    fromChainId,
-    fromToken?.address,
+    fromChainId as number,
+    fromToken?.address as string,
     fromTokenAmount,
     toAddress,
-    toChainId,
-    toToken?.address,
+    toChainId as number,
+    toToken?.address as string,
     toTokenAmount,
     toContractAddress,
     toContractCallData,
@@ -116,7 +122,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
     gasRecommendationFromAmount,
     insurance,
     insurableRoute?.id,
-  ];
+  ] as const;
 
   const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } =
     useQuery({
@@ -135,7 +141,7 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
           toContractAddress,
           toContractCallData,
           toContractGasLimit,
-          slippage,
+          slippage = defaultSlippage,
           enabledBridges,
           enabledExchanges,
           routePriority,
@@ -153,10 +159,10 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
         try {
           // FIXME: resolve address in one place
           toWalletAddress = !isAddress
-            ? await getEnsAddress(config, {
+            ? (await getEnsAddress(config, {
                 chainId: toChainId,
                 name: normalize(toAddress),
-              })
+              })) || undefined
             : isAddress
               ? toAddress
               : fromAddress;
@@ -188,7 +194,8 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
         if (subvariant === 'nft') {
           const contractCallQuote = await getContractCallQuote(
             {
-              fromAddress,
+              // Contract calls are enabled only when fromAddress is set
+              fromAddress: fromAddress as string,
               fromChain: fromChainId,
               fromToken: fromTokenAddress,
               toAmount: toTokenAmount,
@@ -246,13 +253,13 @@ export const useRoutes = ({ insurableRoute }: RoutesProps = {}) => {
 
         const data = await getRoutes(
           {
-            fromChainId,
+            fromAddress,
             fromAmount,
+            fromChainId,
             fromTokenAddress,
+            toAddress: toWalletAddress,
             toChainId,
             toTokenAddress,
-            fromAddress,
-            toAddress: toWalletAddress,
             fromAmountForGas:
               enabledRefuel && gasRecommendationFromAmount
                 ? gasRecommendationFromAmount

package/hooks/useTokenAddressBalance.ts

@@ -5,7 +5,7 @@ export const useTokenAddressBalance = (
   chainId?: number,
   tokenAddress?: string,
 ) => {
-  const { tokens, tokensWithBalance, isBalanceLoading, refetch } =
+  const { tokens, tokensWithBalance, chain, isBalanceLoading, refetch } =
     useTokenBalances(chainId);
 
   const token = useMemo(() => {
@@ -19,6 +19,7 @@ export const useTokenAddressBalance = (
 
   return {
     token,
+    chain,
     isLoading: isBalanceLoading,
     refetch,
   };

package/hooks/useTokenBalance.ts

@@ -11,37 +11,27 @@ export const useTokenBalance = (
   token?: Token,
   chain?: ExtendedChain,
 ) => {
-  const { account } = useAccount();
+  const { account, accounts } = useAccount();
   const queryClient = useQueryClient();
   const walletAddress =
     accountAddress ||
     // When we provide chain we want to be sure that account address used is from the same ecosystem as token
-    !chain
-      ? account.address
-      : chain.chainType === account.chainType
-        ? account.address
-        : undefined;
+    (chain
+      ? accounts.find((account) => account.chainType === chain.chainType)
+          ?.address
+      : account.address);
 
   const tokenBalanceQueryKey = useMemo(
-    () => ['token-balance', walletAddress, token?.chainId, token?.address],
+    () =>
+      ['token-balance', walletAddress, token?.chainId, token?.address] as const,
     [token?.address, token?.chainId, walletAddress],
   );
 
   const { data, isLoading, refetch } = useQuery({
     queryKey: tokenBalanceQueryKey,
-    queryFn: async ({ queryKey: [, accountAddress] }) => {
-      const cachedToken = queryClient
-        .getQueryData<Token[]>([
-          'token-balances',
-          accountAddress,
-          token!.chainId,
-        ])
-        ?.find((t) => t.address === token!.address);
-
-      if (cachedToken) {
-        return cachedToken as TokenAmount;
-      }
-
+    queryFn: async ({
+      queryKey: [, accountAddress, tokenChainId, tokenAddress],
+    }) => {
       const tokenBalances = await getTokenBalancesWithRetry(
         accountAddress as string,
         [token!],
@@ -64,12 +54,12 @@ export const useTokenBalance = (
       }
 
       queryClient.setQueriesData<TokenAmount[]>(
-        { queryKey: ['token-balances', accountAddress, token!.chainId] },
+        { queryKey: ['token-balances', accountAddress, tokenChainId] },
         (data) => {
           if (data) {
             const clonedData = [...data];
             const index = clonedData.findIndex(
-              (dataToken) => dataToken.address === token!.address,
+              (dataToken) => dataToken.address === tokenAddress,
             );
             clonedData[index] = {
               ...clonedData[index],

package/hooks/useTokenBalances.ts

@@ -83,6 +83,7 @@ export const useTokenBalances = (selectedChainId?: number) => {
     tokens,
     tokensWithBalance,
     featuredTokens,
+    chain,
     isLoading,
     isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
     refetch,

package/hooks/useTools.ts

@@ -1,7 +1,8 @@
 import { getTools, type ToolsResponse } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { isItemAllowed, useWidgetConfig } from '../providers';
+import { useWidgetConfig } from '../providers';
 import { useSettingsStore } from '../stores';
+import { isItemAllowed } from '../utils';
 
 export const useTools = () => {
   const { bridges, exchanges } = useWidgetConfig();

package/hooks/useTransactionHistory.ts

@@ -1,49 +1,59 @@
+import type { StatusResponse } from '@lifi/sdk';
 import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
-import { useQuery } from '@tanstack/react-query';
+import type { QueryFunction } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
 import { useAccount } from './useAccount';
 
 export const useTransactionHistory = () => {
-  const { account } = useAccount();
+  const { accounts } = useAccount();
 
-  const { data, isLoading, refetch } = useQuery({
-    queryKey: ['transaction-history', account.address],
-    queryFn: async ({ queryKey: [, accountAddress], signal }) => {
-      if (!accountAddress) {
-        return [];
-      }
-      const date = new Date();
-      date.setFullYear(date.getFullYear() - 10);
+  const { data, isLoading } = useQueries({
+    queries: accounts.map((account) => ({
+      queryKey: ['transaction-history', account.address],
+      queryFn: (async ({ queryKey: [, accountAddress], signal }) => {
+        if (!accountAddress) {
+          return [];
+        }
+        const date = new Date();
+        date.setFullYear(date.getFullYear() - 10);
 
-      const response = await getTransactionHistory(
-        {
-          wallet: accountAddress,
-          fromTimestamp: date.getTime() / 1000,
-          toTimestamp: Date.now() / 1000,
-        },
-        { signal },
-      );
+        const response = await getTransactionHistory(
+          {
+            wallet: accountAddress,
+            fromTimestamp: date.getTime() / 1000,
+            toTimestamp: Date.now() / 1000,
+          },
+          { signal },
+        );
 
-      const filteredTransactions = response.transfers
+        return response.transfers;
+      }) as QueryFunction<StatusResponse[], (string | undefined)[], never>,
+      refetchInterval: 300000,
+      enabled: Boolean(account.address),
+    })),
+    combine: (results) => {
+      const data = results
+        .filter((result) => result.data)
+        .flatMap((result) => result.data)
         .filter(
           (transaction) =>
-            transaction.receiving.chainId && transaction.sending.chainId,
+            transaction?.receiving.chainId && transaction.sending.chainId,
         )
         .sort((a, b) => {
           return (
-            ((b.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
-            ((a.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
+            ((b?.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
+            ((a?.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
           );
-        });
-
-      return filteredTransactions;
+        }) as StatusResponse[];
+      return {
+        data: data,
+        isLoading: results.some((result) => result.isLoading),
+      };
     },
-    refetchInterval: 300000,
-    enabled: Boolean(account.address),
   });
 
   return {
-    data: data ?? [],
+    data,
     isLoading,
-    refetch,
   };
 };

package/i18n/en.json

@@ -14,6 +14,7 @@
     "buyNow": "Buy now",
     "cancel": "Cancel",
     "changeWallet": "Change wallet",
+    "close": "Close",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",
@@ -105,7 +106,7 @@
       "insufficientGas": "You don't have enough gas to complete the transaction. You need to add at least:",
       "rateChanged": "The exchange rate has changed. By continuing the transaction, you'll accept the new rate.",
       "resetSettings": "This will reset your route priority, slippage, gas price, enabled bridges and exchanges.",
-      "slippageOutsideRecommendedLimits": "High tolerance may result in unfavorable trade caused by front running."
+      "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running."
     },
     "title": {
       "deleteActiveTransactions": "Delete all active transactions?",
@@ -170,8 +171,8 @@
       "networkEstimated": "Estimated network fees:",
       "networkPaid": "Paid network fees:",
       "paid": "paid fees",
-      "providerEstimated": "Bridge fees:",
-      "providerPaid": "Bridge fees:"
+      "providerEstimated": "Estimated provider fees:",
+      "providerPaid": "Paid provider fees:"
     },
     "from": "From",
     "fromAmount": "You pay",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.13",
   "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.42",
-    "@lifi/wallet-management": "^3.0.0-alpha.8",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/lab": "^5.0.0-alpha.158",
-    "@mui/material": "^5.15.2",
+    "@lifi/sdk": "^3.0.0-alpha.47",
+    "@lifi/wallet-management": "^3.0.0-alpha.9",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/lab": "^5.0.0-alpha.160",
+    "@mui/material": "^5.15.4",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/wallet-adapter-wallets": "^0.19.24",
-    "@solana/web3.js": "^1.87.6",
-    "@tanstack/react-query": "^5.15.0",
+    "@solana/wallet-adapter-wallets": "^0.19.25",
+    "@solana/web3.js": "^1.89.0",
+    "@tanstack/react-query": "^5.17.12",
     "@tanstack/react-virtual": "^3.0.1",
-    "i18next": "^23.7.11",
+    "i18next": "^23.7.16",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.0",
     "react-intersection-observer": "^9.5.3",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.21.2",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.0.0-rc.3",
-    "wagmi": "^2.0.0-rc.2",
+    "viem": "^2.0.10",
+    "wagmi": "^2.2.1",
     "zustand": "^4.4.7"
   },
   "peerDependencies": {

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -13,7 +13,6 @@ import { useTranslation } from 'react-i18next';
 import { ActiveTransactionItem } from '../../components/ActiveTransactions';
 import { Dialog } from '../../components/Dialog';
 import { PageContainer } from '../../components/PageContainer';
-import { useAccount } from '../../hooks';
 import {
   useExecutingRoutesIds,
   useHeaderStoreContext,
@@ -23,8 +22,7 @@ import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
 
 export const ActiveTransactionsPage = () => {
   const { t } = useTranslation();
-  const { account } = useAccount();
-  const executingRoutes = useExecutingRoutesIds(account.address);
+  const executingRoutes = useExecutingRoutesIds();
   const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
   const headerStoreContext = useHeaderStoreContext();
   const [open, setOpen] = useState(false);

package/pages/RoutesPage/RoutesPage.tsx

@@ -46,7 +46,6 @@ export const RoutesPage: React.FC<BoxProps> = () => {
           onClick={() => refetch()}
           sx={{ marginRight: -1 }}
           size="medium"
-          edge="end"
         />,
       );
   }, [dataUpdatedAt, headerStoreContext, isFetching, refetch, refetchTime]);

package/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -15,18 +15,18 @@ export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
   gap: theme.spacing(1.5),
 }));
 
-export const SummaryRowContainer = styled(Box)({
+export const SummaryRowContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
-});
+  padding: theme.spacing(1),
+}));
 
-export const SummaryRowButton = styled(ButtonBase)({
+export const SummaryRowButton = styled(ButtonBase)(({ theme }) => ({
   background: 'none',
   color: 'inherit',
   border: 'none',
-  padding: 0,
   font: 'inherit',
   cursor: 'pointer',
   outline: 'inherit',
@@ -34,7 +34,8 @@ export const SummaryRowButton = styled(ButtonBase)({
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
-});
+  padding: theme.spacing(1),
+}));
 
 export const SummaryValue = styled(Typography)({
   lineHeight: '1.25',

package/pages/SettingsPage/SettingsCard/SettingCard.tsx

@@ -7,7 +7,7 @@ export const SettingCard: React.FC<PropsWithChildren> = ({ children }) => {
       variant="default"
       selectionColor="primary"
       sx={{
-        p: 2,
+        p: 1,
       }}
     >
       {children}

package/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -1,7 +1,7 @@
-import { alpha, styled } from '@mui/material/styles';
-import { Box, ButtonBase, InputBase } from '@mui/material';
 import type { Theme } from '@mui/material';
+import { Box, ButtonBase, InputBase } from '@mui/material';
 import { inputBaseClasses } from '@mui/material/InputBase';
+import { alpha, styled } from '@mui/material/styles';
 import { getCardFieldsetBackgroundColor } from '../../../utils';
 
 export const SettingsFieldSet = styled(Box)(({ theme }) => ({
@@ -28,6 +28,7 @@ const slippageControlSelected = (theme: Theme) => ({
 interface SlippageDefaultProps {
   selected?: boolean;
 }
+
 export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(({
   theme,
   selected,