@lifi/widget 3.0.1 → 3.1.0

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}
-    />
-  );
-};

package/pages/TransactionPage/TransactionPage.tsx

@@ -1,15 +1,15 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk';
 import { Delete } from '@mui/icons-material';
 import { Box, Button, Tooltip } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
 import { GasMessage } from '../../components/GasMessage/GasMessage.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 { useRouteExecution } from '../../hooks/useRouteExecution.js';
@@ -18,13 +18,10 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { RouteExecutionStatus } from '../../stores/routes/types.js';
 import { WidgetEvent } from '../../types/events.js';
-import { formatTokenAmount } from '../../utils/format.js';
 import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
-import {
-  StartInsurableTransactionButton,
-  StartTransactionButton,
-} from './StartTransactionButton.js';
+import { RouteTracker } from './RouteTracker.js';
+import { StartTransactionButton } from './StartTransactionButton.js';
 import { StatusBottomSheet } from './StatusBottomSheet.js';
 import {
   TokenValueBottomSheet,
@@ -37,11 +34,11 @@ export const TransactionPage: React.FC = () => {
   const { setFieldValue } = useFieldActions();
   const emitter = useWidgetEvents();
   const { navigateBack } = useNavigateBack();
-  const { subvariant, insurance, contractSecondaryComponent } =
-    useWidgetConfig();
+  const { subvariant, contractSecondaryComponent } = useWidgetConfig();
   const { state }: any = useLocation();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
+  const [routeRefreshing, setRouteRefreshing] = useState(false);
 
   const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null);
   const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null);
@@ -76,9 +73,19 @@ export const TransactionPage: React.FC = () => {
     return t(`header.exchange`);
   };
 
-  const title = getHeaderTitle();
+  const headerAction = useMemo(
+    () =>
+      status === RouteExecutionStatus.Idle ? (
+        <RouteTracker
+          observableRouteId={stateRouteId}
+          onChange={setRouteId}
+          onFetching={setRouteRefreshing}
+        />
+      ) : undefined,
+    [stateRouteId, status],
+  );
 
