@rango-dev/widget-embedded 0.28.3-next.0 → 0.28.3-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.28.3-next.0",
+  "version": "0.28.3-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.3.1-next.1",
-    "@rango-dev/provider-all": "^0.33.3-next.0",
+    "@rango-dev/provider-all": "^0.33.3-next.1",
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.33.3-next.0",
     "@rango-dev/queue-manager-react": "^0.26.0",

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -17,8 +17,8 @@ import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
 import InProgressTransactionBadge from './InProgressTransactionBadge';
+import { NotificationsBadge } from './NotificationsBadge';
 import { RefreshButton } from './RefreshButton';
-import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
 export function HeaderButtons(props: HeaderButtonsPropTypes) {
   const {
@@ -52,6 +52,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
         <Popover
           align="end"
           alignOffset={-88}
+          sideOffset={15}
           collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
           content={<NotificationContent />}>
@@ -62,7 +63,7 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
               content={i18n.t('Notifications')}>
               <HeaderButton size="small" variant="ghost">
                 <NotificationsIcon size={18} color="black" />
-                <UnreadNotificationsBadge />
+                <NotificationsBadge />
               </HeaderButton>
             </Tooltip>
           </div>

package/src/components/HeaderButtons/{UnreadNotificationsBadge.tsx → NotificationsBadge.tsx}

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

package/src/components/NotificationContent/NotificationContent.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, ListItemButton, styled } from '@rango-dev/ui';
+import { Button, darkTheme, ListItemButton, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   padding: '$10',
@@ -7,6 +7,17 @@ export const Container = styled('div', {
   minHeight: '150px',
 });
 
+export const Header = styled('div', {
+  padding: '0 $10',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const ClearAllButton = styled(Button, {
+  padding: '$5 !important',
+});
+
 export const List = styled('ul', {
   padding: 0,
   margin: 0,
@@ -32,7 +43,7 @@ export const ListItem = styled(ListItemButton, {
 
 export const Images = styled('div', {
   display: 'flex',
-  padding: 0,
+  padding: '0 0 0 $5',
   alignItems: 'center',
   alignSelf: 'stretch',
 });
@@ -46,3 +57,7 @@ export const NotFoundContainer = styled('div', {
   width: '100%',
   height: '150px',
 });
+
+export const IconContainer = styled('span', {
+  paddingRight: '$8',
+});

package/src/components/NotificationContent/NotificationContent.tsx

@@ -17,7 +17,10 @@ import { useNotificationStore } from '../../store/notification';
 import { areTokensEqual } from '../../utils/wallets';
 
 import {
+  ClearAllButton,
   Container,
+  Header,
+  IconContainer,
   Images,
   List,
   ListItem,
@@ -29,9 +32,9 @@ const MAX_NOTIFICATIONS_DISPLAYED = 4;
 export function NotificationContent() {
   const navigate = useNavigate();
 
-  const { getUnreadNotifications } = useNotificationStore();
+  const { getNotifications, clearNotifications } = useNotificationStore();
 
-  const notifications: Notification[] = getUnreadNotifications();
+  const notifications: Notification[] = getNotifications();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const sortedNotification = notifications
@@ -44,6 +47,24 @@ export function NotificationContent() {
 
   return (
     <Container>
+      {sortedNotification.length > 0 && (
+        <>
+          <Header>
+            <Typography variant="label" size="medium">
+              {i18n.t('Notifications')}
+            </Typography>
+            <ClearAllButton
+              variant="ghost"
+              size="xsmall"
+              onClick={clearNotifications}>
+              <Typography variant="body" size="xsmall">
+                {i18n.t('Clear all')}
+              </Typography>
+            </ClearAllButton>
+          </Header>
+          <Divider direction="vertical" size={4} />
+        </>
+      )}
       {sortedNotification.length ? (
         <List>
           {sortedNotification.map((notificationItem, index) => {
@@ -103,7 +124,11 @@ export function NotificationContent() {
                       </div>
                     </Images>
                   }
-                  end={<ChevronRightIcon size={12} color="gray" />}
+                  end={
+                    <IconContainer>
+                      <ChevronRightIcon size={12} color="gray" />
+                    </IconContainer>
+                  }
                 />
               </React.Fragment>
             );

package/src/components/SwapDetails/SwapDetails.tsx

@@ -96,21 +96,20 @@ export function SwapDetails(props: SwapDetailsProps) {
     setModalState(null);
   };
 
-  const getUnreadNotifications =
-    useNotificationStore.use.getUnreadNotifications();
-  const setAsRead = useNotificationStore.use.setAsRead();
-  const unreadNotifications = getUnreadNotifications();
+  const getNotifications = useNotificationStore.use.getNotifications();
+  const removeNotification = useNotificationStore.use.removeNotification();
+  const notifications = getNotifications();
   const currentStep = getCurrentStep(swap);
   const currentStepNetworkStatus = currentStep?.networkStatus;
 
   useEffect(() => {
-    const existNotification = unreadNotifications.find(
+    const existNotification = notifications.find(
       (n) => n.requestId === swap.requestId
     );
     if (existNotification) {
       if (swap.status === 'success' || swap.status === 'failed') {
         setShowCompletedModal(swap.status);
-        setAsRead(swap.requestId);
+        removeNotification(swap.requestId);
       } else if (showCompletedModal) {
         setShowCompletedModal(null);
       }

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -31,7 +31,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const swappers = useAppStore().swappers();
   const loadingStatus = useAppStore().fetchStatus;
   const resetLanguage = useLanguage().resetLanguage;
-  const notifications = useNotificationStore().getUnreadNotifications();
+  const notifications = useNotificationStore().getNotifications();
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value: WidgetInfoContextInterface = {

package/src/hooks/useBootstrap/useBootstrap.ts

@@ -14,11 +14,13 @@ import { tabManager } from '../../store/ui';
 import { useFetchApiConfig } from '../useFetchApiConfig';
 import { useForceAutoConnect } from '../useForceAutoConnect';
 import { useSubscribeToWidgetEvents } from '../useSubscribeToWidgetEvents';
+import { useSyncNotifications } from '../useSyncNotifications';
 
 export function useBootstrap() {
   useForceAutoConnect();
   globalFont();
   useSubscribeToWidgetEvents();
+  useSyncNotifications();
   const blockchains = useAppStore().blockchains();
   const { canSwitchNetworkTo } = useWallets();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =

package/src/hooks/useSyncNotifications/index.ts

@@ -0,0 +1 @@
+export { useSyncNotifications } from './useSyncNotifications';

package/src/hooks/useSyncNotifications/useSyncNotifications.ts

@@ -0,0 +1,25 @@
+import { useManager } from '@rango-dev/queue-manager-react';
+import { useEffect } from 'react';
+
+import { useNotificationStore } from '../../store/notification';
+import { getPendingSwaps } from '../../utils/queue';
+
+export function useSyncNotifications() {
+  const { isSynced, syncNotifications } = useNotificationStore();
+  const { manager, state } = useManager();
+
+  useEffect(() => {
+    const shouldSyncNotifications =
+      useNotificationStore.persist.hasHydrated() &&
+      state.loadedFromPersistor &&
+      !isSynced;
+
+    if (shouldSyncNotifications) {
+      syncNotifications(getPendingSwaps(manager));
+    }
+  }, [
+    useNotificationStore.persist.hasHydrated(),
+    state.loadedFromPersistor,
+    isSynced,
+  ]);
+}

package/src/hooks/useWalletList.ts

@@ -56,7 +56,8 @@ export function useWalletList(params: Params) {
 
   wallets = detectMobileScreens()
     ? wallets.filter(
-        (wallet) => wallet.showOnMobile || state(wallet.type).installed
+        (wallet) =>
+          wallet.showOnMobile !== false && state(wallet.type).installed
       )
     : wallets;
 
@@ -137,9 +138,11 @@ export function useWalletList(params: Params) {
     const isEvmWalletInstalledExceptDefault = wallets.filter(
       (wallet) =>
         wallet.state != WalletState.NOT_INSTALLED &&
-        ![WalletTypes.DEFAULT, WalletTypes.WALLET_CONNECT_2].includes(
-          wallet.type as WalletTypes
-        ) &&
+        ![
+          WalletTypes.DEFAULT,
+          WalletTypes.WALLET_CONNECT_2,
+          WalletTypes.LEDGER,
+        ].includes(wallet.type as WalletTypes) &&
         getWalletInfo(wallet.type).supportedChains.filter(
           (blockchain) => blockchain.type == 'EVM'
         ).length > 0

package/src/store/notification.ts

@@ -1,26 +1,31 @@
 import type { Notification } from '../types/notification';
-import type {
-  Route,
-  RouteEvent,
-  StepEvent,
-} from '@rango-dev/queue-manager-rango-preset';
 
+import {
+  type PendingSwapWithQueueID,
+  type Route,
+  type RouteEvent,
+  type StepEvent,
+} from '@rango-dev/queue-manager-rango-preset';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 
 import createSelectors from './selectors';
 
 export interface NotificationState {
+  isSynced: boolean;
   notifications: Notification[];
   setNotification: (event: RouteEvent | StepEvent, route: Route) => void;
-  setAsRead: (requestId: Notification['requestId']) => void;
-  getUnreadNotifications: () => Notification[];
+  removeNotification: (requestId: Notification['requestId']) => void;
+  getNotifications: () => Notification[];
+  syncNotifications: (swaps: PendingSwapWithQueueID[]) => void;
+  clearNotifications: () => void;
 }
 
 export const useNotificationStore = createSelectors(
   create<NotificationState>()(
     persist(
       subscribeWithSelector((set, get) => ({
+        isSynced: false,
         notifications: [],
         setNotification: (event, route) => {
           const fromStep = route.steps[0];
@@ -29,7 +34,6 @@ export const useNotificationStore = createSelectors(
           const notification: Notification = {
             event,
             creationTime: Date.now(),
-            read: false,
             requestId: route.requestId,
             route: {
               from: {
@@ -53,24 +57,65 @@ export const useNotificationStore = createSelectors(
             notifications: [...excludedList, notification],
           }));
         },
-        setAsRead: (requestId) => {
+        removeNotification: (requestId) => {
           set((state) => ({
-            notifications: state.notifications.map((notificationItem) =>
-              notificationItem.requestId === requestId
-                ? { ...notificationItem, read: true }
-                : notificationItem
+            notifications: state.notifications.filter(
+              (notification) => notification.requestId !== requestId
             ),
           }));
         },
-        getUnreadNotifications: () => {
-          return get().notifications.filter(
-            (notificationItem) => !notificationItem.read
-          );
+        getNotifications: () => {
+          const { isSynced, notifications } = get();
+          return isSynced ? notifications : [];
+        },
+        syncNotifications: (swaps) => {
+          const { isSynced, notifications } = get();
+
+          if (!isSynced) {
+            const nextNotifications: Notification[] = [];
+            notifications.forEach((notification) => {
+              const swapExist = swaps.some(
+                (swap) => swap.swap.requestId === notification.requestId
+              );
+              if (swapExist) {
+                nextNotifications.push(notification);
+              }
+            });
+
+            set({ isSynced: true, notifications: nextNotifications });
+          }
         },
+        clearNotifications: () => set({ notifications: [] }),
       })),
+
       {
         name: 'notification',
         skipHydration: true,
+        partialize: ({ isSynced, ...otherProps }) => otherProps,
+        version: 1,
+        migrate: (persistedState, version) => {
+          if (version === 0) {
+            /**
+             * Eliminate the persistence of read notifications,
+             * and remove the "read" flag from other notifications to align with the current modifications in the notification store structure.
+             */
+            const oldNotifications = (
+              persistedState as {
+                notifications: (Notification & { read: boolean })[];
+              }
+            ).notifications;
+
+            (persistedState as NotificationState).notifications =
+              oldNotifications
+                .filter(
+                  (notification: Notification & { read: boolean }) =>
+                    !notification.read
+                )
+                .map(({ read, ...otherProps }) => otherProps);
+          }
+
+          return persistedState as NotificationState;
+        },
       }
     )
   )

package/src/types/notification.ts

@@ -21,6 +21,5 @@ type NotificationRoute = {
 export type Notification = Pick<Route, 'requestId'> & {
   event: RouteEvent | StepEvent;
   creationTime: number;
-  read: boolean;
   route: NotificationRoute;
 };

package/src/utils/swap.ts

@@ -23,6 +23,11 @@ import type {
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import { i18n } from '@lingui/core';
+import {
+  type RouteEvent,
+  RouteEventType,
+  type StepEvent,
+} from '@rango-dev/queue-manager-rango-preset';
 import BigNumber from 'bignumber.js';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
@@ -782,3 +787,10 @@ export function isTokensIdentical(tokenA: Token, tokenB: Token) {
     tokenA.address === tokenB.address
   );
 }
+
+export function isSwapFinished(event: RouteEvent | StepEvent) {
+  return (
+    event.type === RouteEventType.FAILED ||
+    event.type === RouteEventType.SUCCEEDED
+  );
+}

package/dist/components/HeaderButtons/UnreadNotificationsBadge.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function UnreadNotificationsBadge(): React.JSX.Element | null;
-//# sourceMappingURL=UnreadNotificationsBadge.d.ts.map

package/dist/components/HeaderButtons/UnreadNotificationsBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnreadNotificationsBadge.d.ts","sourceRoot":"","sources":["../../../src/components/HeaderButtons/UnreadNotificationsBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,wBAAwB,6BAmBvC"}