@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/_esm/components/SendToWallet/SendToWallet.js

@@ -0,0 +1,79 @@
+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 }));
+};
+//# sourceMappingURL=SendToWallet.js.map

package/src/_esm/components/SendToWallet/SendToWallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWallet.js","sourceRoot":"","sources":["../../../../../src/components/SendToWallet/SendToWallet.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,CAAC,MAAM,YAAY,GAAuB,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IACvE,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAC;IACjC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IAC9D,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC3E,MAAM,EAAE,qBAAqB,EAAE,GAAG,WAAW,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEzE,MAAM,eAAe,GAAG,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IACrE,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,MAAM,oBAAoB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAEvD,uFAAuF;IACvF,MAAM,aAAa,GACjB,OAAO,CACL,CAAC,qBAAqB;QACpB,qBAAqB;QACrB,SAAS;QACT,CAAC,eAAe,CACnB,IAAI,iBAAiB,CAAC;IAEzB,MAAM,EACJ,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GACzC,GAAG,aAAa,CAAC;QAChB,IAAI,EAAE,OAAO,CAAC,SAAS;QACvB,KAAK,EAAE;YACL,QAAQ,EACN,iBAAiB,IAAK,CAAC,CAAC,mCAAmC,CAAY;YACzE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;YACrD,CAAC;YACD,QAAQ,EAAE,KAAK,EAAE,KAAa,EAAE,EAAE;gBAChC,IAAI,CAAC;oBACH,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;wBACtD,OAAO,IAAI,CAAC;oBACd,CAAC;oBACD,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,MAAM,EAAE;wBAC1C,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;wBACnC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;qBACvB,CAAC,CAAC;oBACH,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC;gBAC1B,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,OAAO,CAAC,CAAC,qCAAqC,CAAW,CAAC;gBAC5D,CAAC;YACH,CAAC;YACD,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;SACzC;KACF,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAC3C,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAC3B,mEAAmE;QACrE,CAAC;aAAM,IAAI,oBAAoB,CAAC,OAAO,KAAK,iBAAiB,EAAE,CAAC;YAC9D,oBAAoB,CAAC,OAAO,GAAG,iBAAiB,CAAC;YACjD,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;QACxE,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1E,IAAI,eAAe,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAChC,EAAE,EAAE,gBAAgB,IAAI,aAAa,EACrC,YAAY,QACZ,aAAa,kBAEb,MAAC,IAAI,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,aACvB,KAAC,SAAS,IAAC,QAAQ,EAAE,iBAAiB,YACnC,CAAC,CAAC,mBAAmB,CAAC,GACb,EACZ,MAAC,WAAW,IAAC,SAAS,QAAC,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aACpE,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,KAAK,EACjB,cAAc,EAAC,KAAK,EACpB,UAAU,EAAC,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,CAAC,CAAC,yBAAyB,CAAW,EACnD,QAAQ,EAAE,OAAO,CAAC,SAAS,IAAI,iBAAiB,CAAC,GACjD,EACF,KAAC,0BAA0B,KAAG,IAClB,IACT,GACE,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,0BAA0B,GAAa,GAAG,EAAE;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IAElC,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,YACtC,MAAM,CAAC,SAAS,EAAE,OAAiB,GACrB,CAClB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,19 @@
+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',
+    },
+}));
+//# sourceMappingURL=SendToWallet.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWallet.style.js","sourceRoot":"","sources":["../../../../../src/components/SendToWallet/SendToWallet.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;CACvC,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,CAAC,IAAI,gBAAgB,CAAC,KAAK,EAAE,CAAC,EAAE;QAC9B,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACnC;IACD,CAAC,KAAK,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAClC,KAAK,EAAE,SAAS;KACjB;IACD,CAAC,IAAI,gBAAgB,CAAC,KAAK,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAC3D,mBAAmB,EAAE,OAAO;KAC7B;CACF,CAAC,CAAC,CAAC"}

package/src/_esm/components/SendToWallet/SendToWalletButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Button, Tooltip } from '@mui/material';
+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, {}) }) }));
+};
+//# sourceMappingURL=SendToWalletButton.js.map

