@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/pages/TransactionPage/StatusBottomSheet.js

@@ -1,157 +0,0 @@
-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 { Box, Button, Typography } from '@mui/material';
-import { useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet';
-import { Token } from '../../components/Token';
-import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus } from '../../stores';
-import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenAddress, } from '../../utils';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
-export const StatusBottomSheet = ({ status, route, }) => {
-    const { t } = useTranslation();
-    const { navigateBack, navigate } = useNavigateBack();
-    const ref = useRef(null);
-    const { getChainById } = useChains();
-    const { setValue } = useFormContext();
-    const { subvariant, contractComponent, contractSecondaryComponent, contractCompactComponent, } = useWidgetConfig();
-    const toToken = {
-        ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
-        amount: route.steps.at(-1)?.execution?.toAmount ??
-            route.steps.at(-1)?.estimate.toAmount ??
-            route.toAmount,
-    };
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(toToken, route.toAddress);
-    const clearFromAmount = () => {
-        refetchAllBalances();
-        setValue(FormKey.FromAmount, '');
-        setValue(FormKey.ToAmount, '');
-    };
-    const handleDone = () => {
-        clearFromAmount();
-        navigateBack();
-    };
-    const handlePartialDone = () => {
-        clearFromAmount();
-        if (toToken.chainId !== route.toToken.chainId &&
-            toToken.address !== route.toToken.address) {
-            setValue(FormKey.FromAmount, formatTokenAmount(toToken.amount, toToken.decimals), { shouldTouch: true });
-            setValue(FormKey.FromChain, toToken.chainId, { shouldTouch: true });
-            setValue(FormKey.FromToken, toToken.address, { shouldTouch: true });
-            setValue(FormKey.ToChain, route.toToken.chainId, {
-                shouldTouch: true,
-            });
-            setValue(FormKey.ToToken, route.toToken.address, {
-                shouldTouch: true,
-            });
-        }
-        navigateBack();
-    };
-    const handleClose = () => {
-        clearFromAmount();
-        ref.current?.close();
-    };
-    const handleSeeDetails = () => {
-        handleClose();
-        navigate(navigationRoutes.transactionDetails, {
-            state: { routeId: route.id },
-            replace: true,
-        });
-    };
-    const transactionType = route.fromChainId === route.toChainId ? 'swap' : 'bridge';
-    let title;
-    let primaryMessage;
-    let secondaryMessage;
-    let handlePrimaryButton = handleDone;
-    switch (status) {
-        case RouteExecutionStatus.Done: {
-            title =
-                subvariant === 'nft'
-                    ? t('success.title.purchaseSuccessful')
-                    : t(`success.title.${transactionType}Successful`);
-            if (token) {
-                primaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: formatTokenAmount(token.amount),
-                    tokenSymbol: token.symbol,
-                    chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenAddress(route.toAddress),
-                });
-            }
-            handlePrimaryButton = handleDone;
-            break;
-        }
-        case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
-            title = t(`success.title.${transactionType}PartiallySuccessful`);
-            primaryMessage = t('success.message.exchangePartiallySuccessful', {
-                tool: route.steps.at(-1)?.toolDetails.name,
-                tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
-            });
-            if (token) {
-                secondaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: formatTokenAmount(token.amount),
-                    tokenSymbol: token.symbol,
-                    chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenAddress(route.toAddress),
-                });
-            }
-            handlePrimaryButton = handlePartialDone;
-            break;
-        }
-        case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {
-            title = t('success.title.refundIssued');
-            primaryMessage = t('success.message.exchangePartiallySuccessful', {
-                tool: route.steps.at(-1)?.toolDetails.name,
-                tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
-            });
-            if (token) {
-                secondaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: formatTokenAmount(token.amount),
-                    tokenSymbol: token.symbol,
-                    chainName: getChainById(token.chainId)?.name,
-                    walletAddress: shortenAddress(route.toAddress),
-                });
-            }
-            break;
-        }
-        case RouteExecutionStatus.Failed: {
-            const step = route.steps.find((step) => step.execution?.status === 'FAILED');
-            const process = step?.execution?.process.find((process) => process.status === 'FAILED');
-            if (!step || !process) {
-                break;
-            }
-            const processMessage = getProcessMessage(t, getChainById, step, process);
-            title = processMessage.title;
-            primaryMessage = processMessage.message;
-            handlePrimaryButton = handleClose;
-            break;
-        }
-        default:
-            break;
-    }
-    useEffect(() => {
-        const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
-        if ((hasSuccessFlag || hasEnumFlag(status, RouteExecutionStatus.Failed)) &&
-            !ref.current?.isOpen()) {
-            if (hasSuccessFlag) {
-                refetchNewBalance();
-                refetch();
-            }
-            ref.current?.open();
-        }
-    }, [refetch, refetchNewBalance, status]);
-    const showContractComponent = subvariant === 'nft' && hasEnumFlag(status, RouteExecutionStatus.Done);
-    return (_jsx(BottomSheet, { ref: ref, children: _jsxs(Box, { p: 3, children: [!showContractComponent ? (_jsx(CenterContainer, { children: _jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoRoundedIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-                                hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRoundedIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRoundedIcon, { color: "error" })) : null] }) })) : null, _jsx(CenterContainer, { children: _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent ||
-                    contractSecondaryComponent ||
-                    contractComponent) : (_jsx(CenterContainer, { children: hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? (_jsx(Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
-                                ? t('button.done')
-                                : null, status === RouteExecutionStatus.Failed
-                                ? t('button.seeDetails')
-                                : null] }) }), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Box, { mt: 2, children: _jsx(Button, { variant: "text", onClick: handleSeeDetails, fullWidth: true, children: t('button.seeDetails') }) })) : null] }) }));
-};

