@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/hooks/useTokenBalances.ts

@@ -0,0 +1,90 @@
+import { getTokenBalances } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { formatUnits } from 'viem';
+import type { TokenAmount } from '../types';
+import { useAccount } from './useAccount';
+import { useFeaturedTokens } from './useFeaturedTokens';
+import { useTokens } from './useTokens';
+
+const defaultRefetchInterval = 32_000;
+
+export const useTokenBalances = (selectedChainId?: number) => {
+  const { accounts } = useAccount();
+  const featuredTokens = useFeaturedTokens(selectedChainId);
+  const { tokens, chain, isLoading } = useTokens(selectedChainId);
+
+  const account = accounts.find(
+    (account) => account.chainType === chain?.chainType,
+  );
+  const isBalanceLoadingEnabled =
+    Boolean(account?.address) &&
+    Boolean(tokens?.length) &&
+    Boolean(selectedChainId);
+
+  const {
+    data: tokensWithBalance,
+    isLoading: isBalanceLoading,
+    refetch,
+  } = useQuery({
+    queryKey: [
+      'token-balances',
+      account?.address,
+      selectedChainId,
+      tokens?.length,
+    ],
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      const tokenBalances = await getTokenBalances(
+        accountAddress as string,
+        tokens!,
+      );
+
+      const featuredTokenAddresses = new Set(
+        featuredTokens?.map((token) => token.address),
+      );
+
+      const sortFn = (a: TokenAmount, b: TokenAmount) =>
+        parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) *
+          parseFloat(b.priceUSD ?? '0') -
+        parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) *
+          parseFloat(a.priceUSD ?? '0');
+      const formattedTokens = (
+        tokenBalances.length === 0 ? tokens : tokenBalances
+      ) as TokenAmount[];
+
+      const result = [
+        ...formattedTokens
+          .filter(
+            (token) =>
+              token.amount && featuredTokenAddresses.has(token.address),
+          )
+          .sort(sortFn),
+        ...formattedTokens.filter(
+          (token) => !token.amount && featuredTokenAddresses.has(token.address),
+        ),
+        ...formattedTokens
+          .filter(
+            (token) =>
+              token.amount && !featuredTokenAddresses.has(token.address),
+          )
+          .sort(sortFn),
+        ...formattedTokens.filter(
+          (token) =>
+            !token.amount && !featuredTokenAddresses.has(token.address),
+        ),
+      ];
+      return result;
+    },
+    enabled: isBalanceLoadingEnabled,
+    refetchInterval: defaultRefetchInterval,
+    staleTime: defaultRefetchInterval,
+  });
+
+  return {
+    tokens,
+    tokensWithBalance,
+    featuredTokens,
+    isLoading,
+    isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
+    refetch,
+  };
+};

package/src/hooks/useTokenSearch.ts

@@ -0,0 +1,45 @@
+import { getToken, type ChainId, type TokensResponse } from '@lifi/sdk';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { TokenAmount } from '../types';
+
+export const useTokenSearch = (
+  chainId?: number,
+  tokenQuery?: string,
+  enabled?: boolean,
+) => {
+  const queryClient = useQueryClient();
+  const { data, isLoading } = useQuery({
+    queryKey: ['token-search', chainId, tokenQuery],
+    queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
+      const token = await getToken(chainId as ChainId, tokenQuery as string, {
+        signal,
+      });
+
+      if (token) {
+        queryClient.setQueriesData<TokensResponse>(
+          { queryKey: ['tokens'] },
+          (data) => {
+            if (
+              data &&
+              !data.tokens[chainId as number]?.some(
+                (t) => t.address === token.address,
+              )
+            ) {
+              const clonedData = { ...data };
+              clonedData.tokens[chainId as number]?.push(token as TokenAmount);
+              return clonedData;
+            }
+          },
+        );
+      }
+      return token as TokenAmount;
+    },
+
+    enabled: Boolean(chainId && tokenQuery && enabled),
+    retry: false,
+  });
+  return {
+    token: data,
+    isLoading,
+  };
+};

package/src/hooks/useTokens.ts

