@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/cjs/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionDetailsSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Card_1 = require("../../components/Card");
+const DetailedTextSkeleton = () => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", ml: 6, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 64, height: 16, variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 16, variant: "text", sx: { marginLeft: 0.5 } })] }));
+};
+const TransactionDetailsTokenSkeleton = () => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flex: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                            borderRadius: '100%',
+                        } }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", flex: 1, ml: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 64, height: 32, variant: "text" }) })] }), (0, jsx_runtime_1.jsx)(DetailedTextSkeleton, {})] }));
+};
+const TransactionDetailsSkeleton = () => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pb: 1, pt: 0.75, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 20, variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 40, height: 20, variant: "text" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { mb: 3, variant: "default", sx: { paddingX: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { pt: 2.5, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 64, height: 12, variant: "rounded" }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [(0, jsx_runtime_1.jsx)(TransactionDetailsTokenSkeleton, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flex: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                                                    borderRadius: '100%',
+                                                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", flex: 1, ml: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 32, variant: "text" }) })] }), (0, jsx_runtime_1.jsx)(DetailedTextSkeleton, {}), (0, jsx_runtime_1.jsx)(DetailedTextSkeleton, {})] }), Array.from({ length: 3 }).map((_, key) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }, py: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                                            borderRadius: '100%',
+                                        } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { sx: {
+                                            ml: 2,
+                                        }, width: 96, height: 32, variant: "text" })] }, key))), (0, jsx_runtime_1.jsx)(TransactionDetailsTokenSkeleton, {})] })] })] }));
+};
+exports.TransactionDetailsSkeleton = TransactionDetailsSkeleton;

package/cjs/pages/TransactionHistoryPage/TransactionHistoryItem.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-import type { Route } from '@lifi/sdk';
+import type { StatusResponse } from '@lifi/sdk';
 export declare const TransactionHistoryItem: React.FC<{
-    route: Route;
+    transaction: StatusResponse;
+    size: number;
+    start: number;
 }>;

package/cjs/pages/TransactionHistoryPage/TransactionHistoryItem.js

@@ -8,21 +8,48 @@ const react_router_dom_1 = require("react-router-dom");
 const Card_1 = require("../../components/Card");
 const Token_1 = require("../../components/Token");
 const utils_1 = require("../../utils");
