@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/_esm/components/ReverseTokensButton/ReverseTokensButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { default as SwapHorizIcon } from '@mui/icons-material/SwapHoriz';
+import { default as SwapVertIcon } from '@mui/icons-material/SwapVert';
+import { useFormContext } from 'react-hook-form';
+import { FormKey } from '../../providers';
+import { IconButton } from './ReverseTokensButton.style';
+export const ReverseTokensButton = ({ vertical, }) => {
+    const { setValue, getValues } = useFormContext();
+    const handleClick = () => {
+        const [fromChain, fromToken, toChain, toToken] = getValues([
+            FormKey.FromChain,
+            FormKey.FromToken,
+            FormKey.ToChain,
+            FormKey.ToToken,
+        ]);
+        setValue(FormKey.FromAmount, '', { shouldTouch: true });
+        setValue(FormKey.FromChain, toChain, { shouldTouch: true });
+        setValue(FormKey.FromToken, toToken, { shouldTouch: true });
+        setValue(FormKey.ToChain, fromChain, { shouldTouch: true });
+        setValue(FormKey.ToToken, fromToken, { shouldTouch: true });
+    };
+    return (_jsx(IconButton, { onClick: handleClick, size: "small", children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) }));
+};

package/_esm/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -0,0 +1,16 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { darken, lighten, styled } from '@mui/material/styles';
+export const IconButton = styled(MuiIconButton)(({ 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'
+            ? darken(theme.palette.background.paper, 0.02)
+            : lighten(theme.palette.background.paper, 0.02),
+    },
+}));

package/_esm/components/RouteCard/RouteCard.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as ExpandLessIcon } from '@mui/icons-material/ExpandLess';
+import { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
+import { default as VerifiedUserIcon } from '@mui/icons-material/VerifiedUser';
+import { Box, Collapse, Tooltip, Typography } from '@mui/material';
+import { Fragment, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../../providers';
+import { formatTokenAmount } from '../../utils';
+import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
+import { StepActions } from '../StepActions';
+import { Token } from '../Token';
+import { RouteCardEssentials } from './RouteCardEssentials';
+export const RouteCard = ({ route, active, variant = 'default', expanded, ...other }) => {
+    const { t } = useTranslation();
+    const { subvariant } = useWidgetConfig();
+    const [cardExpanded, setCardExpanded] = useState(expanded);
+    const insurable = route.insurance?.state === 'INSURABLE';
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const token = subvariant === 'nft'
+        ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+        : { ...route.toToken, amount: BigInt(route.toAmount) };
+    const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
+    const cardContent = (_jsxs(Box, { flex: 1, children: [subvariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(InsuranceTooltip, { insuredAmount: formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
+                                ? 'insurance-icon'
+                                : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`main.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? (_jsx(RecommendedTagTooltip, { children: _jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`main.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(RouteCardEssentials, { route: route })] }));
+    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
+};
+const InsuranceTooltip = ({ insuredAmount, insuredTokenSymbol, children }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", children: _jsx(Trans, { i18nKey: "insurance.insure", values: {
+                            amount: insuredAmount,
+                            tokenSymbol: insuredTokenSymbol,
+                        }, components: [_jsx("strong", {})] }) }), _jsxs(Box, { sx: {
+                        listStyleType: 'disc',
+                        pl: 2,
+                    }, children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};
+const RecommendedTooltip = ({ children, }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

package/_esm/components/RouteCard/RouteCard.style.js

@@ -0,0 +1,9 @@
+import { Typography } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+export const IconTypography = styled(Typography)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? alpha(theme.palette.common.black, 0.24)
+        : alpha(theme.palette.common.white, 0.32),
+    lineHeight: 0,
+    marginRight: theme.spacing(0.5),
+}));

package/_esm/components/RouteCard/RouteCardEssentials.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as AccessTimeIcon } from '@mui/icons-material/AccessTimeFilled';
+import { default as EvStationIcon } from '@mui/icons-material/EvStation';
+import { default as LayersIcon } from '@mui/icons-material/Layers';
+import { default as MonetizationOnIcon } from '@mui/icons-material/MonetizationOn';
+import { Box, Tooltip, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { IconTypography } from './RouteCard.style';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from './utils';
+export const RouteCardEssentials = ({ route, dense, }) => {
+    const { t } = useTranslation();
+    const executionTimeMinutes = Math.ceil(route.steps
+        .map((step) => step.estimate.executionDuration)
+        .reduce((duration, x) => duration + x, 0) / 60);
+    const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
+    const gasCosts = getGasCostsBreakdown(route);
+    const feeCosts = getFeeCostsBreakdown(route, false);
+    return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat(formatUnits(gas.amount, gas.token.decimals))?.toFixed(9), ' ', gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9), ' ', fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+                                value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
+                            }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(AccessTimeIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('main.estimatedTime', {
+                                value: executionTimeMinutes,
+                            }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(IconTypography, { children: _jsx(LayersIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: route.steps.length })] }) })] }));
+};

