@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/cjs/components/Header/WalletHeader.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WalletMenuButton = exports.WalletHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
-const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
-const OpenInNewRounded_1 = require("@mui/icons-material/OpenInNewRounded");
-const PowerSettingsNewRounded_1 = require("@mui/icons-material/PowerSettingsNewRounded");
-const Wallet_1 = require("@mui/icons-material/Wallet");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const utils_1 = require("../../utils");
-const Header_style_1 = require("./Header.style");
-const WalletMenu_1 = require("./WalletMenu");
-const WalletHeader = () => {
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(exports.WalletMenuButton, {}) }));
-};
-exports.WalletHeader = WalletHeader;
-const WalletMenuButton = () => {
-    const { account } = (0, providers_1.useWallet)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
-    if (variant === 'drawer') {
-        return ((0, jsx_runtime_1.jsx)(Header_style_1.DrawerWalletContainer, { children: account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {}) }));
-    }
-    return account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {});
-};
-exports.WalletMenuButton = WalletMenuButton;
-const ConnectButton = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { pathname } = (0, react_router_dom_1.useLocation)();
-    const { walletManagement, subvariant, variant } = (0, providers_1.useWidgetConfig)();
-    const { connect: connectWallet } = (0, providers_1.useWallet)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const connect = async () => {
-        if (walletManagement) {
-            await connectWallet();
-            return;
-        }
-        navigate(utils_1.navigationRoutes.selectWallet);
-    };
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: variant !== 'drawer' && subvariant !== 'split' ? ((0, jsx_runtime_1.jsx)(Wallet_1.default, {})) : undefined, startIcon: variant === 'drawer' || subvariant === 'split' ? ((0, jsx_runtime_1.jsx)(Wallet_1.default, { sx: { marginLeft: -0.25 } })) : undefined, onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined, sx: {
-            marginRight: subvariant === 'split' ? 0 : -1.25,
-            marginLeft: subvariant === 'split' ? -1.25 : 0,
-        }, children: t(`button.connectWallet`) }));
-};
-const ConnectedButton = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { subvariant } = (0, providers_1.useWidgetConfig)();
-    const { account, disconnect } = (0, providers_1.useWallet)();
-    const walletAddress = (0, utils_1.shortenAddress)(account.address);
-    const { chain } = (0, hooks_1.useChain)(account.chainId);
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const handleDisconnect = () => {
-        disconnect();
-        handleClose();
-    };
-    const handleCopyAddress = async () => {
-        await navigator.clipboard.writeText(account.address ?? '');
-        handleClose();
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
-                    marginRight: subvariant === 'split' ? 0 : -1.25,
-                    marginLeft: subvariant === 'split' ? -1 : 0,
-                }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsxs)(WalletMenu_1.WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, {}), t(`button.copyAddress`)] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [(0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}), t(`button.viewOnExplorer`)] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleDisconnect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(PowerSettingsNewRounded_1.default, {}), sx: {
-                            marginTop: 1,
-                        }, children: t(`button.disconnect`) })] })] }));
-};

package/cjs/components/Header/WalletMenu.d.ts

@@ -1 +0,0 @@
-export declare const WalletMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Header/WalletMenu.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WalletMenu = void 0;
-const material_1 = require("@mui/material");
-const Menu_1 = require("@mui/material/Menu");
-const MenuItem_1 = require("@mui/material/MenuItem");
-const styles_1 = require("@mui/material/styles");
-const SvgIcon_1 = require("@mui/material/SvgIcon");
-exports.WalletMenu = (0, styles_1.styled)(material_1.Menu)(({ theme }) => ({
-    [`& .${Menu_1.menuClasses.paper}`]: {
-        borderRadius: theme.shape.borderRadius,
-        color: theme.palette.text.primary,
-        boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
-        padding: theme.spacing(2),
-        [`& .${Menu_1.menuClasses.list}`]: {
-            padding: 0,
-        },
-        [`& .${MenuItem_1.menuItemClasses.root}`]: {
-            borderRadius: theme.shape.borderRadiusSecondary,
-            padding: theme.spacing(1, 2, 1, 1),
-            [`& .${SvgIcon_1.svgIconClasses.root}`]: {
-                fontSize: 20,
-                color: theme.palette.text.primary,
-                marginRight: theme.spacing(1.5),
-            },
-        },
-    },
-}));

