@lifi/widget 2.0.0 → 2.1.0

package/pages/TransactionDetailsPage/ContactSupportButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useWidgetEvents } from '../../hooks/';
+import { WidgetEvent } from '../../types/events';
+export const ContactSupportButton = ({ supportId, }) => {
+    const { t } = useTranslation();
+    const widgetEvents = useWidgetEvents();
+    const handleClick = () => {
+        if (!widgetEvents.all.has(WidgetEvent.RouteContactSupport)) {
+            const url = 'https://discord.gg/lifi';
+            const target = '_blank';
+            const rel = 'nofollow noreferrer';
+            window.open(url, target, rel);
+        }
+        else {
+            widgetEvents.emit(WidgetEvent.RouteContactSupport, { supportId });
+        }
+    };
+    return (_jsx(Button, { onClick: handleClick, fullWidth: true, children: t('button.contactSupport') }));
+};

package/pages/TransactionDetailsPage/TransactionDetailsPage.js

@@ -9,13 +9,13 @@ import { shallow } from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { ContractComponent } from '../../components/ContractComponent';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderStore } from '../../components/Header';
 import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
 import { useNavigateBack } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { useRouteExecutionStore } from '../../stores';
+import { useHeaderStoreContext, useRouteExecutionStore } from '../../stores';
 import { formatTokenAmount } from '../../utils';