package/_esm/components/RouteCard/RouteCardSkeleton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+import { useWidgetConfig } from '../../providers';
+import { Card } from '../Card';
+export const RouteCardSkeleton = ({ variant, ...other }) => {
+    const { subvariant } = useWidgetConfig();
+    const cardContent = (_jsxs(Box, { flex: 1, children: [subvariant !== 'refuel' && subvariant !== 'nft' ? (_jsx(Box, { display: "flex", alignItems: "center", mb: 2, children: _jsx(Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
+                        borderRadius: `${theme.shape.borderRadius}px`,
+                    }) }) })) : null, _jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Box, { mr: 2, children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) }), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] }), _jsxs(Box, { ml: 6, display: "flex", alignItems: "center", children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16 }), _jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })] })] }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), _jsx(Skeleton, { variant: "text", width: 32, height: 20 })] })] }));
+    return subvariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { indented: true, ...other, children: cardContent }));
+};

package/_esm/components/RouteCard/RouteNotFoundCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { default as RouteIcon } from '@mui/icons-material/Route';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const RouteNotFoundCard = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            flex: 1,
+        }, py: 1.625, children: [_jsx(Typography, { fontSize: 48, children: _jsx(RouteIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('info.title.routeNotFound') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('info.message.routeNotFound') })] }));
+};

package/_esm/components/RouteCard/types.js

@@ -0,0 +1 @@
+export {};

package/_esm/components/RouteCard/utils.js

@@ -0,0 +1,50 @@
+export const getGasCostsBreakdown = (route) => {
+    return Object.values(route.steps.reduce((groupedGasCosts, step) => {
+        if (step.estimate.gasCosts?.length) {
+            const { token } = step.estimate.gasCosts[0];
+            const gasCostAmount = step.estimate.gasCosts.reduce((amount, gasCost) => amount + BigInt(gasCost.amount || 0), 0n);
+            const gasCostAmountUSD = step.estimate.gasCosts.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0);
+            const groupedGasCost = groupedGasCosts[token.chainId];
+            const amount = groupedGasCost
+                ? groupedGasCost.amount + gasCostAmount
+                : gasCostAmount;
+            const amountUSD = groupedGasCost
+                ? groupedGasCost.amountUSD + gasCostAmountUSD
+                : gasCostAmountUSD;
+            groupedGasCosts[token.chainId] = {
+                amount,
+                amountUSD,
+                token,
+            };
+            return groupedGasCosts;
+        }
+        return groupedGasCosts;
+    }, {}));
+};
+export const getFeeCostsBreakdown = (route, included) => {
+    return Object.values(route.steps.reduce((groupedFeeCosts, step) => {
+        let feeCosts = step.estimate.feeCosts;
+        if (typeof included === 'boolean') {
+            feeCosts = feeCosts?.filter((feeCost) => feeCost.included === included);
+        }
+        if (feeCosts?.length) {
+            const { token } = feeCosts[0];
+            const feeCostAmount = feeCosts.reduce((amount, feeCost) => amount + BigInt(feeCost.amount || 0), 0n);
+            const feeCostAmountUSD = feeCosts.reduce((amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'), 0);
+            const groupedFeeCost = groupedFeeCosts[token.chainId];
+            const amount = groupedFeeCost
+                ? groupedFeeCost.amount + feeCostAmount
+                : feeCostAmount;
+            const amountUSD = groupedFeeCost
+                ? groupedFeeCost.amountUSD + feeCostAmountUSD
+                : feeCostAmountUSD;
+            groupedFeeCosts[token.chainId] = {
+                amount,
+                amountUSD,
+                token,
+            };
+            return groupedFeeCosts;
+        }
+        return groupedFeeCosts;
+    }, {}));
+};

package/_esm/components/Routes/Routes.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Collapse } from '@mui/material';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
+export const Routes = (props) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { subvariant, useRecommendedRoute } = useWidgetConfig();
+    const { isValid, isValidating } = useFormState();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useRoutes();
+    const currentRoute = routes?.[0];
+    if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+        return null;
+    }
+    const handleCardClick = () => {
+        navigate(navigationRoutes.routes);
+    };
+    const routeNotFound = !currentRoute && !isLoading && !isFetching;
+    const onlyRecommendedRoute = subvariant === 'refuel' || useRecommendedRoute;
+    const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
+    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: subvariant === 'nft' ? t('main.fromAmount') : t('header.youGet') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                } }), _jsxs(Box, { p: 2, children: [isLoading ? (_jsx(RouteCardSkeleton, { variant: "cardless" })) : !currentRoute ? (_jsx(RouteNotFoundCard, {})) : (_jsx(RouteCard, { route: currentRoute, variant: "cardless", active: true })), _jsx(Collapse, { timeout: 225, in: showAll, unmountOnExit: true, mountOnEnter: true, appear: true, children: _jsx(Box, { mt: 2, children: _jsx(Button, { onClick: handleCardClick, disabled: isValidating || !isValid, fullWidth: true, children: t('button.showAll') }) }) })] })] }));
+};