package/cjs/components/Header/index.js

@@ -1,17 +0,0 @@
-"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("./Header"), exports);

package/cjs/components/Initializer.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Initializer = void 0;
-const hooks_1 = require("../hooks");
-const Initializer = () => {
-    (0, hooks_1.useInitializer)();
-    return null;
-};
-exports.Initializer = Initializer;

package/cjs/components/Input.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const material_1 = require("@mui/material");
-const InputBase_1 = require("@mui/material/InputBase");
-const styles_1 = require("@mui/material/styles");
-exports.Input = (0, styles_1.styled)(material_1.InputBase)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? theme.palette.common.white
-        : theme.palette.background.paper,
-    paddingRight: theme.spacing(2),
-    [`.${InputBase_1.inputBaseClasses.input}`]: {
-        padding: theme.spacing(1.5, 1, 1.5, 2),
-        height: '2.875em',
-        boxSizing: 'inherit',
-    },
-}));

package/cjs/components/Insurance/Insurance.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Insurance = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const stores_1 = require("../../stores");
-const InsuranceCard_1 = require("./InsuranceCard");
-const InsuranceCollapsed_1 = require("./InsuranceCollapsed");
-const Insurance = ({ status, insurableRouteId, onChange, ...props }) => {
-    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { status: status, insurableRouteId: insurableRouteId, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { status: status, ...props }));
-};
-exports.Insurance = Insurance;

package/cjs/components/Insurance/InsuranceCard.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InsuranceCard = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
-const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
-const VerifiedUser_1 = require("@mui/icons-material/VerifiedUser");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const icons_1 = require("../../icons");
-const stores_1 = require("../../stores");
-const Card_1 = require("../Card");
-const Switch_1 = require("../Switch");
-const InsuranceCard = ({ status, feeAmountUsd, insuredAmount, insuredTokenSymbol, insuranceCoverageId, onChange, ...props }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const [enabled, setEnabled] = (0, react_1.useState)(false);
-    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(status === stores_1.RouteExecutionStatus.Idle);
-    const handleExpand = (e) => {
-        e.stopPropagation();
-        setCardExpanded((expanded) => !expanded);
-    };
-    const handleSwitch = (_, checked) => {
-        setEnabled(checked);
-        onChange?.(checked);
-    };
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
-                                    ? t('main.tags.insurance')
-                                    : t('main.tags.insured') })] }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: handleSwitch, value: enabled })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { my: -0.5, children: (0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
-                                        value: feeAmountUsd,
-                                    }) }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, children: (0, jsx_runtime_1.jsx)(react_i18next_1.Trans, { i18nKey: status === stores_1.RouteExecutionStatus.Idle
-                                            ? 'insurance.insure'
-                                            : 'insurance.insured', values: {
-                                            amount: insuredAmount,
-                                            tokenSymbol: insuredTokenSymbol,
-                                        }, components: [(0, jsx_runtime_1.jsx)("strong", {})] }) }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabled || status !== stores_1.RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                            listStyleType: 'disc',
-                                            pl: 2,
-                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('insurance.slippageError') })] }) }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
-                                        ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
-                                        : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
-                                            ? t('button.learnMore')
-                                            : t('button.viewCoverage') }) })] })] }) })] }));
-};
-exports.InsuranceCard = InsuranceCard;

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InsuranceCollapsed = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const hooks_1 = require("../../hooks");
-const stores_1 = require("../../stores");
-const utils_1 = require("../../utils");
-const InsuranceCard_1 = require("./InsuranceCard");
-const InsuranceCollapsed = ({ status, insurableRouteId, onChange, ...props }) => {
-    const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
-    const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
-    const { routes } = (0, hooks_1.useRoutes)({
-        insurableRoute: routeExecution?.route,
-    });
-    const insuredRoute = routes?.[0];
-    const toggleInsurance = (checked) => {
-        if (insuredRoute) {
-            if (checked) {
-                setExecutableRoute(insuredRoute, insurableRouteId);
-            }
-            onChange?.(checked ? insuredRoute.id : insurableRouteId);
-        }
-    };
-    if (!insuredRoute) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute.insurance.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { ...props, status: status, insuredAmount: (0, utils_1.formatTokenAmount)(insuredRoute.toAmountMin, insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
-};
-exports.InsuranceCollapsed = InsuranceCollapsed;

package/cjs/components/Insurance/index.js

@@ -1,18 +0,0 @@
-"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("./Insurance"), exports);
-__exportStar(require("./types"), exports);

package/cjs/components/Insurance/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/components/LiFiLogo.d.ts

@@ -1,5 +0,0 @@
-import type { CSSProperties } from 'react';
-export declare const LiFiLogo: React.FC<{
-    variant?: 'icon' | 'full';
-    style?: CSSProperties;
-}>;

package/cjs/components/LiFiLogo.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LiFiLogo = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("../icons");
-const LiFiLogo = ({ variant = 'icon', style }) => {
-    const Component = variant === 'icon' ? icons_1.LiFiLogo : icons_1.LiFiFullLogo;
-    return (0, jsx_runtime_1.jsx)(Component, { style: style, fill: "currentColor", color: "currentColor" });
-};
-exports.LiFiLogo = LiFiLogo;

package/cjs/components/ListItemButton.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItemButton = void 0;
-const material_1 = require("@mui/material");
-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),
-    height: 56,
-    '&:hover': {
-        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
-    },
-}));