package/src/_esm/components/SendToWallet/SendToWalletButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletButton.js","sourceRoot":"","sources":["../../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,CAAC,MAAM,kBAAkB,GAAa,GAAG,EAAE;IAC/C,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;IAClC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAC;IACnD,MAAM,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACxE,MAAM,EAAE,qBAAqB,EAAE,GAAG,WAAW,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEzE,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IAEjD,IACE,CAAC,qBAAqB;QACtB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;QACtC,iBAAiB,EACjB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,gBAAgB,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YACpE,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;QACzD,CAAC;QACD,kBAAkB,EAAE,CAAC;QACrB,OAAO,CAAC,IAAI,CACV,WAAW,CAAC,mBAAmB,EAC/B,oBAAoB,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CACjD,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC7B,SAAS,EAAC,YAAY,EACtB,UAAU,EAAE,GAAG,EACf,KAAK,kBAEL,KAAC,MAAM,IACL,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,EAChD,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE;gBACF,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,CAAC;aACd,YAED,KAAC,UAAU,KAAG,GACP,GACD,CACX,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/SendToWallet/index.js

@@ -0,0 +1,3 @@
+export * from './SendToWallet';
+export * from './SendToWalletButton';
+//# sourceMappingURL=index.js.map

package/src/_esm/components/SendToWallet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/SendToWallet/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC"}

package/src/_esm/components/SettingsListItemButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SettingsListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/src/_esm/components/SettingsListItemButton.js

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

package/src/_esm/components/SettingsListItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsListItemButton.js","sourceRoot":"","sources":["../../../../src/components/SettingsListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAC9D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/B,CAAC,CACH,CAAC"}

package/src/_esm/components/SmallAvatar.js

@@ -0,0 +1,22 @@
+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" }) }));
+};
+//# sourceMappingURL=SmallAvatar.js.map

