@lifi/widget 2.0.0-beta.9 → 2.0.0

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DeleteIcon from '@mui/icons-material/DeleteOutline';
-import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, } from '@mui/material';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Dialog } from '../../components/Dialog';
-import { useHeaderActionStore } from '../../components/Header';
-import { useWallet } from '../../providers';
-import { useRouteExecutionStore } from '../../stores';
-import { useSwapHistory } from '../../stores/routes';
-import { SwapHistoryEmpty } from './SwapHistoryEmpty';
-import { SwapHistoryItem } from './SwapHistoryItem';
-export const SwapHistoryPage = () => {
-    const { t } = useTranslation();
-    const { account } = useWallet();
-    const swaps = useSwapHistory(account.address);
-    const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
-    const [open, setOpen] = useState(false);
-    const toggleDialog = useCallback(() => {
-        setOpen((open) => !open);
-    }, []);
-    useEffect(() => {
-        if (swaps.length) {
-            return useHeaderActionStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
-        }
-    }, [swaps.length, toggleDialog]);
-    if (!swaps.length) {
-        return _jsx(SwapHistoryEmpty, {});
-    }
-    return (_jsxs(Container, { children: [_jsx(Stack, { spacing: 2, mt: 1, children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true, children: t('button.delete') })] })] })] }));
-};

package/pages/SwapHistoryPage/index.d.ts

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

package/pages/SwapHistoryPage/index.js

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

package/pages/SwapPage/StartSwapButton.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { StartSwapButtonProps } from './types';
-export declare const StartSwapButton: React.FC<StartSwapButtonProps>;
-export declare const StartIdleSwapButton: React.FC<StartSwapButtonProps>;

package/pages/SwapPage/StartSwapButton.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SwapButton } from '../../components/SwapButton';
-import { useFundsSufficiency, useGasSufficiency, useSwapRoutes, } from '../../hooks';
-import { useRouteExecutionStore } from '../../stores';
-export const StartSwapButton = ({ onClick, route, text, loading, }) => {
-    const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
-    const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = useFundsSufficiency(route);
-    return (_jsx(SwapButton, { onClick: onClick, text: text, hasRoute: Boolean(route), disabled: insufficientFunds || !!insufficientGas?.length, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
-};
-export const StartIdleSwapButton = ({ onClick, route, text, loading, disabled, insurableRouteId, }) => {
-    const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
-    const { isFetching } = useSwapRoutes({
-        insurableRoute: routeExecution?.route,
-    });
-    return (_jsx(StartSwapButton, { onClick: onClick, text: text, route: route, disabled: disabled, loading: loading || isFetching, insurableRouteId: insurableRouteId }));
-};

package/pages/SwapPage/SwapPage.d.ts

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

package/pages/SwapPage/SwapPage.js

@@ -1,95 +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 { useCallback, 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 } from '../../hooks';
-import { SwapFormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus } from '../../stores';
-import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
-import { StartIdleSwapButton, StartSwapButton } from './StartSwapButton';
-import { StatusBottomSheet } from './StatusBottomSheet';
-import { Container } from './SwapPage.style';
-import { TokenValueBottomSheet, getTokenValueLossThreshold, } from './TokenValueBottomSheet';
-export const SwapPage = () => {
-    const { t } = useTranslation();
-    const { setValue } = useFormContext();
-    const { navigateBack } = useNavigateBack();
-    const { variant, insurance } = useWidgetConfig();
-    const { state } = useLocation();
-    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,
-    });
-    const handleExecuteRoute = useCallback(() => {
-        if (tokenValueBottomSheetRef.current?.isOpen()) {
-            tokenValueBottomSheetRef.current?.close();
-        }
-        executeRoute();
-        setValue(SwapFormKey.FromAmount, '');
-    }, [executeRoute, setValue]);
-    const handleSwapClick = async () => {
-        if (status === RouteExecutionStatus.Idle) {
-            const thresholdExceeded = getTokenValueLossThreshold(route);
-            if (thresholdExceeded && variant !== 'nft') {
-                tokenValueBottomSheetRef.current?.open();
-            }
-            else {
-                handleExecuteRoute();
-            }
-        }
-        if (status === RouteExecutionStatus.Failed) {
-            restartRoute();
-        }
-    };
-    const handleRemoveRoute = () => {
-        navigateBack();
-        deleteRoute();
-    };
-    const getSwapButtonText = () => {
-        switch (status) {
-            case RouteExecutionStatus.Idle:
-                switch (variant) {
-                    case 'nft':
-                        return t('button.buyNow');
-                    case 'refuel':
-                        return t('button.startGasSwap');
-                    default:
-                        return t('button.startSwap');
-                }
-            case RouteExecutionStatus.Failed:
-                return t('button.tryAgain');
-            default:
-                return '';
-        }
-    };
-    const SwapButton = insurance && status === RouteExecutionStatus.Idle
-        ? StartIdleSwapButton
-        : StartSwapButton;
-    const insuranceAvailable = insurance &&
-        variant !== 'refuel' &&
-        (route?.insurance?.state === 'INSURED' ||
-            (status === RouteExecutionStatus.Idle &&
-                route?.insurance?.state === 'INSURABLE'));
-    const insuranceCoverageId = route?.steps[0].execution?.process
-        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
-        .find((process) => process.txHash)?.txHash ?? route?.fromAddress;
-    return (_jsxs(Container, { children: [getStepList(route), variant === 'nft' ? _jsx(ContractComponent, { mt: 2 }) : null, insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, insuranceCoverageId: insuranceCoverageId, 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(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
-                                        minWidth: 48,
-                                        marginLeft: 1,
-                                    }, children: _jsx(DeleteIcon, {}) }) })) : null] })] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route && variant !== 'nft' ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? (_jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));
-};

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -1,39 +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 Big from 'big.js';
-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';
-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('swap.warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('swap.swapping') }), _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('swap.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('swap.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('swap.valueLoss') }), _jsxs(Typography, { fontWeight: 600, children: [Big(route.toAmountUSD || 0)
-                                .div(Big(route.fromAmountUSD || 0).plus(Big(route.gasCostUSD || 0)))
-                                .minus(1)
-                                .mul(100)
-                                .round(2, Big.roundUp)
-                                .toString(), "%"] })] }), _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 = Big(route?.fromAmountUSD || 0);
-    const toAmountUSD = Big(route?.toAmountUSD || 0);
-    const gasCostUSD = Big(route?.gasCostUSD || 0);
-    if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
-        return false;
-    }
-    return toAmountUSD.div(fromAmountUSD.plus(gasCostUSD)).lt(0.9);
-};

