@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.5

package/_cjs/utils/format.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTokenPrice = exports.formatInputAmount = exports.formatSlippage = exports.formatTokenAmount = void 0;
+const viem_1 = require("viem");
+/**
+ * Format token amount to at least 4 decimals.
+ * @param amount amount to format.
+ * @returns formatted amount.
+ */
+const formatTokenAmount = (amount = 0n, decimals, decimalPlaces = 3) => {
+    const formattedAmount = amount ? (0, viem_1.formatUnits)(amount, decimals) : '0';
+    const parsedAmount = parseFloat(formattedAmount);
+    if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
+        return '0';
+    }
+    const absAmount = Math.abs(parsedAmount);
+    while (absAmount < 1 / 10 ** decimalPlaces) {
+        decimalPlaces++;
+    }
+    return parsedAmount.toFixed(decimalPlaces + 1);
+};
+exports.formatTokenAmount = formatTokenAmount;
+const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false) => {
+    if (!slippage) {
+        return slippage;
+    }
+    const parsedSlippage = parseFloat(slippage);
+    if (isNaN(Number(slippage)) && !isNaN(parsedSlippage)) {
+        return parsedSlippage.toString();
+    }
+    if (isNaN(parsedSlippage)) {
+        return defaultValue;
+    }
+    if (parsedSlippage > 100) {
+        return '100';
+    }
+    if (parsedSlippage < 0) {
+        return Math.abs(parsedSlippage).toString();
+    }
+    if (returnInitial) {
+        return slippage;
+    }
+    return parsedSlippage.toString();
+};
+exports.formatSlippage = formatSlippage;
+const formatInputAmount = (amount, decimals = null, returnInitial = false) => {
+    if (!amount) {
+        return amount;
+    }
+    let formattedAmount = amount.replaceAll(',', '.');
+    if (formattedAmount.startsWith('.')) {
+        formattedAmount = '0' + formattedAmount;
+    }
+    const parsedAmount = parseFloat(formattedAmount);
+    if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
+        return parsedAmount.toString();
+    }
+    if (isNaN(Math.abs(Number(formattedAmount)))) {
+        return '';
+    }
+    if (returnInitial) {
+        return formattedAmount;
+    }
+    let [integer, fraction = ''] = formattedAmount.split('.');
+    if (decimals !== null && fraction.length > decimals) {
+        fraction = fraction.slice(0, decimals);
+    }
+    integer = integer.replace(/^0+|-/, '');
+    fraction = fraction.replace(/(0+)$/, '');
+    return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
+};
+exports.formatInputAmount = formatInputAmount;
+const formatTokenPrice = (amount, price) => {
+    if (!amount || !price) {
+        return 0;
+    }
+    if (isNaN(Number(amount)) || isNaN(Number(price))) {
+        return 0;
+    }
+    return parseFloat(amount) * parseFloat(price);
+};
+exports.formatTokenPrice = formatTokenPrice;

package/_cjs/utils/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./colors"), exports);
+__exportStar(require("./deepMerge"), exports);
+__exportStar(require("./elements"), exports);
+__exportStar(require("./enum"), exports);
+__exportStar(require("./format"), exports);
+__exportStar(require("./input"), exports);
+__exportStar(require("./navigationRoutes"), exports);
+__exportStar(require("./svm"), exports);
+__exportStar(require("./wallet"), exports);

package/_cjs/utils/input.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitInputText = void 0;
+const fitInputText = (maxFontSize, minFontSize, element) => {
+    if (!element) {
+        return;
+    }
+    let high = maxFontSize;
+    let low = minFontSize;
+    let size = minFontSize;
+    let mid = 0;
+    // Binary search for highest font size best fit
+    while (low <= high) {
+        mid = (high + low) >> 1;
+        const fontSize = `${mid + 1}px`;
+        element.style.fontSize = fontSize;
+        // scrollWidth has different rounding than clientWidth, remove 1px for consistency
+        const scrollWidth = element.scrollWidth - 1;
+        if (scrollWidth <= element.clientWidth) {
+            size = mid;
+            low = mid + 1;
+        }
+        else {
+            high = mid - 1;
+        }
+    }
+    const fontSize = `${size}px`;
+    element.style.fontSize = fontSize;
+};
+exports.fitInputText = fitInputText;

