@lifi/widget 2.0.0-alpha.4 → 2.0.0-beta.0

package/cjs/components/ChainSelect/ChainSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/cjs/components/GasMessage/FundsSufficiencyMessage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const FundsSufficiencyMessage: () => JSX.Element;

package/cjs/components/Insurance/Insurance.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const stores_1 = require("../../stores");
 const InsuranceCard_1 = require("./InsuranceCard");
 const InsuranceCollapsed_1 = require("./InsuranceCollapsed");
-const Insurance = ({ status, insurableRouteId, feeAmountUsd, onChange, ...props }) => {
-    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, status: status, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, ...props }));
+const Insurance = ({ status, insurableRouteId, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
+    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, insuranceCoverageId: insuranceCoverageId, status: status, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, ...props }));
 };
 exports.Insurance = Insurance;

package/cjs/components/Insurance/InsuranceCard.js

@@ -9,12 +9,18 @@ const icons_1 = require("../../icons");
 const stores_1 = require("../../stores");
 const Card_1 = require("../Card");
 const Switch_1 = require("../Switch");
-const InsuranceCard = ({ status, feeAmountUsd, onChange, ...props }) => {
+const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
                                     ? t(`swap.tags.insurance`)
                                     : t(`swap.tags.insured`) })] }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
                             value: feeAmountUsd,
-                        }) }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: "Get 100% coverage for lost tokens." }) })] }));
+                        }) }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : null] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: status === stores_1.RouteExecutionStatus.Idle
+                            ? 'Get 100% coverage for lost tokens.'
+                            : '100% coverage for lost tokens.' }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.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: (0, jsx_runtime_1.jsx)(material_1.Typography, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
+                                ? 'Learn more'
+                                : 'View coverage' }) })] })] }));
 };
 exports.InsuranceCard = InsuranceCard;

package/cjs/components/Insurance/InsuranceCollapsed.d.ts

@@ -1,3 +1,3 @@
-import type { PropsWithChildren } from 'react';
+/// <reference types="react" />
 import type { InsuranceProps } from './types';
-export declare const InsuranceCollapsed: React.FC<PropsWithChildren<InsuranceProps>>;
+export declare const InsuranceCollapsed: React.FC<InsuranceProps>;

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const InsuranceCard_1 = require("./InsuranceCard");
-const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onChange, children, ...props }) => {
+const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
     const [insuredRoute, setInsuredRoute] = (0, react_1.useState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
@@ -27,6 +27,6 @@ const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onChange,
             onChange?.(checked ? insuredRoute.id : insurableRouteId);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, onChange: toggleInsurance, ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, onChange: toggleInsurance, ...props }) }));
 };
 exports.InsuranceCollapsed = InsuranceCollapsed;

package/cjs/components/Insurance/types.d.ts

@@ -4,11 +4,13 @@ import type { RouteExecutionStatus } from '../../stores';
 export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
     insurableRouteId: string;
     feeAmountUsd?: string;
+    insuranceCoverageId?: string;
     status?: RouteExecutionStatus;
     onChange?: (routeId: string) => void;
 }
 export interface InsuranceCardProps {
     feeAmountUsd?: string;
     status?: RouteExecutionStatus;
+    insuranceCoverageId?: string;
     onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
 }

package/cjs/components/Step/CircularProgress.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;

package/cjs/components/Step/StepList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { Route } from '@lifi/sdk';
 export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;

package/cjs/components/SwapInput/SwapInputEndAdornment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/cjs/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const SwapRoutesExpanded: () => JSX.Element;
 export declare const SwapRoutesExpandedElement: () => JSX.Element;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-alpha.4";
+export declare const version = "2.0.0-beta.0";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '2.0.0-alpha.4';
+exports.version = '2.0.0-beta.0';

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ActiveSwapsPage: () => JSX.Element;

package/cjs/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/cjs/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/cjs/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/cjs/pages/SettingsPage/SettingsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/cjs/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ShowDestinationWallet: () => JSX.Element | null;

package/cjs/pages/SettingsPage/SlippageInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -32,9 +32,11 @@ const SwapDetailsPage = () => {
             deleteRoute(routeExecution.route.id);
         }
     };
-    let supportId = routeExecution?.route.steps[0].execution?.process.find((process) => process.txHash)?.txHash ??
-        routeExecution?.route.id ??
-        '';
+    const sourceTxHash = routeExecution?.route.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash;
+    const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress;
+    let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
     if (process.env.NODE_ENV === 'development') {
         supportId += `_${routeExecution?.route.id}`;
     }
@@ -51,7 +53,7 @@ const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
                         }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));

package/cjs/pages/SwapPage/SwapPage.js

@@ -78,7 +78,10 @@ const SwapPage = () => {
         (route?.insurance?.state === 'INSURED' ||
             (status === stores_1.RouteExecutionStatus.Idle &&
                 route?.insurance?.state === 'INSURABLE'));
-    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+    const insuranceCoverageId = route?.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash ?? route?.fromAddress;
+    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
                 status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { mt: 2, route: route }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,

package/components/ChainSelect/ChainSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/GasMessage/FundsSufficiencyMessage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const FundsSufficiencyMessage: () => JSX.Element;

package/components/Insurance/Insurance.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { RouteExecutionStatus } from '../../stores';
 import { InsuranceCard } from './InsuranceCard';
 import { InsuranceCollapsed } from './InsuranceCollapsed';
-export const Insurance = ({ status, insurableRouteId, feeAmountUsd, onChange, ...props }) => {
-    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, status: status, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, ...props }));
+export const Insurance = ({ status, insurableRouteId, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
+    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, insuranceCoverageId: insuranceCoverageId, status: status, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, ...props }));
 };