@@ -0,0 +1,91 @@
+import { ChainType, getTokens } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useWidgetConfig } from '../providers';
+import type { TokenAmount } from '../types';
+import { useChains } from './useChains';
+import { useFeaturedTokens } from './useFeaturedTokens';
+
+export const useTokens = (selectedChainId?: number) => {
+  const { tokens: configTokens } = useWidgetConfig();
+  const { data, isLoading } = useQuery({
+    queryKey: ['tokens'],
+    queryFn: () => getTokens({ chainTypes: [ChainType.EVM, ChainType.SVM] }),
+    refetchInterval: 3_600_000,
+  });
+  const {
+    chains,
+    isLoading: isSupportedChainsLoading,
+    getChainById,
+  } = useChains();
+  const featuredTokens = useFeaturedTokens(selectedChainId);
+
+  const filteredData = useMemo(() => {
+    if (isSupportedChainsLoading) {
+      return;
+    }
+    const chain = getChainById(selectedChainId, chains);
+    const chainAllowed = selectedChainId && chain;
+    if (!chainAllowed) {
+      return;
+    }
+    let filteredTokens = data?.tokens[selectedChainId];
+    const includedTokens = configTokens?.include?.filter(
+      (token) => token.chainId === selectedChainId,
+    );
+    if (includedTokens?.length) {
+      filteredTokens = filteredTokens
+        ? [...includedTokens, ...filteredTokens]
+        : includedTokens;
+    }
+    const allowedTokens = configTokens?.allow
+      ?.filter((token) => token.chainId === selectedChainId)
+      .map((token) => token.address);
+    if (allowedTokens?.length) {
+      filteredTokens = filteredTokens?.filter((token) =>
+        allowedTokens.includes(token.address),
+      );
+    }
+    const deniedTokenAddresses = configTokens?.deny
+      ?.filter((token) => token.chainId === selectedChainId)
+      .map((token) => token.address);
+    if (deniedTokenAddresses?.length) {
+      filteredTokens = filteredTokens?.filter(
+        (token) => !deniedTokenAddresses.includes(token.address),
+      );
+    }
+    const featuredTokenAddresses = new Set(
+      featuredTokens?.map((token) => token.address),
+    );
+    const tokens = [
+      ...(featuredTokens?.map((token) => {
+        (token as TokenAmount).featured = true;
+        return token;
+      }) ?? []),
+      ...(filteredTokens?.filter(
+        (token) => !featuredTokenAddresses.has(token.address),
+      ) ?? []),
+    ] as TokenAmount[];
+
+    return {
+      tokens,
+      chain,
+    };
+  }, [
+    chains,
+    configTokens?.allow,
+    configTokens?.deny,
+    configTokens?.include,
+    data?.tokens,
+    featuredTokens,
+    getChainById,
+    isSupportedChainsLoading,
+    selectedChainId,
+  ]);
+
+  return {
+    tokens: filteredData?.tokens,
+    chain: filteredData?.chain,
+    isLoading,
+  };
+};

package/src/hooks/useTools.ts

@@ -0,0 +1,36 @@
+import { getTools, type ToolsResponse } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { isItemAllowed, useWidgetConfig } from '../providers';
+import { useSettingsStore } from '../stores';
+
+export const useTools = () => {
+  const { bridges, exchanges } = useWidgetConfig();
+  const { data } = useQuery({
+    queryKey: ['tools'],
+    queryFn: async (): Promise<ToolsResponse> => {
+      const tools = await getTools();
+      const result = {
+        bridges: tools.bridges.filter((bridge) =>
+          isItemAllowed(bridge.key, bridges),
+        ),
+        exchanges: tools.exchanges.filter((exchange) =>
+          isItemAllowed(exchange.key, exchanges),
+        ),
+      };
+      const { initializeTools } = useSettingsStore.getState();
+      initializeTools(
+        'Bridges',
+        result.bridges.map((bridge) => bridge.key),
+      );
+      initializeTools(
+        'Exchanges',
+        result.exchanges.map((exchange) => exchange.key),
+      );
+      return result;
+    },
+    refetchInterval: 180000,
+    staleTime: 180000,
+  });
+
+  return { tools: data };
+};

package/src/hooks/useTransactionDetails.ts