package/pages/TransactionPage/StatusBottomSheet.style.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { Theme } from '@mui/material';
-import { RouteExecutionStatus } from '../../stores';
-type StatusColor = RouteExecutionStatus | 'warning';
-export declare const CenterContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const IconCircle: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
-    status: StatusColor;
-}, {}, {}>;
-export {};

package/pages/TransactionPage/StatusBottomSheet.style.js

@@ -1,45 +0,0 @@
-import { Box } from '@mui/material';
-import { alpha, darken, styled } from '@mui/material/styles';
-import { RouteExecutionStatus } from '../../stores';
-const getStatusColor = (status, theme) => {
-    switch (status) {
-        case RouteExecutionStatus.Done:
-            return { color: theme.palette.success.main, alpha: 0.12, darken: 0 };
-        case RouteExecutionStatus.Failed:
-            return { color: theme.palette.error.main, alpha: 0.12, darken: 0 };
-        case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
-        case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
-        case 'warning':
-            return {
-                color: theme.palette.warning.main,
-                alpha: 0.48,
-                darken: theme.palette.mode === 'light' ? 0.32 : 0,
-            };
-        default:
-            return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
-    }
-};
-export const CenterContainer = styled(Box)(({ theme }) => ({
-    display: 'grid',
-    placeItems: 'center',
-    position: 'relative',
-}));
-export const IconCircle = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'status',
-})(({ theme, status }) => {
-    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
-    return {
-        backgroundColor: alpha(color, alphaValue),
-        borderRadius: '50%',
-        width: 64,
-        height: 64,
-        display: 'grid',
-        position: 'relative',
-        placeItems: 'center',
-        '& > svg': {
-            color: darken(color, darkenValue),
-            width: 32,
-            height: 32,
-        },
-    };
-});

package/pages/TransactionPage/TokenValueBottomSheet.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { Route } from '@lifi/sdk';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-interface TokenValueBottomSheetProps {
-    route: Route;
-    onContinue(): void;
-    onCancel?(): void;
-}
-export declare const TokenValueBottomSheet: import("react").ForwardRefExoticComponent<TokenValueBottomSheetProps & import("react").RefAttributes<BottomSheetBase>>;
-export declare const getTokenValueLossThreshold: (route?: Route) => boolean;
-export {};