package/_cjs/utils/navigationRoutes.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backButtonRoutes = exports.stickyHeaderRoutes = exports.navigationRoutesValues = exports.navigationRoutes = void 0;
+exports.navigationRoutes = {
+    home: '/',
+    activeTransactions: 'active-transactions',
+    bridges: 'bridges',
+    exchanges: 'exchanges',
+    fromChain: 'from-chain',
+    fromToken: 'from-token',
+    languages: 'languages',
+    routes: 'routes',
+    selectWallet: 'select-wallet',
+    settings: 'settings',
+    toChain: 'to-chain',
+    toToken: 'to-token',
+    toTokenNative: 'to-token-native',
+    transactionDetails: 'transaction-details',
+    transactionExecution: 'transaction-execution',
+    transactionHistory: 'transaction-history',
+};
+exports.navigationRoutesValues = Object.values(exports.navigationRoutes);
+exports.stickyHeaderRoutes = [
+    exports.navigationRoutes.activeTransactions,
+    exports.navigationRoutes.bridges,
+    exports.navigationRoutes.exchanges,
+    exports.navigationRoutes.fromChain,
+    exports.navigationRoutes.home,
+    exports.navigationRoutes.routes,
+    exports.navigationRoutes.selectWallet,
+    exports.navigationRoutes.settings,
+    exports.navigationRoutes.toChain,
+    exports.navigationRoutes.toTokenNative,
+    exports.navigationRoutes.transactionDetails,
+    exports.navigationRoutes.transactionExecution,
+    exports.navigationRoutes.transactionHistory,
+];
+exports.backButtonRoutes = [
+    exports.navigationRoutes.activeTransactions,
+    exports.navigationRoutes.bridges,
+    exports.navigationRoutes.exchanges,
+    exports.navigationRoutes.languages,
+    exports.navigationRoutes.fromChain,
+    exports.navigationRoutes.fromToken,
+    exports.navigationRoutes.routes,
+    exports.navigationRoutes.selectWallet,
+    exports.navigationRoutes.settings,
+    exports.navigationRoutes.toChain,
+    exports.navigationRoutes.toToken,
+    exports.navigationRoutes.toTokenNative,
+    exports.navigationRoutes.transactionDetails,
+    exports.navigationRoutes.transactionExecution,
+    exports.navigationRoutes.transactionHistory,
+];

package/_cjs/utils/svm.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSVMAddress = void 0;
+const web3_js_1 = require("@solana/web3.js");
+const isSVMAddress = (address) => {
+    try {
+        new web3_js_1.PublicKey(address);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+exports.isSVMAddress = isSVMAddress;

package/_cjs/utils/wallet.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shortenAddress = void 0;
+const shortenAddress = (address) => address
+    ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
+    : null;
+exports.shortenAddress = shortenAddress;

package/_esm/App.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { WidgetDrawer } from './AppDrawer';
+import type { WidgetConfig } from './types';
+export declare const App: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;

package/_esm/App.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { AppDefault } from './AppDefault';
+import { AppDrawer } from './AppDrawer';
+import { AppProvider } from './AppProvider';
+export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
+    const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
+    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
+});

package/_esm/AppDefault.d.ts

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

