@lifi/widget 3.0.2 → 3.1.1

package/i18n/en.json

@@ -4,7 +4,7 @@
     "title": "Language"
   },
   "format": {
-    "currency": "{{value, currency(currency: USD)}}",
+    "currency": "{{value, currencyExt(currency: USD)}}",
     "number": "{{value, number(maximumFractionDigits: 9)}}"
   },
   "button": {
@@ -82,7 +82,7 @@
       "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",
+      "autoRefuel": "Get {{chainName}} gas",
       "emptyActiveTransactions": "No active transactions",
       "emptyTransactionHistory": "No recent transactions",
       "routeNotFound": "No routes available"
@@ -90,7 +90,7 @@
   },
   "success": {
     "message": {
-      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} ran out of liquidity for {{tokenSymbol}} token.",
+      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} couldn't proceed due to either slippage settings or lack of liquidity for the {{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."
     },
@@ -132,8 +132,10 @@
       "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.",
       "transactionCanceled": "Transaction was canceled.",
+      "transactionExpired": "The block height has exceeded the maximum allowed limit or blockhash is no longer recent enough.",
       "transactionFailed": "Please check the block explorer for more information.",
       "transactionNotSent": "Transaction was not sent.",
+      "transactionSimulationFailed": "The transaction could not be executed in simulation.",
       "unknown": "Please try again or contact support.",
       "walletChangedDuringExecution": "The wallet address that requested the quote does not match the wallet address attempting to sign the transaction. Please ensure the same wallet address is used throughout the entire transaction execution."
     },
@@ -149,7 +151,9 @@
       "signatureRejected": "Signature required",
       "slippageNotMet": "Slippage conditions not met",
       "transactionCanceled": "Transaction canceled",
+      "transactionExpired": "Transaction expired",
       "transactionFailed": "Transaction failed",
+      "transactionSimulationFailed": "Transaction simulation failed",
       "transactionUnderpriced": "Transaction is underpriced",
       "transactionUnprepared": "Unable to prepare transaction",
       "unknown": "Something went wrong",
