@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/AppRoutes.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRoutes } from 'react-router-dom';
-import { NotFound } from './components/NotFound';
-import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
-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';
-export const AppRoutes = () => {
-    const element = useRoutes([
-        {
-            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.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.transactionExecution}?/${navigationRoutes.selectWallet}`,
-            element: _jsx(SelectWalletPage, {}),
-        },
-        {
-            path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
-            element: _jsx(TransactionPage, {}),
-        },
-        {
-            path: '*',
-            element: _jsx(NotFound, {}),
-        },
-    ]);
-    return element;
-};

package/README.md

@@ -1,89 +0,0 @@
-<div align="center">
-
-[![license](https://img.shields.io/badge/license-Apache%202-blue)](/LICENSE.md)
-[![npm latest package](https://img.shields.io/npm/v/@lifi/widget/latest.svg)](https://www.npmjs.com/package/@lifi/widget)
-[![npm downloads](https://img.shields.io/npm/dm/@lifi/widget.svg)](https://www.npmjs.com/package/@lifi/widget)
-[![Crowdin](https://badges.crowdin.net/lifi-widget/localized.svg)](https://crowdin.com/project/lifi-widget)
-[![Follow on Twitter](https://img.shields.io/twitter/follow/lifiprotocol.svg?label=follow+LI.FI)](https://twitter.com/lifiprotocol)
-
-</div>
-
-<h1 align="center">LI.FI Widget</h1>
-
-This repository contains LI.FI Widget and supporting libraries.
-
-- [_LI.FI Widget_](https://li.fi/widget/) for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
-
-- [_LI.FI Wallet Management_](https://www.npmjs.com/package/@lifi/wallet-management) is our library of hooks that can help you gain complete control over your app's wallet management.
-
-## Installation
-
-### LI.FI Widget
-
-LI.FI Widget is available as an [npm package](https://www.npmjs.com/package/@lifi/widget).
-
-**npm:**
-
-```sh
-npm install @lifi/widget
-```
-
-**yarn:**
-
-```sh
-yarn add @lifi/widget
-```
-
-### LI.FI Wallet Management
-
-LI.FI Wallet Management is available as an [npm package](https://www.npmjs.com/package/@lifi/wallet-management).
-
-**npm:**
-
-```sh
-npm install @lifi/wallet-management
-```
-
-**yarn:**
-
-```sh
-yarn add @lifi/wallet-management
-```
-
-## Getting started with LI.FI Widget
-
-Here is an example of a basic app using LI.FI Widget:
-
-```tsx
-import { LiFiWidget, WidgetConfig } from '@lifi/widget';
-
-const widgetConfig: WidgetConfig = {
-  containerStyle: {
-    border: '1px solid rgb(234, 234, 234)',
-    borderRadius: '16px',
-  },
-};
-
-export const WidgetPage = () => {
-  return (
-    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
-  );
-};
-```
-
-## Examples
-
-Visit our [playground](https://playground.li.fi) to see how you can customize your [LI.FI Widget](https://www.npmjs.com/package/@lifi/widget) experience.
-
-## Documentation
-
-[LI.FI Widget Documentation](https://docs.li.fi/integrate-li.fi-widget/li.fi-widget-overview)
-
-## Changelog
-
-The [changelog](/CHANGELOG.md) is regularly updated to reflect what's changed in each new release.
-
-## License
-
-This project is licensed under the terms of the
-[Apache-2.0](/LICENSE.md).

package/cjs/App.d.ts

@@ -1,5 +0,0 @@
-/// <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>>;
-export declare const AppDefault: () => import("react/jsx-runtime").JSX.Element;

package/cjs/App.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppDefault = exports.App = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const AppDrawer_1 = require("./AppDrawer");
-const AppProvider_1 = require("./AppProvider");
-const AppRoutes_1 = require("./AppRoutes");
-const AppContainer_1 = require("./components/AppContainer");
-const Header_1 = require("./components/Header");
-const Initializer_1 = require("./components/Initializer");
-const PoweredBy_1 = require("./components/PoweredBy");
-const Routes_1 = require("./components/Routes");
-const hooks_1 = require("./hooks");
-const providers_1 = require("./providers");
-const utils_1 = require("./utils");
-exports.App = (0, react_1.forwardRef)(({ elementRef, open, integrator, ...other }, ref) => {
-    const config = (0, react_1.useMemo)(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
-    return config?.variant !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
-});
-const AppDefault = () => {
-    const { elementId } = (0, providers_1.useWidgetConfig)();
-    const expandable = (0, hooks_1.useExpandableVariant)();
-    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { id: (0, utils_1.createElementId)(utils_1.ElementId.AppExpandedContainer, elementId), children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(Routes_1.RoutesExpanded, {}) : null] }));
-};
-exports.AppDefault = AppDefault;

package/cjs/AppDrawer.d.ts

@@ -1,13 +0,0 @@
-/// <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/cjs/AppDrawer.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawerButtonText = exports.AppDrawer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CloseRounded_1 = require("@mui/icons-material/CloseRounded");
-const KeyboardArrowLeft_1 = require("@mui/icons-material/KeyboardArrowLeft");
-const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const App_1 = require("./App");
-const AppDrawer_style_1 = require("./AppDrawer.style");
-const AppProvider_1 = require("./AppProvider");
-const types_1 = require("./types");
-exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, config }, ref) => {
-    const openRef = (0, react_1.useRef)(open);
-    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(Boolean(open));
-    const toggleDrawer = (0, react_1.useCallback)(() => {
-        setDrawerOpen((open) => !open);
-    }, []);
-    const openDrawer = (0, react_1.useCallback)(() => {
-        setDrawerOpen(true);
-    }, []);
-    const closeDrawer = (0, react_1.useCallback)(() => {
-        setDrawerOpen(false);
-    }, []);
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        isOpen: () => openRef.current,
-        toggleDrawer,
-        openDrawer,
-        closeDrawer,
-    }), [closeDrawer, openDrawer, toggleDrawer]);
-    const widgetConfig = (0, react_1.useMemo)(() => ({
-        ...config,
-        integrator,
-        containerStyle: {
-            ...config?.containerStyle,
-            height: '100%',
-        },
-    }), [config, integrator]);
-    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {})) : ((0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {})), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
-                    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: [(0, jsx_runtime_1.jsx)(AppDrawer_style_1.CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, {}) }), (0, jsx_runtime_1.jsx)(App_1.AppDefault, {})] })] }));
-});
-const DrawerButtonText = ({ open, subvariant, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: open
-            ? t('button.hide')
-            : subvariant === 'nft'
-                ? t('button.lifiCheckout')
-                : t('button.lifiExchange') }));
-};
-exports.DrawerButtonText = DrawerButtonText;

package/cjs/AppDrawer.style.d.ts

@@ -1,16 +0,0 @@
-/// <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;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & 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;
-}, "className" | "style" | "classes" | "children" | "sx" | "p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "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;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/AppDrawer.style.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CloseButtonLayout = exports.DrawerButtonTypography = exports.DrawerButton = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@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';
-};
-exports.DrawerButton = (0, styles_1.styled)(material_1.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,
-    },
-}));
-exports.DrawerButtonTypography = (0, styles_1.styled)(material_1.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',
-}));
-exports.CloseButtonLayout = (0, styles_1.styled)(material_1.IconButton)(() => ({
-    position: 'absolute',
-    top: '12px',
-    right: '26px',
-    zIndex: 1,
-    height: '40px',
-    width: '40px',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));

package/cjs/AppProvider.d.ts

@@ -1,4 +0,0 @@
-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/cjs/AppProvider.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppRouter = exports.AppProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
-const queryClient_1 = require("./config/queryClient");
-const providers_1 = require("./providers");
-const stores_1 = require("./stores");
-const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.FormProvider, { children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }) }));
-};
-exports.AppProvider = AppProvider;
-const AppRouter = ({ children }) => {
-    const { buildUrl } = (0, providers_1.useWidgetConfig)();
-    const inRouterContext = (0, react_router_dom_1.useInRouterContext)();
-    const Router = inRouterContext ? react_1.Fragment : react_router_dom_1.MemoryRouter;
-    return ((0, jsx_runtime_1.jsxs)(Router, { children: [children, buildUrl ? (0, jsx_runtime_1.jsx)(providers_1.URLSearchParamsBuilder, {}) : null] }));
-};
-exports.AppRouter = AppRouter;

package/cjs/AppRoutes.d.ts

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

package/cjs/AppRoutes.js

@@ -1,88 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppRoutes = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_router_dom_1 = require("react-router-dom");
-const NotFound_1 = require("./components/NotFound");
-const ActiveTransactionsPage_1 = require("./pages/ActiveTransactionsPage");
-const MainPage_1 = require("./pages/MainPage");
-const RoutesPage_1 = require("./pages/RoutesPage");
-const SelectChainPage_1 = require("./pages/SelectChainPage");
-const SelectEnabledToolsPage_1 = require("./pages/SelectEnabledToolsPage");
-const SelectTokenPage_1 = require("./pages/SelectTokenPage");
-const SelectWalletPage_1 = require("./pages/SelectWalletPage");
-const SettingsPage_1 = require("./pages/SettingsPage");
-const TransactionDetailsPage_1 = require("./pages/TransactionDetailsPage");
-const TransactionHistoryPage_1 = require("./pages/TransactionHistoryPage");
-const TransactionPage_1 = require("./pages/TransactionPage");
-const utils_1 = require("./utils");
-const AppRoutes = () => {
-    const element = (0, react_router_dom_1.useRoutes)([
-        {
-            path: '/',
-            element: (0, jsx_runtime_1.jsx)(MainPage_1.MainPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.settings,
-            element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.bridges}`,
-            element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Bridges" }),
-        },
-        {
-            path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.exchanges}`,
-            element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Exchanges" }),
-        },
-        {
-            path: utils_1.navigationRoutes.fromToken,
-            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),
-        },
-        {
-            path: utils_1.navigationRoutes.toToken,
-            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
-        },
-        {
-            path: utils_1.navigationRoutes.toTokenNative,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to", selectNativeToken: true }),
-        },
-        {
-            path: `${utils_1.navigationRoutes.fromToken}?/${utils_1.navigationRoutes.fromChain}`,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
-        },
-        {
-            path: `${utils_1.navigationRoutes.toToken}?/${utils_1.navigationRoutes.toChain}`,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
-        },
-        {
-            path: utils_1.navigationRoutes.routes,
-            element: (0, jsx_runtime_1.jsx)(RoutesPage_1.RoutesPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.activeTransactions,
-            element: (0, jsx_runtime_1.jsx)(ActiveTransactionsPage_1.ActiveTransactionsPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.transactionHistory,
-            element: (0, jsx_runtime_1.jsx)(TransactionHistoryPage_1.TransactionHistoryPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.transactionHistory}?/${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.transactionDetails}`,
-            element: (0, jsx_runtime_1.jsx)(TransactionDetailsPage_1.TransactionDetailsPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.transactionExecution}?/${utils_1.navigationRoutes.selectWallet}`,
-            element: (0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.routes}?/${utils_1.navigationRoutes.activeTransactions}?/${utils_1.navigationRoutes.transactionExecution}`,
-            element: (0, jsx_runtime_1.jsx)(TransactionPage_1.TransactionPage, {}),
-        },
-        {
-            path: '*',
-            element: (0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}),
-        },
-    ]);
-    return element;
-};
-exports.AppRoutes = AppRoutes;