package/pages/TransactionPage/TokenValueBottomSheet.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { Box, Button, Typography } from '@mui/material';
-import { forwardRef, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet';
-import { useSetContentHeight } from '../../hooks';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
-import { calcValueLoss } from './utils';
-export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
-    const handleCancel = () => {
-        ref.current?.close();
-        onCancel?.();
-    };
-    return (_jsx(BottomSheet, { ref: ref, onClose: onCancel, children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) }));
-});
-const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
-    const { t } = useTranslation();
-    const ref = useRef();
-    useSetContentHeight(ref);
-    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('main.sending') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.gasCost') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.receiving') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.valueLoss') }), _jsx(Typography, { fontWeight: 600, children: calcValueLoss(route) })] }), _jsxs(Box, { display: "flex", mt: 3, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
-};
-export const getTokenValueLossThreshold = (route) => {
-    if (!route) {
-        return false;
-    }
-    const fromAmountUSD = Number(route.fromAmountUSD || 0);
-    const toAmountUSD = Number(route.toAmountUSD || 0);
-    const gasCostUSD = Number(route.gasCostUSD || 0);
-    if (!fromAmountUSD && !toAmountUSD) {
-        return false;
-    }
-    return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
-};

package/pages/TransactionPage/TransactionPage.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const TransactionPage: React.FC;

package/pages/TransactionPage/TransactionPage.js

