@lifi/widget 3.4.4 → 3.5.1-beta.0

package/components/Token/Token.tsx

@@ -6,11 +6,7 @@ import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useChain } from '../../hooks/useChain.js';
 import { useToken } from '../../hooks/useToken.js';
-import {
-  convertToSubscriptFormat,
-  formatTokenAmount,
-  formatTokenPrice,
-} from '../../utils/format.js';
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
 import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
 import { TokenAvatar } from '../Avatar/TokenAvatar.js';
 import { SmallAvatar } from '../SmallAvatar.js';
@@ -63,7 +59,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
   isLoading,
   ...other
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { chain } = useChain(token?.chainId);
 
   if (isLoading) {
@@ -81,6 +77,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
   const tokenPrice = formatTokenPrice(tokenAmount, token.priceUSD);
 
   let priceImpact;
+  let priceImpactPercent;
   if (impactToken) {
     const impactTokenAmount = formatTokenAmount(
       impactToken.amount,
@@ -89,16 +86,8 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
     const impactTokenPrice =
       formatTokenPrice(impactTokenAmount, impactToken.priceUSD) || 0.01;
 
-    const impact = (tokenPrice / impactTokenPrice - 1) * 100;
-
-    priceImpact = convertToSubscriptFormat(impact, {
-      notation: 'standard',
-      roundingPriority: 'morePrecision',
-      maximumSignificantDigits: 2,
-      maximumFractionDigits: 2,
-      useGrouping: false,
-      roundingMode: 'trunc',
-    });
+    priceImpact = tokenPrice / impactTokenPrice - 1;
+    priceImpactPercent = priceImpact * 100;
   }
 
   const tokenOnChain = !disableDescription ? (
@@ -145,10 +134,18 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
           {impactToken ? (
             enableImpactTokenTooltip ? (
               <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
-                <TextSecondary>{priceImpact}%</TextSecondary>
+                <TextSecondary>
+                  {t('format.percent', { value: priceImpact })}
+                </TextSecondary>
               </Tooltip>
             ) : (
-              <TextSecondary>{priceImpact}%</TextSecondary>
+              <TextSecondary
+                title={priceImpactPercent?.toLocaleString(i18n.language, {
+                  maximumFractionDigits: 9,
+                })}
+              >
+                {t('format.percent', { value: priceImpact })}
+              </TextSecondary>
             )
           ) : null}
           {!disableDescription ? (

package/components/TokenList/TokenList.tsx

@@ -5,9 +5,11 @@ import { useChain } from '../../hooks/useChain.js';
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
 import { useTokenBalances } from '../../hooks/useTokenBalances.js';
 import { useTokenSearch } from '../../hooks/useTokenSearch.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { FormKeyHelper } from '../../stores/form/types.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import type { TokenAmount } from '../../types/token.js';
+import { createElementId, ElementId } from '../../utils/elements.js';
 import { TokenNotFound } from './TokenNotFound.js';
 import { VirtualizedTokenList } from './VirtualizedTokenList.js';
 import type { TokenListProps } from './types.js';
@@ -25,6 +27,7 @@ export const TokenList: FC<TokenListProps> = ({
     320,
     'tokenSearchFilter',
   );
+  const { elementId } = useWidgetConfig();
 
   const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
   const { account } = useAccount({ chainType: chain?.chainType });
@@ -81,7 +84,11 @@ export const TokenList: FC<TokenListProps> = ({
     !tokenSearchFilter;
 
   return (
-    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+    <Box
+      ref={parentRef}
+      style={{ height, overflow: 'auto' }}
+      id={createElementId(ElementId.TokenList, elementId)}
+    >
       {!tokens.length && !isLoading ? (
         <TokenNotFound formType={formType} />
       ) : null}

package/components/TokenList/TokenListItem.tsx

@@ -13,6 +13,7 @@ import type { MouseEventHandler } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
+import { useExplorer } from '../../hooks/useExplorer.js';
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { ListItemButton } from '../ListItem/ListItemButton.js';
@@ -62,6 +63,8 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   isBalanceLoading,
 }) => {
   const { t } = useTranslation();
+  const { getAddressLink } = useExplorer();
+
   const tokenPrice = token.amount
     ? formatTokenPrice(
         formatUnits(token.amount, token.decimals),
@@ -130,7 +133,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                 <IconButton
                   size="small"
                   LinkComponent={Link}
-                  href={`${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`}
+                  href={getAddressLink(token.address, chain)}
                   target="_blank"
                   rel="nofollow noreferrer"
                   onClick={(e) => e.stopPropagation()}

package/components/TransactionDetails.tsx

@@ -12,11 +12,7 @@ import { formatUnits } from 'viem';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import { isRouteDone } from '../stores/routes/utils.js';
 import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js';
-import {
-  convertToSubscriptFormat,
-  formatTokenAmount,
-  formatTokenPrice,
-} from '../utils/format.js';
+import { formatTokenAmount, formatTokenPrice } from '../utils/format.js';
 import { Card } from './Card/Card.js';
 import { CardIconButton } from './Card/CardIconButton.js';
 import { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js';
@@ -56,16 +52,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   const toTokenPrice =
     formatTokenPrice(toTokenAmount, route.toToken.priceUSD) || 0.01;
 
-  const impact = (toTokenPrice / fromTokenPrice - 1) * 100;
-
-  const priceImpact = convertToSubscriptFormat(impact, {
-    notation: 'standard',
-    roundingPriority: 'morePrecision',
-    maximumSignificantDigits: 2,
-    maximumFractionDigits: 2,
-    useGrouping: false,
-    roundingMode: 'trunc',
-  });
+  const priceImpact = toTokenPrice / fromTokenPrice - 1;
 
   const feeCollectionStep = route.steps[0].includedSteps.find(
     (includedStep) => includedStep.tool === 'feeCollection',
@@ -181,7 +168,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           <Box display="flex" justifyContent="space-between" mb={0.5}>
             <Typography variant="body2">{t('main.priceImpact')}</Typography>
             <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
-              <Typography variant="body2">{priceImpact}%</Typography>
+              <Typography variant="body2">
+                {t('format.percent', { value: priceImpact })}
+              </Typography>
             </Tooltip>
           </Box>
           {!isRouteDone(route) ? (
@@ -190,7 +179,9 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 <Typography variant="body2">{t('main.maxSlippage')}</Typography>
                 <Tooltip title={t('tooltip.slippage')} sx={{ cursor: 'help' }}>
                   <Typography variant="body2">
-                    {route.steps[0].action.slippage * 100}%
+                    {t('format.percent', {
+                      value: route.steps[0].action.slippage,
+                    })}
                   </Typography>
                 </Tooltip>
               </Box>

package/config/constants.ts

@@ -1 +1,3 @@
-export const defaultMaxHeight = 682;
+export const defaultMaxHeight = 686;
+
+export const lifiExplorerUrl = 'https://scan.li.fi';

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.4.4';
+export const version = '3.5.1-beta.0';

package/hooks/useExplorer.ts

@@ -0,0 +1,51 @@
+import type { Chain } from '@lifi/sdk';
+import { lifiExplorerUrl } from '../config/constants.js';
+import { useAvailableChains } from '../hooks/useAvailableChains.js';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+
+const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '');
+
+export const useExplorer = () => {
+  const { explorerUrls } = useWidgetConfig();
+  const { getChainById } = useAvailableChains();
+
+  const getBaseUrl = (chain: Chain) => {
+    const baseUrl = explorerUrls?.[chain.id]
+      ? explorerUrls[chain.id][0]
+      : chain.metamask.blockExplorerUrls[0];
+
+    return sanitiseBaseUrl(baseUrl);
+  };
+
+  const resolveChain = (chain: Chain | number) =>
+    Number.isFinite(chain) ? getChainById(chain as number) : (chain as Chain);
+
+  const getTransactionLink = (txHash: string, chain?: Chain | number) => {
+    if (!chain) {
+      const baseUrl = explorerUrls?.internal?.[0]
+        ? sanitiseBaseUrl(explorerUrls?.internal[0])
+        : lifiExplorerUrl;
+      return `${baseUrl}/tx/${txHash}`;
+    }
+
+    const resolvedChain = resolveChain(chain);
+    return `${resolvedChain ? getBaseUrl(resolvedChain) : lifiExplorerUrl}/tx/${txHash}`;
+  };
+
+  const getAddressLink = (address: string, chain?: Chain | number) => {
+    if (!chain) {
+      const baseUrl = explorerUrls?.internal?.[0]
+        ? sanitiseBaseUrl(explorerUrls?.internal[0])
+        : lifiExplorerUrl;
+      return `${baseUrl}/address/${address}`;
+    }
+
+    const resolvedChain = resolveChain(chain);
+    return `${resolvedChain ? getBaseUrl(resolvedChain) : lifiExplorerUrl}/address/${address}`;
+  };
+
+  return {
+    getTransactionLink,
+    getAddressLink,
+  };
+};

package/hooks/useProcessMessage.ts

@@ -211,7 +211,7 @@ export function getProcessMessage(
       case LiFiErrorCode.ProviderUnavailable:
       default:
         title = t(`error.title.unknown`);
-        if (process.txLink) {
+        if (process.txHash) {
           message = t(`error.message.transactionFailed`);
         } else {
           message = process.error.message || t(`error.message.unknown`);

package/hooks/useRoutes.ts

@@ -282,6 +282,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           return { routes: [route] } as RoutesResponse;
         }
 
+        // Prevent sending a request for the same chain token combinations.
+        if (fromChainId === toChainId && fromTokenAddress === toTokenAddress) {
+          return;
+        }
+
         const data = await getRoutes(
           {
             fromAddress,

package/i18n/bn.json

@@ -4,18 +4,20 @@
     "title": "ভাষা"
   },
   "format": {
-    "currency": "{{value, currency(currency: USD)}}",
-    "number": "{{value, number(maximumFractionDigits: 9)}}"
+    "currency": "",
+    "number": "{{value, number(maximumFractionDigits: 9)}}",
+    "percent": ""
   },
   "button": {
     "auto": "স্বয়ংক্রিয়",
     "bookmark": "",
     "bookmarks": "",
     "bridge": "",
+    "bridgeReview": "",
     "buy": "",
-    "buyNow": "",
     "cancel": "বাতিল করুন",
     "changeWallet": "",
+    "checkoutReview": "",
     "close": "",
     "confirm": "",
     "connectWallet": "ওয়ালেট সংযুক্ত করুন",
@@ -24,6 +26,8 @@
     "copyAddress": "ঠিকানা কপি করুন",
     "dark": "অন্ধকার",
     "delete": "মুছে ফেলুন",
+    "deposit": "",
+    "depositReview": "",
     "disconnect": "সংযোগ বিচ্ছিন্ন করুন",
     "done": "সম্পন্ন হয়েছে",
     "exchange": "",
@@ -36,14 +40,12 @@
     "removeTransaction": "",
     "reset": "পুনরায় সেট করুন",
     "resetSettings": "সেটিংস রিসেট করুন",
-    "reviewBridge": "",
-    "reviewPurchase": "",
-    "reviewSwap": "সোওয়াপ পর্যালোচনা করুন",
     "seeDetails": "বিস্তারিত দেখুন",
     "showAll": "সবগুলো দেখুন",
     "startBridging": "",
     "startSwapping": "",
     "swap": "সোওয়াপ",
+    "swapReview": "",
     "tryAgain": "আবার চেষ্টা করুন",
     "viewCoverage": "কভারেজ দেখুন",
     "viewOnExplorer": "এক্সপ্লোরারে দেখুন"
@@ -53,15 +55,18 @@
     "bookmarkedWallets": "",
     "bridge": "",
     "checkout": "চেকআউট",
+    "checkoutDetails": "",
+    "deposit": "",
+    "depositDetails": "",
     "exchange": "",
     "from": "থেকে সোওয়াপ করুন",
     "gas": "গ্যাস",
     "payWith": "",
-    "purchase": "",
-    "purchaseDetails": "",
+    "receive": "",
     "recentWallets": "",
     "selectChain": "চেইন নির্বাচন করুন",
     "selectWallet": "আপনার ওয়ালেট নির্বাচন করুন",
+    "send": "",
     "sendToWallet": "",
     "settings": "সেটিংস",
     "swap": "সোওয়াপ",
@@ -69,7 +74,8 @@
     "transactionDetails": "",
     "transactionHistory": "",
     "walletConnected": "ওয়ালেট সংযুক্ত",
-    "youGet": ""
+    "youGet": "",
+    "youPay": ""
   },
   "info": {
     "message": {
@@ -82,7 +88,7 @@
       "routeNotFound": ""
     },
     "title": {
-      "autoRefuel": "গ্যাস পান",
+      "autoRefuel": "",
       "emptyActiveTransactions": "",
       "emptyTransactionHistory": "",
       "routeNotFound": "কোন রুট উপলব্ধ"
@@ -92,12 +98,13 @@
     "message": {
       "exchangePartiallySuccessful": "",
       "exchangeSuccessful": "",
-      "purchaseSuccessful": ""
+      "checkoutSuccessful": ""
     },
     "title": {
       "bridgePartiallySuccessful": "",
       "bridgeSuccessful": "",
-      "purchaseSuccessful": "",
+      "depositSuccessful": "",
+      "checkoutSuccessful": "",
       "refundIssued": "রিফান্ড জারি করা হয়েছে",
       "swapPartiallySuccessful": "সোওয়াপ আংশিকভাবে সফল",
       "swapSuccessful": "সোওয়াপ সফল"
@@ -132,8 +139,10 @@
       "signatureRejected": "",
       "slippageThreshold": "স্লিপেজ সংজ্ঞায়িত থ্রেশহোল্ডের চেয়ে বড়। একটি নতুন উদ্ধৃতি পেতে একটি নতুন রুট অনুরোধ করুন।",
       "transactionCanceled": "",
+      "transactionExpired": "",
       "transactionFailed": "আরও তথ্যের জন্য ব্লক এক্সপ্লোরার চেক করুন।",
       "transactionNotSent": "",
+      "transactionSimulationFailed": "",
       "unknown": "অনুগ্রহ করে আবার চেষ্টা করুন বা সাপোর্ট এর সাথে যোগাযোগ করুন।",
       "walletChangedDuringExecution": ""
     },
@@ -149,7 +158,9 @@
       "signatureRejected": "",
       "slippageNotMet": "স্লিপেজ শর্ত পূরণ করা হয়নি",
       "transactionCanceled": "লেনদেন বাতিল করা হয়েছে",
+      "transactionExpired": "",
       "transactionFailed": "লেনদেন ব্যর্থ হয়েছে",
+      "transactionSimulationFailed": "",
       "transactionUnderpriced": "লেনদেনের দাম কম",
       "transactionUnprepared": "লেনদেন প্রস্তুত করতে অক্ষম",
       "unknown": "কিছু ভুল হয়েছে",
@@ -161,16 +172,20 @@
     }
   },
   "tooltip": {
-    "estimatedTime": "মিনিটের মধ্যে আনুমানিক সোওয়াপ কার্যকর করার সময়।",
+    "deselectAll": "",
+    "estimatedTime": "",
+    "feeCollection": "",
+    "minReceived": "",
     "notFound": {
       "text": "আমরা এই পৃষ্ঠাটি খুঁজে পাইনি।",
       "title": "৪০৪"
     },
-    "numberOfSteps": "সোওয়াপ পদক্ষেপ একটি সংখ্যা. প্রতিটি ধাপে ১-২ টি লেনদেন থাকতে পারে যার জন্য একটি স্বাক্ষর প্রয়োজন।",
+    "numberOfSteps": "",
+    "priceImpact": "",
     "progressToNextUpdate": "প্রদর্শিত ডেটা {{value}} সেকেন্ড পরে স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে। ম্যানুয়ালি আপডেট করতে এখানে ক্লিক করুন।",
-    "settingsModified": "সেটিংস (পরিবর্তিত)",
     "selectAll": "",
-    "deselectAll": ""
+    "settingsModified": "সেটিংস (পরিবর্তিত)",
+    "slippage": ""
   },
   "main": {
     "allTokens": "",
@@ -180,21 +195,22 @@
     "depositStepDetails": "",
     "featuredTokens": "বৈশিষ্ট্যযুক্ত টোকেন",
     "fees": {
+      "defaultIntegrator": "",
       "estimated": "",
-      "networkEstimated": "",
-      "networkPaid": "",
+      "integrator": "",
+      "network": "",
       "paid": "",
-      "providerEstimated": "",
-      "providerPaid": ""
+      "provider": ""
     },
     "from": "থেকে",
-    "fromAmount": "আপনি টাকা পাঠান",
-    "gasCost": "গ্যাস খরচ",
     "inProgress": "প্রক্রিয়াধীন",
+    "maxSlippage": "",
+    "minReceived": "",
     "myTokens": "",
     "onChain": "{{chainName}} -এ",
     "ownedBy": "মালিক",
     "popularTokens": "",
+    "priceImpact": "",
     "process": {
       "bridge": {
         "actionRequired": "",
@@ -243,18 +259,17 @@
     "sentToAddress": "{{address}} এ পাঠানো হয়েছে",
     "stepBridge": "ব্রিজ",
     "stepBridgeAndBuy": "",
+    "stepBridgeAndDeposit": "",
     "stepDetails": "লি.ফাই এর মাধ্যমে {{tool}}",
     "stepSwap": "সোওয়াপ",
     "stepSwapAndBridge": "সোওয়াপ এবং ব্রিজ",
     "stepSwapAndBuy": "",
+    "stepSwapAndDeposit": "",
     "supportId": "সাপোর্ট আইডি",
     "swapStepDetails": "{{tool}} এর মাধ্যমে {{chain}} এ সোওয়াপ করুন",
     "tags": {
       "cheapest": "",
-      "fastest": "",
-      "insurable": "বীমাযোগ্য",
-      "insurance": "বীমা",
-      "insured": "বীমাকৃত"
+      "fastest": ""
     },
     "to": "প্রতি",
     "tokenOnChain": "{{chainName}} -এ {{tokenSymbol}}",
@@ -262,12 +277,6 @@
     "tokenSearch": "আপনার টোকেন অনুসন্ধান করুন",
     "valueLoss": "মান ক্ষতি"
   },
-  "insurance": {
-    "bridgeExploits": "ব্রিজের ত্রুটি, হ্যাক বা শোষণ",
-    "insure": "ট্রানজিটে টোকেনের ১০০% বীমা করুন।",
-    "insured": "আপনি ট্রানজিটের ১০০% টোকেন বীমা করেছেন:",
-    "slippageError": "প্রাপ্ত টোকেনগুলির জন্য স্লিপেজে ত্রুটি।"
-  },
   "settings": {
     "theme": "",
     "enabledBridges": "",
@@ -279,7 +288,7 @@
       "title": "গ্যাসের দাম"
     },
     "routePriority": "রুট অগ্রাধিকার",
-    "slippage": "স্লিপেজ",
+    "slippage": "",
     "custom": "",
     "resetSettings": ""
   },