-const TransactionHistoryItem = ({ route }) => {
+const TransactionHistoryItem = ({ transaction, size, start }) => {
     const { i18n } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const sending = transaction.sending;
+    const receiving = transaction.receiving;
     const handleClick = () => {
         navigate(utils_1.navigationRoutes.transactionDetails, {
-            state: { routeId: route.id },
+            state: {
+                transactionHash: transaction.sending.txHash,
+            },
         });
     };
-    const startedAt = new Date(route.steps[0].execution?.process[0].startedAt ?? 0);
-    const fromToken = { ...route.fromToken, amount: route.fromAmount };
+    const startedAt = new Date((sending.timestamp ?? 0) * 1000);
+    if (!sending.token?.chainId || !receiving.token?.chainId) {
+        return null;
+    }
+    const fromToken = {
+        ...sending.token,
+        amount: BigInt(sending.amount ?? '0'),
+        priceUSD: sending.token.priceUSD ?? '0',
+        symbol: sending.token?.symbol ?? '',
+        decimals: sending.token?.decimals ?? 0,
+        name: sending.token?.name ?? '',
+        chainId: sending.token?.chainId,
+    };
     const toToken = {
-        ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
-        amount: route.steps.at(-1)?.execution?.toAmount ?? route.toAmount,
+        ...receiving.token,
+        amount: BigInt(receiving.amount ?? '0'),
+        priceUSD: receiving.token.priceUSD ?? '0',
+        symbol: receiving.token?.symbol ?? '',
+        decimals: receiving.token?.decimals ?? 0,
+        name: receiving.token?.name ?? '',
+        chainId: receiving.token?.chainId,
     };
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { onClick: handleClick, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { onClick: handleClick, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            // height: `${size}px`,
+            transform: `translateY(${start}px)`,
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',

package/cjs/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -2,34 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransactionHistoryPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 const material_1 = require("@mui/material");
+const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const Dialog_1 = require("../../components/Dialog");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
-const routes_1 = require("../../stores/routes");
+const useTransactionHistory_1 = require("../../hooks/useTransactionHistory");
 const TransactionHistoryEmpty_1 = require("./TransactionHistoryEmpty");
 const TransactionHistoryItem_1 = require("./TransactionHistoryItem");
+const TransactionHistorySkeleton_1 = require("./TransactionHistorySkeleton");
+const constants_1 = require("./constants");
 const TransactionHistoryPage = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { account } = (0, providers_1.useWallet)();
-    const transactions = (0, routes_1.useTransactionHistory)(account.address);
-    const headerStoreContext = (0, stores_1.useHeaderStoreContext)();
-    const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const toggleDialog = (0, react_1.useCallback)(() => {
-        setOpen((open) => !open);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (transactions.length) {
-            return headerStoreContext.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
-        }
-    }, [transactions.length, toggleDialog, headerStoreContext]);
-    if (!transactions.length) {
+    // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
+    const parentRef = (0, react_1.useRef)(null);
+    const { data: transactions, isLoading } = (0, useTransactionHistory_1.useTransactionHistory)();
+    const { getVirtualItems, getTotalSize } = (0, react_virtual_1.useVirtualizer)({
+        count: transactions.length,
+        overscan: 10,
+        paddingStart: 8,
+        paddingEnd: 12,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 194,
+        getItemKey: (index) => `${transactions[index].transactionId}-${index}`,
+    });
+    if (!transactions.length && !isLoading) {
         return (0, jsx_runtime_1.jsx)(TransactionHistoryEmpty_1.TransactionHistoryEmpty, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, mt: 1, children: transactions.length ? (transactions.map(({ route }) => ((0, jsx_runtime_1.jsx)(TransactionHistoryItem_1.TransactionHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(TransactionHistoryEmpty_1.TransactionHistoryEmpty, {})) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.deleteTransactionHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), (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: () => deleteRoutes('completed'), autoFocus: true, children: t('button.delete') })] })] })] }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { ref: parentRef, style: { height: constants_1.minTransactionListHeight, overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(material_1.List, { style: { height: getTotalSize(), width: '100%', position: 'relative' }, disablePadding: true, children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.List, { disablePadding: true, sx: { paddingTop: 1 }, children: Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(TransactionHistorySkeleton_1.TransactionHistorySkeleton, {}, index))) })) : (getVirtualItems().map((item) => {
+                const transaction = transactions[item.index];
+                return ((0, jsx_runtime_1.jsx)(TransactionHistoryItem_1.TransactionHistoryItem, { size: item.size, start: item.start, transaction: transaction }, item.key));
+            })) }) }));
 };
 exports.TransactionHistoryPage = TransactionHistoryPage;

package/cjs/pages/TransactionHistoryPage/TransactionHistorySkeleton.d.ts

@@ -0,0 +1 @@
+export declare const TransactionHistorySkeleton: () => import("react/jsx-runtime").JSX.Element;

package/cjs/pages/TransactionHistoryPage/TransactionHistorySkeleton.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionHistorySkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Card_1 = require("../../components/Card");
+const Token_1 = require("../../components/Token");
+const TokenSkeleton = ({ showDivider }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, px: 2, pt: showDivider ? 1 : 0.5, pb: showDivider ? 0 : 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flex: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                            borderRadius: '100%',
+                        } }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", flex: 1, ml: 2, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 40, height: 30, variant: "text" }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", marginLeft: "-16px", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: 'column', marginTop: 0.5, visibility: showDivider ? 'visible' : 'hidden', children: (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 64, height: 12, sx: { marginTop: 0.5 }, variant: "rounded" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5, marginLeft: 0.5 } })] })] }));
+};
+const TransactionHistorySkeleton = () => {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { style: {
+            marginBottom: '16px',
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pt: 2, px: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 96, height: 16, sx: (theme) => ({
+                            borderRadius: `${theme.shape.borderRadius}px`,
+                        }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 64, height: 16, sx: (theme) => ({
+                            borderRadius: `${theme.shape.borderRadius}px`,
+                        }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [(0, jsx_runtime_1.jsx)(TokenSkeleton, { showDivider: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(TokenSkeleton, {})] })] }));
+};
+exports.TransactionHistorySkeleton = TransactionHistorySkeleton;

