@lifi/widget 2.0.0-beta.9 → 2.0.0

package/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DeleteIcon from '@mui/icons-material/DeleteOutline';
+import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../components/Dialog';
+import { useHeaderStore } from '../../components/Header';
+import { useWallet } from '../../providers';
+import { useRouteExecutionStore } from '../../stores';
+import { useTransactionHistory } from '../../stores/routes';
+import { TransactionHistoryEmpty } from './TransactionHistoryEmpty';
+import { TransactionHistoryItem } from './TransactionHistoryItem';
+export const TransactionHistoryPage = () => {
+    const { t } = useTranslation();
+    const { account } = useWallet();
+    const transactions = useTransactionHistory(account.address);
+    const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    useEffect(() => {
+        if (transactions.length) {
+            return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+        }
+    }, [transactions.length, toggleDialog]);
+    if (!transactions.length) {
+        return _jsx(TransactionHistoryEmpty, {});
+    }
+    return (_jsxs(Container, { children: [_jsx(Stack, { spacing: 2, mt: 1, children: transactions.length ? (transactions.map(({ route }) => (_jsx(TransactionHistoryItem, { route: route }, route.id)))) : (_jsx(TransactionHistoryEmpty, {})) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.deleteTransactionHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true, children: t('button.delete') })] })] })] }));
+};

package/pages/TransactionHistoryPage/index.d.ts

@@ -0,0 +1 @@
+export * from './TransactionHistoryPage';

package/pages/TransactionHistoryPage/index.js

@@ -0,0 +1 @@
+export * from './TransactionHistoryPage';

package/pages/{SwapPage → TransactionPage}/ExchangeRateBottomSheet.js

@@ -44,11 +44,11 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = useTranslation();
     const ref = useRef();
     useSetContentHeight(ref);