@@ -0,0 +1,76 @@
+import { getStatus, type StatusResponse } from '@lifi/sdk';
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { useAccount } from './useAccount';
+
+export const useTransactionDetails = (transactionHash: string) => {
+  const { account } = useAccount();
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['transaction-history', account.address, transactionHash],
+    queryFn: async ({
+      queryKey: [, accountAddress, transactionHash],
+      signal,
+    }) => {
+      if (!accountAddress) {
+        return;
+      }
+      if (transactionHash) {
+        const cachedHistory = queryClient.getQueryData<StatusResponse[]>([
+          'transaction-history',
+          accountAddress,
+        ]);
+
+        let transaction = cachedHistory?.find(
+          (t) => t.sending.txHash === transactionHash,
+        );
+
+        if (transaction) {
+          return transaction;
+        }
+
+        transaction = await getStatus(
+          {
+            txHash: transactionHash,
+          },
+          { signal },
+        );
+
+        if (cachedHistory && transaction) {
+          queryClient.setQueryData<StatusResponse[]>(
+            ['transaction-history', accountAddress],
+            (data) => {
+              return [...data!, transaction!];
+            },
+          );
+        }
+
+        return transaction;
+      }
+    },
+    refetchInterval: 300000,
+    enabled: Boolean(account.address),
+    initialData: () => {
+      const transaction = queryClient
+        .getQueryData<StatusResponse[]>([
+          'transaction-history',
+          account.address,
+        ])
+        ?.find((t) => t.sending.txHash === transactionHash);
+
+      if (transaction) {
+        return transaction;
+      }
+    },
+    placeholderData: keepPreviousData,
+  });
+
+  return {
+    transaction: data,
+    isLoading,
+  };
+};

package/src/hooks/useTransactionHistory.ts