package/_esm/AppDefault.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppRoutes } from './AppRoutes';
+import { AppContainer, AppExpandedContainer, FlexContainer, } from './components/AppContainer';
+import { Header } from './components/Header';
+import { Initializer } from './components/Initializer';
+import { PoweredBy } from './components/PoweredBy';
+import { RoutesExpanded } from './components/Routes';
+import { useExpandableVariant } from './hooks';
+import { useWidgetConfig } from './providers';
+import { ElementId, createElementId } from './utils';
+export const AppDefault = () => {
+    const { elementId } = useWidgetConfig();
+    const expandable = useExpandableVariant();
+    return (_jsxs(AppExpandedContainer, { id: createElementId(ElementId.AppExpandedContainer, elementId), children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
+};

package/_esm/AppDrawer.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { WidgetConfig, WidgetSubvariant } from './types';
+export interface WidgetDrawer {
+    isOpen(): void;
+    toggleDrawer(): void;
+    openDrawer(): void;
+    closeDrawer(): void;
+}
+export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
+export declare const DrawerButtonText: ({ open, subvariant, }: {
+    open: boolean;
+    subvariant?: WidgetSubvariant | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/_esm/AppDrawer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { Drawer } from '@mui/material';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppDefault } from './AppDefault';
+import { CloseButtonLayout, DrawerButton, DrawerButtonTypography, } from './AppDrawer.style';
+import { AppProvider } from './AppProvider';
+import { HiddenUI } from './types';
+export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, ref) => {
+    const openRef = useRef(open);
+    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
+    const toggleDrawer = useCallback(() => {
+        setDrawerOpen((open) => !open);
+    }, []);
+    const openDrawer = useCallback(() => {
+        setDrawerOpen(true);
+    }, []);
+    const closeDrawer = useCallback(() => {
+        setDrawerOpen(false);
+    }, []);
+    useImperativeHandle(ref, () => ({
+        isOpen: () => openRef.current,
+        toggleDrawer,
+        openDrawer,
+        closeDrawer,
+    }), [closeDrawer, openDrawer, toggleDrawer]);
+    const widgetConfig = useMemo(() => ({
+        ...config,
+        integrator,
+        containerStyle: {
+            ...config?.containerStyle,
+            height: '100%',
+        },
+    }), [config, integrator]);
+    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsxs(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, slotProps: {
+                    backdrop: {
+                        sx: {
+                            backgroundColor: 'rgb(0 0 0 / 48%)',
+                            backdropFilter: 'blur(3px)',
+                        },
+                    },
+                }, PaperProps: {
+                    sx: {
+                        width: config?.containerStyle?.width ?? '100%',
+                        minWidth: config?.containerStyle?.minWidth ?? 360,
+                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
+                    },
+                }, keepMounted: true, children: [_jsx(CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: _jsx(CloseIcon, {}) }), _jsx(AppDefault, {})] })] }));
+});
+export const DrawerButtonText = ({ open, subvariant, }) => {
+    const { t } = useTranslation();
+    return (_jsx(DrawerButtonTypography, { children: open
+            ? t('button.hide')
+            : subvariant === 'nft'
+                ? t('button.lifiCheckout')
+                : t('button.lifiExchange') }));
+};

package/_esm/AppDrawer.style.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const DrawerButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "href" | "disabled" | "action" | "size" | "classes" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    open?: boolean | undefined;
+    drawerProps?: {
+        width?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+    } | undefined;
+}, {}, {}>;
+export declare const DrawerButtonTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "style" | "className" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CloseButtonLayout: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "disabled" | "action" | "size" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/_esm/AppDrawer.style.js