package/cjs/components/ActiveTransactions/ActiveTransactionItem.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveTransactionItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
-const ErrorRounded_1 = require("@mui/icons-material/ErrorRounded");
-const InfoRounded_1 = require("@mui/icons-material/InfoRounded");
-const material_1 = require("@mui/material");
-const react_router_dom_1 = require("react-router-dom");
-const hooks_1 = require("../../hooks");
-const stores_1 = require("../../stores");
-const utils_1 = require("../../utils");
-const StepTimer_1 = require("../Step/StepTimer");
-const TokenAvatar_1 = require("../TokenAvatar");
-const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
-const ActiveTransactionItem = ({ routeId, dense }) => {
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { route, status } = (0, hooks_1.useRouteExecution)({
-        routeId,
-        executeInBackground: true,
-    });
-    // TODO: replace with ES2023 findLast
-    const lastActiveStep = route?.steps
-        .slice()
-        .reverse()
-        .find((step) => step.execution);
-    const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
-    const { title } = (0, hooks_1.useProcessMessage)(lastActiveStep, lastActiveProcess);
-    if (!route || !lastActiveStep) {
-        return null;
-    }
-    const handleClick = () => {
-        navigate(utils_1.navigationRoutes.transactionExecution, { state: { routeId } });
-    };
-    const getStatusComponent = () => {
-        switch (lastActiveProcess?.status) {
-            case 'ACTION_REQUIRED':
-                return (0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "info", fontSize: "small" });
-            case 'FAILED':
-                return (0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error", fontSize: "small" });
-            default:
-                return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 500, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
-        }
-    };
-    const ListItemComponent = dense ? ActiveTransactions_style_1.ListItem : ActiveTransactions_style_1.ListItemButton;
-    return ((0, jsx_runtime_1.jsxs)(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, { total: 2, children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, lineHeight: 1, sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        marginLeft: 2,
-                        height: 16,
-                    }, children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
-};
-exports.ActiveTransactionItem = ActiveTransactionItem;

package/cjs/components/ActiveTransactions/ActiveTransactions.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActiveTransactions = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
-const utils_1 = require("../../utils");
-const Card_1 = require("../Card");
-const ActiveTransactionItem_1 = require("./ActiveTransactionItem");
-const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
-const ActiveTransactions = (props) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { account } = (0, providers_1.useWallet)();
-    const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
-    if (!executingRoutes?.length) {
-        return null;
-    }
-    const handleShowAll = () => {
-        navigate(utils_1.navigationRoutes.activeTransactions);
-    };
-    const hasShowAll = executingRoutes?.length > 2;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: "selected", selectionColor: "secondary", ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeTransactions') }), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveTransactionItem_1.ActiveTransactionItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveTransactions_style_1.ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
-};
-exports.ActiveTransactions = ActiveTransactions;

package/cjs/components/ActiveTransactions/ActiveTransactions.style.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShowAllButton = exports.ListItem = exports.ListItemButton = void 0;
-const material_1 = require("@mui/material");
-const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
-const styles_1 = require("@mui/material/styles");
-const utils_1 = require("../../utils");
-exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadius,
-    paddingLeft: theme.spacing(1.5),
-    paddingRight: theme.spacing(1.5),
-    height: 64,
-    '&:hover': {
-        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
-    },
-}));
-exports.ListItem = (0, styles_1.styled)(material_1.ListItem, {
-    shouldForwardProp: (prop) => prop !== 'disableRipple',
-})(({ theme }) => ({
-    padding: theme.spacing(0, 1.5),
-    [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(3),
-    },
-    '&:hover': {
-        cursor: 'pointer',
-    },
-}));
-exports.ShowAllButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
-    background: 'none',
-    '&:hover': {
-        background: 'none',
-    },
-    padding: theme.spacing(0.75, 2),
-    fontSize: '0.875rem',
-}));