@lifi/widget 1.0.0

package/components/SwapInput/SwapInputAdornment.style.js

@@ -0,0 +1,22 @@
+import { Button as MuiButton } from '@mui/material';
+import { lighten, styled } from '@mui/material/styles';
+export const Button = styled(MuiButton)(({ theme }) => ({
+    textTransform: 'none',
+    borderRadius: theme.shape.borderRadiusSecondary,
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    color: theme.palette.text.secondary,
+    padding: theme.spacing(0.125, 1, 0.375, 1),
+    lineHeight: 1,
+    fontSize: '0.875rem',
+    minWidth: 'unset',
+    '&:hover': {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.primary.main
+            : theme.palette.text.primary,
+        borderColor: theme.palette.mode === 'light'
+            ? lighten(theme.palette.primary.main, 0.5)
+            : theme.palette.text.secondary,
+    },
+}));

package/components/SwapInput/index.d.ts

@@ -0,0 +1 @@
+export * from './SwapInput';

package/components/SwapInput/index.js

@@ -0,0 +1 @@
+export * from './SwapInput';

package/components/SwapRouteCard/SwapRouteCard.d.ts

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

package/components/SwapRouteCard/SwapRouteCard.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check as CheckIcon } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { StepActions } from '../StepActions';
+import { StepToken } from '../StepToken';
+import { Card, Check, Label } from './SwapRouteCard.style';
+export const SwapRouteCard = (_a) => {
+    var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
+    const { t } = useTranslation();
+    return (_jsx(Card, Object.assign({ active: active, dense: dense }, other, { children: _jsxs(Box, { children: [_jsxs(Box, Object.assign({ sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }, mb: 2 }, { children: [_jsx(Label, { children: "GENERAL" }), active ? (_jsx(Check, { children: _jsx(CheckIcon, { fontSize: "inherit" }) })) : null] })), _jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
+                    ? route.steps.map((step) => (_jsx(StepActions, { step: step, mb: 2 }, step.id)))
+                    : null, _jsxs(Box, Object.assign({ sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                    } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: route.gasCostUSD }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
+                                            .map((step) => step.estimate.executionDuration)
+                                            .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end" }, { children: t(`swap.minutes`) }))] })] }))] }) })));
+};

package/components/SwapRouteCard/SwapRouteCard.style.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "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" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    active?: boolean | undefined;
+    blur?: boolean | undefined;
+    dense?: boolean | undefined;
+}, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "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" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    active?: boolean | undefined;
+}, {}, {}>;
+export declare const Check: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "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" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/SwapRouteCard/SwapRouteCard.style.js

@@ -0,0 +1,71 @@
+import { Box, Typography } from '@mui/material';
+import { darken, styled } from '@mui/material/styles';
+export const Card = styled(Box, {
+    shouldForwardProp: (prop) => !['dense', 'active', 'blur'].includes(prop),
+})(({ theme, active, blur, dense }) => ({
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(2),
+    border: `1px solid ${active
+        ? theme.palette.mode === 'light'
+            ? theme.palette.common.black
+            : theme.palette.grey[700]
+        : theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800]}`,
+    borderRadius: dense
+        ? theme.shape.borderRadiusSecondary
+        : theme.shape.borderRadius,
+    boxSizing: 'border-box',
+    userSelect: blur ? 'none' : 'auto',
+    '&:hover': {
+        cursor: blur || !dense ? 'pointer' : 'default',
+        backgroundColor: blur || !dense
+            ? darken(theme.palette.background.paper, 0.02)
+            : theme.palette.background.paper,
+    },
+    '& > div': {
+        filter: blur ? 'blur(3px)' : 'none',
+    },
+    transition: theme.transitions.create(['background-color'], {
+        duration: theme.transitions.duration.enteringScreen,
+        easing: theme.transitions.easing.easeOut,
+    }),
+}));
+export const Label = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => ({
+    backgroundColor: active
+        ? theme.palette.primary.main
+        : theme.palette.background.paper,
+    border: '1px solid',
+    borderColor: active
+        ? theme.palette.primary.main
+        : theme.palette.mode === 'light'
+            ? theme.palette.common.black
+            : theme.palette.grey[300],
+    borderRadius: theme.shape.borderRadius / 2,
+    color: active
+        ? theme.palette.common.white
+        : theme.palette.mode === 'light'
+            ? theme.palette.common.black
+            : theme.palette.grey[300],
+    padding: theme.spacing(0.5, 0.75),
+    fontSize: 12,
+    lineHeight: 1.2,
+    fontWeight: '600',
+    height: 24,
+    letterSpacing: '0.05rem',
+    textTransform: 'uppercase',
+    display: 'inline-flex',
+    userSelect: 'none',
+}));
+export const Check = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.primary.main,
+    borderRadius: '50%',
+    color: theme.palette.common.white,
+    width: 24,
+    height: 24,
+    display: 'grid',
+    placeItems: 'center',
+    fontSize: '1rem',
+}));

package/components/SwapRouteCard/index.d.ts

@@ -0,0 +1 @@
+export * from './SwapRouteCard';

package/components/SwapRouteCard/index.js

@@ -0,0 +1 @@
+export * from './SwapRouteCard';

package/components/SwapRouteCard/types.d.ts

@@ -0,0 +1,7 @@
+import { Route } from '@lifinance/sdk';
+export interface SwapRouteCardProps {
+    route: Route;
+    dense?: boolean;
+    active?: boolean;
+    blur?: boolean;
+}

package/components/SwapRouteCard/types.js

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

package/components/SwapRoutes/SwapRoutes.d.ts

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

package/components/SwapRoutes/SwapRoutes.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
+import { Box, IconButton, Skeleton } from '@mui/material';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useCurrentRoute, useSwapRoutes } from '../../hooks';
+import { routes } from '../../utils/routes';
+import { CardContainer, CardTitle } from '../Card';
+import { SwapRouteCard } from '../SwapRouteCard';
+import { Stack } from './SwapRoutes.style';
+import { SwapRoutesUpdateProgress } from './SwapRoutesUpdateProgress';
+export const SwapRoutes = (props) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [currentRoute] = useCurrentRoute();
+    const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
+    const handleCardClick = useCallback(() => {
+        navigate(routes.swapRoutes);
+    }, [navigate]);
+    if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
+        return null;
+    }
+    return (_jsxs(CardContainer, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(SwapRoutesUpdateProgress, { sx: {
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                } }), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", py: 2, pl: 2, pr: 1 }, { children: isLoading || isFetching || !currentRoute ? (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 181, sx: (theme) => ({
+                                borderRadius: theme.shape.borderRadiusSecondary / theme.shape.borderRadius,
+                                minWidth: '100%',
+                            }) })) : (_jsx(SwapRouteCard, { minWidth: "100%", route: currentRoute, active: true, dense: true }, currentRoute.id)) })), _jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))] }))] })));
+};

