From 9c3be1e9e2dba70bbeb9f530e3a520eb48ee11a7 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Wed, 16 Nov 2022 12:58:23 +0000
Subject: [PATCH] feat: add swap partially successful message

---
 packages/widget-embedded/src/config.ts        |  10 +-
 .../components/ActiveSwaps/ActiveSwapItem.tsx |   3 +-
 .../src/components/SwapInput/SwapInput.tsx    |   3 -
 .../widget/src/hooks/useGasSufficiency.ts     |   4 +-
 .../widget/src/hooks/useRouteExecution.ts     |   4 +-
 packages/widget/src/i18n/en.json              |   4 +-
 .../SwapPage/StatusBottomSheet.style.tsx      |  14 ++-
 .../src/pages/SwapPage/StatusBottomSheet.tsx  | 119 ++++++++++++++----
 .../widget/src/pages/SwapPage/SwapPage.tsx    |  16 +--
 packages/widget/src/stores/routes/types.ts    |  14 ++-
 .../stores/routes/useExecutingRoutesIds.ts    |   4 +-
 .../stores/routes/useRouteExecutionStore.ts   |  78 +++++++++---
 .../src/stores/routes/useSwapHistory.ts       |   5 +-
 packages/widget/src/stores/routes/utils.ts    |  16 ++-
 packages/widget/src/utils/enum.ts             |   2 +
 packages/widget/src/utils/index.ts            |   1 +
 16 files changed, 221 insertions(+), 76 deletions(-)
 create mode 100644 packages/widget/src/utils/enum.ts

