feat: better notifications

Original issue: we had a listener for the different order statuses on the swap widget. That meant that if the user would leave the widget page he wouldn’t receive any notifications about the order. What is even worse - the user would be on the transaction page, would see the order updating and later when navigating to the widget he would now see a notification for that order.

Solution:
I’ve changed the way we deal with events. Instead of directly dispatching a notification whenever we receive a new event from the widget, we now store those order updates in the redux state. We update those orders based on our txHistory and on the widget updates we receive. The middleware that listens on those updates has access to the state prior to the state update and can decide if a notification needs to be shown to the user or not.

fix: rename swap to order

You can have swap or limit orders. Unfortunately it is a bit complicated to know whether the current order is a swap or limit order, so we are going to use the generic order.

fix: type in notification title

feat: delete swap order

We are persisting the order slice and if the users are making a lot of orders it can grow quite a lot. Since right now we are mainly interested in the state in order to show correct notifications, we can optimise and delete the order if the state is fulfilled, cancelled or expired. Those are final states - the next time we see them from the txHistory we can ignore them, if our redux state doesn’t have a created, open or presignaturePending state. If the previous state is undefined - this means that we are not interested in those final states and can ignore them.

.

fix: failing swap slice test

feat: change notification variant for success swap

fix: state was not always cleaned up

src/features/swap/index.tsx

@@ -14,7 +14,6 @@ import {
 import { useCurrentChain, useHasFeature } from '@/hooks/useChains'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import { useCustomAppCommunicator } from '@/hooks/safe-apps/useCustomAppCommunicator'
-import { showNotification } from '@/store/notificationsSlice'
 import { useAppDispatch, useAppSelector } from '@/store'
 
 import css from './styles.module.css'
@@ -26,6 +25,7 @@ import useSwapConsent from './useSwapConsent'
 import Disclaimer from '@/components/common/Disclaimer'
 import LegalDisclaimerContent from '@/components/common/LegalDisclaimerContent'
 import { selectSwapParams, setSwapParams } from './store/swapParamsSlice'
+import { setSwapOrder } from '@/store/swapOrderSlice'
 
 const BASE_URL = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''
 
@@ -61,62 +61,52 @@ const SwapWidget = ({ sell }: Params) => {
   const wallet = useWallet()
   const { isConsentAccepted, onAccept } = useSwapConsent()
 
-  const groupKey = 'swap-order-status'
   const listeners = useMemo<CowEventListeners>(() => {
     return [
       {
         event: CowEvents.ON_TOAST_MESSAGE,
         handler: (event) => {
           console.info('🍞 New toast message:', event)
           const { messageType } = event
+
           switch (messageType) {
             case 'ORDER_CREATED':
               dispatch(
-                showNotification({
-                  title: 'Swap transaction created',
-                  message: 'Waiting for confirmation from signers of your Safe',
-                  groupKey,
-                  variant: 'info',
+                setSwapOrder({
+                  orderUid: event.data.orderUid,
+                  status: 'created',
                 }),
               )
               break
             case 'ORDER_PRESIGNED':
               dispatch(
-                showNotification({
-                  title: 'Swap transaction confirmed',
-                  message: 'Waiting for swap execution by the CoW Protocol',
-                  groupKey,
-                  variant: 'info',
+                setSwapOrder({
+                  orderUid: event.data.orderUid,
+                  status: 'open',
                 }),
               )
               break
             case 'ORDER_FULFILLED':
               dispatch(
-                showNotification({
-                  title: 'Swap executed',
-                  message: 'Your swap has been successful',
-                  groupKey,
-                  variant: 'info',
+                setSwapOrder({
+                  orderUid: event.data.orderUid,
+                  status: 'fulfilled',
                 }),
               )
               break
             case 'ORDER_EXPIRED':
               dispatch(
-                showNotification({
-                  title: 'Swap expired',
-                  message: 'Your swap has reached the expiry time and has become invalid',
-                  groupKey,
-                  variant: 'warning',
+                setSwapOrder({
+                  orderUid: event.data.orderUid,
+                  status: 'expired',
                 }),
               )
               break
             case 'ORDER_CANCELLED':
               dispatch(
-                showNotification({
-                  title: 'Swap cancelled',
-                  message: 'Your swap has been cancelled',
-                  groupKey,
-                  variant: 'warning',
+                setSwapOrder({
+                  orderUid: event.data.orderUid,
+                  status: 'cancelled',
                 }),
               )
               break