package/src/_esm/components/SmallAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallAvatar.js","sourceRoot":"","sources":["../../../../src/components/SmallAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAC1C,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE;CACtD,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE;IACrD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;CACX,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAC1C,YAAY,EAAE,KAAK;CACpB,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,CACL,KAAC,4BAA4B,cAC3B,KAAC,uBAAuB,IAAC,OAAO,EAAC,UAAU,GAAG,GACjB,CAChC,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/Step/CircularProgress.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { darken } from '@mui/material/styles';
+import { CircularIcon, CircularProgressPending, } from './CircularProgress.style';
+export function CircularProgress({ process }) {
+    return (_jsxs(CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? (_jsx(InfoRoundedIcon, { color: "info", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, process.status === 'DONE' &&
+                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (_jsx(WarningRoundedIcon, { sx: (theme) => ({
+                    position: 'absolute',
+                    fontSize: '1rem',
+                    color: darken(theme.palette.warning.main, 0.32),
+                }) })) : process.status === 'DONE' ? (_jsx(DoneIcon, { color: "success", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, process.status === 'FAILED' ? (_jsx(ErrorRoundedIcon, { color: "error", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null] }));
+}
+//# sourceMappingURL=CircularProgress.js.map

package/src/_esm/components/Step/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["../../../../../src/components/Step/CircularProgress.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,gBAAgB,MAAM,kCAAkC,CAAC;AAChE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EACL,YAAY,EACZ,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAElC,MAAM,UAAU,gBAAgB,CAAC,EAAE,OAAO,EAAwB;IAChE,OAAO,CACL,MAAC,YAAY,IAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,aAC/D,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9D,KAAC,uBAAuB,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,GAAI,CACpD,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,MAAM,KAAK,iBAAiB,CAAC,CAAC,CAAC,CACtC,KAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE;oBACF,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,MAAM;iBACjB,GACD,CACH,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,MAAM,KAAK,MAAM;gBAC1B,CAAC,OAAO,CAAC,SAAS,KAAK,SAAS,IAAI,OAAO,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CACtE,KAAC,kBAAkB,IACjB,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;oBACd,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,MAAM;oBAChB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;iBAChD,CAAC,GACF,CACH,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,EAAE,EAAE;oBACF,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,MAAM;iBACjB,GACD,CACH,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,KAAC,gBAAgB,IACf,KAAK,EAAC,OAAO,EACb,EAAE,EAAE;oBACF,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,MAAM;iBACjB,GACD,CACH,CAAC,CAAC,CAAC,IAAI,IACK,CAChB,CAAC;AACJ,CAAC"}

package/src/_esm/components/Step/CircularProgress.style.js

@@ -0,0 +1,70 @@
+import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
+import { circularProgressClasses } from '@mui/material/CircularProgress';
+import { alpha, keyframes, styled } from '@mui/material/styles';
+const getStatusColor = (theme, status, substatus) => {
+    switch (status) {
+        case 'ACTION_REQUIRED':
+            return alpha(theme.palette.info.main, 0.12);
+        case 'DONE':
+            if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
+                return alpha(theme.palette.warning.main, 0.48);
+            }
+            return alpha(theme.palette.success.main, 0.12);
+        case 'FAILED':
+            return alpha(theme.palette.error.main, 0.12);
+        default:
+            return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
+    }
+};
+export const CircularIcon = styled(Box, {
+    shouldForwardProp: (prop) => !['status', 'substatus'].includes(prop),
+})(({ theme, status, substatus }) => ({
+    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
+        ? getStatusColor(theme, status, substatus)
+        : theme.palette.background.paper,
+    borderStyle: 'solid',
+    borderColor: getStatusColor(theme, status, substatus),
+    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
+        ? 2
+        : 0,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+}));
+const circleAnimation = keyframes `
+  0% {
+    stroke-dashoffset: 129;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dashoffset: 56;
+    transform: rotate(45deg);
+  };
+  100% {
+    stroke-dashoffset: 129;
+    transform: rotate(360deg);
+  }
+`;
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+export const CircularProgressPending = styled(MuiCircularProgress) `
+  color: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.primary.main
+    : theme.palette.primary.light};
+  animation-duration: 3s;
+  position: absolute;
+  left: -2px;
+  .${circularProgressClasses.circle} {
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-name: ${circleAnimation};
+    stroke-dasharray: 129;
+    stroke-dashoffset: 129;
+    stroke-linecap: round;
+    transform-origin: 100% 100%;
+  }
+`;
+//# sourceMappingURL=CircularProgress.style.js.map

package/src/_esm/components/Step/CircularProgress.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.style.js","sourceRoot":"","sources":["../../../../../src/components/Step/CircularProgress.style.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,cAAc,GAAG,CACrB,KAAY,EACZ,MAAc,EACd,SAAqB,EACrB,EAAE;IACF,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,iBAAiB;YACpB,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC9C,KAAK,MAAM;YACT,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;gBACxD,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACjD,CAAC;YACD,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACjD,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC/C;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAC1E,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,EAAE;IACtC,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC7E,CAAC,CACA,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IACjC,eAAe,EAAE,CAAC,iBAAiB,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;QACrE,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC;QAC1C,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAClC,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC;IACrD,WAAW,EAAE,CAAC,CAAC,iBAAiB,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;QAClE,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,KAAK;CACpB,CAAC,CACH,CAAC;AAEF,MAAM,eAAe,GAAG,SAAS,CAAA;;;;;;;;;;;;;CAahC,CAAC;AAEF,0FAA0F;AAC1F,kFAAkF;AAClF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAA;WACvD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;IAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;;;;KAI9B,uBAAuB,CAAC,MAAM;;;sBAGb,eAAe;;;;;;CAMpC,CAAC"}

package/src/_esm/components/Step/DestinationWalletAddress.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { LiFiStepExtended } from '@lifi/sdk';
+export declare const DestinationWalletAddress: React.FC<{
+    step: LiFiStepExtended;
+    toAddress: string;
+    toAddressLink: string;
+}>;

package/src/_esm/components/Step/DestinationWalletAddress.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+import { LinkButton } from './StepProcess.style';
+export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
+    const { t } = useTranslation();
+    const isDone = step.execution?.status === 'DONE';
+    return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(WalletIcon, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) }), _jsx(Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: 400, children: isDone
+                        ? t('main.sentToAddress', {
+                            address: toAddress,
+                        })
+                        : t('main.sendToAddress', {
+                            address: toAddress,
+                        }) }), _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) })] }) }));
+};
+//# sourceMappingURL=DestinationWalletAddress.js.map

