feat: add delete active swaps button

lifinance · Oct 3, 2022 · 3365ed8 · 3365ed8
1 parent 6f09075
commit 3365ed8
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 47 deletions.
diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -60,12 +60,7 @@ export const NavigationHeader: React.FC = () => {
   return (
     <HeaderAppBar elevation={0}>
       {backButtonRoutes.includes(path) ? (
-        <IconButton
-          size="medium"
-          aria-label="settings"
-          edge="start"
-          onClick={navigateBack}
-        >
+        <IconButton size="medium" edge="start" onClick={navigateBack}>
           <ArrowBackIcon />
         </IconButton>
       ) : null}
@@ -86,7 +81,6 @@ export const NavigationHeader: React.FC = () => {
               {account.isActive ? (
                 <IconButton
                   size="medium"
-                  aria-label="swap-history"
                   edge="start"
                   onClick={() => navigate(navigationRoutes.swapHistory)}
                 >
@@ -95,7 +89,6 @@ export const NavigationHeader: React.FC = () => {
               ) : null}
               <IconButton
                 size="medium"
-                aria-label="settings"
                 edge="end"
                 onClick={() => navigate(navigationRoutes.settings)}
               >

diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx
@@ -33,12 +33,7 @@ export const WalletHeader: React.FC = () => {
               {walletAddress}
             </Typography>
           </Box>
-          <IconButton
-            size="medium"
-            aria-label="disconnect"
-            edge="end"
-            onClick={disconnect}
-          >
+          <IconButton size="medium" edge="end" onClick={disconnect}>
             <LogoutIcon />
           </IconButton>
         </>
@@ -75,7 +70,6 @@ const ConnectButton = () => {
   return (
     <IconButton
       size="medium"
-      aria-label="disconnect"
       edge="end"
       onClick={
         !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined

diff --git a/packages/widget/src/components/ReverseTokensButton/ReverseTokensButton.tsx b/packages/widget/src/components/ReverseTokensButton/ReverseTokensButton.tsx
@@ -24,11 +24,7 @@ export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
     setValue(SwapFormKey.ToToken, fromToken);
   };
   return (
-    <IconButton
-      onClick={handleClick}
-      size="small"
-      aria-label="swap-destinations"
-    >
+    <IconButton onClick={handleClick} size="small">
       {vertical ? <SwapVertIcon /> : <SwapHorizIcon />}
     </IconButton>
   );

diff --git a/packages/widget/src/components/Step/StepProcess.tsx b/packages/widget/src/components/Step/StepProcess.tsx
@@ -33,7 +33,6 @@ export const StepProcess: React.FC<{
           >
             <LinkButton
               size="small"
-              aria-label="settings"
               edge="end"
               LinkComponent={Link}
               href={process.txLink}

diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -98,12 +98,14 @@
       "title": {
         "insufficientGas": "Insufficient gas",
         "deleteSwap": "Delete this swap?",
-        "deleteSwapHistory": "Delete swap history?"
+        "deleteSwapHistory": "Delete swap history?",
+        "deleteActiveSwaps": "Delete all active swaps?"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
         "insufficientGas": "You need to add at least:",
-        "deleteSwap": "Swap history is only stored locally and can't be recovered if you delete it."
+        "deleteSwapHistory": "Swap history is only stored locally and can't be recovered if you delete it.",
+        "deleteActiveSwaps": "Active swaps are only stored locally and can't be recovered if you delete them."
       }
     },
     "error": {

diff --git a/packages/widget/src/pages/ActiveSwapsPage/ActiveSwapsPage.tsx b/packages/widget/src/pages/ActiveSwapsPage/ActiveSwapsPage.tsx
@@ -1,12 +1,45 @@
-import { Container, List } from '@mui/material';
+/* eslint-disable consistent-return */
+import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
+import {
+  Button,
+  Container,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  List,
+} from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ActiveSwapItem } from '../../components/ActiveSwaps';
+import { Dialog } from '../../components/Dialog';
+import { useHeaderActionStore } from '../../components/Header';
 import { useWallet } from '../../providers';
-import { useExecutingRoutesIds } from '../../stores';
+import { useExecutingRoutesIds, useRouteExecutionStore } from '../../stores';
 import { ActiveSwapsEmpty } from './ActiveSwapsEmpty';
 
 export const ActiveSwapsPage = () => {
+  const { t } = useTranslation();
   const { account } = useWallet();
   const executingRoutes = useExecutingRoutesIds(account.address);
+  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+  const [open, setOpen] = useState(false);
+
+  const toggleDialog = useCallback(() => {
+    setOpen((open) => !open);
+  }, []);
+
+  useEffect(() => {
+    if (executingRoutes.length) {
+      return useHeaderActionStore.getState().setAction(
+        <IconButton size="medium" edge="end" onClick={toggleDialog}>
+          <DeleteIcon />
+        </IconButton>,
+      );
+    }
+  }, [executingRoutes.length, toggleDialog]);
+
   if (!executingRoutes.length) {
     return <ActiveSwapsEmpty />;
   }
@@ -23,6 +56,20 @@ export const ActiveSwapsPage = () => {
           <ActiveSwapItem key={routeId} routeId={routeId} />
         ))}
       </List>
+      <Dialog open={open} onClose={toggleDialog}>
+        <DialogTitle>{t('swap.warning.title.deleteActiveSwaps')}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {t('swap.warning.message.deleteActiveSwaps')}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
+          <Button onClick={() => deleteRoutes('active')} autoFocus>
+            {t('button.delete')}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Container>
   );
 };
diff --git a/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx b/packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx
@@ -52,12 +52,7 @@ export const SwapDetailsPage: React.FC = () => {
 
   useEffect(() => {
     return useHeaderActionStore.getState().setAction(
-      <IconButton
-        size="medium"
-        aria-label="settings"
-        edge="end"
-        onClick={toggleDialog}
-      >
+      <IconButton size="medium" edge="end" onClick={toggleDialog}>
         <DeleteIcon />
       </IconButton>,
     );
@@ -120,11 +115,7 @@ export const SwapDetailsPage: React.FC = () => {
         >
           <CardTitle flex={1}>{t('swap.supportId')}</CardTitle>
           <Box mr={1} mt={1}>
-            <IconButton
-              size="medium"
-              aria-label="settings"
-              onClick={copyRouteId}
-            >
+            <IconButton size="medium" onClick={copyRouteId}>
               <ContentCopyIcon fontSize="small" />
             </IconButton>
           </Box>

diff --git a/packages/widget/src/pages/SwapHistoryPage/SwapHistoryPage.tsx b/packages/widget/src/pages/SwapHistoryPage/SwapHistoryPage.tsx
@@ -34,12 +34,7 @@ export const SwapHistoryPage: React.FC = () => {
   useEffect(() => {
     if (swaps.length) {
       return useHeaderActionStore.getState().setAction(
-        <IconButton
-          size="medium"
-          aria-label="settings"
-          edge="end"
-          onClick={toggleDialog}
-        >
+        <IconButton size="medium" edge="end" onClick={toggleDialog}>
           <DeleteIcon />
         </IconButton>,
       );
@@ -65,12 +60,12 @@ export const SwapHistoryPage: React.FC = () => {
         <DialogTitle>{t('swap.warning.title.deleteSwapHistory')}</DialogTitle>
         <DialogContent>
           <DialogContentText>
-            {t('swap.warning.message.deleteSwap')}
+            {t('swap.warning.message.deleteSwapHistory')}
           </DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
-          <Button onClick={deleteRoutes} autoFocus>
+          <Button onClick={() => deleteRoutes('completed')} autoFocus>
             {t('button.delete')}
           </Button>
         </DialogActions>

diff --git a/packages/widget/src/stores/routes/types.ts b/packages/widget/src/stores/routes/types.ts
@@ -6,7 +6,7 @@ export interface RouteExecutionStore {
   updateRoute: (route: Route) => void;
   restartRoute: (routeId: string) => void;
   deleteRoute: (routeId: string) => void;
-  deleteRoutes: () => void;
+  deleteRoutes: (type: 'completed' | 'active') => void;
 }
 
 export type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';

diff --git a/packages/widget/src/stores/routes/useRouteExecutionStore.ts b/packages/widget/src/stores/routes/useRouteExecutionStore.ts
@@ -52,9 +52,15 @@ export const useRouteExecutionStore = create<RouteExecutionStore>()(
             delete state.routes[routeId];
           }
         }),
-      deleteRoutes: () =>
+      deleteRoutes: (type) =>
         set((state: RouteExecutionStore) => {
-          state.routes = {};
+          Object.keys(state.routes)
+            .filter((routeId) =>
+              type === 'completed'
+                ? state.routes[routeId]?.status === 'success'
+                : state.routes[routeId]?.status !== 'success',
+            )
+            .forEach((routeId) => delete state.routes[routeId]);
         }),
     })),
     {