diff --git a/packages/widget-embedded/src/config.ts b/packages/widget-embedded/src/config.ts
index b9c25656c..12a9e6a54 100644
--- a/packages/widget-embedded/src/config.ts
+++ b/packages/widget-embedded/src/config.ts
@@ -12,11 +12,12 @@ export const widgetBaseConfig: WidgetConfig = {
   // fromChain: 137,
   // toChain: 10,
   // fromToken: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
-  // toToken: '0x7f5c764cbc14f9669b88837ca1490cca17c31607',
-  // fromAmount: '10',
-  // disableColorSchemes: true,
+  // toToken: '0x7f5c764cbc14f9669b88837ca1490cca17c31607', // 0x0000000000000000000000000000000000000000
+  // fromAmount: '20',
   // toAddress: '0x552008c0f6870c2f77e5cC1d2eb9bdff03e30Ea0',
-  disableTelemetry: true,
+
+  disableTelemetry: false,
+  // disableColorSchemes: true,
   variant: 'expandable',
   integrator: 'li.fi-playground',
   disabledChains: [],
@@ -32,6 +33,7 @@ export const widgetBaseConfig: WidgetConfig = {
     defaultRouteOptions: {
       // slippage: 0.02,
       // order: 'SAFEST',
+      // allowSwitchChain: false,
     },
   },
   tokens: {
diff --git a/packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx b/packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx
index 5d9f232d9..8f0466c75 100644
--- a/packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx
+++ b/packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx
@@ -6,6 +6,7 @@ import {
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { StepTimer } from '../Step/StepTimer';
 import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
@@ -80,7 +81,7 @@ export const ActiveSwapItem: React.FC<{
           </Typography>
         }
         secondary={
-          status !== 'success' ? (
+          status !== RouteExecutionStatus.Done ? (
             <Typography
               fontWeight={400}
               fontSize={12}
diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
index 7943f3d12..d20d18c18 100644
--- a/packages/widget/src/components/SwapInput/SwapInput.tsx
+++ b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -18,15 +18,12 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
   const amountKey = SwapFormKeyHelper.getAmountKey(formType);
   const {
     field: { onChange, onBlur, value },
-    fieldState: { isDirty, isTouched },
   } = useController({
     name: amountKey,
   });
   const { disabledUI } = useWidgetConfig();
   const ref = useRef<HTMLInputElement>(null);
 
-  console.log(isDirty, isTouched);
-
   const handleChange = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
diff --git a/packages/widget/src/hooks/useGasSufficiency.ts b/packages/widget/src/hooks/useGasSufficiency.ts
index 09662cf69..2527fcdfd 100644
--- a/packages/widget/src/hooks/useGasSufficiency.ts
+++ b/packages/widget/src/hooks/useGasSufficiency.ts
@@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
 import { useChains } from '.';
 import { useWallet } from '../providers';
-import { isRouteCompleted } from '../stores';
+import { isRouteDone } from '../stores';
 import { useTokenBalance } from './useTokenBalance';
 
 export interface GasSufficiency {
@@ -125,7 +125,7 @@ export const useGasSufficiency = (route?: Route) => {
   } = useQuery(
     ['funds-sufficiency-check', account.address, route?.id],
     async () => {
-      if (!account.address || !fromToken || !route || isRouteCompleted(route)) {
+      if (!account.address || !fromToken || !route || isRouteDone(route)) {
         return null;
       }
       let currentTokenBalance = Big(fromToken?.amount ?? 0);
diff --git a/packages/widget/src/hooks/useRouteExecution.ts b/packages/widget/src/hooks/useRouteExecution.ts
index 82b4c222d..04a9ba43c 100644
--- a/packages/widget/src/hooks/useRouteExecution.ts
+++ b/packages/widget/src/hooks/useRouteExecution.ts
@@ -6,7 +6,7 @@ import { useLiFi, useWallet } from '../providers';
 import {
   getUpdatedProcess,
   isRouteActive,
-  isRouteCompleted,
+  isRouteDone,
   isRouteFailed,
   useRouteExecutionStore,
 } from '../stores';
@@ -45,7 +45,7 @@ export const useRouteExecution = (
         process,
       });
     }
-    if (isRouteCompleted(clonedUpdatedRoute)) {
+    if (isRouteDone(clonedUpdatedRoute)) {
       emitter.emit(WidgetEvent.RouteExecutionCompleted, clonedUpdatedRoute);
     }
     if (isRouteFailed(clonedUpdatedRoute) && process) {
diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
index c111c3bea..e793a9f91 100644
--- a/packages/widget/src/i18n/en.json
+++ b/packages/widget/src/i18n/en.json
@@ -148,10 +148,12 @@
     "stepSwapAndBridge": "Swap and bridge",
     "success": {
       "message": {
-        "swapSuccessful": "There are now {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} in wallet {{walletAddress}} on {{chainName}} chain."
+        "swapPartiallySuccessful": "We've tried to complete the swap, but {{tool}} ran out of liquidity for {{tokenSymbol}} token.",
+        "swapSuccessful": "There are now {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain."
       },
       "title": {
         "gasSwapSuccessful": "Gas swap successful",
+        "swapPartiallySuccessful": "Swap partially successful",
         "swapSuccessful": "Swap successful"
       }
     },
diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.style.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.style.tsx
index 2916f6c8e..8099285ab 100644
--- a/packages/widget/src/pages/SwapPage/StatusBottomSheet.style.tsx
+++ b/packages/widget/src/pages/SwapPage/StatusBottomSheet.style.tsx
@@ -1,14 +1,18 @@
 import type { Theme } from '@mui/material';
 import { Box } from '@mui/material';
 import { alpha, darken, styled } from '@mui/material/styles';
-import type { RouteExecutionStatus } from '../../stores';
+import { RouteExecutionStatus } from '../../stores';
 
-const getStatusColor = (status: RouteExecutionStatus, theme: Theme) => {
+type StatusColor = RouteExecutionStatus | 'warning';
+
+const getStatusColor = (status: StatusColor, theme: Theme) => {
   switch (status) {
-    case 'success':
+    case RouteExecutionStatus.Done:
       return { color: theme.palette.success.main, alpha: 0.15, darken: 0 };
-    case 'error':
+    case RouteExecutionStatus.Failed:
       return { color: theme.palette.error.main, alpha: 0.2, darken: 0 };
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
     case 'warning':
       return { color: theme.palette.warning.main, alpha: 0.7, darken: 0.4 };
     default:
@@ -24,7 +28,7 @@ export const IconContainer = styled(Box)(({ theme }) => ({
 
 export const IconCircle = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'status',
-})<{ status: RouteExecutionStatus }>(({ theme, status }) => {
+})<{ status: StatusColor }>(({ theme, status }) => {
   const {
     color,
     alpha: alphaValue,
diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
index 5de0c6122..392b73e3b 100644
--- a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
+++ b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -19,7 +19,13 @@ import {
 } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import type { RouteExecution } from '../../stores';
-import { navigationRoutes, shortenWalletAddress } from '../../utils';
+import { RouteExecutionStatus } from '../../stores';
+import {
+  formatTokenAmount,
+  hasEnumFlag,
+  navigationRoutes,
+  shortenWalletAddress,
+} from '../../utils';
 import { IconCircle, IconContainer } from './StatusBottomSheet.style';
 
 export const StatusBottomSheet: React.FC<RouteExecution> = ({
@@ -53,6 +59,29 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
     navigateBack();
   };
 
+  const handlePartialDone = () => {
+    clearFromAmount();
+    if (
+      toToken.chainId !== route.toToken.chainId &&
+      toToken.address !== route.toToken.address
+    ) {
+      setValue(
+        SwapFormKey.FromAmount,
+        formatTokenAmount(toToken.amount, toToken.decimals),
+        { shouldTouch: true },
+      );
+      setValue(SwapFormKey.FromChain, toToken.chainId, { shouldTouch: true });
+      setValue(SwapFormKey.FromToken, toToken.address, { shouldTouch: true });
+      setValue(SwapFormKey.ToChain, route.toToken.chainId, {
+        shouldTouch: true,
+      });
+      setValue(SwapFormKey.ToToken, route.toToken.address, {
+        shouldTouch: true,
+      });
+    }
+    navigateBack();
+  };
+
   const handleClose = () => {
     clearFromAmount();
     ref.current?.close();
@@ -67,18 +96,41 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   };
 
   let title;
-  let message;
+  let primaryMessage;
+  let secondaryMessage;
+  let handlePrimaryButton = handleDone;
   switch (status) {
-    case 'success':
+    case RouteExecutionStatus.Done: {
       title = t('swap.success.title.swapSuccessful');
-      message = t('swap.success.message.swapSuccessful', {
-        amount: token?.amount,
-        tokenSymbol: token?.symbol,
-        chainName: getChainById(route.toChainId)?.name,
-        walletAddress: shortenWalletAddress(route.toAddress),
+      if (token) {
+        primaryMessage = t('swap.success.message.swapSuccessful', {
+          amount: token.amount,
+          tokenSymbol: token.symbol,
+          chainName: getChainById(token.chainId)?.name,
+          walletAddress: shortenWalletAddress(route.toAddress),
+        });
+      }
+      handlePrimaryButton = handleDone;
+      break;
+    }
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
+      title = t('swap.success.title.swapPartiallySuccessful');
+      primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
+        tool: route.steps.at(-1)?.toolDetails.name,
+        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
       });
+      if (token) {
+        secondaryMessage = t('swap.success.message.swapSuccessful', {
+          amount: token.amount,
+          tokenSymbol: token.symbol,
+          chainName: getChainById(token.chainId)?.name,
+          walletAddress: shortenWalletAddress(route.toAddress),
+        });
+      }
+      handlePrimaryButton = handlePartialDone;
       break;
-    case 'error': {
+    }
+    case RouteExecutionStatus.Failed: {
       const step = route.steps.find(
         (step) => step.execution?.status === 'FAILED',
       );
@@ -90,7 +142,8 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
       }
       const processMessage = getProcessMessage(t, getChainById, step, process);
       title = processMessage.title;
-      message = processMessage.message;
+      primaryMessage = processMessage.message;
+      handlePrimaryButton = handleClose;
       break;
     }
     default:
@@ -98,11 +151,12 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   }
 
   useEffect(() => {
+    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
     if (
-      (status === 'success' || status === 'error') &&
+      (hasSuccessFlag || hasEnumFlag(status, RouteExecutionStatus.Failed)) &&
       !ref.current?.isOpen()
     ) {
-      if (status === 'success') {
+      if (hasSuccessFlag) {
         refetchNewBalance();
         refetch();
       }
@@ -115,30 +169,43 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
       <Box p={3}>
         <IconContainer>
           <IconCircle status={status} mb={1}>
-            {status === 'idle' ? <InfoIcon color="primary" /> : null}
-            {status === 'success' ? <DoneIcon color="success" /> : null}
-            {status === 'error' ? <WarningIcon color="error" /> : null}
+            {status === RouteExecutionStatus.Idle ? (
+              <InfoIcon color="primary" />
+            ) : null}
+            {status === RouteExecutionStatus.Done ? (
+              <DoneIcon color="success" />
+            ) : null}
+            {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
+              <WarningIcon color="warning" />
+            ) : null}
+            {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
+              <WarningIcon color="error" />
+            ) : null}
           </IconCircle>
           <Typography py={1} fontSize={18} fontWeight={700}>
             {title}
           </Typography>
-          {status === 'success' ? (
+          {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
             <Token token={toToken} py={1} disableDescription />
           ) : null}
         </IconContainer>
-        <Typography py={1}>{message}</Typography>
+        <Typography py={1}>{primaryMessage}</Typography>
+        {secondaryMessage ? (
+          <Typography py={1}>{secondaryMessage}</Typography>
+        ) : null}
         <Box mt={2}>
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={status === 'success' ? handleDone : handleClose}
-          >
-            {status === 'idle' ? t('button.ok') : null}
-            {status === 'success' ? t('button.done') : null}
-            {status === 'error' ? t('button.seeDetails') : null}
+          <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
+            {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
+            {hasEnumFlag(status, RouteExecutionStatus.Done)
+              ? t('button.done')
+              : null}
+            {status === RouteExecutionStatus.Failed
+              ? t('button.seeDetails')
+              : null}
           </Button>
         </Box>
-        {status === 'success' ? (
+        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
           <Box mt={2}>
             <Button variant="text" onClick={handleSeeDetails} fullWidth>
               {t('button.seeDetails')}
diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
index 7380b30b7..e084653bd 100644
--- a/packages/widget/src/pages/SwapPage/SwapPage.tsx
+++ b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -1,16 +1,17 @@
-import type { BottomSheetBase } from '@lifi/widget/components/BottomSheet';
 import { Delete as DeleteIcon } from '@mui/icons-material';
 import { Box, Button, Tooltip } from '@mui/material';
 import { Fragment, useCallback, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import type { BottomSheetBase } from '../../components/BottomSheet';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { SwapButton } from '../../components/SwapButton';
 import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
+import { RouteExecutionStatus } from '../../stores';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
 import {
@@ -36,7 +37,7 @@ export const SwapPage: React.FC = () => {
   }, [executeRoute, setValue]);
 
   const handleSwapClick = async () => {
-    if (status === 'idle') {
+    if (status === RouteExecutionStatus.Idle) {
       const thresholdExceeded = getTokenValueLossThreshold(route);
       if (thresholdExceeded) {
         tokenValueBottomSheetRef.current?.open();
@@ -44,7 +45,7 @@ export const SwapPage: React.FC = () => {
         handleExecuteRoute();
       }
     }
-    if (status === 'error') {
+    if (status === RouteExecutionStatus.Failed) {
       restartRoute();
     }
   };
@@ -56,9 +57,9 @@ export const SwapPage: React.FC = () => {
 
   const getSwapButtonText = () => {
     switch (status) {
-      case 'idle':
+      case RouteExecutionStatus.Idle:
         return t('button.startSwap');
-      case 'error':
+      case RouteExecutionStatus.Failed:
         return t('button.restartSwap');
       default:
         return '';
@@ -88,7 +89,8 @@ export const SwapPage: React.FC = () => {
           </Fragment>
         );
       })}
-      {status === 'idle' || status === 'error' ? (
+      {status === RouteExecutionStatus.Idle ||
+      status === RouteExecutionStatus.Failed ? (
         <>
           <GasSufficiencyMessage route={route} mt={2} />
           <Box mt={2} display="flex">
@@ -99,7 +101,7 @@ export const SwapPage: React.FC = () => {
               // disable={status === 'idle' && (isValidating || !isValid)}
               enableLoading
             />
-            {status === 'error' ? (
+            {status === RouteExecutionStatus.Failed ? (
               <Tooltip
                 title={t('button.removeSwap')}
                 placement="bottom-end"
diff --git a/packages/widget/src/stores/routes/types.ts b/packages/widget/src/stores/routes/types.ts
index 463bb4bbe..dc24ea22f 100644
--- a/packages/widget/src/stores/routes/types.ts
+++ b/packages/widget/src/stores/routes/types.ts
@@ -9,12 +9,14 @@ export interface RouteExecutionStore {
   deleteRoutes: (type: 'completed' | 'active') => void;
 }
 
-export type RouteExecutionStatus =
-  | 'error'
-  | 'idle'
-  | 'loading'
-  | 'success'
-  | 'warning';
+export enum RouteExecutionStatus {
+  Idle = 0,
+  Pending = 1 << 0,
+  Done = 1 << 1,
+  Failed = 1 << 2,
+  Partial = 1 << 3,
+  Refunded = 1 << 4,
+}
 
 export interface RouteExecution {
   route: Route;
diff --git a/packages/widget/src/stores/routes/useExecutingRoutesIds.ts b/packages/widget/src/stores/routes/useExecutingRoutesIds.ts
index 878b4a652..e06ccebf9 100644
--- a/packages/widget/src/stores/routes/useExecutingRoutesIds.ts
+++ b/packages/widget/src/stores/routes/useExecutingRoutesIds.ts
@@ -1,5 +1,6 @@
 import shallow from 'zustand/shallow';
 import type { RouteExecution } from './types';
+import { RouteExecutionStatus } from './types';
 import { useRouteExecutionStore } from './useRouteExecutionStore';
 
 export const useExecutingRoutesIds = (address?: string) => {
@@ -9,7 +10,8 @@ export const useExecutingRoutesIds = (address?: string) => {
         .filter(
           (item) =>
             item.route.fromAddress === address &&
-            (item.status === 'loading' || item.status === 'error'),
+            (item.status === RouteExecutionStatus.Pending ||
+              item.status === RouteExecutionStatus.Failed),
         )
         .sort(
           (a, b) =>
diff --git a/packages/widget/src/stores/routes/useRouteExecutionStore.ts b/packages/widget/src/stores/routes/useRouteExecutionStore.ts
index aaddb17ed..f489fe125 100644
--- a/packages/widget/src/stores/routes/useRouteExecutionStore.ts
+++ b/packages/widget/src/stores/routes/useRouteExecutionStore.ts
@@ -2,8 +2,15 @@ import type { Route } from '@lifi/sdk';
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import { hasEnumFlag } from '../../utils';
 import type { RouteExecutionStore } from './types';
-import { isRouteCompleted, isRouteFailed } from './utils';
+import { RouteExecutionStatus } from './types';
+import {
+  isRouteDone,
+  isRouteFailed,
+  isRoutePartiallyDone,
+  isRouteRefunded,
+} from './utils';
 
 export const useRouteExecutionStore = create<RouteExecutionStore>()(
   persist(
@@ -14,11 +21,14 @@ export const useRouteExecutionStore = create<RouteExecutionStore>()(
           if (!state.routes[route.id]) {
             // clean previous idle routes that were not executed
             Object.keys(state.routes)
-              .filter((routeId) => state.routes[routeId]?.status === 'idle')
+              .filter(
+                (routeId) =>
+                  state.routes[routeId]?.status === RouteExecutionStatus.Idle,
+              )
               .forEach((routeId) => delete state.routes[routeId]);
             state.routes[route.id] = {
               route,
-              status: 'idle',
+              status: RouteExecutionStatus.Idle,
             };
           }
         }),
@@ -28,23 +38,28 @@ export const useRouteExecutionStore = create<RouteExecutionStore>()(
             state.routes[route.id]!.route = route;
             const isFailed = isRouteFailed(route);
             if (isFailed) {
-              state.routes[route.id]!.status = 'error';
+              state.routes[route.id]!.status = RouteExecutionStatus.Failed;
               return;
             }
-            const isDone = isRouteCompleted(route);
+            const isDone = isRouteDone(route);
             if (isDone) {
-              state.routes[route.id]!.status = 'success';
+              state.routes[route.id]!.status = RouteExecutionStatus.Done;
+              if (isRoutePartiallyDone(route)) {
+                state.routes[route.id]!.status |= RouteExecutionStatus.Partial;
+              } else if (isRouteRefunded(route)) {
+                state.routes[route.id]!.status |= RouteExecutionStatus.Refunded;
+              }
               return;
             }
             const isLoading = route.steps.some((step) => step.execution);
             if (isLoading) {
-              state.routes[route.id]!.status = 'loading';
+              state.routes[route.id]!.status = RouteExecutionStatus.Pending;
             }
           }
         }),
       restartRoute: (routeId: string) =>
         set((state: RouteExecutionStore) => {
-          state.routes[routeId]!.status = 'loading';
+          state.routes[routeId]!.status = RouteExecutionStatus.Pending;
         }),
       deleteRoute: (routeId: string) =>
         set((state: RouteExecutionStore) => {
@@ -57,14 +72,21 @@ export const useRouteExecutionStore = create<RouteExecutionStore>()(
           Object.keys(state.routes)
             .filter((routeId) =>
               type === 'completed'
-                ? state.routes[routeId]?.status === 'success'
-                : state.routes[routeId]?.status !== 'success',
+                ? hasEnumFlag(
+                    state.routes[routeId]?.status ?? 0,
+                    RouteExecutionStatus.Done,
+                  )
+                : !hasEnumFlag(
+                    state.routes[routeId]?.status ?? 0,
+                    RouteExecutionStatus.Done,
+                  ),
             )
             .forEach((routeId) => delete state.routes[routeId]);
         }),
     })),
     {
       name: 'li.fi-widget-routes',
+      version: 1,
       partialize: (state) => ({ routes: state.routes }),
       merge: (persistedState: any, currentState: RouteExecutionStore) => {
         const state = { ...currentState, ...persistedState };
@@ -78,21 +100,21 @@ export const useRouteExecutionStore = create<RouteExecutionStore>()(
               }
               state.routes[route.id] = {
                 route,
-                status: 'idle',
+                status: RouteExecutionStatus.Idle,
               };
               const isFailed = isRouteFailed(route);
               if (isFailed) {
-                state.routes[route.id]!.status = 'error';
+                state.routes[route.id]!.status = RouteExecutionStatus.Failed;
                 return;
               }
-              const isDone = isRouteCompleted(route);
+              const isDone = isRouteDone(route);
               if (isDone) {
-                state.routes[route.id]!.status = 'success';
+                state.routes[route.id]!.status = RouteExecutionStatus.Done;
                 return;
               }
               const isLoading = route.steps.some((step) => step.execution);
               if (isLoading) {
-                state.routes[route.id]!.status = 'loading';
+                state.routes[route.id]!.status = RouteExecutionStatus.Pending;
               }
             });
           }
@@ -102,6 +124,32 @@ export const useRouteExecutionStore = create<RouteExecutionStore>()(
         }
         return state;
       },
+      migrate: (persistedState: any, version) => {
+        if (version === 0) {
+          Object.values(persistedState.routes).forEach((route: any) => {
+            if (route) {
+              switch (route.status) {
+                case 'idle':
+                  route.status = RouteExecutionStatus.Idle;
+                  break;
+                case 'loading':
+                  route.status = RouteExecutionStatus.Pending;
+                  break;
+                case 'success':
+                case 'warning':
+                  route.status = RouteExecutionStatus.Done;
+                  break;
+                case 'error':
+                  route.status = RouteExecutionStatus.Failed;
+                  break;
+                default:
+                  break;
+              }
+            }
+          });
+        }
+        return persistedState as RouteExecutionStore;
+      },
     },
   ),
 );
diff --git a/packages/widget/src/stores/routes/useSwapHistory.ts b/packages/widget/src/stores/routes/useSwapHistory.ts
index aedfd5769..5efad4f52 100644
--- a/packages/widget/src/stores/routes/useSwapHistory.ts
+++ b/packages/widget/src/stores/routes/useSwapHistory.ts
@@ -1,5 +1,7 @@
 import shallow from 'zustand/shallow';
+import { hasEnumFlag } from '../../utils';
 import type { RouteExecution } from './types';
+import { RouteExecutionStatus } from './types';
 import { useRouteExecutionStore } from './useRouteExecutionStore';
 
 export const useSwapHistory = (address?: string) => {
@@ -8,7 +10,8 @@ export const useSwapHistory = (address?: string) => {
       Object.values(state.routes)
         .filter(
           (item) =>
-            item?.route.fromAddress === address && item?.status === 'success',
+            item?.route.fromAddress === address &&
+            hasEnumFlag(item!.status, RouteExecutionStatus.Done),
         )
         .sort(
           (a, b) =>
diff --git a/packages/widget/src/stores/routes/utils.ts b/packages/widget/src/stores/routes/utils.ts
index de8c0e816..4389d5f12 100644
--- a/packages/widget/src/stores/routes/utils.ts
+++ b/packages/widget/src/stores/routes/utils.ts
@@ -1,10 +1,22 @@
 import type { Process, Route } from '@lifi/sdk';
 import microdiff from 'microdiff';
 
-export const isRouteCompleted = (route: Route) => {
+export const isRouteDone = (route: Route) => {
   return route.steps.every((step) => step.execution?.status === 'DONE');
 };
 
+export const isRoutePartiallyDone = (route: Route) => {
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'PARTIAL'),
+  );
+};
+
+export const isRouteRefunded = (route: Route) => {
+  return route.steps.some((step) =>
+    step.execution?.process.some((process) => process.substatus === 'REFUNDED'),
+  );
+};
+
 export const isRouteFailed = (route: Route) => {
   return route.steps.some((step) => step.execution?.status === 'FAILED');
 };
@@ -13,7 +25,7 @@ export const isRouteActive = (route?: Route) => {
   if (!route) {
     return false;
   }
-  const isDone = isRouteCompleted(route);
+  const isDone = isRouteDone(route);
   const isFailed = isRouteFailed(route);
   const alreadyStarted = route.steps.some((step) => step.execution);
   return !isDone && !isFailed && alreadyStarted;
diff --git a/packages/widget/src/utils/enum.ts b/packages/widget/src/utils/enum.ts
new file mode 100644
index 000000000..20bd91f65
--- /dev/null
+++ b/packages/widget/src/utils/enum.ts
@@ -0,0 +1,2 @@
+export const hasEnumFlag = <T extends number | bigint>(flags: T, flag: T) =>
+  (flags & flag) === flag;
diff --git a/packages/widget/src/utils/index.ts b/packages/widget/src/utils/index.ts
index 2d25c7592..00fb3bfa4 100644
--- a/packages/widget/src/utils/index.ts
+++ b/packages/widget/src/utils/index.ts
@@ -2,6 +2,7 @@ export * from './colors';
 export * from './deepClone';
 export * from './deepMerge';
 export * from './elements';
+export * from './enum';
 export * from './format';
 export * from './input';
 export * from './navigationRoutes';