@@ -1,132 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import DeleteIcon from '@mui/icons-material/Delete';
-import { Box, Button, Tooltip } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import { ContractComponent } from '../../components/ContractComponent';
-import { GasMessage } from '../../components/GasMessage';
-import { Insurance } from '../../components/Insurance';
-import { getStepList } from '../../components/Step';
-import { useNavigateBack, useRouteExecution, useWidgetEvents, } from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus, useHeaderStoreContext } from '../../stores';
-import { WidgetEvent } from '../../types/events';
-import { formatTokenAmount } from '../../utils';
-import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
-import { StartInsurableTransactionButton, StartTransactionButton, } from './StartTransactionButton';
-import { StatusBottomSheet } from './StatusBottomSheet';
-import { TokenValueBottomSheet, getTokenValueLossThreshold, } from './TokenValueBottomSheet';
-import { Container } from './TransactionPage.style';
-import { calcValueLoss } from './utils';
-export const TransactionPage = () => {
-    const { t } = useTranslation();
-    const { setValue } = useFormContext();
-    const emitter = useWidgetEvents();
-    const { navigateBack } = useNavigateBack();
-    const { subvariant, insurance, contractComponent, contractSecondaryComponent, } = useWidgetConfig();
-    const { state } = useLocation();
-    const headerStoreContext = useHeaderStoreContext();
-    const stateRouteId = state?.routeId;
-    const [routeId, setRouteId] = useState(stateRouteId);
-    const tokenValueBottomSheetRef = useRef(null);
-    const exchangeRateBottomSheetRef = useRef(null);
-    const onAcceptExchangeRateUpdate = (resolver, data) => {
-        exchangeRateBottomSheetRef.current?.open(resolver, data);
-    };
-    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
-        routeId: routeId,
-        onAcceptExchangeRateUpdate,
-    });
-    useEffect(() => {
-        if (route && subvariant !== 'nft') {
-            const transactionType = route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-            return headerStoreContext
-                .getState()
-                .setTitle(status === RouteExecutionStatus.Idle
-                ? t(`button.review${transactionType}`)
-                : t(`header.${transactionType.toLowerCase()}`));
-        }
-    }, [headerStoreContext, route, status, subvariant, t]);
-    useEffect(() => {
-        if (status === RouteExecutionStatus.Idle) {
-            emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route);
-        }
-        // We want to emit event only when the page is mounted
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    if (!route) {
-        return null;
-    }
-    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(route);
-    const handleExecuteRoute = () => {
-        if (tokenValueBottomSheetRef.current?.isOpen()) {
-            emitter.emit(WidgetEvent.RouteHighValueLoss, {
-                fromAmountUsd: route.fromAmountUSD,
-                gasCostUSD: route.gasCostUSD,
-                toAmountUSD: route.toAmountUSD,
-                valueLoss: calcValueLoss(route),
-            });
-        }
-        tokenValueBottomSheetRef.current?.close();
-        executeRoute();
-        setValue(FormKey.FromAmount, '');
-        if (subvariant === 'nft') {
-            setValue(FormKey.FromToken, '');
-            setValue(FormKey.ToToken, '');
-        }
-    };
-    const handleStartClick = async () => {
-        if (status === RouteExecutionStatus.Idle) {
-            if (tokenValueLossThresholdExceeded && subvariant !== 'nft') {
-                tokenValueBottomSheetRef.current?.open();
-            }
-            else {
-                handleExecuteRoute();
-            }
-        }
-        if (status === RouteExecutionStatus.Failed) {
-            restartRoute();
-        }
-    };
-    const handleRemoveRoute = () => {
-        navigateBack();
-        deleteRoute();
-    };
-    const getButtonText = () => {
-        switch (status) {
-            case RouteExecutionStatus.Idle:
-                switch (subvariant) {
-                    case 'nft':
-                        return t('button.buyNow');
-                    case 'refuel':
-                        return t('button.startBridging');
-                    default:
-                        const transactionType = route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging';
-                        return t(`button.start${transactionType}`);
-                }
-            case RouteExecutionStatus.Failed:
-                return t('button.tryAgain');
-            default:
-                return '';
-        }
-    };
-    const insuredRoute = route.insurance?.state === 'INSURED';
-    const insurableRoute = insurance &&
-        subvariant !== 'refuel' &&
-        status === RouteExecutionStatus.Idle &&
-        route.insurance?.state === 'INSURABLE';
-    const insuranceAvailable = insuredRoute || insurableRoute;
-    const StartButton = insurableRoute
-        ? StartInsurableTransactionButton
-        : StartTransactionButton;
-    const getInsuranceCoverageId = () => route.steps[0].execution?.process
-        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
-        .find((process) => process.txHash)?.txHash ?? route.fromAddress;
-    return (_jsxs(Container, { children: [getStepList(route, subvariant), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
-                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasMessage, { mt: 2, route: route }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(StartButton, { text: getButtonText(), onClick: handleStartClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
-                                        minWidth: 48,
-                                        marginLeft: 1,
-                                    }, children: _jsx(DeleteIcon, {}) }) })) : null] })] })) : null, status ? _jsx(StatusBottomSheet, { status: status, route: route }) : null, tokenValueLossThresholdExceeded && subvariant !== 'nft' ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })] }));
-};

package/pages/TransactionPage/TransactionPage.style.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/material").ContainerOwnProps & 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" | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/TransactionPage/TransactionPage.style.js

@@ -1,5 +0,0 @@
-import { Container as MuiContainer } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const Container = styled(MuiContainer)(({ theme }) => ({
-    padding: theme.spacing(1, 3),
-}));

package/pages/TransactionPage/index.js

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

package/pages/TransactionPage/types.d.ts

@@ -1,6 +0,0 @@
-import type { Route } from '@lifi/sdk';
-import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton';
-export interface StartTransactionButtonProps extends BaseTransactionButtonProps {
-    route?: Route;
-    insurableRouteId: string;
-}

package/pages/TransactionPage/types.js

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

package/pages/TransactionPage/utils.d.ts

@@ -1,2 +0,0 @@
-import type { Route } from '@lifi/sdk';
-export declare const calcValueLoss: (route: Route) => string;

package/pages/TransactionPage/utils.js

@@ -1,6 +0,0 @@
-export const calcValueLoss = (route) => {
-    return `${((Number(route.toAmountUSD || 0) /
-        (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
-        1) *
-        100).toFixed(2)}%`;
-};