+import { ContactSupportButton } from './ContactSupportButton';
 import { Container } from './TransactionDetailsPage.style';
 export const TransactionDetailsPage = () => {
     const { t, i18n } = useTranslation();
@@ -23,6 +23,7 @@ export const TransactionDetailsPage = () => {
     const { subvariant, contractComponent, contractSecondaryComponent } = useWidgetConfig();
     const { state } = useLocation();
     const [routeExecution, deleteRoute] = useRouteExecutionStore((store) => [store.routes[state?.routeId], store.deleteRoute], shallow);
+    const headerStoreContext = useHeaderStoreContext();
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
         setOpen((open) => !open);
@@ -45,8 +46,8 @@ export const TransactionDetailsPage = () => {
         await navigator.clipboard.writeText(supportId);
     };
     useEffect(() => {
-        return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
-    }, [toggleDialog]);
+        return headerStoreContext.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+    }, [headerStoreContext, toggleDialog]);
     const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
     return (_jsxs(Container, { children: [_jsxs(Box, { sx: {
                     display: 'flex',
@@ -54,8 +55,8 @@ export const TransactionDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), getStepList(routeExecution?.route), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
+                        }).format(startedAt) })] }), getStepList(routeExecution?.route, subvariant), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [_jsx(CardTitle, { flex: 1, children: t('main.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.deleteTransaction') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [_jsx(CardTitle, { flex: 1, children: t('main.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, children: _jsx(ContactSupportButton, { supportId: supportId }) }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.deleteTransaction') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };

package/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -4,9 +4,8 @@ import { Button, Container, DialogActions, DialogContent, DialogContentText, Dia
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
-import { useHeaderStore } from '../../components/Header';
 import { useWallet } from '../../providers';
-import { useRouteExecutionStore } from '../../stores';
+import { useHeaderStoreContext, useRouteExecutionStore } from '../../stores';
 import { useTransactionHistory } from '../../stores/routes';
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty';
 import { TransactionHistoryItem } from './TransactionHistoryItem';
@@ -14,6 +13,7 @@ export const TransactionHistoryPage = () => {
     const { t } = useTranslation();
     const { account } = useWallet();
     const transactions = useTransactionHistory(account.address);
+    const headerStoreContext = useHeaderStoreContext();
     const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
@@ -21,9 +21,9 @@ export const TransactionHistoryPage = () => {
     }, []);
     useEffect(() => {
         if (transactions.length) {
-            return useHeaderStore.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
+            return headerStoreContext.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: _jsx(DeleteIcon, {}) }));
         }
-    }, [transactions.length, toggleDialog]);
+    }, [transactions.length, toggleDialog, headerStoreContext]);
     if (!transactions.length) {
         return _jsx(TransactionHistoryEmpty, {});
     }

package/pages/TransactionPage/ExchangeRateBottomSheet.js

@@ -44,12 +44,13 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = useTranslation();
     const ref = useRef();
     useSetContentHeight(ref);
+    const oldAmount = Big(data?.oldToAmount || 1);
     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.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('main.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.oldToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.currentAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: formatTokenAmount(data?.newToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.rateChange') }), _jsxs(Typography, { fontWeight: 600, children: [Big(data?.newToAmount || 0)
-                                .div(Big(data?.oldToAmount || 0))
+                                .div(oldAmount.eq(0) ? Big(1) : oldAmount)
                                 .minus(1)
                                 .mul(100)
                                 .round(2, Big.roundUp)

package/pages/TransactionPage/StatusBottomSheet.style.js

@@ -10,7 +10,11 @@ const getStatusColor = (status, theme) => {
         case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
         case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
         case 'warning':
-            return { color: theme.palette.warning.main, alpha: 0.48, darken: 0.32 };
+            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 };
     }

package/pages/TransactionPage/TransactionPage.js

@@ -7,12 +7,11 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { ContractComponent } from '../../components/ContractComponent';
 import { GasMessage } from '../../components/GasMessage';
-import { useHeaderStore } from '../../components/Header';
 import { Insurance } from '../../components/Insurance';
 import { getStepList } from '../../components/Step';
 import { useNavigateBack, useRouteExecution, useWidgetEvents, } from '../../hooks';
 import { FormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus } from '../../stores';
+import { RouteExecutionStatus, useHeaderStoreContext } from '../../stores';
 import { WidgetEvent } from '../../types/events';
 import { formatTokenAmount } from '../../utils';
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
@@ -28,6 +27,7 @@ export const TransactionPage = () => {
     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);
@@ -42,13 +42,13 @@ export const TransactionPage = () => {
     useEffect(() => {
         if (route && subvariant !== 'nft') {
             const transactionType = route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-            return useHeaderStore
+            return headerStoreContext
                 .getState()
                 .setTitle(status === RouteExecutionStatus.Idle
                 ? t(`button.review${transactionType}`)
                 : t(`header.${transactionType.toLowerCase()}`));
         }
-    }, [route, status, subvariant, t]);
+    }, [headerStoreContext, route, status, subvariant, t]);
     if (!route) {
         return null;
     }
@@ -65,6 +65,10 @@ export const TransactionPage = () => {
         tokenValueBottomSheetRef.current?.close();
         executeRoute();
         setValue(FormKey.FromAmount, '');
+        if (subvariant === 'nft') {
+            setValue(FormKey.FromToken, '');
+            setValue(FormKey.ToToken, '');
+        }
     };
     const handleStartClick = async () => {
         if (status === RouteExecutionStatus.Idle) {
@@ -113,7 +117,7 @@ export const TransactionPage = () => {
     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 === '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 ||
+    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,

package/stores/StoreProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { HeaderStoreProvider } from './header';
 import { RouteExecutionStoreProvider } from './routes';
 import { SplitSubvariantStoreProvider } from './settings';
 export const StoreProvider = ({ children, config, }) => {
-    return (_jsx(SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: _jsx(RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }));
+    return (_jsx(SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: _jsx(HeaderStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: _jsx(RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }) }));
 };

package/stores/header/index.d.ts

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

package/stores/header/index.js

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

package/{components/Header → stores/header}/types.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-export interface HeaderState {
+import type { StoreApi, UseBoundStore } from 'zustand';
+export type HeaderStore = UseBoundStore<StoreApi<HeaderState>>;
+export interface HeaderStateBase {
     element?: React.ReactNode | null;
     title?: string;
 }
-export interface HeaderStore extends HeaderState {
+export interface HeaderState extends HeaderStateBase {
     setAction(element?: React.ReactNode | null): () => void;
     setTitle(title?: string): () => void;
     removeAction(): void;

package/stores/header/useHeaderStore.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PersistStoreProps, PersistStoreProviderProps } from '../types';
+import type { HeaderState, HeaderStore } from './types';
+export declare const HeaderStoreContext: import("react").Context<HeaderStore | null>;
+export declare function HeaderStoreProvider({ children, ...props }: PersistStoreProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useHeaderStore<T>(selector: (state: HeaderState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useHeaderStoreContext(): HeaderStore;
+export declare const createHeaderStore: ({ namePrefix }: PersistStoreProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<HeaderState>>;

package/stores/header/useHeaderStore.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from 'react';
+import { create } from 'zustand';
+export const HeaderStoreContext = createContext(null);
+export function HeaderStoreProvider({ children, ...props }) {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createHeaderStore(props);
+    }
+    return (_jsx(HeaderStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+export function useHeaderStore(selector, equalityFn) {
+    const useStore = useContext(HeaderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${HeaderStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+export function useHeaderStoreContext() {
+    const useStore = useContext(HeaderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${HeaderStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+export const createHeaderStore = ({ namePrefix }) => create((set, get) => ({
+    setAction: (element) => {
+        set(() => ({
+            element,
+        }));
+        return get().removeAction;
+    },
+    setTitle: (title) => {
+        set(() => ({
+            title,
+        }));
+        return get().removeTitle;
+    },
+    removeAction: () => {
+        set(() => ({
+            element: null,
+        }));
+    },
+    removeTitle: () => {
+        set(() => ({
+            title: undefined,
+        }));
+    },
+}));

package/stores/index.d.ts

@@ -1,4 +1,5 @@
+export * from './StoreProvider';
 export * from './chains';
+export * from './header';
 export * from './routes';
 export * from './settings';
-export * from './StoreProvider';

package/stores/index.js

@@ -1,4 +1,5 @@
+export * from './StoreProvider';
 export * from './chains';
+export * from './header';
 export * from './routes';
 export * from './settings';
-export * from './StoreProvider';

package/stores/routes/utils.d.ts

@@ -4,4 +4,5 @@ export declare const isRoutePartiallyDone: (route: Route) => boolean;
 export declare const isRouteRefunded: (route: Route) => boolean;
 export declare const isRouteFailed: (route: Route) => boolean;
 export declare const isRouteActive: (route?: Route) => boolean;
+export declare const doesRouteHaveCustomTool: (route: Route) => boolean;
 export declare const getUpdatedProcess: (currentRoute: Route, updatedRoute: Route) => Process | undefined;

package/stores/routes/utils.js

@@ -20,6 +20,9 @@ export const isRouteActive = (route) => {
     const alreadyStarted = route.steps.some((step) => step.execution);
     return !isDone && !isFailed && alreadyStarted;
 };
+export const doesRouteHaveCustomTool = (route) => {
+    return route.steps.some((step) => step.tool === 'custom' || step.toolDetails.key === 'custom');
+};
 export const getUpdatedProcess = (currentRoute, updatedRoute) => {
     const processDiff = microdiff(currentRoute, updatedRoute).find((diff) => diff.path.includes('process'));
     if (!processDiff) {