@@ -162,14 +166,16 @@
   },
   "tooltip": {
     "estimatedTime": "Estimated execution time in minutes.",
+    "minReceived": "The estimated minimum amount may change until the swapping/bridging transaction is signed. For 2-step transfers, this applies until the second step transaction is signed.",
     "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.",
+    "numberOfSteps": "Each exchange step can contain 1-2 transactions that require a signature.",
+    "priceImpact": "The estimated value difference between the source and destination tokens.",
     "progressToNextUpdate": "Quotes will update in {{value}} seconds. <0/> Click here to update now.",
-    "settingsModified": "Settings (modified)",
     "selectAll": "Select all",
+    "settingsModified": "Settings (modified)",
     "deselectAll": "Deselect all"
   },
   "main": {
@@ -180,21 +186,22 @@
     "depositStepDetails": "Deposit via {{tool}}",
     "featuredTokens": "Featured tokens",
     "fees": {
-      "estimated": "estimated fees",
-      "networkEstimated": "Estimated network fees:",
-      "networkPaid": "Paid network fees:",
-      "paid": "paid fees",
-      "providerEstimated": "Estimated provider fees:",
-      "providerPaid": "Paid provider fees:"
+      "estimated": "estimated costs",
+      "network": "Network cost",
+      "paid": "paid costs",
+      "provider": "Provider fee"
     },
     "from": "From",
     "fromAmount": "You pay",
     "gasCost": "Gas cost",
     "inProgress": "in progress",
+    "maxSlippage": "Max. slippage",
+    "minReceived": "Min. received",
     "myTokens": "My tokens",
     "onChain": "on {{chainName}}",
     "ownedBy": "Owned by",
     "popularTokens": "Popular tokens",
+    "priceImpact": "Price impact",
     "process": {
       "bridge": {
         "actionRequired": "Please sign the transaction",
@@ -251,10 +258,7 @@
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {
       "cheapest": "Best Return",
-      "fastest": "Fastest",
-      "insurable": "Insurable",
-      "insurance": "Insurance",
-      "insured": "Insured"
+      "fastest": "Fastest"
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
@@ -262,12 +266,6 @@
     "tokenSearch": "Search by token name or address",
     "valueLoss": "Value loss"
   },
-  "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",

package/i18n/index.ts

@@ -1,17 +1,17 @@
-import bn from './bn.json';
-import de from './de.json';
-import en from './en.json';
-import es from './es.json';
-import fr from './fr.json';
-import id from './id.json';
-import it from './it.json';
-import ja from './ja.json';
-import ko from './ko.json';
-import pt from './pt.json';
-import th from './th.json';
-import tr from './tr.json';
-import uk from './uk.json';
-import vi from './vi.json';
-import zh from './zh.json';
+import bn from './bn.json' assert { type: 'json' };
+import de from './de.json' assert { type: 'json' };
+import en from './en.json' assert { type: 'json' };
+import es from './es.json' assert { type: 'json' };
+import fr from './fr.json' assert { type: 'json' };
+import id from './id.json' assert { type: 'json' };
+import it from './it.json' assert { type: 'json' };
+import ja from './ja.json' assert { type: 'json' };
+import ko from './ko.json' assert { type: 'json' };
+import pt from './pt.json' assert { type: 'json' };
+import th from './th.json' assert { type: 'json' };
+import tr from './tr.json' assert { type: 'json' };
+import uk from './uk.json' assert { type: 'json' };
+import vi from './vi.json' assert { type: 'json' };
+import zh from './zh.json' assert { type: 'json' };
 
 export { bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh };

package/index.ts

@@ -1,3 +1,4 @@
+export * from '@lifi/types';
 export { App as LiFiWidget } from './App.js';
 export type { WidgetDrawer } from './AppDrawer.js';
 export * from './components/ContractComponent/ItemPrice.js';
@@ -18,9 +19,5 @@ export * from './themes/palettes.js';
 export { watermelonLightTheme } from './themes/watermelonLight.js';
 export { windows95Theme } from './themes/windows95.js';
 export * from './types/events.js';
-export * from './types/token.js';
+export type { TokenAmount } from './types/token.js';
 export * from './types/widget.js';
-
-// ClassNameGenerator.configure((componentName) =>
-//   componentName.replace('Mui', 'LiFi'),
-// );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "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": "./_esm/index.js",
@@ -32,31 +32,30 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@lifi/sdk": "^3.0.0",
-    "@lifi/wallet-management": "^3.0.0",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.20",
+    "@emotion/react": "^11.12.0",
+    "@emotion/styled": "^11.12.0",
+    "@lifi/sdk": "^3.1.0-beta.0",
+    "@lifi/wallet-management": "^3.0.2",
+    "@mui/icons-material": "^5.16.4",
+    "@mui/lab": "^5.0.0-alpha.172",
+    "@mui/material": "^5.16.4",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/web3.js": "^1.93.2",
-    "@tanstack/react-query": "^5.48.0",
-    "@tanstack/react-virtual": "^3.7.0",
-    "i18next": "^23.11.5",
+    "@solana/web3.js": "^1.95.1",
+    "@tanstack/react-query": "^5.51.9",
+    "@tanstack/react-virtual": "^3.8.3",
+    "i18next": "^23.12.2",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^14.1.2",
-    "react-intersection-observer": "^9.10.3",
-    "react-router-dom": "^6.24.0",
-    "react-timer-hook": "^3.0.7",
+    "react-i18next": "^14.1.3",
+    "react-intersection-observer": "^9.13.0",
+    "react-router-dom": "^6.25.1",
     "uuid": "^10.0.0",
-    "viem": "^2.16.2",
-    "wagmi": "^2.10.7",
-    "zustand": "^4.5.3"
+    "viem": "^2.17.5",
+    "wagmi": "^2.11.2",
+    "zustand": "^4.5.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.0",

package/pages/MainPage/ReviewButton.tsx

@@ -5,25 +5,23 @@ import { useRoutes } from '../../hooks/useRoutes.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 
 export const ReviewButton: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const setExecutableRoute = useSetExecutableRoute();
   const { subvariant } = useWidgetConfig();
   const splitState = useSplitSubvariantStore((state) => state.state);
   const [toAddress] = useFieldValues('toAddress');
   const { requiredToAddress } = useToAddressRequirements();
-  const { routes } = useRoutes();
+  const { routes, setReviewableRoute } = useRoutes();
 
   const currentRoute = routes?.[0];
 
   const handleClick = async () => {
     if (currentRoute) {
-      setExecutableRoute(currentRoute);
+      setReviewableRoute(currentRoute);
       navigate(navigationRoutes.transactionExecution, {
         state: { routeId: currentRoute.id },
       });

package/pages/RoutesPage/RoutesPage.tsx

@@ -13,21 +13,20 @@ import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useRoutes } from '../../hooks/useRoutes.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { Stack } from './RoutesPage.style.js';
 
 export const RoutesPage: React.FC<BoxProps> = () => {
   const { navigate } = useNavigateBack();
-  const setExecutableRoute = useSetExecutableRoute();
   const {
     routes,
     isLoading,
     isFetching,
     dataUpdatedAt,
     refetchTime,
-    refetch,
     fromChain,
+    refetch,
+    setReviewableRoute,
   } = useRoutes();
   const { account } = useAccount({ chainType: fromChain?.chainType });
   const [toAddress] = useFieldValues('toAddress');
@@ -52,7 +51,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   useHeader(t(`header.youGet`), headerAction);
 
   const handleRouteClick = (route: Route) => {
-    setExecutableRoute(route);
+    setReviewableRoute(route);
     navigate(navigationRoutes.transactionExecution, {
       state: { routeId: route.id },
     });

package/pages/SelectEnabledToolsPage.tsx

@@ -41,7 +41,7 @@ const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
     : t('tooltip.selectAll');
 
   return (
-    <Tooltip title={tooltipTitle} arrow>
+    <Tooltip title={tooltipTitle}>
       <IconButton
         size="medium"
         edge={theme?.navigation?.edge ? 'end' : false}

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -217,7 +217,7 @@ export const SendToWalletPage = () => {
           >
             {t('button.done')}
           </ButtonTertiary>
-          <Tooltip title={t('button.bookmark')} arrow>
+          <Tooltip title={t('button.bookmark')}>
             <SendToWalletIconButton
               onClick={handleBookmarkAddress}
               loading={isBookmarkButtonLoading}

package/pages/SettingsPage/ThemeSettings.tsx

@@ -29,7 +29,7 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
   Icon,
   ...props
 }) => (
-  <Tooltip title={title} arrow>
+  <Tooltip title={title}>
     <Tab icon={Icon} value={value} {...props} disableRipple />
   </Tooltip>
 );

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -7,9 +7,9 @@ import { useLocation } from 'react-router-dom';
 import { Card } from '../../components/Card/Card.js';
 import { CardTitle } from '../../components/Card/CardTitle.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
-import { Insurance } from '../../components/Insurance/Insurance.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { getStepList } from '../../components/Step/StepList.js';
+import { TransactionDetails } from '../../components/TransactionDetails.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useTools } from '../../hooks/useTools.js';
@@ -18,7 +18,6 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
 import { getSourceTxHash } from '../../stores/routes/utils.js';
 import { buildRouteFromTxHistory } from '../../utils/converters.js';
-import { formatTokenAmount } from '../../utils/format.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { ContactSupportButton } from './ContactSupportButton.js';
 import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
@@ -34,7 +33,7 @@ export const TransactionDetailsPage: React.FC = () => {
   );
 
   const { transaction, isLoading } = useTransactionDetails(
-    state?.transactionHash,
+    !storedRouteExecution && state?.transactionHash,
   );
 
   const title =
@@ -71,8 +70,6 @@ export const TransactionDetailsPage: React.FC = () => {
 
   const sourceTxHash = getSourceTxHash(routeExecution?.route);
 
-  const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress;
-
   let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
 
   if (process.env.NODE_ENV === 'development') {
@@ -97,14 +94,14 @@ export const TransactionDetailsPage: React.FC = () => {
         pb={1}
       >
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
+          {startedAt.toLocaleString(i18n.language, {
             dateStyle: 'long',
-          }).format(startedAt)}
+          })}
         </Typography>
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
+          {startedAt.toLocaleString(i18n.language, {
             timeStyle: 'short',
-          }).format(startedAt)}
+          })}
         </Typography>
       </Box>
       {getStepList(routeExecution?.route, subvariant)}
@@ -113,17 +110,9 @@ export const TransactionDetailsPage: React.FC = () => {
           {contractSecondaryComponent}
         </ContractComponent>
       ) : null}
-      {routeExecution?.route?.insurance?.state === 'INSURED' ? (
-        <Insurance
-          status={routeExecution.status}
-          feeAmountUsd={routeExecution.route.insurance.feeAmountUsd}
-          insuredAmount={formatTokenAmount(
-            BigInt(routeExecution.route.toAmountMin),
-            routeExecution.route.toToken.decimals,
-          )}
-          insuredTokenSymbol={routeExecution.route.toToken.symbol}
-          insurableRouteId={routeExecution.route.id}
-          insuranceCoverageId={insuranceCoverageId}
+      {routeExecution?.route ? (
+        <TransactionDetails
+          route={routeExecution?.route}
           sx={{ marginTop: 2 }}
         />
       ) : null}

package/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -80,14 +80,12 @@ export const TransactionHistoryItem: React.FC<{
         px={2}
       >
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(
-            startedAt,
-          )}
+          {startedAt.toLocaleString(i18n.language, { dateStyle: 'long' })}
         </Typography>
         <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
+          {startedAt.toLocaleString(i18n.language, {
             timeStyle: 'short',
-          }).format(startedAt)}
+          })}
         </Typography>
       </Box>
       <Box px={2} py={2}>

package/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -126,7 +126,6 @@ const ExchangeRateBottomSheetContent: React.FC<
             value: formatTokenAmount(
               BigInt(data.oldToAmount),
               data.toToken.decimals,
-              5,
             ),
           })}{' '}
           {data?.toToken.symbol}