package/providers/FormProvider/FormProvider.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare const formDefaultValues: {
-    fromAmount: string;
-    toAddress: string;
-    tokenSearchFilter: string;
-    contractOutputsToken: string;
-    toContractAddress: string;
-    toContractCallData: string;
-    ToContractGasLimit: string;
-    toAmount: string;
-};
-export declare const FormProvider: React.FC<React.PropsWithChildren<{}>>;

package/providers/FormProvider/FormProvider.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { FormProvider as ReactHookFormProvider, useForm, } from 'react-hook-form';
-import { useWidgetConfig } from '../WidgetProvider';
-import { FormUpdater } from './FormUpdater';
-import { FormKey } from './types';
-export const formDefaultValues = {
-    [FormKey.FromAmount]: '',
-    [FormKey.ToAddress]: '',
-    [FormKey.TokenSearchFilter]: '',
-    [FormKey.ContractOutputsToken]: '',
-    [FormKey.ToContractAddress]: '',
-    [FormKey.ToContractCallData]: '',
-    [FormKey.ToContractGasLimit]: '',
-    [FormKey.ToAmount]: '',
-};
-export const FormProvider = ({ children, }) => {
-    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = useWidgetConfig();
-    const defaultValues = useMemo(() => ({
-        ...formDefaultValues,
-        fromChain,
-        fromToken,
-        fromAmount: (typeof fromAmount === 'number'
-            ? fromAmount?.toPrecision()
-            : fromAmount) || formDefaultValues.fromAmount,
-        toChain,
-        toToken,
-        toAddress: toAddress || formDefaultValues.toAddress,
-    }), [fromAmount, fromChain, fromToken, toAddress, toChain, toToken]);
-    const methods = useForm({
-        // values,
-        defaultValues,
-    });
-    return (_jsxs(ReactHookFormProvider, { ...methods, children: [_jsx(FormUpdater, { defaultValues: defaultValues }), children] }));
-};

package/providers/FormProvider/FormUpdater.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { FormValues } from '.';
-export declare const FormUpdater: React.FC<{
-    defaultValues: Partial<FormValues>;
-}>;

package/providers/FormProvider/FormUpdater.js

@@ -1,70 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { FormKey } from '.';
-import { useWallet } from '../WalletProvider';
-import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
-export const FormUpdater = ({ defaultValues }) => {
-    const { fromChain, toChain, chains } = useWidgetConfig();
-    const { account } = useWallet();
-    const { setValue, getValues, getFieldState, resetField, 
-    // Subscription to touchedFields is required by getFieldState to work
-    formState: { touchedFields }, } = useFormContext();
-    const previousDefaultValues = useRef(defaultValues);
-    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
-    useEffect(() => {
-        if (!account.isActive || !account.chainId) {
-            return;
-        }
-        const chainAllowed = isItemAllowed(account.chainId, chains);
-        if (!chainAllowed) {
-            return;
-        }
-        const { isTouched: isFromChainTouched } = getFieldState(FormKey.FromChain);
-        const { isTouched: isToChainTouched } = getFieldState(FormKey.ToChain);
-        const { isTouched: isFromTokenTouched } = getFieldState(FormKey.FromToken);
-        const { isTouched: isToTokenTouched } = getFieldState(FormKey.ToToken);
-        const { isTouched: isFromAmountTouched } = getFieldState(FormKey.FromAmount);
-        if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
-            resetField(FormKey.FromChain, { defaultValue: account.chainId });
-            setValue(FormKey.FromChain, account.chainId);
-            setValue(FormKey.FromToken, '');
-            if (isFromAmountTouched) {
-                setValue(FormKey.FromAmount, '');
-            }
-        }
-        if (!toChain && !isToChainTouched && !isToTokenTouched) {
-            resetField(FormKey.ToChain, { defaultValue: account.chainId });
-            setValue(FormKey.ToChain, account.chainId);
-            setValue(FormKey.ToToken, '');
-        }
-    }, [
-        account.chainId,
-        account.isActive,
-        chains,
-        fromChain,
-        getFieldState,
-        getValues,
-        resetField,
-        setValue,
-        toChain,
-    ]);
-    // Makes widget config options reactive to changes
-    // Acts similar to values property from useForm, but includes additional logic for chains
-    useEffect(() => {
-        Object.keys(defaultValues).forEach((key) => {
-            if (previousDefaultValues.current[key] !== defaultValues[key]) {
-                const value = defaultValues[key] ||
-                    // set the chain to the current user one if it is not present in the config
-                    (key === FormKey.FromChain || key === FormKey.ToChain
-                        ? account.chainId || ''
-                        : '');
-                setValue(key, value);
-                resetField(key, { defaultValue: value });
-            }
-        });
-        previousDefaultValues.current = defaultValues;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValues, getValues, resetField, setValue]);
-    return null;
-};