@@ -0,0 +1,87 @@
+import { Button, IconButton, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const getButtonTransformWidth = (drawerWidth, drawerMaxWidth) => {
+    if (typeof drawerWidth === 'number') {
+        return `${drawerWidth}px`;
+    }
+    if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
+        return drawerWidth;
+    }
+    if (typeof drawerMaxWidth === 'number') {
+        return `${drawerMaxWidth}px`;
+    }
+    if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
+        return drawerMaxWidth;
+    }
+    return '392px';
+};
+export const DrawerButton = styled(Button, {
+    shouldForwardProp: (prop) => !['open', 'drawerProps'].includes(prop),
+})(({ theme, open, drawerProps }) => ({
+    background: theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+    color: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    alignItems: 'center',
+    borderRadius: `${theme.shape.borderRadiusSecondary}px 0 0 ${theme.shape.borderRadiusSecondary}px`,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minHeight: 144,
+    minWidth: 40,
+    padding: theme.spacing(1, 0, 1, 0),
+    position: 'absolute',
+    right: 0,
+    top: 'calc(50% - 74px)',
+    transform: `translate3d(calc(${open
+        ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
+        : '0px'} * -1), 0, 0)`,
+    transition: theme.transitions.create(['transform'], {
+        duration: open
+            ? theme.transitions.duration.enteringScreen
+            : theme.transitions.duration.leavingScreen,
+        easing: open
+            ? theme.transitions.easing.easeOut
+            : theme.transitions.easing.sharp,
+    }),
+    zIndex: 1500,
+    '&:hover': {
+        background: theme.palette.mode === 'light'
+            ? theme.palette.common.black
+            : theme.palette.common.white,
+    },
+    svg: {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+    },
+}));
+export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
+    borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,
+    background: theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+    color: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1),
+    position: 'relative',
+    textTransform: 'none',
+    transform: 'rotateZ(180deg)',
+    writingMode: 'vertical-rl',
+}));
+export const CloseButtonLayout = styled(IconButton)(() => ({
+    position: 'absolute',
+    top: '12px',
+    right: '26px',
+    zIndex: 1,
+    height: '40px',
+    width: '40px',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));

package/_esm/AppProvider.d.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react';
+import type { WidgetConfigProps } from './types';
+export declare const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>>;
+export declare const AppRouter: React.FC<PropsWithChildren<{}>>;

package/_esm/AppProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClientProvider } from '@tanstack/react-query';
+import { Fragment } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router-dom';
+import { queryClient } from './config/queryClient';
+import { FormProvider, I18nProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
+import { StoreProvider } from './stores';
+export const AppProvider = ({ children, config, }) => {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(WidgetProvider, { config: config, children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(FormProvider, { children: _jsx(StoreProvider, { config: config, children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }));
+};
+export const AppRouter = ({ children }) => {
+    const { buildUrl } = useWidgetConfig();
+    const inRouterContext = useInRouterContext();
+    const Router = inRouterContext ? Fragment : MemoryRouter;
+    return (_jsxs(Router, { children: [children, buildUrl ? _jsx(URLSearchParamsBuilder, {}) : null] }));
+};

package/_esm/AppRoutes.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AppRoutes: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/_esm/AppRoutes.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocation, useRoutes } from 'react-router-dom';
+import { NotFound } from './components/NotFound';
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
+import { LanguagesPage } from './pages/LanguagesPage';
+import { MainPage } from './pages/MainPage';
+import { RoutesPage } from './pages/RoutesPage';
+import { SelectChainPage } from './pages/SelectChainPage';
+import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage';
+import { SelectTokenPage } from './pages/SelectTokenPage';
+import { SelectWalletPage } from './pages/SelectWalletPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage';
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage';
+import { TransactionPage } from './pages/TransactionPage';
+import { navigationRoutes } from './utils';
+// SelectWalletPage should be accessible from every page and this handler helps avoid creating multiple paths.
+// Avoid using it for anything else, we need to come up with a better solution once we have one more page accessible from everywhere.
+const NotFoundRouteHandler = () => {
+    const { pathname } = useLocation();
+    return pathname.includes(navigationRoutes.selectWallet) ? (_jsx(SelectWalletPage, {})) : (_jsx(NotFound, {}));
+};
+const routes = [
+    {
+        path: '/',
+        element: _jsx(MainPage, {}),
+    },
+    {
+        path: navigationRoutes.settings,
+        element: _jsx(SettingsPage, {}),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.bridges}`,
+        element: _jsx(SelectEnabledToolsPage, { type: "Bridges" }),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.exchanges}`,
+        element: _jsx(SelectEnabledToolsPage, { type: "Exchanges" }),
+    },
+    {
+        path: `${navigationRoutes.settings}/${navigationRoutes.languages}`,
+        element: _jsx(LanguagesPage, {}),
+    },
+    {
+        path: navigationRoutes.fromToken,
+        element: _jsx(SelectTokenPage, { formType: "from" }),
+    },
+    {
+        path: navigationRoutes.toToken,
+        element: _jsx(SelectTokenPage, { formType: "to" }),
+    },
+    {
+        path: navigationRoutes.toTokenNative,
+        element: _jsx(SelectChainPage, { formType: "to", selectNativeToken: true }),
+    },
+    {
+        path: `${navigationRoutes.fromToken}?/${navigationRoutes.fromChain}`,
+        element: _jsx(SelectChainPage, { formType: "from" }),
+    },
+    {
+        path: `${navigationRoutes.toToken}?/${navigationRoutes.toChain}`,
+        element: _jsx(SelectChainPage, { formType: "to" }),
+    },
+    {
+        path: navigationRoutes.routes,
+        element: _jsx(RoutesPage, {}),
+    },
+    {
+        path: navigationRoutes.activeTransactions,
+        element: _jsx(ActiveTransactionsPage, {}),
+    },
+    {
+        path: navigationRoutes.transactionHistory,
+        element: _jsx(TransactionHistoryPage, {}),
+    },
+    {
+        path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
+        element: _jsx(TransactionDetailsPage, {}),
+    },
+    {
+        path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
+        element: _jsx(TransactionPage, {}),
+    },
+    {
+        path: '*',
+        element: _jsx(NotFoundRouteHandler, {}),
+    },
+];
+export const AppRoutes = () => {
+    const element = useRoutes(routes);
+    return element;
+};

package/_esm/components/ActiveTransactions/ActiveTransactionItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ActiveTransactionItem: React.FC<{
+    routeId: string;
+    dense?: boolean;
+}>;

package/_esm/components/ActiveTransactions/ActiveTransactionItem.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { StepTimer } from '../Step/StepTimer';
+import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
+import { ListItem, ListItemButton } from './ActiveTransactions.style';
+export const ActiveTransactionItem = ({ routeId, dense }) => {
+    const navigate = useNavigate();
+    const { route, status } = useRouteExecution({
+        routeId,
+        executeInBackground: true,
+    });
+    const lastActiveStep = route?.steps.findLast((step) => step.execution);
+    const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
+    const { title } = useProcessMessage(lastActiveStep, lastActiveProcess);
+    if (!route || !lastActiveStep) {
+        return null;
+    }
+    const handleClick = () => {
+        navigate(navigationRoutes.transactionExecution, { state: { routeId } });
+    };
+    const getStatusComponent = () => {
+        switch (lastActiveProcess?.status) {
+            case 'ACTION_REQUIRED':
+                return _jsx(InfoRoundedIcon, { color: "info", fontSize: "small" });
+            case 'FAILED':
+                return _jsx(ErrorRoundedIcon, { color: "error", fontSize: "small" });
+            default:
+                return (_jsx(Typography, { fontSize: 14, fontWeight: 500, children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
+        }
+    };
+    const ListItemComponent = dense ? ListItem : ListItemButton;
+    return (_jsxs(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, { total: 2, children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] }) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, { fontWeight: 500, lineHeight: 1, sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 2,
+                        height: 16,
+                    }, children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== RouteExecutionStatus.Done ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
+};

package/_esm/components/ActiveTransactions/ActiveTransactions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+export declare const ActiveTransactions: React.FC<BoxProps>;

package/_esm/components/ActiveTransactions/ActiveTransactions.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAccount } from '../../hooks';
+import { useExecutingRoutesIds } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { ActiveTransactionItem } from './ActiveTransactionItem';
+import { ShowAllButton } from './ActiveTransactions.style';
+export const ActiveTransactions = (props) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { account } = useAccount();
+    const executingRoutes = useExecutingRoutesIds(account.address);
+    if (!executingRoutes?.length) {
+        return null;
+    }
+    const handleShowAll = () => {
+        navigate(navigationRoutes.activeTransactions);
+    };
+    const hasShowAll = executingRoutes?.length > 2;
+    return (_jsxs(Card, { variant: "selected", selectionColor: "secondary", ...props, children: [_jsx(CardTitle, { children: t('header.activeTransactions') }), _jsx(Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => (_jsx(ActiveTransactionItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? (_jsx(ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
+};