@@ -139,7 +138,6 @@ const ExchangeRateBottomSheetContent: React.FC<
             value: formatTokenAmount(
               BigInt(data?.newToAmount),
               data?.toToken.decimals,
-              5,
             ),
           })}{' '}
           {data?.toToken.symbol}

package/pages/TransactionPage/RouteTracker.tsx

@@ -0,0 +1,68 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js';
+import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
+
+export interface RouteTrackerProps {
+  observableRouteId: string;
+  onChange: Dispatch<SetStateAction<string>>;
+  onFetching: Dispatch<SetStateAction<boolean>>;
+}
+
+export const RouteTracker = ({
+  observableRouteId,
+  onChange,
+  onFetching,
+}: RouteTrackerProps) => {
+  const routeExecutionStore = useRouteExecutionStoreContext();
+  const setExecutableRoute = useSetExecutableRoute();
+  const [observableRoute] = useState(
+    () => routeExecutionStore.getState().routes[observableRouteId]?.route,
+  );
+  const observableRouteIdRef = useRef(observableRoute?.id);
+  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes(
+    { observableRoute },
+  );
+  const currentRoute = routes?.[0];
+
+  /**
+   * The reviewable route is the route that the user currently sees on the review page.
+   * The observable route is the route for which we track bridges and exchanges.
+   * This allows us to query the route using the same tool each time we refresh.
+   * The observable and reviewable routes can be the same when we first enter the review page.
+   */
+  useEffect(() => {
+    if (
+      observableRouteIdRef.current &&
+      currentRoute &&
+      observableRouteIdRef.current !== currentRoute.id
+    ) {
+      const reviewableRouteId = observableRouteIdRef.current;
+      observableRouteIdRef.current = currentRoute.id;
+      setExecutableRoute(currentRoute, [observableRouteId, reviewableRouteId]);
+      onChange(currentRoute.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentRoute?.id, observableRouteId]);
+
+  useEffect(() => {
+    onFetching(isFetching);
+  }, [isFetching, onFetching]);
+
+  const handleRefetch = () => {
+    refetch();
+  };
+
+  return (
+    <ProgressToNextUpdate
+      updatedAt={dataUpdatedAt || new Date().getTime()}
+      timeToUpdate={refetchTime}
+      isLoading={isFetching}
+      onClick={handleRefetch}
+      sx={{ marginRight: -1 }}
+      size="medium"
+    />
+  );
+};

package/pages/TransactionPage/StartTransactionButton.tsx

@@ -1,8 +1,6 @@
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js';
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js';
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
 import type { StartTransactionButtonProps } from './types.js';
 
 export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
@@ -30,25 +28,3 @@ export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
     />
   );
 };
-
-export const StartInsurableTransactionButton: React.FC<
-  StartTransactionButtonProps
-> = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
-  const routeExecution = useRouteExecutionStore(
-    (state) => state.routes[insurableRouteId],
-  );
-  const { isFetching } = useRoutes({
-    insurableRoute: routeExecution?.route,
-  });
-
-  return (
-    <StartTransactionButton
-      onClick={onClick}
-      text={text}
-      route={route}
-      disabled={disabled}
-      loading={loading || isFetching}
-      insurableRouteId={insurableRouteId}
-    />
-  );
-};