@lifi/widget 1.11.4 → 1.12.0

package/components/NotFound.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Block as BlockIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const NotFound = () => {
@@ -10,5 +11,5 @@ export const NotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: t('tooltip.notFound.title') })), _jsx(Typography, { children: t('tooltip.notFound.text') })] })));
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(BlockIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('tooltip.notFound.title') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('tooltip.notFound.text') }))] })));
 };

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.11.4";
+export declare const version = "1.12.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.11.4';
+export const version = '1.12.0';

package/i18n/en/translation.json

@@ -90,7 +90,8 @@
     "warning": {
       "title": {
         "insufficientGas": "Insufficient gas",
-        "deleteSwap": "Delete this swap?"
+        "deleteSwap": "Delete this swap?",
+        "deleteSwapHistory": "Delete swap history?"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
@@ -164,7 +165,7 @@
   },
   "tooltip": {
     "notFound": {
-      "title": "Sorry 🥲",
+      "title": "404",
       "text": "We couldn't find this page."
     },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."

package/i18n/index.d.ts

@@ -94,6 +94,7 @@ export declare const resources: {
                     title: {
                         insufficientGas: string;
                         deleteSwap: string;
+                        deleteSwapHistory: string;
                     };
                     message: {
                         insufficientFunds: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.11.4",
+  "version": "1.12.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -46,9 +46,9 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.92",
     "@mui/material": "^5.9.2",
-    "@sentry/integrations": "^7.7.0",
-    "@sentry/react": "^7.7.0",
-    "@sentry/tracing": "^7.7.0",
+    "@sentry/integrations": "^7.8.0",
+    "@sentry/react": "^7.8.0",
+    "@sentry/tracing": "^7.8.0",
     "@tanstack/react-query": "^4.0.10",
     "big.js": "^6.2.1",
     "i18next": "^21.8.14",
@@ -56,7 +56,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
-    "react-i18next": "^11.18.1",
+    "react-i18next": "^11.18.3",
     "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -1,14 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container, Stack } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
+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 { useSetHeaderAction } from '../../components/Header';
 import { useWallet } from '../../providers/WalletProvider';
+import { useRouteStore } from '../../stores';
 import { useSwapHistory } from '../../stores/route';
 import { SwapHistoryEmpty } from './SwapHistoryEmpty';
 import { SwapHistoryItem } from './SwapHistoryItem';
 export const SwapHistoryPage = () => {
+    const { t } = useTranslation();
     const { account } = useWallet();
     const swaps = useSwapHistory(account.address);
+    const deleteRoutes = useRouteStore((store) => store.deleteRoutes);
+    const setHeaderAction = useSetHeaderAction();
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    useEffect(() => {
+        return setHeaderAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+    }, [setHeaderAction, toggleDialog]);
     if (!swaps.length) {
         return _jsx(SwapHistoryEmpty, {});
     }
-    return (_jsx(Container, { children: _jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })) }));
+    return (_jsxs(Container, { children: [_jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ onClick: deleteRoutes, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };

package/stores/route/types.d.ts

@@ -5,6 +5,7 @@ export interface RouteExecutionStore {
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
+    deleteRoutes: () => void;
 }
 export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
 export interface RouteExecution {

package/stores/route/useRouteStore.js

@@ -54,6 +54,9 @@ export const useRouteStore = create()(persist(immer((set) => ({
             delete state.routes[routeId];
         }
     }),
+    deleteRoutes: () => set((state) => {
+        state.routes = {};
+    }),
 })), {
     name: 'li.fi-widget-routes',
     partialize: (state) => ({ routes: state.routes }),