package/cjs/pages/TransactionHistoryPage/constants.d.ts

@@ -0,0 +1 @@
+export declare const minTransactionListHeight = 544;

package/cjs/pages/TransactionHistoryPage/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.minTransactionListHeight = void 0;
+exports.minTransactionListHeight = 544;

package/cjs/pages/TransactionPage/ExchangeRateBottomSheet.js

@@ -4,7 +4,6 @@ exports.ExchangeRateBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
 const material_1 = require("@mui/material");
-const big_js_1 = require("big.js");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const BottomSheet_1 = require("../../components/BottomSheet");
@@ -47,15 +46,17 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    const oldAmount = (0, big_js_1.default)(data?.oldToAmount || 1);
+    if (!data) {
+        return;
+    }
+    const oldAmount = BigInt(data.oldToAmount || 1);
+    const rateChange = ((Number((BigInt(data.newToAmount || 0) * 1000000n) / oldAmount) /
+        1000000) *
+        100 -
+        100).toFixed(2);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
-                                value: (0, utils_1.formatTokenAmount)(data?.oldToAmount, data?.toToken.decimals, 5),
+                                value: (0, utils_1.formatTokenAmount)(BigInt(data.oldToAmount), data.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
-                                value: (0, utils_1.formatTokenAmount)(data?.newToAmount, data?.toToken.decimals, 5),
-                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(data?.newToAmount || 0)
-                                .div(oldAmount.eq(0) ? (0, big_js_1.default)(1) : oldAmount)
-                                .minus(1)
-                                .mul(100)
-                                .round(2, big_js_1.default.roundUp)
-                                .toString(), "%"] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+                                value: (0, utils_1.formatTokenAmount)(BigInt(data?.newToAmount), data?.toToken.decimals, 5),
+                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [rateChange, "%"] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
 };

package/cjs/pages/TransactionPage/StartTransactionButton.js