package/components/SwapRoutes/SwapRoutes.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    ref?: import("react").Ref<unknown> | undefined;
+    children?: import("react").ReactNode;
+    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
+    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
+    divider?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "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" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "spacing" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/SwapRoutes/SwapRoutes.style.js

@@ -0,0 +1,9 @@
+import { Stack as MuiStack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Stack = styled(MuiStack)(({ theme }) => ({
+    alignItems: 'stretch',
+    display: 'flex',
+    flex: 1,
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+}));

package/components/SwapRoutes/SwapRoutesUpdateProgress.d.ts

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

package/components/SwapRoutes/SwapRoutesUpdateProgress.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+import { Box } from '@mui/material';
+import { useSwapRoutes } from '../../hooks';
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
+export const SwapRoutesUpdateProgress = (_a) => {
+    var { sx } = _a, other = __rest(_a, ["sx"]);
+    const { isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } = useSwapRoutes();
+    if (isLoading) {
+        return _jsx(Box, { width: 24, height: 24, sx: sx });
+    }
+    return (_jsx(ProgressToNextUpdate, Object.assign({ updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: sx }, other)));
+};

package/components/SwapRoutes/index.d.ts

@@ -0,0 +1 @@
+export * from './SwapRoutes';

package/components/SwapRoutes/index.js

@@ -0,0 +1 @@
+export * from './SwapRoutes';

package/components/Switch.d.ts

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

package/components/Switch.js

@@ -0,0 +1,53 @@
+import { Switch as MuiSwitch } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { switchClasses } from '@mui/material/Switch';
+export const Switch = styled(MuiSwitch)(({ theme }) => ({
+    width: 42,
+    height: 24,
+    padding: 0,
+    [`.${switchClasses.switchBase}`]: {
+        padding: 0,
+        margin: theme.spacing(0.25),
+        transitionDuration: theme.transitions.duration.standard,
+        [`&.${switchClasses.checked}`]: {
+            transform: 'translateX(18px)',
+            color: theme.palette.common.white,
+            [`& + .${switchClasses.track}`]: {
+                backgroundColor: theme.palette.primary.main,
+                opacity: 1,
+                border: 0,
+            },
+            [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+                opacity: 0.5,
+            },
+        },
+        [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+            color: theme.palette.primary.main,
+            border: '6px solid',
+            borderColor: theme.palette.common.white,
+        },
+        [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
+            color: theme.palette.mode === 'light'
+                ? theme.palette.grey[100]
+                : theme.palette.grey[600],
+        },
+        [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+            opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+        },
+    },
+    [`.${switchClasses.thumb}`]: {
+        boxSizing: 'border-box',
+        width: 20,
+        height: 20,
+    },
+    [`.${switchClasses.track}`]: {
+        borderRadius: 24 / 2,
+        backgroundColor: theme.palette.mode === 'light'
+            ? theme.palette.grey[400]
+            : theme.palette.grey[800],
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: theme.transitions.duration.standard,
+        }),
+    },
+}));