package/src/_esm/components/Step/DestinationWalletAddress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestinationWalletAddress.js","sourceRoot":"","sources":["../../../../../src/components/Step/DestinationWalletAddress.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,CAAC,MAAM,wBAAwB,GAIhC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE;IAC1C,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,MAAC,GAAG,IACF,EAAE,EAAE;gBACF,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;aACrB,aAED,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,YACnD,KAAC,UAAU,IACT,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACrC,EAAE,EAAE;4BACF,QAAQ,EAAE,UAAU;4BACpB,QAAQ,EAAE,MAAM;yBACjB,GACD,GACW,EACf,KAAC,UAAU,IAAC,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,YACtD,MAAM;wBACL,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE;4BACtB,OAAO,EAAE,SAAS;yBACnB,CAAC;wBACJ,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE;4BACtB,OAAO,EAAE,SAAS;yBACnB,CAAC,GACK,EACb,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,KAAK,EACV,aAAa,EAAE,IAAI,EACnB,IAAI,EAAE,aAAa,EACnB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YAEzB,KAAC,eAAe,KAAG,GACR,IACT,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/Step/GasStepProcess.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { LiFiStepExtended } from '@lifi/sdk';
+export declare const GasStepProcess: React.FC<{
+    step: LiFiStepExtended;
+}>;

package/src/_esm/components/Step/GasStepProcess.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import EvStationIcon from '@mui/icons-material/EvStation';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+export const GasStepProcess = ({ step }) => {
+    const { t } = useTranslation();
+    const isDone = step.execution?.status === 'DONE';
+    return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) }), _jsxs(Typography, { ml: 2, flex: 1, fontSize: 14, fontWeight: 400, children: [t('format.currency', {
+                            value: (step.execution?.gasAmountUSD ||
+                                step.estimate.gasCosts?.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0)) ??
+                                0,
+                        }), ' ', isDone ? t('main.gasFeePaid') : t('main.gasFeeEstimated')] })] }) }));
+};
+//# sourceMappingURL=GasStepProcess.js.map

package/src/_esm/components/Step/GasStepProcess.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasStepProcess.js","sourceRoot":"","sources":["../../../../../src/components/Step/GasStepProcess.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAEtB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAChB,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,MAAC,GAAG,IACF,EAAE,EAAE;gBACF,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;aACrB,aAED,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,YACnD,KAAC,aAAa,IACZ,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACrC,EAAE,EAAE;4BACF,QAAQ,EAAE,UAAU;4BACpB,QAAQ,EAAE,MAAM;yBACjB,GACD,GACW,EACf,MAAC,UAAU,IAAC,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,aACtD,CAAC,CAAC,iBAAiB,EAAE;4BACpB,KAAK,EACH,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY;gCAC3B,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAC5B,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAClB,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,IAAI,GAAG,CAAC,EAC/C,CAAC,CACF,CAAC;gCACJ,CAAC;yBACJ,CAAC,EAAE,GAAG,EACN,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,IAC/C,IACT,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/Step/Step.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { LiFiStepExtended, TokenAmount } from '@lifi/sdk';
+export declare const Step: React.FC<{
+    step: LiFiStepExtended;
+    fromToken?: TokenAmount;
+    toToken?: TokenAmount;
+    toAddress?: string;
+}>;