package/pages/SwapPage/index.d.ts

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

package/pages/SwapPage/index.js

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

package/pages/SwapPage/types.d.ts

@@ -1,9 +0,0 @@
-import type { Route } from '@lifi/sdk';
-export interface StartSwapButtonProps {
-    onClick?(): void;
-    route?: Route;
-    text?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    insurableRouteId: string;
-}

package/pages/SwapRoutesPage/SwapRoutesPage.d.ts

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

package/pages/SwapRoutesPage/index.d.ts

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

package/pages/SwapRoutesPage/index.js

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

package/providers/SwapFormProvider/FormUpdater.d.ts

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

package/providers/SwapFormProvider/types.d.ts

@@ -1,37 +0,0 @@
-export declare enum SwapFormKey {
-    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 SwapFormValues = {
-    [SwapFormKey.ContractOutputsToken]: string;
-    [SwapFormKey.FromAmount]: string;
-    [SwapFormKey.FromChain]: number;
-    [SwapFormKey.FromToken]: string;
-    [SwapFormKey.ToAddress]: string;
-    [SwapFormKey.ToAmount]: string;
-    [SwapFormKey.ToChain]: number;
-    [SwapFormKey.ToContractAddress]: string;
-    [SwapFormKey.ToContractCallData]: string;
-    [SwapFormKey.ToContractGasLimit]: string;
-    [SwapFormKey.ToToken]: string;
-    [SwapFormKey.TokenSearchFilter]: string;
-};
-export type SwapFormType = 'from' | 'to';
-export declare const SwapFormKeyHelper: {
-    getChainKey: (formType: SwapFormType) => 'fromChain' | 'toChain';
-    getTokenKey: (formType: SwapFormType) => 'fromToken' | 'toToken';
-    getAmountKey: (formType: SwapFormType) => 'fromAmount' | 'toAmount';
-};
-export interface SwapFormTypeProps {
-    formType: SwapFormType;
-}

package/providers/SwapFormProvider/types.js

@@ -1,20 +0,0 @@
-export var SwapFormKey;
-(function (SwapFormKey) {
-    SwapFormKey["ContractOutputsToken"] = "contractOutputsToken";
-    SwapFormKey["FromAmount"] = "fromAmount";
-    SwapFormKey["FromChain"] = "fromChain";
-    SwapFormKey["FromToken"] = "fromToken";
-    SwapFormKey["ToAddress"] = "toAddress";
-    SwapFormKey["ToAmount"] = "toAmount";
-    SwapFormKey["ToChain"] = "toChain";
-    SwapFormKey["ToContractAddress"] = "toContractAddress";
-    SwapFormKey["ToContractCallData"] = "toContractCallData";
-    SwapFormKey["ToContractGasLimit"] = "ToContractGasLimit";
-    SwapFormKey["ToToken"] = "toToken";
-    SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
-})(SwapFormKey || (SwapFormKey = {}));
-export const SwapFormKeyHelper = {
-    getChainKey: (formType) => `${formType}Chain`,
-    getTokenKey: (formType) => `${formType}Token`,
-    getAmountKey: (formType) => `${formType}Amount`,
-};

package/stores/routes/useSwapHistory.d.ts

@@ -1,2 +0,0 @@
-import type { RouteExecution } from './types';
-export declare const useSwapHistory: (address?: string) => RouteExecution[];