package/_esm/components/Routes/RoutesExpanded.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse, Grow, Stack, Typography } from '@mui/material';
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useMatch, useNavigate } from 'react-router-dom';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSetExecutableRoute } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+import { RouteCard, RouteCardSkeleton, RouteNotFoundCard } from '../RouteCard';
+import { CollapseContainer, Container, Header, ScrollableContainer, } from './RoutesExpanded.style';
+const timeout = { enter: 225, exit: 225, appear: 0 };
+export const RoutesExpanded = () => {
+    const element = useMatch('/');
+    return (_jsx(CollapseContainer, { children: _jsx(Collapse, { timeout: timeout, in: !!element, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout, in: !!element, mountOnEnter: true, unmountOnExit: true, children: _jsx("div", { children: _jsx(RoutesExpandedElement, {}) }) }) }) }));
+};
+export const RoutesExpandedElement = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const setExecutableRoute = useSetExecutableRoute();
+    const { subvariant, containerStyle } = useWidgetConfig();
+    const { isValid, isValidating } = useFormState();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useRoutes();
+    const currentRoute = routes?.[0];
+    const handleRouteClick = (route) => {
+        if (isValid && !isValidating) {
+            setExecutableRoute(route);
+            navigate(navigationRoutes.transactionExecution, {
+                state: { routeId: route.id },
+            });
+        }
+    };
+    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
+    const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
+    return (_jsx(Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(Container, { sx: containerStyle, enableColorScheme: true, children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: subvariant === 'nft'
+                                        ? t('main.fromAmount')
+                                        : t('header.youGet') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? (_jsx(RouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => (_jsx(RouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(RouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+};

package/_esm/components/Routes/RoutesExpanded.style.js

@@ -0,0 +1,35 @@
+import { Box, ScopedCssBaseline } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { maxHeight } from '../AppContainer';
+export const CollapseContainer = styled(Box)(({ theme }) => ({
+    height: maxHeight,
+    zIndex: 0,
+}));
+export const ScrollableContainer = styled(Box)({
+    overflowY: 'auto',
+    height: '100%',
+    width: '100%',
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+});
+export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    overflow: 'auto',
+    width: 436,
+    maxHeight,
+    marginLeft: theme.spacing(3),
+    display: 'flex',
+    flexDirection: 'column',
+}));
+export const Header = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    backdropFilter: 'blur(12px)',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.spacing(1.5, 3),
+    position: 'sticky',
+    top: 0,
+    zIndex: 1200,
+}));

package/_esm/components/Select.js

@@ -0,0 +1,28 @@
+import { Select as MuiSelect } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { selectClasses } from '@mui/material/Select';
+import { styled } from '@mui/material/styles';
+export const Select = styled(MuiSelect, {
+    shouldForwardProp: (prop) => prop !== 'dense',
+})(({ theme, dense }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    [`.${inputBaseClasses.input}`]: {
+        padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
+        display: 'flex',
+        alignItems: 'center',
+    },
+    [`.${selectClasses.icon}`]: {
+        right: 10,
+        color: theme.palette.text.primary,
+    },
+    [`.${listItemIconClasses.root}`]: {
+        minWidth: 38,
+    },
+    [`.${outlinedInputClasses.notchedOutline}`]: {
+        display: 'none',
+    },
+}));

package/_esm/components/SelectChainAndToken.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useWatch } from 'react-hook-form';
+import { ReverseTokensButton } from '../components/ReverseTokensButton';
+import { SelectTokenButton } from '../components/SelectTokenButton';
+import { FormKey, useWidgetConfig } from '../providers';
+import { DisabledUI, HiddenUI } from '../types';
+export const SelectChainAndToken = (props) => {
+    const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+    const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
+    const [fromChain, toChain, fromToken, toToken] = useWatch({
+        name: [
+            FormKey.FromChain,
+            FormKey.ToChain,
+            FormKey.FromToken,
+            FormKey.ToToken,
+        ],
+    });
+    const hiddenReverse = subvariant === 'refuel' ||
+        disabledUI?.includes(DisabledUI.FromToken) ||
+        disabledUI?.includes(DisabledUI.ToToken) ||
+        hiddenUI?.includes(HiddenUI.ToToken);
+    const hiddenToToken = subvariant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
+    const isCompact = fromChain &&
+        toChain &&
+        fromToken &&
+        toToken &&
+        !prefersNarrowView &&
+        !hiddenToToken;
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !hiddenToToken ? (_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, m: !hiddenReverse ? -1.125 : 1, children: !hiddenReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !hiddenToToken ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
+};

package/_esm/components/SelectTokenButton/SelectTokenButton.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useChain, useSwapOnly, useToken } from '../../hooks';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+import { SelectTokenCardHeader } from './SelectTokenButton.style';
+export const SelectTokenButton = ({ formType, compact }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { disabledUI, subvariant } = useWidgetConfig();
+    const swapOnly = useSwapOnly();
+    const tokenKey = FormKeyHelper.getTokenKey(formType);
+    const [chainId, tokenAddress] = useWatch({
+        name: [FormKeyHelper.getChainKey(formType), tokenKey],
+    });
+    const { chain, isLoading: isChainLoading } = useChain(chainId);
+    const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
+    const handleClick = () => {
+        navigate(formType === 'from'
+            ? navigationRoutes.fromToken
+            : subvariant === 'refuel'
+                ? navigationRoutes.toTokenNative
+                : navigationRoutes.toToken);
+    };
+    const isSelected = !!(chain && token);
+    const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
+    const defaultPlaceholder = formType === 'to' && subvariant === 'refuel'
+        ? t('main.selectChain')
+        : formType === 'to' && swapOnly
+            ? t('main.selectToken')
+            : t('main.selectChainAndToken');
+    const cardTitle = formType === 'from' && subvariant === 'nft'
+        ? t(`header.payWith`)
+        : t(`main.${formType}`);
+    return (_jsxs(Card, { flex: 1, onClick: onClick, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`main.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
+};

package/_esm/components/SelectTokenButton/SelectTokenButton.style.js

@@ -0,0 +1,31 @@
+import { cardHeaderClasses } from '@mui/material/CardHeader';
+import { styled } from '@mui/material/styles';
+import { CardHeader } from '../Card';
+export const SelectTokenCardHeader = styled(CardHeader, {
+    shouldForwardProp: (prop) => !['selected', 'compact'].includes(prop),
+})(({ theme, selected, compact }) => ({
+    height: 64,
+    [`.${cardHeaderClasses.title}`]: {
+        color: selected
+            ? theme.palette.text.primary
+            : theme.palette.text.secondary,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 256,
+        fontWeight: selected ? 500 : 400,
+        fontSize: compact && !selected ? '1rem' : '1.125rem',
+        [theme.breakpoints.down(392)]: {
+            width: compact ? 92 : 224,
+        },
+    },
+    [`.${cardHeaderClasses.subheader}`]: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 256,
+        [theme.breakpoints.down(392)]: {
+            width: compact ? 92 : 224,
+        },
+    },
+}));

package/_esm/components/SendToWallet/SendToWallet.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse, FormHelperText } from '@mui/material';
+import { getEnsAddress } from '@wagmi/core';
+import { forwardRef, useEffect, useRef } from 'react';
+import { useController, useFormContext, useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { isAddress } from 'viem';
+import { normalize } from 'viem/ens';
+import { useConfig } from 'wagmi';
+import { useAccount, useRequiredToAddress } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI } from '../../types';
+import { isSVMAddress } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { FormControl, Input } from './SendToWallet.style';
+export const SendToWallet = forwardRef((props, ref) => {
+    const { t } = useTranslation();
+    const { trigger, getValues, setValue, clearErrors } = useFormContext();
+    const { account } = useAccount();
+    const config = useConfig();
+    const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+    const { showSendToWallet, showSendToWalletDirty } = useSendToWalletStore();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+    const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+    const requiredToAddress = useRequiredToAddress();
+    const requiredToAddressRef = useRef(requiredToAddress);
+    // We want to show toAddress field if it is set via widget configuration and not hidden
+    const showInstantly = Boolean(!showSendToWalletDirty &&
+        showDestinationWallet &&
+        toAddress &&
+        !hiddenToAddress) || requiredToAddress;
+    const { field: { onChange, onBlur, name, value }, } = useController({
+        name: FormKey.ToAddress,
+        rules: {
+            required: requiredToAddress && t('error.title.walletAddressRequired'),
+            onChange: (e) => {
+                setValue(FormKey.ToAddress, e.target.value.trim());
+            },
+            validate: async (value) => {
+                try {
+                    if (!value || isAddress(value) || isSVMAddress(value)) {
+                        return true;
+                    }
+                    const address = await getEnsAddress(config, {
+                        chainId: getValues(FormKey.ToChain),
+                        name: normalize(value),
+                    });
+                    return Boolean(address);
+                }
+                catch (error) {
+                    return t('error.title.walletEnsAddressInvalid');
+                }
+            },
+            onBlur: () => trigger(FormKey.ToAddress),
+        },
+    });
+    useEffect(() => {
+        const value = getValues(FormKey.ToAddress);
+        if (value) {
+            trigger(FormKey.ToAddress);
+            // Trigger validation if we change requiredToAddress in the runtime
+        }
+        else if (requiredToAddressRef.current !== requiredToAddress) {
+            requiredToAddressRef.current = requiredToAddress;
+            trigger(FormKey.ToAddress).then(() => clearErrors(FormKey.ToAddress));
+        }
+    }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
+    if (hiddenToAddress && !requiredToAddress) {
+        return null;
+    }
+    return (_jsx(Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Card, { ...props, ref: ref, children: [_jsx(CardTitle, { required: requiredToAddress, children: t('main.sendToWallet') }), _jsxs(FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [_jsx(Input, { size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, value: value, placeholder: t('main.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), _jsx(SendToWalletFormHelperText, {})] })] }) }));
+});
+export const SendToWalletFormHelperText = () => {
+    const { errors } = useFormState();
+    return (_jsx(FormHelperText, { error: !!errors.toAddress, children: errors.toAddress?.message }));
+};

package/_esm/components/SendToWallet/SendToWallet.style.js

@@ -0,0 +1,18 @@
+import { FormControl as MuiFormControl, InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+export const FormControl = styled(MuiFormControl)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+export const Input = styled(InputBase)(({ theme }) => ({
+    [`.${inputBaseClasses.input}`]: {
+        height: 32,
+        padding: theme.spacing(0, 0, 0, 2),
+    },
+    [`&.${inputBaseClasses.disabled}`]: {
+        color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+        WebkitTextFillColor: 'unset',
+    },
+}));

package/_esm/components/SendToWallet/SendToWalletButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { default as WalletIcon } from '@mui/icons-material/Wallet';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useRequiredToAddress, useWidgetEvents } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
+export const SendToWalletButton = () => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const emitter = useWidgetEvents();
+    const { disabledUI, hiddenUI } = useWidgetConfig();
+    const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const requiredToAddress = useRequiredToAddress();
+    if (!showDestinationWallet ||
+        hiddenUI?.includes(HiddenUI.ToAddress) ||
+        requiredToAddress) {
+        return null;
+    }
+    const handleClick = () => {
+        if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
+            setValue(FormKey.ToAddress, '', { shouldTouch: true });
+        }
+        toggleSendToWallet();
+        emitter.emit(WidgetEvent.SendToWalletToggled, useSendToWalletStore.getState().showSendToWallet);
+    };
+    return (_jsx(Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+                minWidth: 48,
+                marginLeft: 1,
+            }, children: _jsx(WalletIcon, {}) }) }));
+};

package/_esm/components/SettingsListItemButton.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from './ListItemButton';
+export const SettingsListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+    paddingRight: theme.spacing(1),
+}));

package/_esm/components/SmallAvatar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, Box, Skeleton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 16,
+    height: 16,
+    border: `2px solid ${theme.palette.background.paper}`,
+}));
+export const SmallAvatarSkeletonBase = styled(Skeleton)(({ theme }) => ({
+    border: `2px solid ${theme.palette.background.paper}`,
+    width: 16,
+    height: 16,
+}));
+export const SmallAvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    borderRadius: '50%',
+}));
+export const SmallAvatarSkeleton = () => {
+    return (_jsx(SmallAvatarSkeletonContainer, { children: _jsx(SmallAvatarSkeletonBase, { variant: "circular" }) }));
+};