package/cjs/components/ListItemText.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItemText = void 0;
-const material_1 = require("@mui/material");
-const ListItemText_1 = require("@mui/material/ListItemText");
-const styles_1 = require("@mui/material/styles");
-exports.ListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
-    [`.${ListItemText_1.listItemTextClasses.primary}`]: {
-        fontWeight: 400,
-    },
-}));

package/cjs/components/NFT/NFT.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NFT = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const providers_1 = require("../../providers");
-const NFTBase_1 = require("./NFTBase");
-const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, }) => {
-    const { setValue } = (0, react_hook_form_1.useFormContext)();
-    (0, react_1.useEffect)(() => {
-        if (token) {
-            setValue(providers_1.FormKey.ToChain, token.chainId, { shouldTouch: true });
-            setValue(providers_1.FormKey.ToToken, token.address, { shouldTouch: true });
-            setValue(providers_1.FormKey.ToAmount, token.amount, { shouldTouch: true });
-        }
-        if (contract) {
-            setValue(providers_1.FormKey.ToContractAddress, contract.address, {
-                shouldTouch: true,
-            });
-            setValue(providers_1.FormKey.ToContractCallData, contract.callData, {
-                shouldTouch: true,
-            });
-            setValue(providers_1.FormKey.ToContractGasLimit, contract.gasLimit, {
-                shouldTouch: true,
-            });
-        }
-    }, [contract, setValue, token]);
-    return ((0, jsx_runtime_1.jsx)(NFTBase_1.NFTBase, { isLoading: isLoading, imageUrl: imageUrl, collectionName: collectionName, assetName: assetName, owner: owner, token: token }));
-};
-exports.NFT = NFT;

package/cjs/components/NFT/NFT.style.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewAvatar = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-exports.PreviewAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
-    background: theme.palette.background.paper,
-    width: 96,
-    height: 96,
-    borderRadius: theme.shape.borderRadius,
-}));