-    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('main.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.oldToAmount, data?.toToken.decimals, 5),
-                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.currentAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
+                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.currentAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.newToAmount, data?.toToken.decimals, 5),
-                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('swap.rateChange') }), _jsxs(Typography, { fontWeight: 600, children: [Big(data?.newToAmount || 0)
+                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.rateChange') }), _jsxs(Typography, { fontWeight: 600, children: [Big(data?.newToAmount || 0)
                                 .div(Big(data?.oldToAmount || 0))
                                 .minus(1)
                                 .mul(100)

package/pages/TransactionPage/StartTransactionButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { StartTransactionButtonProps } from './types';
+export declare const StartTransactionButton: React.FC<StartTransactionButtonProps>;
+export declare const StartInsurableTransactionButton: React.FC<StartTransactionButtonProps>;

package/pages/TransactionPage/StartTransactionButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
+import { useFundsSufficiency, useGasSufficiency, useRoutes } from '../../hooks';
+import { useRouteExecutionStore } from '../../stores';
+export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
+    const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
+    const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = useFundsSufficiency(route);
+    return (_jsx(DefaultTransactionButton, { onClick: onClick, text: text, disabled: insufficientFunds || !!insufficientGas?.length, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
+};
+export const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
+    const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
+    const { isFetching } = useRoutes({
+        insurableRoute: routeExecution?.route,
+    });
+    return (_jsx(StartTransactionButton, { onClick: onClick, text: text, route: route, disabled: disabled, loading: loading || isFetching, insurableRouteId: insurableRouteId }));
+};

package/pages/{SwapPage → TransactionPage}/StatusBottomSheet.js

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
 import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
-import { SwapFormKey, useWidgetConfig } from '../../providers';
+import { FormKey, useWidgetConfig } from '../../providers';
 import { RouteExecutionStatus } from '../../stores';
 import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenAddress, } from '../../utils';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
@@ -20,7 +20,7 @@ export const StatusBottomSheet = ({ status, route, }) => {
     const ref = useRef(null);
     const { getChainById } = useChains();
     const { setValue } = useFormContext();
-    const { variant, contractComponent, contractCompactComponent } = useWidgetConfig();
+    const { subvariant, contractComponent, contractSecondaryComponent, contractCompactComponent, } = useWidgetConfig();
     const toToken = {
         ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
         amount: route.steps.at(-1)?.execution?.toAmount ??
@@ -30,8 +30,8 @@ export const StatusBottomSheet = ({ status, route, }) => {
     const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
-        setValue(SwapFormKey.FromAmount, '');
-        setValue(SwapFormKey.ToAmount, '');
+        setValue(FormKey.FromAmount, '');
+        setValue(FormKey.ToAmount, '');
     };
     const handleDone = () => {
         clearFromAmount();
@@ -41,13 +41,13 @@ export const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         if (toToken.chainId !== route.toToken.chainId &&
             toToken.address !== route.toToken.address) {
-            setValue(SwapFormKey.FromAmount, formatTokenAmount(toToken.amount, toToken.decimals), { shouldTouch: true });
-            setValue(SwapFormKey.FromChain, toToken.chainId, { shouldTouch: true });
-            setValue(SwapFormKey.FromToken, toToken.address, { shouldTouch: true });
-            setValue(SwapFormKey.ToChain, route.toToken.chainId, {
+            setValue(FormKey.FromAmount, formatTokenAmount(toToken.amount, toToken.decimals), { shouldTouch: true });
+            setValue(FormKey.FromChain, toToken.chainId, { shouldTouch: true });
+            setValue(FormKey.FromToken, toToken.address, { shouldTouch: true });
+            setValue(FormKey.ToChain, route.toToken.chainId, {
                 shouldTouch: true,
             });
-            setValue(SwapFormKey.ToToken, route.toToken.address, {
+            setValue(FormKey.ToToken, route.toToken.address, {
                 shouldTouch: true,
             });
         }
@@ -59,11 +59,12 @@ export const StatusBottomSheet = ({ status, route, }) => {
     };
     const handleSeeDetails = () => {
         handleClose();
-        navigate(navigationRoutes.swapDetails, {
+        navigate(navigationRoutes.transactionDetails, {
             state: { routeId: route.id },
             replace: true,
         });
     };
+    const transactionType = route.fromChainId === route.toChainId ? 'swap' : 'bridge';
     let title;
     let primaryMessage;
     let secondaryMessage;
@@ -71,12 +72,12 @@ export const StatusBottomSheet = ({ status, route, }) => {
     switch (status) {
         case RouteExecutionStatus.Done: {
             title =
-                variant === 'nft'
-                    ? t('swap.success.title.purchaseSuccessful')
-                    : t('swap.success.title.swapSuccessful');
+                subvariant === 'nft'
+                    ? t('success.title.purchaseSuccessful')
+                    : t(`success.title.${transactionType}Successful`);
             if (token) {
-                primaryMessage = t('swap.success.message.swapSuccessful', {
-                    amount: token.amount,
+                primaryMessage = t('success.message.exchangeSuccessful', {
+                    amount: formatTokenAmount(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: shortenAddress(route.toAddress),
@@ -86,14 +87,14 @@ export const StatusBottomSheet = ({ status, route, }) => {
             break;
         }
         case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
-            title = t('swap.success.title.swapPartiallySuccessful');
-            primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
+            title = t(`success.title.${transactionType}PartiallySuccessful`);
+            primaryMessage = t('success.message.exchangePartiallySuccessful', {
                 tool: route.steps.at(-1)?.toolDetails.name,
                 tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
             });
             if (token) {
-                secondaryMessage = t('swap.success.message.swapSuccessful', {
-                    amount: token.amount,
+                secondaryMessage = t('success.message.exchangeSuccessful', {
+                    amount: formatTokenAmount(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: shortenAddress(route.toAddress),
@@ -103,14 +104,14 @@ export const StatusBottomSheet = ({ status, route, }) => {
             break;
         }
         case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {
-            title = t('swap.success.title.refundIssued');
-            primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
+            title = t('success.title.refundIssued');
+            primaryMessage = t('success.message.exchangePartiallySuccessful', {
                 tool: route.steps.at(-1)?.toolDetails.name,
                 tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
             });
             if (token) {
-                secondaryMessage = t('swap.success.message.swapSuccessful', {
-                    amount: token.amount,
+                secondaryMessage = t('success.message.exchangeSuccessful', {
+                    amount: formatTokenAmount(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: shortenAddress(route.toAddress),
@@ -144,9 +145,11 @@ export const StatusBottomSheet = ({ status, route, }) => {
             ref.current?.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    const showContractComponent = variant === 'nft' && hasEnumFlag(status, RouteExecutionStatus.Done);
+    const showContractComponent = subvariant === 'nft' && hasEnumFlag(status, RouteExecutionStatus.Done);
     return (_jsx(BottomSheet, { ref: ref, children: _jsxs(Box, { p: 3, children: [!showContractComponent ? (_jsx(CenterContainer, { children: _jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoRoundedIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-                                hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRoundedIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRoundedIcon, { color: "error" })) : null] }) })) : null, _jsx(CenterContainer, { children: _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent || contractComponent) : (_jsx(CenterContainer, { children: hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? (_jsx(Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
+                                hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRoundedIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRoundedIcon, { color: "error" })) : null] }) })) : null, _jsx(CenterContainer, { children: _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent ||
+                    contractSecondaryComponent ||
+                    contractComponent) : (_jsx(CenterContainer, { children: hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? (_jsx(Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

package/pages/TransactionPage/TokenValueBottomSheet.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { Box, Button, Typography } from '@mui/material';
+import { forwardRef, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet';
+import { useSetContentHeight } from '../../hooks';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+import { calcValueLoss } from './utils';
+export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
+    const handleCancel = () => {
+        ref.current?.close();
+        onCancel?.();
+    };
+    return (_jsx(BottomSheet, { ref: ref, onClose: onCancel, children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) }));
+});
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
+    const { t } = useTranslation();
+    const ref = useRef();
+    useSetContentHeight(ref);
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('main.sending') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.gasCost') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.receiving') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.valueLoss') }), _jsx(Typography, { fontWeight: 600, children: calcValueLoss(route) })] }), _jsxs(Box, { display: "flex", mt: 3, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+};
+export const getTokenValueLossThreshold = (route) => {
+    if (!route) {
+        return false;
+    }
+    const fromAmountUSD = Number(route.fromAmountUSD || 0);
+    const toAmountUSD = Number(route.toAmountUSD || 0);
+    const gasCostUSD = Number(route.gasCostUSD || 0);
+    if (!fromAmountUSD && !toAmountUSD) {
+        return false;
+    }
+    return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
+};

package/pages/TransactionPage/TransactionPage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TransactionPage: React.FC;

package/pages/TransactionPage/TransactionPage.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, Button, Tooltip } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { ContractComponent } from '../../components/ContractComponent';
+import { GasMessage } from '../../components/GasMessage';
+import { useHeaderStore } from '../../components/Header';
+import { Insurance } from '../../components/Insurance';
+import { getStepList } from '../../components/Step';
+import { useNavigateBack, useRouteExecution, useWidgetEvents, } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { RouteExecutionStatus } from '../../stores';
+import { WidgetEvent } from '../../types/events';
+import { formatTokenAmount } from '../../utils';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
+import { StartInsurableTransactionButton, StartTransactionButton, } from './StartTransactionButton';
+import { StatusBottomSheet } from './StatusBottomSheet';
+import { TokenValueBottomSheet, getTokenValueLossThreshold, } from './TokenValueBottomSheet';
+import { Container } from './TransactionPage.style';
+import { calcValueLoss } from './utils';
+export const TransactionPage = () => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const emitter = useWidgetEvents();
+    const { navigateBack } = useNavigateBack();
+    const { subvariant, insurance, contractComponent, contractSecondaryComponent, } = useWidgetConfig();
+    const { state } = useLocation();
+    const stateRouteId = state?.routeId;
+    const [routeId, setRouteId] = useState(stateRouteId);
+    const tokenValueBottomSheetRef = useRef(null);
+    const exchangeRateBottomSheetRef = useRef(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
+    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
+        routeId: routeId,
+        onAcceptExchangeRateUpdate,
+    });
+    useEffect(() => {
+        if (route && subvariant !== 'nft') {
+            const transactionType = route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
+            return useHeaderStore
+                .getState()
+                .setTitle(status === RouteExecutionStatus.Idle
+                ? t(`button.review${transactionType}`)
+                : t(`header.${transactionType.toLowerCase()}`));
+        }
+    }, [route, status, subvariant, t]);
+    if (!route) {
+        return null;
+    }
+    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(route);
+    const handleExecuteRoute = () => {
+        if (tokenValueBottomSheetRef.current?.isOpen()) {
+            emitter.emit(WidgetEvent.RouteHighValueLoss, {
+                fromAmountUsd: route.fromAmountUSD,
+                gasCostUSD: route.gasCostUSD,
+                toAmountUSD: route.toAmountUSD,
+                valueLoss: calcValueLoss(route),
+            });
+        }
+        tokenValueBottomSheetRef.current?.close();
+        executeRoute();
+        setValue(FormKey.FromAmount, '');
+    };
+    const handleStartClick = async () => {
+        if (status === RouteExecutionStatus.Idle) {
+            if (tokenValueLossThresholdExceeded && subvariant !== 'nft') {
+                tokenValueBottomSheetRef.current?.open();
+            }
+            else {
+                handleExecuteRoute();
+            }
+        }
+        if (status === RouteExecutionStatus.Failed) {
+            restartRoute();
+        }
+    };
+    const handleRemoveRoute = () => {
+        navigateBack();
+        deleteRoute();
+    };
+    const getButtonText = () => {
+        switch (status) {
+            case RouteExecutionStatus.Idle:
+                switch (subvariant) {
+                    case 'nft':
+                        return t('button.buyNow');
+                    case 'refuel':
+                        return t('button.startBridging');
+                    default:
+                        const transactionType = route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging';
+                        return t(`button.start${transactionType}`);
+                }
+            case RouteExecutionStatus.Failed:
+                return t('button.tryAgain');
+            default:
+                return '';
+        }
+    };
+    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 (_jsxs(Container, { children: [getStepList(route), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), 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(StartButton, { text: getButtonText(), onClick: handleStartClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
+                                        minWidth: 48,
+                                        marginLeft: 1,
+                                    }, children: _jsx(DeleteIcon, {}) }) })) : null] })] })) : null, status ? _jsx(StatusBottomSheet, { status: status, route: route }) : null, tokenValueLossThresholdExceeded && subvariant !== 'nft' ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })] }));
+};

package/pages/TransactionPage/index.d.ts

@@ -0,0 +1 @@
+export * from './TransactionPage';

package/pages/TransactionPage/index.js

@@ -0,0 +1 @@
+export * from './TransactionPage';

package/pages/TransactionPage/types.d.ts

@@ -0,0 +1,6 @@
+import type { Route } from '@lifi/sdk';
+import type { DefaultTransactionButtonProps } from '../../components/DefaultTransactionButton';
+export interface StartTransactionButtonProps extends DefaultTransactionButtonProps {
+    route?: Route;
+    insurableRouteId: string;
+}

package/pages/TransactionPage/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Route } from '@lifi/sdk';
+export declare const calcValueLoss: (route: Route) => string;

package/pages/TransactionPage/utils.js

@@ -0,0 +1,6 @@
+export const calcValueLoss = (route) => {
+    return `${((Number(route.toAmountUSD || 0) /
+        (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
+        1) *
+        100).toFixed(2)}%`;
+};

package/providers/{SwapFormProvider/SwapFormProvider.d.ts → FormProvider/FormProvider.d.ts}

@@ -9,4 +9,4 @@ export declare const formDefaultValues: {
     ToContractGasLimit: string;
     toAmount: string;
 };
-export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;
+export declare const FormProvider: React.FC<React.PropsWithChildren<{}>>;

package/providers/{SwapFormProvider/SwapFormProvider.js → FormProvider/FormProvider.js}

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider as ReactHookFormProvider, useForm, } from 'react-hook-form';
 import { useWidgetConfig } from '../WidgetProvider';
 import { FormUpdater } from './FormUpdater';
-import { SwapFormKey } from './types';
+import { FormKey } from './types';
 export const formDefaultValues = {
-    [SwapFormKey.FromAmount]: '',
-    [SwapFormKey.ToAddress]: '',
-    [SwapFormKey.TokenSearchFilter]: '',
-    [SwapFormKey.ContractOutputsToken]: '',
-    [SwapFormKey.ToContractAddress]: '',
-    [SwapFormKey.ToContractCallData]: '',
-    [SwapFormKey.ToContractGasLimit]: '',
-    [SwapFormKey.ToAmount]: '',
+    [FormKey.FromAmount]: '',
+    [FormKey.ToAddress]: '',
+    [FormKey.TokenSearchFilter]: '',
+    [FormKey.ContractOutputsToken]: '',
+    [FormKey.ToContractAddress]: '',
+    [FormKey.ToContractCallData]: '',
+    [FormKey.ToContractGasLimit]: '',
+    [FormKey.ToAmount]: '',
 };
-export const SwapFormProvider = ({ children, }) => {
+export const FormProvider = ({ children, }) => {
     const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = useWidgetConfig();
     const defaultValues = useMemo(() => ({
         ...formDefaultValues,
@@ -31,5 +31,5 @@ export const SwapFormProvider = ({ children, }) => {
         // values,
         defaultValues,
     });
-    return (_jsxs(FormProvider, { ...methods, children: [_jsx(FormUpdater, { defaultValues: defaultValues }), children] }));
+    return (_jsxs(ReactHookFormProvider, { ...methods, children: [_jsx(FormUpdater, { defaultValues: defaultValues }), children] }));
 };

package/providers/FormProvider/FormUpdater.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { FormValues } from '.';
+export declare const FormUpdater: React.FC<{
+    defaultValues: Partial<FormValues>;
+}>;

package/providers/{SwapFormProvider → FormProvider}/FormUpdater.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useEffect, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { SwapFormKey } from '../SwapFormProvider';
+import { FormKey } from '.';
 import { useWallet } from '../WalletProvider';
 import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 export const FormUpdater = ({ defaultValues }) => {
@@ -17,23 +17,23 @@ export const FormUpdater = ({ defaultValues }) => {
         if (!account.isActive || !account.chainId || !chainAllowed) {
             return;
         }
-        const { isTouched: isFromChainTouched } = getFieldState(SwapFormKey.FromChain);
-        const { isTouched: isToChainTouched } = getFieldState(SwapFormKey.ToChain);
-        const { isTouched: isFromTokenTouched } = getFieldState(SwapFormKey.FromToken);
-        const { isTouched: isToTokenTouched } = getFieldState(SwapFormKey.ToToken);
-        const { isTouched: isFromAmountTouched } = getFieldState(SwapFormKey.FromAmount);
+        const { isTouched: isFromChainTouched } = getFieldState(FormKey.FromChain);
+        const { isTouched: isToChainTouched } = getFieldState(FormKey.ToChain);
+        const { isTouched: isFromTokenTouched } = getFieldState(FormKey.FromToken);
+        const { isTouched: isToTokenTouched } = getFieldState(FormKey.ToToken);
+        const { isTouched: isFromAmountTouched } = getFieldState(FormKey.FromAmount);
         if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
-            resetField(SwapFormKey.FromChain, { defaultValue: account.chainId });
-            setValue(SwapFormKey.FromChain, account.chainId);
-            setValue(SwapFormKey.FromToken, '');
+            resetField(FormKey.FromChain, { defaultValue: account.chainId });
+            setValue(FormKey.FromChain, account.chainId);
+            setValue(FormKey.FromToken, '');
             if (isFromAmountTouched) {
-                setValue(SwapFormKey.FromAmount, '');
+                setValue(FormKey.FromAmount, '');
             }
         }
         if (!toChain && !isToChainTouched && !isToTokenTouched) {
-            resetField(SwapFormKey.ToChain, { defaultValue: account.chainId });
-            setValue(SwapFormKey.ToChain, account.chainId);
-            setValue(SwapFormKey.ToToken, '');
+            resetField(FormKey.ToChain, { defaultValue: account.chainId });
+            setValue(FormKey.ToChain, account.chainId);
+            setValue(FormKey.ToToken, '');
         }
     }, [
         account.chainId,
@@ -53,7 +53,7 @@ export const FormUpdater = ({ defaultValues }) => {
             if (previousDefaultValues.current[key] !== defaultValues[key]) {
                 const value = defaultValues[key] ||
                     // set the chain to the current user one if it is not present in the config
-                    (key === SwapFormKey.FromChain || key === SwapFormKey.ToChain
+                    (key === FormKey.FromChain || key === FormKey.ToChain
                         ? account.chainId || ''
                         : '');
                 setValue(key, value);

package/providers/{SwapFormProvider → FormProvider}/URLSearchParamsBuilder.js

@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
 import { useFormState, useWatch } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
-import { SwapFormKey } from './types';
+import { FormKey } from './types';
 const formValueKeys = [
-    SwapFormKey.FromAmount,
-    SwapFormKey.FromChain,
-    SwapFormKey.FromToken,
-    SwapFormKey.ToAddress,
-    SwapFormKey.ToChain,
-    SwapFormKey.ToToken,
+    FormKey.FromAmount,
+    FormKey.FromChain,
+    FormKey.FromToken,
+    FormKey.ToAddress,
+    FormKey.ToChain,
+    FormKey.ToToken,
 ];
 export const URLSearchParamsBuilder = () => {
     const { pathname } = useLocation();

package/providers/{SwapFormProvider → FormProvider}/index.d.ts

@@ -1,3 +1,3 @@
-export * from './SwapFormProvider';
+export * from './FormProvider';
 export * from './URLSearchParamsBuilder';
 export * from './types';

package/providers/{SwapFormProvider → FormProvider}/index.js

@@ -1,3 +1,3 @@
-export * from './SwapFormProvider';
+export * from './FormProvider';
 export * from './URLSearchParamsBuilder';
 export * from './types';

package/providers/FormProvider/types.d.ts

@@ -0,0 +1,37 @@
+export declare enum FormKey {
+    ContractOutputsToken = "contractOutputsToken",
+    FromAmount = "fromAmount",
+    FromChain = "fromChain",
+    FromToken = "fromToken",
+    ToAddress = "toAddress",
+    ToAmount = "toAmount",
+    ToChain = "toChain",
+    ToContractAddress = "toContractAddress",
+    ToContractCallData = "toContractCallData",
+    ToContractGasLimit = "ToContractGasLimit",
+    ToToken = "toToken",
+    TokenSearchFilter = "tokenSearchFilter"
+}
+export type FormValues = {
+    [FormKey.ContractOutputsToken]: string;
+    [FormKey.FromAmount]: string;
+    [FormKey.FromChain]: number;
+    [FormKey.FromToken]: string;
+    [FormKey.ToAddress]: string;
+    [FormKey.ToAmount]: string;
+    [FormKey.ToChain]: number;
+    [FormKey.ToContractAddress]: string;
+    [FormKey.ToContractCallData]: string;
+    [FormKey.ToContractGasLimit]: string;
+    [FormKey.ToToken]: string;
+    [FormKey.TokenSearchFilter]: string;
+};
+export type FormType = 'from' | 'to';
+export declare const FormKeyHelper: {
+    getChainKey: (formType: FormType) => 'fromChain' | 'toChain';
+    getTokenKey: (formType: FormType) => 'fromToken' | 'toToken';
+    getAmountKey: (formType: FormType) => 'fromAmount' | 'toAmount';
+};
+export interface FormTypeProps {
+    formType: FormType;
+}

package/providers/FormProvider/types.js

@@ -0,0 +1,20 @@
+export var FormKey;
+(function (FormKey) {
+    FormKey["ContractOutputsToken"] = "contractOutputsToken";
+    FormKey["FromAmount"] = "fromAmount";
+    FormKey["FromChain"] = "fromChain";
+    FormKey["FromToken"] = "fromToken";
+    FormKey["ToAddress"] = "toAddress";
+    FormKey["ToAmount"] = "toAmount";
+    FormKey["ToChain"] = "toChain";
+    FormKey["ToContractAddress"] = "toContractAddress";
+    FormKey["ToContractCallData"] = "toContractCallData";
+    FormKey["ToContractGasLimit"] = "ToContractGasLimit";
+    FormKey["ToToken"] = "toToken";
+    FormKey["TokenSearchFilter"] = "tokenSearchFilter";
+})(FormKey || (FormKey = {}));
+export const FormKeyHelper = {
+    getChainKey: (formType) => `${formType}Chain`,
+    getTokenKey: (formType) => `${formType}Token`,
+    getAmountKey: (formType) => `${formType}Amount`,
+};