@rango-dev/widget-embedded 0.12.1-next.13 → 0.12.1-next.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.13",
+  "version": "0.12.1-next.14",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

package/src/components/HeaderButtons/UnreadNotificationsBadge.tsx

@@ -6,8 +6,7 @@ import { useNotificationStore } from '../../store/notification';
 import { NotificationsBadgeContainer } from './HeaderButtons.styles';
 
 export function UnreadNotificationsBadge() {
-  const getUnreadNotifications =
-    useNotificationStore.use.getUnreadNotifications();
+  const { getUnreadNotifications } = useNotificationStore();
 
   const notificationsCount = getUnreadNotifications().length;
 

package/src/components/NotificationContent/NotificationContent.tsx

@@ -22,20 +22,15 @@ export function NotificationContent() {
   const navigate = useNavigate();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
 
-  const getUnreadNotifications =
-    useNotificationStore.use.getUnreadNotifications();
+  const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-
-  const setAsRead = useNotificationStore.use.setAsRead();
-
   const { tokens, blockchains } = useMetaStore.use.meta();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
-    setAsRead(requestId);
     setSelectedSwap(requestId);
     navigate(`/swaps/${requestId}`);
   };

package/src/components/SwapDetails/SwapDetails.tsx

@@ -39,6 +39,7 @@ import {
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
+import { useNotificationStore } from '../../store/notification';
 import { numberToString } from '../../utils/numbers';
 import { getPriceImpactLevel } from '../../utils/routing';
 import {
@@ -90,12 +91,22 @@ export function SwapDetails(props: SwapDetailsProps) {
     setModalState(null);
   };
 
+  const getUnreadNotifications =
+    useNotificationStore.use.getUnreadNotifications();
+  const setAsRead = useNotificationStore.use.setAsRead();
+  const unreadNotifications = getUnreadNotifications();
   const currentStep = getCurrentStep(swap);
   const currentStepNetworkStatus = currentStep?.networkStatus;
 
   useEffect(() => {
-    if (swap.status === 'success' || swap.status === 'failed') {
-      setShowCompletedModal(swap.status);
+    const existNotification = unreadNotifications.find(
+      (n) => n.requestId === swap.requestId
+    );
+    if (existNotification) {
+      if (swap.status === 'success' || swap.status === 'failed') {
+        setShowCompletedModal(swap.status);
+        setAsRead(swap.requestId);
+      }
     }
   }, [swap.status]);
 
@@ -207,7 +218,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const percentageChange = getPercentageChange(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
-    showCompletedModal === 'success'
+    swap.status === 'success'
       ? `You have received ${numberToString(
           outputAmount,
           TOKEN_AMOUNT_MIN_DECIMALS,
@@ -389,7 +400,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         open={!!showCompletedModal}
         diagnosisUrl={diagnosisUrl}
         onClose={() => setShowCompletedModal(null)}
-        status={showCompletedModal}
+        status={swap.status === 'success' ? 'success' : 'failed'}
         priceValue={numberToString(
           outputAmount,
           TOKEN_AMOUNT_MIN_DECIMALS,

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -22,7 +22,7 @@ export interface ModalPropTypes {
 export interface CompleteModalPropTypes {
   open: boolean;
   onClose: () => void;
-  status: 'success' | 'failed' | null;
+  status: 'success' | 'failed';
   priceValue: string;
   usdValue: string;
   percentageChange: string;

package/src/components/WidgetEvents.tsx

@@ -16,7 +16,7 @@ export function WidgetEvents() {
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-
+  const setAsRead = useNotificationStore.use.setAsRead();
   const widgetEvents = useEvents();
 
   useEffect(() => {
@@ -42,10 +42,16 @@ export function WidgetEvents() {
         toAccount && getWalletsDetails([toAccount]);
       }
       if (
-        event.type === StepEventType.TX_EXECUTION_BLOCKED &&
-        validBlockedStatuses.includes(event.status)
+        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
+          validBlockedStatuses.includes(event.status)) ||
+        event.type === StepEventType.FAILED
       ) {
         setNotification(event, route);
+      } else if (
+        event.type === StepEventType.TX_EXECUTION ||
+        event.type === StepEventType.CHECK_STATUS
+      ) {
+        setAsRead(route.requestId);
       }
     });