package/components/TextFitter/TextFitter.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { TextFitterProps } from './types';
+export declare const TextFitter: React.FC<PropsWithChildren<TextFitterProps>>;

package/components/TextFitter/TextFitter.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@mui/material/styles';
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+const initialState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+};
+export const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspectRatio = 'xMinYMid meet', textStyle, svgStyle, cropTop, cropBottom, onFit, }) => {
+    const theme = useTheme();
+    const textRef = useRef(null);
+    const [viewBox, setViewBox] = useState(initialState);
+    const [textRect, setTextRect] = useState(initialState);
+    const calculateBox = useCallback(() => {
+        if (!textRef.current) {
+            return;
+        }
+        const box = textRef.current.getBBox();
+        if (cropTop) {
+            box.y += box.height * cropTop;
+            box.height -= box.height * cropTop;
+        }
+        if (cropBottom) {
+            box.height -= box.height * cropBottom;
+        }
+        setViewBox(box);
+        setTextRect(textRef.current.getBoundingClientRect());
+        onFit === null || onFit === void 0 ? void 0 : onFit();
+    }, [cropBottom, cropTop, onFit]);
+    useLayoutEffect(() => {
+        calculateBox();
+    }, [calculateBox, children]);
+    useLayoutEffect(() => {
+        if (document.fonts) {
+            document.fonts.ready.then(() => {
+                calculateBox();
+            });
+        }
+    }, [calculateBox]);
+    return (_jsx("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: textRect.height && maxHeight && textRect.height >= maxHeight
+            ? maxHeight
+            : height, preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary }, { children: _jsx("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
+};

package/components/TextFitter/index.d.ts

@@ -0,0 +1 @@
+export * from './TextFitter';

package/components/TextFitter/index.js

@@ -0,0 +1 @@
+export * from './TextFitter';

package/components/TextFitter/types.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export interface TextFitterProps {
+    textStyle?: CSSProperties;
+    svgStyle?: CSSProperties;
+    onFit?(): void;
+    maxHeight?: string | number;
+    height?: string | number;
+    width?: string | number;
+    preserveAspectRatio?: string;
+    cropTop?: number;
+    cropBottom?: number;
+}

package/components/TextFitter/types.js

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

package/components/TokenList/TokenList.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TokenListProps } from './types';
+export declare const TokenList: FC<TokenListProps>;

package/components/TokenList/TokenList.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, List, Typography } from '@mui/material';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useVirtual } from 'react-virtual';
+import { useDebouncedWatch, useTokenBalances } from '../../hooks';
+import { SwapFormKey, SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { useWallet } from '../../providers/WalletProvider';
+import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
+import { createTokenAmountSkeletons, skeletonKey } from './utils';
+export const TokenList = ({ formType, height, onClick, }) => {
+    const { t } = useTranslation();
+    const { account } = useWallet();
+    const { setValue } = useFormContext();
+    const [selectedChainId] = useWatch({
+        name: [SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const [searchTokensFilter] = useDebouncedWatch([SwapFormKey.SearchTokensFilter], 250);
+    const { tokens, isLoading, isFetching } = useTokenBalances(selectedChainId);
+    const chainTokens = useMemo(() => {
+        var _a;
+        let chainTokens = tokens !== null && tokens !== void 0 ? tokens : [];
+        const searchFilter = (_a = searchTokensFilter === null || searchTokensFilter === void 0 ? void 0 : searchTokensFilter.toUpperCase()) !== null && _a !== void 0 ? _a : '';
+        chainTokens = isLoading
+            ? createTokenAmountSkeletons()
+            : searchTokensFilter
+                ? chainTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
+                    token.symbol.toUpperCase().includes(searchFilter) ||
+                    token.address.toUpperCase().includes(searchFilter))
+                : chainTokens;
+        return chainTokens;
+    }, [isLoading, searchTokensFilter, tokens]);
+    const parentRef = useRef(null);
+    const { virtualItems, totalSize, scrollToIndex } = useVirtual({
+        size: chainTokens.length,
+        parentRef,
+        overscan: 3,
+        paddingEnd: 12,
+        estimateSize: useCallback(() => 64, []),
+        keyExtractor: (index) => { var _a; return (_a = chainTokens[index].address) !== null && _a !== void 0 ? _a : index; },
+    });
+    useEffect(() => {
+        scrollToIndex(0);
+    }, [scrollToIndex, selectedChainId]);
+    const handleTokenClick = useCallback((tokenAddress) => {
+        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
+        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [formType, onClick, setValue]);
+    return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!virtualItems.length ? (_jsx(Typography, Object.assign({ variant: "body1", align: "center", py: 2, px: 3 }, { children: t('swap.couldntFindTokens') }))) : null, _jsx(List, Object.assign({ style: { height: totalSize }, disablePadding: true }, { children: virtualItems.map((item) => {
+                    const token = chainTokens[item.index];
+                    if (token.name.includes(skeletonKey)) {
+                        return (_jsx(TokenListItemSkeleton, { size: item.size, start: item.start }, item.key));
+                    }
+                    return (_jsx(TokenListItem, { onClick: handleTokenClick, size: item.size, start: item.start, token: token, showBalance: account.isActive }, item.key));
+                }) }))] })));
+};