-  useHeader(title);
+  useHeader(getHeaderTitle(), headerAction);
 
   useEffect(() => {
     if (status === RouteExecutionStatus.Idle) {
@@ -150,24 +157,6 @@ export const TransactionPage: React.FC = () => {
     }
   };
 
-  const insuredRoute = route.insurance?.state === 'INSURED';
-  const insurableRoute =
-    insurance &&
-    subvariant !== 'refuel' &&
-    status === RouteExecutionStatus.Idle &&
-    route.insurance?.state === 'INSURABLE';
-
-  const insuranceAvailable = insuredRoute || insurableRoute;
-
-  const StartButton = insurableRoute
-    ? StartInsurableTransactionButton
-    : StartTransactionButton;
-
-  const getInsuranceCoverageId = () =>
-    route.steps[0].execution?.process
-      .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
-      .find((process) => process.txHash)?.txHash ?? route.fromAddress;
-
   return (
     <PageContainer bottomGutters>
       {getStepList(route, subvariant)}
@@ -176,38 +165,22 @@ export const TransactionPage: React.FC = () => {
           {contractSecondaryComponent}
         </ContractComponent>
       ) : null}
-      {insuranceAvailable ? (
-        <Insurance
-          status={status}
-          insurableRouteId={stateRouteId}
-          feeAmountUsd={route.insurance.feeAmountUsd}
-          insuredAmount={formatTokenAmount(
-            BigInt(route.toAmountMin),
-            route.toToken.decimals,
-          )}
-          insuredTokenSymbol={route.toToken.symbol}
-          insuranceCoverageId={getInsuranceCoverageId()}
-          onChange={setRouteId}
-          sx={{ marginTop: 2 }}
-        />
-      ) : null}
+      <TransactionDetails route={route} sx={{ marginTop: 2 }} />
       {status === RouteExecutionStatus.Idle ||
       status === RouteExecutionStatus.Failed ? (
         <>
           <GasMessage mt={2} route={route} />
           <Box mt={2} display="flex">
-            <StartButton
+            <StartTransactionButton
               text={getButtonText()}
               onClick={handleStartClick}
               route={route}
-              insurableRouteId={stateRouteId}
+              loading={routeRefreshing}
             />
             {status === RouteExecutionStatus.Failed ? (
               <Tooltip
                 title={t('button.removeTransaction')}
                 placement="bottom-end"
-                enterDelay={400}
-                arrow
               >
                 <Button
                   onClick={handleRemoveRoute}

package/pages/TransactionPage/types.ts

@@ -4,5 +4,4 @@ import type { BaseTransactionButtonProps } from '../../components/BaseTransactio
 export interface StartTransactionButtonProps
   extends BaseTransactionButtonProps {
   route?: Route;
-  insurableRouteId: string;
 }

package/providers/I18nProvider/I18nProvider.tsx

@@ -7,6 +7,7 @@ import { useSettings } from '../../stores/settings/useSettings.js';
 import { deepMerge } from '../../utils/deepMerge.js';
 import { isItemAllowed } from '../../utils/item.js';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import { currencyExtendedFormatter } from './currencyExtendedFormatter.js';
 import type { LanguageKey, LanguageTranslationResources } from './types.js';
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
@@ -61,6 +62,11 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
 
     i18n.init();
 
+    i18n.services.formatter?.addCached(
+      'currencyExt',
+      currencyExtendedFormatter,
+    );
+
     return i18n;
   }, [language, languageResources, languages]);
 

package/providers/I18nProvider/currencyExtendedFormatter.ts

@@ -0,0 +1,15 @@
+export const currencyExtendedFormatter = (
+  lng: string | undefined,
+  options: any,
+) => {
+  const formatter = new Intl.NumberFormat(lng, {
+    ...options,
+    style: 'currency',
+  });
+  return (value: any) => {
+    if (value > 0 && value < 0.01) {
+      return `<${formatter.format(0.01)}`;
+    }
+    return formatter.format(value);
+  };
+};

package/providers/WalletProvider/EVMBaseProvider.tsx

@@ -1,8 +1,9 @@
+import type { DefaultWagmiConfigResult } from '@lifi/wallet-management';
 import {
   createDefaultWagmiConfig,
   useSyncWagmiConfig,
 } from '@lifi/wallet-management';
-import { useState, type FC, type PropsWithChildren } from 'react';
+import { useRef, type FC, type PropsWithChildren } from 'react';
 import { WagmiProvider } from 'wagmi';
 import { defaultWalletConnectProjectId } from '../../config/walletConnect.js';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
@@ -12,8 +13,10 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
   const { walletConfig } = useWidgetConfig();
   const { chains } = useAvailableChains();
-  const [wagmi] = useState(() =>
-    createDefaultWagmiConfig({
+  const wagmi = useRef<DefaultWagmiConfigResult>();
+
+  if (!wagmi.current) {
+    wagmi.current = createDefaultWagmiConfig({
       walletConnect: walletConfig?.walletConnect ?? {
         projectId: defaultWalletConnectProjectId,
       },
@@ -21,13 +24,16 @@ export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
         appName: 'LI.FI',
         appLogoUrl: LiFiToolLogo,
       },
-    }),
-  );
+      wagmiConfig: {
+        ssr: true,
+      },
+    });
+  }
 
-  useSyncWagmiConfig(wagmi.config, wagmi.connectors, chains);
+  useSyncWagmiConfig(wagmi.current.config, wagmi.current.connectors, chains);
 
   return (
-    <WagmiProvider config={wagmi.config} reconnectOnMount={false}>
+    <WagmiProvider config={wagmi.current.config} reconnectOnMount={false}>
       {children}
     </WagmiProvider>
   );

package/stores/routes/createRouteExecutionStore.ts

@@ -18,7 +18,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
     persist(
       (set, get) => ({
         routes: {},
-        setExecutableRoute: (route: Route, insurableRouteId?: string) => {
+        setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {
           if (!get().routes[route.id]) {
             set((state: RouteExecutionState) => {
               const routes = { ...state.routes };
@@ -26,7 +26,7 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
               Object.keys(routes)
                 .filter(
                   (routeId) =>
-                    (routeId !== insurableRouteId &&
+                    (!observableRouteIds?.includes(routeId) &&
                       hasEnumFlag(
                         routes[routeId]!.status,
                         RouteExecutionStatus.Idle,

package/stores/routes/types.ts

@@ -7,7 +7,7 @@ export interface RouteExecution {
 
 export interface RouteExecutionState {
   routes: Partial<Record<string, RouteExecution>>;
-  setExecutableRoute: (route: Route, insurableRouteId?: string) => void;
+  setExecutableRoute: (route: Route, observableRouteIds?: string[]) => void;
   updateRoute: (route: Route) => void;
   restartRoute: (routeId: string) => void;
   deleteRoute: (routeId: string) => void;

package/themes/createTheme.ts

@@ -347,6 +347,12 @@ export const createTheme = (
         },
       },
       MuiTooltip: {
+        defaultProps: {
+          enterDelay: 400,
+          disableInteractive: true,
+          arrow: true,
+          placement: 'top',
+        },
         styleOverrides: {
           tooltip: ({ theme }) => ({
             backgroundColor: 'rgb(0 0 0 / 64%)',

package/types/widget.ts

@@ -106,7 +106,7 @@ export interface WidgetSDKConfig
     | 'routeOptions'
     | 'widgetVersion'
   > {
-  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges' | 'insurance'>;
+  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
 }
 
 export interface WidgetContractTool {
@@ -149,7 +149,6 @@ export interface WidgetConfig {
 
   routePriority?: Order;
   slippage?: number;
-  insurance?: boolean;
 
   variant?: WidgetVariant;
   subvariant?: WidgetSubvariant;

package/utils/converters.ts

@@ -8,6 +8,7 @@ import type {
   TokenAmount,
   ToolsResponse,
 } from '@lifi/sdk';
+import { v4 as uuidv4 } from 'uuid';
 import { formatUnits } from 'viem';
 import type { RouteExecution } from '../stores/routes/types.js';
 
@@ -93,21 +94,11 @@ export const buildRouteFromTxHistory = (
   const fromToken: TokenAmount = {
     ...sending.token,
     amount: BigInt(sending.amount ?? 0),
-    priceUSD: sending.amountUSD ?? '0',
-    symbol: sending.token?.symbol ?? '',
-    decimals: sending.token?.decimals ?? 0,
-    name: sending.token?.name ?? '',
-    chainId: sending.token?.chainId,
   };
 
   const toToken: TokenAmount = {
     ...receiving.token,
     amount: BigInt(receiving.amount ?? 0),
-    priceUSD: receiving.amountUSD ?? '0',
-    symbol: receiving.token?.symbol ?? '',
-    decimals: receiving.token?.decimals ?? 0,
-    name: receiving.token?.name ?? '',
-    chainId: receiving.token?.chainId,
   };
 
   const sendingValue = sending.value ? BigInt(sending.value) : 0n;
@@ -121,7 +112,7 @@ export const buildRouteFromTxHistory = (
         parseFloat(sending.gasToken.priceUSD)
       : 0;
 
-  const feeCosts: FeeCost[] | undefined = sendingValue
+  const feeCosts: FeeCost[] | undefined = sendingFeeAmount
     ? [
         {
           amount: sendingFeeAmount.toString(),
@@ -151,9 +142,10 @@ export const buildRouteFromTxHistory = (
       toChainId: receiving.chainId,
       fromToken,
       toToken,
+      gasCostUSD: sending.gasAmountUSD,
       steps: [
         {
-          id: '',
+          id: uuidv4(),
           type: 'lifi',
           tool: tx.tool,
           toolDetails: usedTool,
@@ -203,7 +195,7 @@ export const buildRouteFromTxHistory = (
               toolDetails: usedTool,
             },
           ],
-          integrator: '',
+          integrator: tx.metadata?.integrator ?? '',
           execution: {
             status: 'DONE', // can be FAILED
             process: buildProcessFromTxHistory(tx),

package/utils/fees.ts

@@ -1,4 +1,4 @@
-import type { FeeCost, GasCost, Route, Token } from '@lifi/sdk';
+import type { FeeCost, GasCost, RouteExtended, Token } from '@lifi/sdk';
 
 export interface FeesBreakdown {
   amount: bigint;
@@ -6,45 +6,45 @@ export interface FeesBreakdown {
   token: Token;
 }
 
-export const getGasCostsBreakdown = (route: Route): FeesBreakdown[] => {
-  return Object.values(
-    route.steps.reduce(
-      (groupedGasCosts, step) => {
-        if (step.estimate.gasCosts?.length) {
+export const getGasCostsBreakdown = (route: RouteExtended): FeesBreakdown[] => {
+  return Array.from(
+    route.steps
+      .reduce((groupedGasCosts, step) => {
+        const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts;
+        if (gasCosts?.length) {
           const {
             token,
             amount: gasCostAmount,
             amountUSD: gasCostAmountUSD,
-          } = getStepFeeCostsBreakdown(step.estimate.gasCosts);
-          const groupedGasCost = groupedGasCosts[token.chainId];
+          } = getStepFeeCostsBreakdown(gasCosts);
+          const groupedGasCost = groupedGasCosts.get(token.chainId);
           const amount = groupedGasCost
             ? groupedGasCost.amount + gasCostAmount
             : gasCostAmount;
           const amountUSD = groupedGasCost
             ? groupedGasCost.amountUSD + gasCostAmountUSD
             : gasCostAmountUSD;
-          groupedGasCosts[token.chainId] = {
+          groupedGasCosts.set(token.chainId, {
             amount,
             amountUSD,
             token,
-          };
+          });
           return groupedGasCosts;
         }
         return groupedGasCosts;
-      },
-      {} as Record<number, FeesBreakdown>,
-    ),
+      }, new Map<number, FeesBreakdown>())
+      .values(),
   );
 };
 
 export const getFeeCostsBreakdown = (
-  route: Route,
+  route: RouteExtended,
   included?: boolean,
 ): FeesBreakdown[] => {
-  return Object.values(
-    route.steps.reduce(
-      (groupedFeeCosts, step) => {
-        let feeCosts = step.estimate.feeCosts;
+  return Array.from(
+    route.steps
+      .reduce((groupedFeeCosts, step) => {
+        let feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts;
         if (typeof included === 'boolean') {
           feeCosts = feeCosts?.filter(
             (feeCost) => feeCost.included === included,
@@ -56,24 +56,23 @@ export const getFeeCostsBreakdown = (
             amount: feeCostAmount,
             amountUSD: feeCostAmountUSD,
           } = getStepFeeCostsBreakdown(feeCosts);
-          const groupedFeeCost = groupedFeeCosts[token.chainId];
+          const groupedFeeCost = groupedFeeCosts.get(token.chainId);
           const amount = groupedFeeCost
             ? groupedFeeCost.amount + feeCostAmount
             : feeCostAmount;
           const amountUSD = groupedFeeCost
             ? groupedFeeCost.amountUSD + feeCostAmountUSD
             : feeCostAmountUSD;
-          groupedFeeCosts[token.chainId] = {
+          groupedFeeCosts.set(token.chainId, {
             amount,
             amountUSD,
             token,
-          };
+          });
           return groupedFeeCosts;
         }
         return groupedFeeCosts;
-      },
-      {} as Record<number, FeesBreakdown>,
-    ),
+      }, new Map<number, FeesBreakdown>())
+      .values(),
   );
 };
 

package/utils/format.ts

@@ -1,34 +1,35 @@
 import { formatUnits } from 'viem';
 
+const subscriptMap = ['₀', '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉'];
+
+export const precisionFormatter = new Intl.NumberFormat('en', {
+  notation: 'standard',
+  roundingPriority: 'morePrecision',
+  maximumSignificantDigits: 4,
+  maximumFractionDigits: 4,
+  useGrouping: false,
+});
+
 /**
  * Format token amount to at least 4 decimals.
  * @param amount amount to format.
  * @returns formatted amount.
  */
-export const formatTokenAmount = (
-  amount: bigint = 0n,
-  decimals: number,
-  decimalPlaces: number = 3,
-) => {
+export function formatTokenAmount(amount: bigint = 0n, decimals: number) {
   const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
   const parsedAmount = parseFloat(formattedAmount);
   if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
     return '0';
   }
 
-  const absAmount = Math.abs(parsedAmount);
-  while (absAmount < 1 / 10 ** decimalPlaces) {
-    decimalPlaces++;
-  }
-
-  return parsedAmount.toFixed(decimalPlaces + 1);
-};
+  return precisionFormatter.format(parsedAmount);
+}
 
-export const formatSlippage = (
+export function formatSlippage(
   slippage: string = '',
   defaultValue: string = '',
   returnInitial: boolean = false,
-): string => {
+): string {
   if (!slippage) {
     return slippage;
   }
@@ -49,13 +50,13 @@ export const formatSlippage = (
     return slippage;
   }
   return parsedSlippage.toString();
-};
+}
 
-export const formatInputAmount = (
+export function formatInputAmount(
   amount: string,
   decimals: number | null = null,
   returnInitial: boolean = false,
-) => {
+) {
   if (!amount) {
     return amount;
   }
@@ -80,9 +81,9 @@ export const formatInputAmount = (
   integer = integer.replace(/^0+|-/, '');
   fraction = fraction.replace(/(0+)$/, '');
   return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
-};
+}
 
-export const formatTokenPrice = (amount?: string, price?: string) => {
+export function formatTokenPrice(amount?: string, price?: string) {
   if (!amount || !price) {
     return 0;
   }
@@ -90,4 +91,50 @@ export const formatTokenPrice = (amount?: string, price?: string) => {
     return 0;
   }
   return parseFloat(amount) * parseFloat(price);
-};
+}
+
+/**
+ * Converts a number to a subscript format if it contains leading zeros in the fractional part.
+ *
+ * @param {number} value - The number to be converted.
+ * @param {Intl.NumberFormatOptions} options An object that contains one or more properties that specify comparison options.
+ * @returns {string} - The number formatted as a string, with subscripts for leading zeros if applicable.
+ */
+export function convertToSubscriptFormat(
+  value: number,
+  options?: Intl.NumberFormatOptions,
+): string {
+  let formattedValue;
+  if (options) {
+    formattedValue = value.toLocaleString('en', options);
+  } else {
+    formattedValue = precisionFormatter.format(value);
+  }
+
+  // Calculate the number of zeros after the decimal point
+  const d = Math.ceil(Math.log10(Math.abs(value)));
+
+  // If the value does not have significant leading zeros in the fractional part, return the formatted value as is
+  if (d > -3 || !value) {
+    return formattedValue;
+  }
+
+  // Calculate the number of leading zeros in the fractional part
+  const leadingZeros = Math.abs(d);
+
+  const fractionalPartExtractor = value > 0 ? 2 : 3;
+
+  // Extract the fractional part of the formatted value, excluding the leading zeros and "0." or "-0."
+  const fractionalPart = formattedValue.slice(
+    leadingZeros + fractionalPartExtractor,
+  );
+
+  // Convert the number of leading zeros to their corresponding Unicode subscript characters
+  const subscript = leadingZeros
+    .toString()
+    .split('')
+    .map((digit) => subscriptMap[digit as any])
+    .join('');
+
+  return `${value > 0 ? '' : '-'}0.0${subscript}${fractionalPart}`;
+}

package/_esm/components/Insurance/Insurance.d.ts

@@ -1,2 +0,0 @@
-import type { InsuranceProps } from './types.js';
-export declare const Insurance: React.FC<InsuranceProps>;

package/_esm/components/Insurance/Insurance.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RouteExecutionStatus } from '../../stores/routes/types.js';
-import { InsuranceCard } from './InsuranceCard.js';
-import { InsuranceCollapsed } from './InsuranceCollapsed.js';
-export const Insurance = ({ status, insurableRouteId, onChange, ...props }) => {
-    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { status: status, insurableRouteId: insurableRouteId, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { status: status, ...props }));
-};
-//# sourceMappingURL=Insurance.js.map

package/_esm/components/Insurance/Insurance.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Insurance.js","sourceRoot":"","sources":["../../../components/Insurance/Insurance.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,MAAM,EACN,gBAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,MAAM,KAAK,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5C,KAAC,kBAAkB,IACjB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,KACd,KAAK,GACT,CACH,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAC7C,CAAC;AACJ,CAAC,CAAC"}

package/_esm/components/Insurance/InsuranceCard.d.ts

@@ -1,2 +0,0 @@
-import type { InsuranceCardProps } from './types.js';
-export declare const InsuranceCard: React.FC<InsuranceCardProps>;

package/_esm/components/Insurance/InsuranceCard.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { VerifiedUser } from '@mui/icons-material';
-import { Box, Collapse, Link, Typography } from '@mui/material';
-import { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { InsuraceLogo } from '../../icons/InsuraceLogo.js';
-import { RouteExecutionStatus } from '../../stores/routes/types.js';
-import { Card } from '../Card/Card.js';
-import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js';
-import { Switch } from '../Switch.js';
-export const InsuranceCard = ({ status, feeAmountUsd, insuredAmount, insuredTokenSymbol, insuranceCoverageId, onChange, ...props }) => {
-    const { t } = useTranslation();
-    const [enabled, setEnabled] = useState(false);
-    const handleSwitch = (_, checked) => {
-        setEnabled(checked);
-        onChange?.(checked);
-    };
-    return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUser, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
-                                    ? t('main.tags.insurance')
-                                    : t('main.tags.insured') })] }), _jsx(Switch, { onChange: handleSwitch, value: enabled })] }), _jsx(Collapse, { timeout: 225, in: enabled, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { mt: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
-                                        value: feeAmountUsd,
-                                    }) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: _jsx(Trans, { i18nKey: status === RouteExecutionStatus.Idle
-                                            ? 'insurance.insure'
-                                            : 'insurance.insured', values: {
-                                            amount: insuredAmount,
-                                            tokenSymbol: insuredTokenSymbol,
-                                        }, components: [_jsx("strong", {})] }) }), _jsx(Collapse, { timeout: 225, in: enabled || status !== RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { sx: {
-                                            listStyleType: 'disc',
-                                            pl: 2,
-                                        }, children: [_jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.slippageError') })] }) }), _jsx(Link, { href: status === RouteExecutionStatus.Idle
-                                        ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
-                                        : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: _jsx(Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === RouteExecutionStatus.Idle
-                                            ? t('button.learnMore')
-                                            : t('button.viewCoverage') }) })] })] }) })] }));
-};
-//# sourceMappingURL=InsuranceCard.js.map