package/components/Insurance/InsuranceCard.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import { Box, Typography } from '@mui/material';
+import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
 import { RouteExecutionStatus } from '../../stores';
 import { Card, CardLabel, CardLabelTypography } from '../Card';
 import { Switch } from '../Switch';
-export const InsuranceCard = ({ status, feeAmountUsd, onChange, ...props }) => {
+export const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
     const { t } = useTranslation();
     return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
                                     ? t(`swap.tags.insurance`)
                                     : t(`swap.tags.insured`) })] }), _jsx(InsuraceLogo, {})] }), _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,
-                        }) }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : null] }), _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: _jsx(Typography, { fontSize: 12, children: "Get 100% coverage for lost tokens." }) })] }));
+                        }) }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : null] }), _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { fontSize: 12, children: status === RouteExecutionStatus.Idle
+                            ? 'Get 100% coverage for lost tokens.'
+                            : '100% coverage for lost tokens.' }), _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, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === RouteExecutionStatus.Idle
+                                ? 'Learn more'
+                                : 'View coverage' }) })] })] }));
 };

package/components/Insurance/InsuranceCollapsed.d.ts

@@ -1,3 +1,3 @@
-import type { PropsWithChildren } from 'react';
+/// <reference types="react" />
 import type { InsuranceProps } from './types';
-export declare const InsuranceCollapsed: React.FC<PropsWithChildren<InsuranceProps>>;
+export declare const InsuranceCollapsed: React.FC<InsuranceProps>;

package/components/Insurance/InsuranceCollapsed.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useSwapRoutes } from '../../hooks';
 import { RouteExecutionStatus, useRouteExecutionStore, useSetExecutableRoute, } from '../../stores';
 import { InsuranceCard } from './InsuranceCard';
-export const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onChange, children, ...props }) => {
+export const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
     const [insuredRoute, setInsuredRoute] = useState();
     const setExecutableRoute = useSetExecutableRoute();
     const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
@@ -24,5 +24,5 @@ export const InsuranceCollapsed = ({ status, insurableRouteId, feeAmountUsd, onC
             onChange?.(checked ? insuredRoute.id : insurableRouteId);
         }
     };
-    return (_jsx(Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === RouteExecutionStatus.Idle, children: _jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, onChange: toggleInsurance, ...props }) }));
+    return (_jsx(Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === RouteExecutionStatus.Idle, children: _jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, onChange: toggleInsurance, ...props }) }));
 };

package/components/Insurance/types.d.ts

@@ -4,11 +4,13 @@ import type { RouteExecutionStatus } from '../../stores';
 export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
     insurableRouteId: string;
     feeAmountUsd?: string;
+    insuranceCoverageId?: string;
     status?: RouteExecutionStatus;
     onChange?: (routeId: string) => void;
 }
 export interface InsuranceCardProps {
     feeAmountUsd?: string;
     status?: RouteExecutionStatus;
+    insuranceCoverageId?: string;
     onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
 }

package/components/Step/CircularProgress.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;

package/components/Step/StepList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { Route } from '@lifi/sdk';
 export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;

package/components/SwapInput/SwapInputEndAdornment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const SwapRoutesExpanded: () => JSX.Element;
 export declare const SwapRoutesExpandedElement: () => JSX.Element;

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-alpha.4";
+export declare const version = "2.0.0-beta.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.0.0-alpha.4';
+export const version = '2.0.0-beta.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-beta.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -46,14 +46,14 @@
     "@lifi/sdk": "^2.0.0-beta.8",
     "@lifi/wallet-management": "^1.2.11",
     "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.126",
-    "@mui/material": "^5.12.0",
-    "@tanstack/react-query": "^4.29.1",
+    "@mui/lab": "^5.0.0-alpha.127",
+    "@mui/material": "^5.12.1",
+    "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
     "i18next": "^22.4.14",
     "i18next-browser-languagedetector": "^7.0.1",
-    "microdiff": "^1.3.1",
+    "microdiff": "^1.3.2",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ActiveSwapsPage: () => JSX.Element;

package/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ShowDestinationWallet: () => JSX.Element | null;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -29,9 +29,11 @@ export const SwapDetailsPage = () => {
             deleteRoute(routeExecution.route.id);
         }
     };
-    let supportId = routeExecution?.route.steps[0].execution?.process.find((process) => process.txHash)?.txHash ??
-        routeExecution?.route.id ??
-        '';
+    const sourceTxHash = routeExecution?.route.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash;
+    const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress;
+    let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
     if (process.env.NODE_ENV === 'development') {
         supportId += `_${routeExecution?.route.id}`;
     }
@@ -48,7 +50,7 @@ export const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), getStepList(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
+                        }).format(startedAt) })] }), getStepList(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             flex: 1,
                         }, children: [_jsx(CardTitle, { flex: 1, children: t('swap.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));

package/pages/SwapPage/SwapPage.js

@@ -75,7 +75,10 @@ export const SwapPage = () => {
         (route?.insurance?.state === 'INSURED' ||
             (status === RouteExecutionStatus.Idle &&
                 route?.insurance?.state === 'INSURABLE'));
-    return (_jsxs(Container, { children: [getStepList(route), insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
+    const insuranceCoverageId = route?.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash ?? route?.fromAddress;
+    return (_jsxs(Container, { children: [getStepList(route), insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
                 status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasMessage, { mt: 2, route: route }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,