package/components/TokenList/TokenList.style.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "selected" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ListItem: import("@emotion/styled").StyledComponent<{
+    button?: false | undefined;
+} & import("@mui/material").ListItemBaseProps & {
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "components" | "componentsProps" | "selected" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/TokenList/TokenList.style.js

@@ -0,0 +1,22 @@
+import { ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils/colors';
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(2),
+    height: 64,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme, '4%'),
+    },
+}));
+export const ListItem = styled(MuiListItem)(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    padding: theme.spacing(0.5, 3),
+    [`.${listItemSecondaryActionClasses.root}`]: {
+        right: theme.spacing(5),
+    },
+}));

package/components/TokenList/TokenListItem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TokenListItemBaseProps, TokenListItemProps } from './types';
+export declare const TokenListItem: React.FC<TokenListItemProps>;
+export declare const TokenListItemSkeleton: React.FC<TokenListItemBaseProps>;

package/components/TokenList/TokenListItem.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Typography, } from '@mui/material';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatTokenPrice } from '../../utils/format';
+import { ListItem, ListItemButton } from './TokenList.style';
+export const TokenListItem = memo(({ onClick, size, start, token, showBalance }) => {
+    var _a;
+    const { t } = useTranslation();
+    const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(token.address);
+    const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
+    return (_jsx(ListItem, Object.assign({ disablePadding: true, style: {
+            height: `${size}px`,
+            transform: `translateY(${start}px)`,
+        } }, { children: _jsxs(ListItemButton, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: (_a = token.amount) !== null && _a !== void 0 ? _a : '0' })), tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`swap.currency`, {
+                                value: tokenPrice,
+                            }) }))) : null] }))) : null] })) })));
+});
+export const TokenListItemSkeleton = ({ size, start, }) => {
+    return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(Skeleton, { variant: "text", width: 60, height: 24 }), disablePadding: true, style: {
+            height: `${size}px`,
+            transform: `translateY(${start}px)`,
+        } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 128, height: 20 }) })] })));
+};

package/components/TokenList/index.d.ts

@@ -0,0 +1 @@
+export * from './TokenList';

package/components/TokenList/index.js

@@ -0,0 +1 @@
+export * from './TokenList';