@@ -6,8 +6,8 @@ const BaseTransactionButton_1 = require("../../components/BaseTransactionButton"
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const StartTransactionButton = ({ onClick, route, text, loading, }) => {
-    const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = (0, hooks_1.useGasSufficiency)(route);
-    const { insufficientFromToken, isInitialLoading: isFromTokenSufficiencyLoading, } = (0, hooks_1.useFromTokenSufficiency)(route);
+    const { insufficientGas, isLoading: isGasSufficiencyLoading } = (0, hooks_1.useGasSufficiency)(route);
+    const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } = (0, hooks_1.useFromTokenSufficiency)(route);
     const shouldDisableButton = insufficientFromToken || !!insufficientGas?.length;
     return ((0, jsx_runtime_1.jsx)(BaseTransactionButton_1.BaseTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };

package/cjs/pages/TransactionPage/StatusBottomSheet.js

@@ -21,16 +21,16 @@ const StatusBottomSheet = ({ status, route, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
-    const { getChainById } = (0, hooks_1.useChains)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { subvariant, contractComponent, contractSecondaryComponent, contractCompactComponent, } = (0, providers_1.useWidgetConfig)();
     const toToken = {
         ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
-        amount: route.steps.at(-1)?.execution?.toAmount ??
+        amount: BigInt(route.steps.at(-1)?.execution?.toAmount ??
             route.steps.at(-1)?.estimate.toAmount ??
-            route.toAmount,
+            route.toAmount),
     };
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(toToken, route.toAddress);
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(route.toAddress, toToken);
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(providers_1.FormKey.FromAmount, '');
@@ -62,8 +62,12 @@ const StatusBottomSheet = ({ status, route, }) => {
     };
     const handleSeeDetails = () => {
         handleClose();
+        const transactionHash = (0, stores_1.getSourceTxHash)(route);
         navigate(utils_1.navigationRoutes.transactionDetails, {
-            state: { routeId: route.id },
+            state: {
+                routeId: route.id,
+                transactionHash,
+            },
             replace: true,
         });
     };
@@ -80,7 +84,7 @@ const StatusBottomSheet = ({ status, route, }) => {
                     : t(`success.title.${transactionType}Successful`);
             if (token) {
                 primaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: (0, utils_1.formatTokenAmount)(token.amount),
+                    amount: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
@@ -97,7 +101,7 @@ const StatusBottomSheet = ({ status, route, }) => {
             });
             if (token) {
                 secondaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: (0, utils_1.formatTokenAmount)(token.amount),
+                    amount: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
@@ -114,7 +118,7 @@ const StatusBottomSheet = ({ status, route, }) => {
             });
             if (token) {
                 secondaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: (0, utils_1.formatTokenAmount)(token.amount),
+                    amount: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
                     walletAddress: (0, utils_1.shortenAddress)(route.toAddress),

package/cjs/pages/TransactionPage/TransactionPage.js

@@ -127,7 +127,7 @@ const TransactionPage = () => {
     const getInsuranceCoverageId = () => route.steps[0].execution?.process
         .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
         .find((process) => process.txHash)?.txHash ?? route.fromAddress;
-    return ((0, jsx_runtime_1.jsxs)(TransactionPage_style_1.Container, { children: [(0, Step_1.getStepList)(route, subvariant), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+    return ((0, jsx_runtime_1.jsxs)(TransactionPage_style_1.Container, { children: [(0, Step_1.getStepList)(route, subvariant), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(BigInt(route.toAmountMin), route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), 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)(StartButton, { text: getButtonText(), onClick: handleStartClick, route: route, insurableRouteId: stateRouteId }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,

package/cjs/providers/FormProvider/FormUpdater.js

@@ -5,11 +5,11 @@ exports.FormUpdater = void 0;
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const _1 = require(".");
-const WalletProvider_1 = require("../WalletProvider");
+const hooks_1 = require("../../hooks");
 const WidgetProvider_1 = require("../WidgetProvider");
 const FormUpdater = ({ defaultValues }) => {
     const { fromChain, toChain, chains } = (0, WidgetProvider_1.useWidgetConfig)();
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { account } = (0, hooks_1.useAccount)();
     const { setValue, getValues, getFieldState, resetField, 
     // Subscription to touchedFields is required by getFieldState to work
     formState: { touchedFields }, } = (0, react_hook_form_1.useFormContext)();
@@ -17,7 +17,7 @@ const FormUpdater = ({ defaultValues }) => {
     // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
     (0, react_1.useEffect)(() => {
         const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains);
-        if (!account.isActive || !account.chainId || !chainAllowed) {
+        if (!account.isConnected || !account.chainId || !chainAllowed) {
             return;
         }
         const { isTouched: isFromChainTouched } = getFieldState(_1.FormKey.FromChain);
@@ -40,7 +40,7 @@ const FormUpdater = ({ defaultValues }) => {
         }
     }, [
         account.chainId,
-        account.isActive,
+        account.isConnected,
         chains,
         fromChain,
         getFieldState,

package/cjs/providers/I18nProvider/I18nProvider.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.I18nProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const i18next_1 = require("i18next");
-const i18next_browser_languagedetector_1 = require("i18next-browser-languagedetector");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const supportedLanguages = require("../../i18n");
@@ -11,7 +10,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const WidgetProvider_1 = require("../WidgetProvider");
 const I18nProvider = ({ children, }) => {
-    const { languageResources, languages, disableLanguageDetector } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { languageResources, languages } = (0, WidgetProvider_1.useWidgetConfig)();
     const { language } = (0, stores_1.useSettings)(['language']);
     const i18n = (0, react_1.useMemo)(() => {
         let resources = Object.keys(supportedLanguages)
@@ -34,7 +33,7 @@ const I18nProvider = ({ children, }) => {
                 return resources;
             }, resources);
         }
-        let i18n = i18next_1.default.createInstance({
+        let i18n = (0, i18next_1.createInstance)({
             lng: languages?.default || language,
             fallbackLng: resources.en
                 ? 'en'
@@ -50,12 +49,9 @@ const I18nProvider = ({ children, }) => {
                 caches: [],
             },
         });
-        if (!language && !languages?.default && !disableLanguageDetector) {
-            i18n = i18n.use(i18next_browser_languagedetector_1.default);
-        }
         i18n.use(react_i18next_1.initReactI18next).init();
         return i18n;
-    }, [disableLanguageDetector, language, languageResources, languages]);
+    }, [language, languageResources, languages]);
     return (0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n, children: children });
 };
 exports.I18nProvider = I18nProvider;

package/cjs/providers/I18nProvider/types.d.ts

@@ -3,13 +3,14 @@ export type PartialResource<T> = T extends object ? {
     [P in keyof T]?: PartialResource<T[P]>;
 } : T;
 export type LanguageKey = keyof typeof languages;
+export type LanguageResource = typeof languages.en;
 export type LanguageResources = {
-    [language in LanguageKey]?: PartialResource<typeof languages.en>;
+    [language in LanguageKey]?: PartialResource<LanguageResource>;
 } | {
-    [language: string]: PartialResource<typeof languages.en>;
+    [language: string]: PartialResource<LanguageResource>;
 };
 export type LanguageTranslationResource = {
-    [namespace in 'translation']: PartialResource<typeof languages.en>;
+    [namespace in 'translation']: PartialResource<LanguageResource>;
 };
 export type LanguageTranslationResources = {
     [language: string]: LanguageTranslationResource;

package/cjs/providers/WalletProvider/EVMProvider.d.ts

@@ -0,0 +1,3 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const EVMProvider: FC<PropsWithChildren>;
+export declare const EVMBaseProvider: FC<PropsWithChildren>;

package/cjs/providers/WalletProvider/EVMProvider.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVMBaseProvider = exports.EVMProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const wallet_management_1 = require("@lifi/wallet-management");
+const react_1 = require("react");
+const viem_1 = require("viem");
+const wagmi_1 = require("wagmi");
+const chains_1 = require("wagmi/chains");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("./utils");
+const connectors = [
+    wallet_management_1.walletConnect,
+    wallet_management_1.coinbase,
+    wallet_management_1.bitget,
+    wallet_management_1.gate,
+    wallet_management_1.exodus,
+    wallet_management_1.taho,
+    wallet_management_1.binance,
+    wallet_management_1.frontier,
+    wallet_management_1.okx,
+    wallet_management_1.trust,
+    wallet_management_1.status,
+    wallet_management_1.alpha,
+    wallet_management_1.block,
+    wallet_management_1.bitpie,
+    wallet_management_1.brave,
+    wallet_management_1.dcent,
+    wallet_management_1.frame,
+    wallet_management_1.hyperpay,
+    wallet_management_1.imtoken,
+    wallet_management_1.liquality,
+    wallet_management_1.ownbit,
+    wallet_management_1.tokenpocket,
+    wallet_management_1.xdefi,
+    wallet_management_1.oneinch,
+    wallet_management_1.tokenary,
+    wallet_management_1.safepal,
+    wallet_management_1.rabby,
+];
+const EVMProvider = ({ children }) => {
+    const inWagmiContext = useInWagmiContext();
+    return inWagmiContext ? (children) : ((0, jsx_runtime_1.jsx)(exports.EVMBaseProvider, { children: children }));
+};
+exports.EVMProvider = EVMProvider;
+const EVMBaseProvider = ({ children }) => {
+    const { chains } = (0, hooks_1.useAvailableChains)();
+    const wagmiConfig = (0, react_1.useMemo)(() => {
+        const _chains = chains?.length
+            ? chains.map(utils_1.formatChain)
+            : [chains_1.mainnet];
+        // Add ENS contracts
+        const _mainnet = _chains.find((chain) => chain.id === chains_1.mainnet.id);
+        if (_mainnet) {
+            _mainnet.contracts = chains_1.mainnet.contracts;
+        }
+        const wagmiConfig = (0, wagmi_1.createConfig)({
+            chains: _chains,
+            connectors: connectors,
+            client({ chain }) {
+                return (0, viem_1.createClient)({ chain, transport: (0, wagmi_1.http)() });
+            },
+            // transports: _chains.reduce(
+            //   (transports, chain) => {
+            //     transports[chain.id] = http();
+            //     return transports;
+            //   },
+            //   {} as Record<number, Transport>,
+            // ),
+        });
+        return wagmiConfig;
+    }, [chains]);
+    return ((0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: Boolean(chains?.length), children: children }));
+};
+exports.EVMBaseProvider = EVMBaseProvider;
+function useInWagmiContext() {
+    const context = (0, react_1.useContext)(wagmi_1.WagmiContext);
+    return Boolean(context);
+}

package/cjs/providers/WalletProvider/SDKProviders.d.ts

@@ -0,0 +1 @@
+export declare const SDKProviders: () => null;

package/cjs/providers/WalletProvider/SDKProviders.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SDKProviders = void 0;
+const sdk_1 = require("@lifi/sdk");
+const wallet_adapter_react_1 = require("@solana/wallet-adapter-react");
+const core_1 = require("@wagmi/core");
+const react_1 = require("react");
+const wagmi_1 = require("wagmi");
+const SDKProviders = () => {
+    const { wallet } = (0, wallet_adapter_react_1.useWallet)();
+    const wagmiConfig = (0, wagmi_1.useConfig)();
+    (0, react_1.useEffect)(() => {
+        // Configure SDK Providers
+        sdk_1.config.setProviders([
+            (0, sdk_1.EVM)({
+                getWalletClient: () => (0, core_1.getWalletClient)(wagmiConfig),
+                switchChain: async (chainId) => {
+                    await (0, core_1.switchChain)(wagmiConfig, { chainId });
+                    return (0, core_1.getWalletClient)(wagmiConfig);
+                },
+            }),
+            (0, sdk_1.Solana)({
+                async getWalletAdapter() {
+                    return wallet?.adapter;
+                },
+            }),
+        ]);
+    }, [wagmiConfig, wallet?.adapter]);
+    return null;
+};
+exports.SDKProviders = SDKProviders;

package/cjs/providers/WalletProvider/SolanaProvider.d.ts

@@ -0,0 +1,3 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const SolanaProvider: FC<PropsWithChildren>;
+export declare const SolanaBaseProvider: FC<PropsWithChildren>;

package/cjs/providers/WalletProvider/SolanaProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SolanaBaseProvider = exports.SolanaProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const wallet_adapter_base_1 = require("@solana/wallet-adapter-base");
+const wallet_adapter_react_1 = require("@solana/wallet-adapter-react");
+const web3_js_1 = require("@solana/web3.js");
+const react_1 = require("react");
+const endpoint = (0, web3_js_1.clusterApiUrl)(wallet_adapter_base_1.WalletAdapterNetwork.Mainnet);
+/**
+ * Wallets that implement either of these standards will be available automatically.
+ *
+ *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
+ *     (https://github.com/solana-mobile/mobile-wallet-adapter)
+ *   - Solana Wallet Standard
+ *     (https://github.com/solana-labs/wallet-standard)
+ *
+ * If you wish to support a wallet that supports neither of those standards,
+ * instantiate its legacy wallet adapter here. Common legacy adapters can be found
+ * in the npm package `@solana/wallet-adapter-wallets`.
+ */
+const wallets = [];
+const SolanaProvider = ({ children }) => {
+    const inSolanaContext = useInSolanaContext();
+    return inSolanaContext ? (children) : ((0, jsx_runtime_1.jsx)(exports.SolanaBaseProvider, { children: children }));
+};
+exports.SolanaProvider = SolanaProvider;
+const SolanaBaseProvider = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(wallet_adapter_react_1.ConnectionProvider, { endpoint: endpoint, children: (0, jsx_runtime_1.jsx)(wallet_adapter_react_1.WalletProvider, { wallets: wallets, autoConnect: true, children: children }) }));
+};
+exports.SolanaBaseProvider = SolanaBaseProvider;
+function useInSolanaContext() {
+    const context = (0, react_1.useContext)(wallet_adapter_react_1.ConnectionContext);
+    return Boolean(context?.connection);
+}

package/cjs/providers/WalletProvider/WalletProvider.d.ts

@@ -1,16 +1,2 @@
-import type { Signer } from '@ethersproject/abstract-signer';
-import type { FC, PropsWithChildren } from 'react';
-import type { WalletContextProps } from './types';
-export declare const useWallet: () => WalletContextProps;
+import { type FC, type PropsWithChildren } from 'react';
 export declare const WalletProvider: FC<PropsWithChildren>;
-export declare const extractAccountFromSigner: (signer?: Signer) => Promise<{
-    address: string | undefined;
-    isActive: boolean;
-    signer: Signer | undefined;
-    chainId: number | undefined;
-} | {
-    address?: undefined;
-    isActive?: undefined;
-    signer?: undefined;
-    chainId?: undefined;
-}>;