package/providers/FormProvider/URLSearchParamsBuilder.d.ts

@@ -1 +0,0 @@
-export declare const URLSearchParamsBuilder: () => null;

package/providers/FormProvider/URLSearchParamsBuilder.js

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-import { useFormState, useWatch } from 'react-hook-form';
-import { useLocation } from 'react-router-dom';
-import { FormKey } from './types';
-const formValueKeys = [
-    FormKey.FromAmount,
-    FormKey.FromChain,
-    FormKey.FromToken,
-    FormKey.ToAddress,
-    FormKey.ToChain,
-    FormKey.ToToken,
-];
-export const URLSearchParamsBuilder = () => {
-    const { pathname } = useLocation();
-    const { 
-    // Have to use touchedFields, because default values are not considered dirty
-    touchedFields: { ...touchedFields }, } = useFormState();
-    const values = useWatch({ name: formValueKeys });
-    useEffect(() => {
-        const url = new URL(window.location);
-        formValueKeys.forEach((key, index) => {
-            if (touchedFields[key] && values[index]) {
-                url.searchParams.set(key, values[index]);
-            }
-            else if (url.searchParams.has(key) && !values[index]) {
-                url.searchParams.delete(key);
-            }
-        });
-        url.searchParams.sort();
-        window.history.replaceState(window.history.state, '', url);
-    }, [pathname, touchedFields, values]);
-    return null;
-};

package/providers/FormProvider/index.js

@@ -1,3 +0,0 @@
-export * from './FormProvider';
-export * from './URLSearchParamsBuilder';
-export * from './types';

package/providers/FormProvider/types.d.ts

@@ -1,37 +0,0 @@
-export declare enum FormKey {
-    ContractOutputsToken = "contractOutputsToken",
-    FromAmount = "fromAmount",
-    FromChain = "fromChain",
-    FromToken = "fromToken",
-    ToAddress = "toAddress",
-    ToAmount = "toAmount",
-    ToChain = "toChain",
-    ToContractAddress = "toContractAddress",
-    ToContractCallData = "toContractCallData",
-    ToContractGasLimit = "ToContractGasLimit",
-    ToToken = "toToken",
-    TokenSearchFilter = "tokenSearchFilter"
-}
-export type FormValues = {
-    [FormKey.ContractOutputsToken]: string;
-    [FormKey.FromAmount]: string;
-    [FormKey.FromChain]: number;
-    [FormKey.FromToken]: string;
-    [FormKey.ToAddress]: string;
-    [FormKey.ToAmount]: string;
-    [FormKey.ToChain]: number;
-    [FormKey.ToContractAddress]: string;
-    [FormKey.ToContractCallData]: string;
-    [FormKey.ToContractGasLimit]: string;
-    [FormKey.ToToken]: string;
-    [FormKey.TokenSearchFilter]: string;
-};
-export type FormType = 'from' | 'to';
-export declare const FormKeyHelper: {
-    getChainKey: (formType: FormType) => 'fromChain' | 'toChain';
-    getTokenKey: (formType: FormType) => 'fromToken' | 'toToken';
-    getAmountKey: (formType: FormType) => 'fromAmount' | 'toAmount';
-};
-export interface FormTypeProps {
-    formType: FormType;
-}