@@ -0,0 +1,49 @@
+import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useAccount } from './useAccount';
+
+export const useTransactionHistory = () => {
+  const { account } = 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 response = await getTransactionHistory(
+        {
+          wallet: accountAddress,
+          fromTimestamp: date.getTime() / 1000,
+          toTimestamp: Date.now() / 1000,
+        },
+        { signal },
+      );
+
+      const filteredTransactions = response.transfers
+        .filter(
+          (transaction) =>
+            transaction.receiving.chainId && transaction.sending.chainId,
+        )
+        .sort((a, b) => {
+          return (
+            ((b.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
+            ((a.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
+          );
+        });
+
+      return filteredTransactions;
+    },
+    refetchInterval: 300000,
+    enabled: Boolean(account.address),
+  });
+
+  return {
+    data: data ?? [],
+    isLoading,
+    refetch,
+  };
+};

package/src/hooks/useWidgetEvents.ts

@@ -0,0 +1,8 @@
+import mitt from 'mitt';
+import type { WidgetEvents } from '../types';
+
+export const widgetEvents = mitt<WidgetEvents>();
+
+export const useWidgetEvents = () => {
+  return widgetEvents;
+};

package/src/i18n/en.json

@@ -0,0 +1,273 @@
+{
+  "language": {
+    "name": "English",
+    "title": "Language"
+  },
+  "format": {
+    "currency": "{{value, currency(currency: USD)}}",
+    "number": "{{value, number(maximumFractionDigits: 9)}}"
+  },
+  "button": {
+    "auto": "Auto",
+    "bridge": "Bridge",
+    "buy": "Buy",
+    "buyNow": "Buy now",
+    "cancel": "Cancel",
+    "changeWallet": "Change wallet",
+    "connectWallet": "Connect wallet",
+    "contactSupport": "Contact support",
+    "continue": "Continue",
+    "copyAddress": "Copy address",
+    "dark": "Dark",
+    "delete": "Delete",
+    "disconnect": "Disconnect",
+    "done": "Done",
+    "exchange": "Exchange",
+    "getGas": "Get gas",
+    "hide": "Hide",
+    "learnMore": "Learn more",
+    "lifiCheckout": "LI.FI Checkout",
+    "lifiExchange": "LI.FI Exchange",
+    "light": "Light",
+    "max": "max",
+    "ok": "Ok",
+    "removeTransaction": "Remove transaction",
+    "reset": "Reset",
+    "resetSettings": "Reset settings",
+    "reviewBridge": "Review bridge",
+    "reviewPurchase": "Review purchase",
+    "reviewSwap": "Review swap",
+    "seeDetails": "See details",
+    "showAll": "Show all",
+    "startBridging": "Start bridging",
+    "startSwapping": "Start swapping",
+    "swap": "Swap",
+    "tryAgain": "Try again",
+    "viewCoverage": "View coverage",
+    "viewOnExplorer": "View on explorer"
+  },
+  "header": {
+    "activeTransactions": "Active transactions",
+    "bridge": "Bridge",
+    "checkout": "Checkout",
+    "exchange": "Exchange",
+    "from": "Exchange from",
+    "gas": "Gas",
+    "payWith": "Pay with",
+    "purchase": "Purchase",
+    "purchaseDetails": "Purchase details",
+    "selectChain": "Select chain",
+    "selectWallet": "Select your wallet",
+    "settings": "Settings",
+    "swap": "Swap",
+    "to": "Exchange to",
+    "transactionDetails": "Transaction details",
+    "transactionHistory": "Transaction history",
+    "walletConnected": "Wallet connected",
+    "youGet": "You get"
+  },
+  "info": {
+    "message": {
+      "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the transaction.",
+      "emptyActiveTransactions": "Transactions in progress will appear here. Once completed, find them in transaction history.",
+      "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
+      "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
+      "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination."
+    },
+    "title": {
+      "autoRefuel": "Get gas",
+      "emptyActiveTransactions": "No active transactions",
+      "emptyTransactionHistory": "No recent transactions",
+      "routeNotFound": "No routes available"
+    }
+  },
+  "success": {
+    "message": {
+      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} ran out of liquidity for {{tokenSymbol}} token.",
+      "exchangeSuccessful": "There are now {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain.",
+      "purchaseSuccessful": "You now own {{assetName}} in {{walletAddress}} wallet on {{chainName}} chain."
+    },
+    "title": {
+      "bridgePartiallySuccessful": "Bridge partially successful",
+      "bridgeSuccessful": "Bridge successful",
+      "purchaseSuccessful": "Purchase successful",
+      "refundIssued": "Refund issued",
+      "swapPartiallySuccessful": "Swap partially successful",
+      "swapSuccessful": "Swap successful"
+    }
+  },
+  "warning": {
+    "message": {
+      "deleteActiveTransactions": "Active transactions are only stored locally and can't be recovered if you delete them.",
+      "deleteTransactionHistory": "Transaction history is only stored locally and can't be recovered if you delete it.",
+      "highValueLoss": "The value of the received tokens is significantly lower than the exchanged tokens and transaction cost.",
+      "insufficientFunds": "You don't have enough funds to complete the transaction.",
+      "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."
+    },
+    "title": {
+      "deleteActiveTransactions": "Delete all active transactions?",
+      "deleteTransaction": "Delete this transaction?",
+      "deleteTransactionHistory": "Delete transaction history?",
+      "highValueLoss": "High value loss",
+      "insufficientGas": "Insufficient gas",
+      "rateChanged": "Rate changed",
+      "resetSettings": "Reset settings?"
+    }
+  },
+  "error": {
+    "message": {
+      "allowanceRequired": "Transfer amount for {{tokenSymbol}} exceeds your current allowance. Please increase your allowance and try again.",
+      "insufficientFunds": "You don't have enough gas to cover the cost of the transaction.",
+      "signatureRejected": "Your signature is required to complete the transaction. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+      "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new quote.",
+      "transactionFailed": "Please check the block explorer for more information.",
+      "transactionNotSent": "Transaction was not sent.",
+      "transactionCanceled": "Transaction was canceled.",
+      "remainInYourWallet": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
+      "unknown": "Please try again or contact support."
+    },
+    "title": {
+      "allowanceRequired": "Insufficient allowance",
+      "balanceIsTooLow": "The balance is too low",
+      "chainSwitch": "Chain switch required",
+      "gasLimitIsTooLow": "The gas limit is too low",
+      "insufficientFunds": "Insufficient funds",
+      "signatureRejected": "Signature required",
+      "slippageNotMet": "Slippage conditions not met",
+      "transactionCanceled": "Transaction canceled",
+      "exchangeRateUpdateCanceled": "Exchange rate update canceled",
+      "transactionFailed": "Transaction failed",
+      "transactionUnderpriced": "Transaction is underpriced",
+      "transactionUnprepared": "Unable to prepare transaction",
+      "unknown": "Something went wrong",
+      "walletAddressInvalid": "Wallet address is invalid.",
+      "walletAddressRequired": "Wallet address is required.",
+      "walletEnsAddressInvalid": "Wallet address or ENS is invalid, or the network doesn't support ENS."
+    }
+  },
+  "tooltip": {
+    "additionalProviderFee": "Additional bridges, DEXs, and service fees.",
+    "estimatedNetworkFee": "Estimated network fee.",
+    "estimatedTime": "Estimated execution time in minutes.",
+    "notFound": {
+      "text": "We couldn't find this page.",
+      "title": "404"
+    },
+    "numberOfSteps": "A number of exchange steps. Each step can contain 1-2 transactions that require a signature.",
+    "progressToNextUpdate": "Quotes will update in {{value}} seconds. <0/> Click here to update now.",
+    "recommended": "A cheap route that balances complexity and ease of use.",
+    "settingsModified": "Settings (modified)",
+    "selectAll": "Select all",
+    "deselectAll": "Deselect all"
+  },
+  "main": {
+    "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
+    "currentAmount": "Current amount",
+    "estimatedTime": "{{value}}m",
+    "featuredTokens": "Featured tokens",
+    "from": "From",
+    "fromAmount": "You pay",
+    "gasCost": "Gas cost",
+    "gasFeeEstimated": "estimated gas fee",
+    "gasFeePaid": "gas fee paid",
+    "inProgress": "in progress",
+    "nftStepDetails": "Purchase NFT via {{tool}}",
+    "onChain": "on {{chainName}}",
+    "otherTokens": "Other tokens",
+    "ownedBy": "Owned by",
+    "process": {
+      "crossChain": {
+        "actionRequired": "Please sign the transaction",
+        "done": "Bridge transaction confirmed",
+        "pending": "Waiting for bridge transaction",
+        "started": "Preparing bridge transaction"
+      },
+      "nft": {
+        "done": "NFT purchased"
+      },
+      "receivingChain": {
+        "done": "Bridge completed",
+        "partial": "Bridge partially completed",
+        "pending": "Waiting for destination chain",
+        "refunded": "Bridge transaction refunded"
+      },
+      "swap": {
+        "actionRequired": "Please sign the transaction",
+        "done": "Swap completed",
+        "pending": "Waiting for swap transaction",
+        "started": "Preparing swap transaction"
+      },
+      "switchChain": {
+        "actionRequired": "Chain switch required",
+        "done": "Chain switched successfully"
+      },
+      "tokenAllowance": {
+        "done": "Token allowance approved",
+        "pending": "Waiting for token allowance",
+        "started": "Setting token allowance"
+      }
+    },
+    "quotedAmount": "Quoted amount",
+    "rateChange": "Rate change",
+    "receiving": "Receiving",
+    "refuelStepDetails": "Get gas via {{tool}}",
+    "selectChain": "Select chain",
+    "selectChainAndToken": "Select chain and token",
+    "selectToken": "Select token",
+    "sendToAddress": "Send to {{address}}",
+    "sendToWallet": "Send to a different wallet",
+    "sending": "Sending",
+    "sentToAddress": "Sent to {{address}}",
+    "stepBridge": "Bridge",
+    "stepBridgeAndBuy": "Bridge and buy",
+    "stepDetails": "{{tool}} via LI.FI",
+    "stepSwap": "Swap",
+    "stepSwapAndBridge": "Swap and bridge",
+    "stepSwapAndBuy": "Swap and buy",
+    "supportId": "Support ID",
+    "swapStepDetails": "Swap on {{chain}} via {{tool}}",
+    "tags": {
+      "cheapest": "Cheap",
+      "fastest": "Fast",
+      "insurable": "Insurable",
+      "insurance": "Insurance",
+      "insured": "Insured",
+      "recommended": "Recommended",
+      "safest": "Safe"
+    },
+    "to": "To",
+    "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
+    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}}",
+    "tokenSearch": "Search by token name or address",
+    "valueLoss": "Value loss",
+    "walletAddressOrEns": "Wallet address or ENS name"
+  },
+  "insurance": {
+    "bridgeExploits": "Bridge malfunctions, hacks or exploits",
+    "insure": "Insure <0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> in transit.",
+    "insured": "You've insured <0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> in transit:",
+    "slippageError": "Error in slippage for tokens received"
+  },
+  "settings": {
+    "theme": "Theme",
+    "enabledBridges": "Bridges",
+    "enabledExchanges": "Exchanges",
+    "gasPrice": {
+      "fast": "Fast",
+      "normal": "Normal",
+      "slow": "Slow",
+      "title": "Gas price"
+    },
+    "routePriority": "Route priority",
+    "sendToWalletOption": "Send to wallet option",
+    "slippage": "Slippage",
+    "custom": "Custom",
+    "resetSettings": "You're using custom setting limiting the number of available routes."
+  },
+  "wallet": {
+    "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
+  }
+}