package/src/_esm/components/Step/Step.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card, CardTitle } from '../../components/Card';
+import { StepActions } from '../../components/StepActions';
+import { Token } from '../../components/Token';
+import { useAvailableChains } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { shortenAddress } from '../../utils';
+import { DestinationWalletAddress } from './DestinationWalletAddress';
+import { GasStepProcess } from './GasStepProcess';
+import { StepProcess } from './StepProcess';
+import { StepTimer } from './StepTimer';
+export const Step = ({ step, fromToken, toToken, toAddress }) => {
+    const { t } = useTranslation();
+    const { getChainById } = useAvailableChains();
+    const { subvariant } = useWidgetConfig();
+    const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
+    const getCardTitle = () => {
+        switch (step.type) {
+            case 'lifi':
+                const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
+                const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
+                if (hasCrossStep && hasSwapStep) {
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepSwapAndBridge');
+                }
+                if (hasCrossStep) {
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepBridge');
+                }
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
+            default:
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
+        }
+    };
+    const formattedToAddress = shortenAddress(toAddress);
+    const toAddressLink = toAddress
+        ? `${getChainById(step.action.toChainId)?.metamask
+            .blockExplorerUrls[0]}address/${toAddress}`
+        : undefined;
+    return (_jsxs(Card, { variant: stepHasError ? 'error' : 'default', children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                }, children: [_jsx(CardTitle, { flex: 1, children: getCardTitle() }), _jsx(CardTitle, { sx: { fontWeight: 500 }, children: _jsx(StepTimer, { step: step }) })] }), _jsxs(Box, { py: 1, children: [fromToken ? _jsx(Token, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), step.execution?.process.map((process, index) => (_jsx(StepProcess, { step: step, process: process }, index))), _jsx(GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? (_jsx(DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? _jsx(Token, { token: toToken, px: 2, py: 1 }) : null] })] }));
+};
+//# sourceMappingURL=Step.js.map

package/src/_esm/components/Step/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../../../src/components/Step/Step.tsx"],"names":[],"mappings":"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"}

package/src/_esm/components/Step/StepList.d.ts

@@ -0,0 +1,3 @@
+import type { RouteExtended } from '@lifi/sdk';
+import type { WidgetSubvariant } from '../../types';
+export declare const getStepList: (route?: RouteExtended, subvariant?: WidgetSubvariant) => import("react/jsx-runtime").JSX.Element[] | undefined;

package/src/_esm/components/Step/StepList.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { StepDivider } from '../../components/StepDivider';
+import { Step } from './Step';
+export const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
+    const lastIndex = steps.length - 1;
+    const fromToken = index === 0
+        ? { ...step.action.fromToken, amount: BigInt(step.action.fromAmount) }
+        : undefined;
+    const toToken = index === lastIndex
+        ? {
+            ...(step.execution?.toToken ?? step.action?.toToken),
+            amount: step.execution?.toAmount
+                ? BigInt(step.execution.toAmount)
+                : subvariant === 'nft'
+                    ? BigInt(route.toAmount)
+                    : BigInt(step.estimate.toAmount),
+        }
+        : undefined;
+    const toAddress = index === lastIndex && route.fromAddress !== route.toAddress
+        ? route.toAddress
+        : undefined;
+    return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken, toAddress: toAddress }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
+});
+//# sourceMappingURL=StepList.js.map

package/src/_esm/components/Step/StepList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepList.js","sourceRoot":"","sources":["../../../../../src/components/Step/StepList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,KAAqB,EACrB,UAA6B,EAC7B,EAAE,CACF,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACtC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACnC,MAAM,SAAS,GACb,KAAK,KAAK,CAAC;QACT,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE;QACtE,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,OAAO,GACX,KAAK,KAAK,SAAS;QACjB,CAAC,CAAC;YACE,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;YACpD,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ;gBAC9B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;gBACjC,CAAC,CAAC,UAAU,KAAK,KAAK;oBACpB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;oBACxB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;SACrC;QACH,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,SAAS,GACb,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,SAAS;QAC1D,CAAC,CAAC,KAAK,CAAC,SAAS;QACjB,CAAC,CAAC,SAAS,CAAC;IAChB,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,GACpB,EACD,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChD,KAAC,WAAW,KAAG,CAChB,CAAC,CAAC,CAAC,IAAI,KATK,IAAI,CAAC,EAAE,CAUX,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/src/_esm/components/Step/StepProcess.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { LiFiStep, Process } from '@lifi/sdk';
+export declare const StepProcess: React.FC<{
+    step: LiFiStep;
+    process: Process;
+}>;