package/cjs/components/NFT/NFTBase.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NFTBase = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_i18next_1 = require("react-i18next");
-const Token_1 = require("../Token");
-const NFT_style_1 = require("./NFT.style");
-const NFTBase = ({ imageUrl, isLoading, collectionName, assetName, owner, token, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : ((0, jsx_runtime_1.jsx)(NFT_style_1.PreviewAvatar, { src: imageUrl })), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 144, height: 21, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 27, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: [t('main.ownedBy'), ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, isLoading: isLoading, mt: 2 })] }));
-};
-exports.NFTBase = NFTBase;

package/cjs/components/NFT/index.js

@@ -1,19 +0,0 @@
-"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("./NFT"), exports);
-__exportStar(require("./NFTBase"), exports);
-__exportStar(require("./types"), exports);

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

@@ -1,17 +0,0 @@
-import type { TokenAmount } from '@lifi/sdk';
-import type { WidgetContract } from '../../types';
-export interface NFTBaseProps {
-    imageUrl?: string;
-    collectionName?: string;
-    assetName?: string;
-    isLoading?: boolean;
-    owner?: NFTOwner;
-    token?: TokenAmount;
-}
-export interface NFTProps extends NFTBaseProps {
-    contract?: WidgetContract;
-}
-export interface NFTOwner {
-    name?: string;
-    url?: string;
-}

package/cjs/components/NFT/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/components/NotFound.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotFound = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Block_1 = require("@mui/icons-material/Block");
-const material_1 = require("@mui/material");
-const react_i18next_1 = require("react-i18next");
-const NotFound = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: 'column',
-            flex: 1,
-            padding: 3,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, children: (0, jsx_runtime_1.jsx)(Block_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 700, children: t('tooltip.notFound.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('tooltip.notFound.text') })] }));
-};
-exports.NotFound = NotFound;

package/cjs/components/PoweredBy/PoweredBy.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PoweredBy = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_router_dom_1 = require("react-router-dom");
-const version_1 = require("../../config/version");
-const providers_1 = require("../../providers");
-const types_1 = require("../../types");
-const utils_1 = require("../../utils");
-const PoweredBy_style_1 = require("./PoweredBy.style");
-const PoweredBy = () => {
-    const { hiddenUI } = (0, providers_1.useWidgetConfig)();
-    const { pathname } = (0, react_router_dom_1.useLocation)();
-    if (pathname.includes(utils_1.navigationRoutes.fromToken) ||
-        pathname.includes(utils_1.navigationRoutes.toToken)) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, pt: 1, pb: hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? 1 : 2, sx: {
-            display: 'flex',
-            alignItems: 'flex-end',
-            justifyContent: 'flex-end',
-        }, children: !hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `v${version_1.version}`, placement: "top", enterDelay: 1000, arrow: true, children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", fontSize: 12, fontWeight: 500, px: 0.5, children: "Powered by" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.primary", fontSize: 12, fontWeight: 500, children: "LI.FI" })] }) })) : null }));
-};
-exports.PoweredBy = PoweredBy;

package/cjs/components/PoweredBy/PoweredBy.style.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-exports.Link = (0, styles_1.styled)(material_1.Link)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    border: 'none',
-    ':hover': {
-        color: theme.palette.primary.main,
-    },
-}));

package/cjs/components/PoweredBy/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PoweredBy = void 0;
-var PoweredBy_1 = require("./PoweredBy");
-Object.defineProperty(exports, "PoweredBy", { enumerable: true, get: function () { return PoweredBy_1.PoweredBy; } });