package/src/_esm/components/Step/StepProcess.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import { Box, Link, Typography } from '@mui/material';
+import { useProcessMessage } from '../../hooks';
+import { CircularProgress } from './CircularProgress';
+import { LinkButton } from './StepProcess.style';
+export const StepProcess = ({ step, process }) => {
+    const { title, message } = useProcessMessage(step, process);
+    return (_jsxs(Box, { px: 2, py: 1, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: [_jsx(CircularProgress, { process: process }), _jsx(Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? (_jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
+};
+//# sourceMappingURL=StepProcess.js.map

package/src/_esm/components/Step/StepProcess.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepProcess.js","sourceRoot":"","sources":["../../../../../src/components/Step/StepProcess.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAGnB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACzB,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC5D,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,aACf,MAAC,GAAG,IACF,EAAE,EAAE;oBACF,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;iBACrB,aAED,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,GAAI,EACtC,KAAC,UAAU,IACT,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,YAEpC,KAAK,GACK,EACZ,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAChB,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,KAAK,EACV,aAAa,EAAE,IAAI,EACnB,IAAI,EAAE,OAAO,CAAC,MAAM,EACpB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YAEzB,KAAC,eAAe,KAAG,GACR,CACd,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,UAAU,IACT,EAAE,EAAE,CAAC,EACL,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,GAAG,EACf,KAAK,EAAC,gBAAgB,YAErB,OAAO,GACG,CACd,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/components/Step/StepProcess.style.js

@@ -0,0 +1,6 @@
+import { IconButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const LinkButton = styled(IconButton)(({ theme }) => ({
+    padding: theme.spacing(0.5),
+}));
+//# sourceMappingURL=StepProcess.style.js.map

package/src/_esm/components/Step/StepProcess.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepProcess.style.js","sourceRoot":"","sources":["../../../../../src/components/Step/StepProcess.style.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAiD,MAAM,CAC5E,UAAU,CACX,CAA8B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;CAC5B,CAAC,CAAC,CAAC"}

package/src/_esm/components/Step/StepTimer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { LiFiStepExtended } from '@lifi/sdk';
+export declare const StepTimer: React.FC<{
+    step: LiFiStepExtended;
+    hideInProgress?: boolean;
+}>;

package/src/_esm/components/Step/StepTimer.js

@@ -0,0 +1,57 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTimer } from 'react-timer-hook';
+const getExpiryTimestamp = (step) => new Date((step.execution?.process[0]?.startedAt ?? Date.now()) +
+    step.estimate.executionDuration * 1000);
+export const StepTimer = ({ step, hideInProgress }) => {
+    const { t } = useTranslation();
+    const [isExpired, setExpired] = useState(false);
+    const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
+    const [expiryTimestamp] = useState(() => getExpiryTimestamp(step));
+    const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
+        autoStart: false,
+        expiryTimestamp,
+        onExpire: () => setExpired(true),
+    });
+    useEffect(() => {
+        if (isExpired || !step.execution) {
+            return;
+        }
+        if (!isExecutionStarted) {
+            setExecutionStarted(true);
+            restart(getExpiryTimestamp(step));
+        }
+        const shouldBePaused = step.execution.process.some((process) => process.status === 'ACTION_REQUIRED' || process.status === 'FAILED');
+        if (isRunning && shouldBePaused) {
+            pause();
+        }
+        else if (!isRunning && !shouldBePaused) {
+            resume();
+        }
+    }, [
+        expiryTimestamp,
+        isExecutionStarted,
+        isExpired,
+        isRunning,
+        pause,
+        restart,
+        resume,
+        step,
+    ]);
+    if (!isExecutionStarted) {
+        return (_jsx(_Fragment, { children: t('main.estimatedTime', {
+                value: Math.ceil(step.estimate.executionDuration / 60),
+            }) }));
+    }
+    const isTimerExpired = isExpired || (!minutes && !seconds);
+    if (step.execution?.status === 'DONE' ||
+        step.execution?.status === 'FAILED' ||
+        (isTimerExpired && hideInProgress)) {
+        return null;
+    }
+    return isTimerExpired ? (_jsx(_Fragment, { children: t('main.inProgress') })) : (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    _jsx(_Fragment, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
+};
+//# sourceMappingURL=StepTimer.js.map