package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressToNextUpdate = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
-    ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
-    : 0;
-const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
-const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
-    const [value, setValue] = (0, react_1.useState)(() => getProgressValue(updatedAt, timeToUpdate));
-    (0, react_1.useEffect)(() => {
-        setValue(getProgressValue(updatedAt, timeToUpdate));
-        const id = setInterval(() => {
-            const time = getProgressValue(updatedAt, timeToUpdate);
-            setValue(time);
-            if (time >= 100) {
-                clearInterval(id);
-            }
-        }, 1000);
-        return () => clearInterval(id);
-    }, [timeToUpdate, updatedAt]);
-    (0, react_1.useEffect)(() => {
-        if (isLoading) {
-            setValue(0);
-        }
-    }, [isLoading]);
-    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: onClick, disabled: isLoading, ...other, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsx)(react_i18next_1.Trans, { i18nKey: "tooltip.progressToNextUpdate", values: {
-                    value: getSecondsToUpdate(updatedAt, timeToUpdate),
-                }, components: [(0, jsx_runtime_1.jsx)("br", {})] }), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                    display: 'grid',
-                    position: 'relative',
-                    placeItems: 'center',
-                    width: 24,
-                    height: 24,
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: "determinate", size: 24, value: 100, sx: (theme) => ({
-                            position: 'absolute',
-                            color: theme.palette.mode === 'light'
-                                ? theme.palette.grey[300]
-                                : theme.palette.grey[800],
-                        }) }), (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: isLoading ? 'indeterminate' : 'determinate', size: 24, value: value, sx: (theme) => ({
-                            opacity: value === 100 && !isLoading ? 0.5 : 1,
-                            color: theme.palette.mode === 'light'
-                                ? theme.palette.primary.main
-                                : theme.palette.primary.light,
-                        }) })] }) }) }));
-};
-exports.ProgressToNextUpdate = ProgressToNextUpdate;

package/cjs/components/ProgressToNextUpdate/index.js

@@ -1,17 +0,0 @@
-"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("./ProgressToNextUpdate"), exports);

package/cjs/components/ReverseTokensButton/ReverseTokensButton.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReverseTokensButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const SwapHoriz_1 = require("@mui/icons-material/SwapHoriz");
-const SwapVert_1 = require("@mui/icons-material/SwapVert");
-const react_hook_form_1 = require("react-hook-form");
-const providers_1 = require("../../providers");
-const ReverseTokensButton_style_1 = require("./ReverseTokensButton.style");
-const ReverseTokensButton = ({ vertical, }) => {
-    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
-    const handleClick = () => {
-        const [fromChain, fromToken, toChain, toToken] = getValues([
-            providers_1.FormKey.FromChain,
-            providers_1.FormKey.FromToken,
-            providers_1.FormKey.ToChain,
-            providers_1.FormKey.ToToken,
-        ]);
-        setValue(providers_1.FormKey.FromAmount, '', { shouldTouch: true });
-        setValue(providers_1.FormKey.FromChain, toChain, { shouldTouch: true });
-        setValue(providers_1.FormKey.FromToken, toToken, { shouldTouch: true });
-        setValue(providers_1.FormKey.ToChain, fromChain, { shouldTouch: true });
-        setValue(providers_1.FormKey.ToToken, fromToken, { shouldTouch: true });
-    };
-    return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, { onClick: handleClick, size: "small", children: vertical ? (0, jsx_runtime_1.jsx)(SwapVert_1.default, {}) : (0, jsx_runtime_1.jsx)(SwapHoriz_1.default, {}) }));
-};
-exports.ReverseTokensButton = ReverseTokensButton;

package/cjs/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-exports.IconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => ({
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid`,
-    borderColor: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    zIndex: 1100,
-    padding: theme.spacing(0.5),
-    '&:hover': {
-        backgroundColor: theme.palette.mode === 'light'
-            ? (0, styles_1.darken)(theme.palette.background.paper, 0.02)
-            : (0, styles_1.lighten)(theme.palette.background.paper, 0.02),
-    },
-}));

package/cjs/components/ReverseTokensButton/index.js

@@ -1,17 +0,0 @@
-"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("./ReverseTokensButton"), exports);