@rango-dev/widget-embedded 0.28.2 → 0.28.3-next.1

package/src/pages/WalletsPage.tsx

@@ -1,7 +1,15 @@
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
-import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
+import {
+  Divider,
+  getCategoriesCount,
+  SelectableCategoryList,
+  styled,
+  Typography,
+  Wallet,
+  WalletState,
+} from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
@@ -11,6 +19,10 @@ import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getContainer } from '../utils/common';
+import {
+  filterBlockchainsByWalletTypes,
+  filterWalletsByCategory,
+} from '../utils/wallets';
 
 interface NamespacesModalState {
   providerType: string;
@@ -37,6 +49,9 @@ export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
+  const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
+  const blockchains = useAppStore().blockchains();
+
   const [openModal, setOpenModal] = useState(false);
   const [namespacesModalState, setNamespacesModalState] =
     useState<NamespacesModalState | null>(null);
@@ -74,17 +89,34 @@ export function WalletsPage() {
   const selectedWalletState =
     selectedWallet?.state || WalletState.NOT_INSTALLED;
 
+  const filteredBlockchains = filterBlockchainsByWalletTypes(list, blockchains);
+  const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
+  const showCategory = activeCategoriesCount !== 1;
+
+  const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
+
   return (
     <Layout
       header={{
         title: i18n.t('Connect Wallets'),
       }}>
       <Container>
+        {showCategory && (
+          <>
+            <SelectableCategoryList
+              setCategory={setBlockchainCategory}
+              category={blockchainCategory}
+              blockchains={filteredBlockchains}
+              isLoading={fetchMetaStatus === 'loading'}
+            />
+            <Divider size={24} />
+          </>
+        )}
         <Typography variant="title" size="xmedium" align="center">
           {i18n.t('Choose a wallet to connect.')}
         </Typography>
         <ListContainer>
-          {list.map((wallet, index) => {
+          {filteredWallets.map((wallet, index) => {
             const key = `wallet-${index}-${wallet.type}`;
             return (
               <Wallet

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/config.ts

@@ -28,7 +28,7 @@ export type WidgetColors = {
  * radius, width, and height.
  * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
  * the widget.
- * @property {string} fontFamily - The font family to be used in the widget.
+ * @property {string} fontFamily - The font family to be used in the widget. If you want to do this, include the font of your choice in your HTML file.
  * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
  * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
  * contains specific color values for various parts of the widget (e.g. background color, text color,
@@ -103,6 +103,10 @@ export type BlockchainAndTokenConfig = {
   tokens?: Asset[] | { [blockchain: string]: Tokens };
 };
 
+export type SignersConfig = {
+  customSolanaRPC?: string;
+};
+
 /**
  * `Features`
  *
@@ -209,4 +213,5 @@ export type WidgetConfig = {
   features?: Features;
   variant?: WidgetVariant;
   enableCentralizedSwappers?: boolean;
+  signers?: SignersConfig;
 };

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/common.ts

@@ -1,6 +1,10 @@
 import type { Token } from 'rango-sdk';
 
+import { BlockchainCategories } from '@rango-dev/ui';
+import { TransactionType } from 'rango-sdk';
+
 import { WIDGET_UI_ID } from '../constants';
+import { SUPPORTED_FONTS } from '../constants/fonts';
 import {
   MIN_LENGTH_SYMBOL_CONTAINS,
   MIN_LENGTH_SYMBOL_START_WITH,
@@ -218,3 +222,28 @@ export function compareWithSearchFor(
 
   return 0;
 }
+
+export const isBlockchainTypeInCategory = (
+  blockchainType: TransactionType,
+  category: string
+): boolean => {
+  switch (category) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchainType === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchainType !== TransactionType.TRANSFER &&
+        blockchainType !== TransactionType.COSMOS &&
+        blockchainType !== TransactionType.EVM
+      );
+    default:
+      return blockchainType === category;
+  }
+};
+
+export const getFontUrlByName = (fontName: string) => {
+  const font = SUPPORTED_FONTS.find((font) => font.value === fontName);
+  return font?.url;
+};

package/src/utils/configs.ts

@@ -46,7 +46,6 @@ export function initConfig(nextConfigs: Configs) {
 
 export const DEFAULT_PRIMARY_RADIUS = 20;
 export const DEFAULT_SECONDARY_RADIUS = 25;
-export const DEFAULT_FONT_FAMILY = 'Roboto';
 
 export const THEME_CLASS_NAME_PREFIX = `theme-widget`;
 

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/src/utils/wallets.ts

@@ -16,9 +16,17 @@ import type {
   WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import type { BlockchainMeta, Token, WalletDetail } from 'rango-sdk';
+import type {
+  BlockchainMeta,
+  Token,
+  TransactionType,
+  WalletDetail,
+} from 'rango-sdk';
 
-import { WalletState as WalletStatus } from '@rango-dev/ui';
+import {
+  BlockchainCategories,
+  WalletState as WalletStatus,
+} from '@rango-dev/ui';
 import { readAccountAddress } from '@rango-dev/wallets-react';
 import {
   detectInstallLink,
@@ -39,6 +47,7 @@ import {
 } from '../constants/routing';
 import { EXCLUDED_WALLETS } from '../constants/wallets';
 
+import { isBlockchainTypeInCategory, removeDuplicateFrom } from './common';
 import { numberToString } from './numbers';
 
 export function mapStatusToWalletState(state: WalletState): WalletStatus {
@@ -64,6 +73,7 @@ export function mapWalletTypesToWalletInfo(
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
       const { supportedChains, isContractWallet } = getWalletInfo(wallet);
+
       const { installed, network } = getState(wallet);
       const filterContractWallets =
         isContractWallet && (!installed || (!!chain && network !== chain));
@@ -85,7 +95,12 @@ export function mapWalletTypesToWalletInfo(
         showOnMobile,
         namespaces,
         singleNamespace,
+        supportedChains,
       } = getWalletInfo(type);
+      const blockchainTypes = removeDuplicateFrom(
+        supportedChains.map((item) => item.type)
+      );
+
       const state = mapStatusToWalletState(getState(type));
       return {
         title: name,
@@ -96,6 +111,7 @@ export function mapWalletTypesToWalletInfo(
         showOnMobile,
         namespaces,
         singleNamespace,
+        blockchainTypes,
       };
     });
 }
@@ -538,3 +554,38 @@ export const isFetchingBalance = (
 export function hashWalletsState(walletsInfo: ModalWalletInfo[]) {
   return walletsInfo.map((w) => w.state).join('-');
 }
+
+export function filterBlockchainsByWalletTypes(
+  wallets: ModalWalletInfo[],
+  blockchains: BlockchainMeta[]
+) {
+  const uniqueBlockchainTypes = new Set<TransactionType>();
+  wallets.forEach((wallet) => {
+    wallet.blockchainTypes.forEach((type) => {
+      uniqueBlockchainTypes.add(type);
+    });
+  });
+  const filteredBlockchains = blockchains.filter((blockchain) =>
+    uniqueBlockchainTypes.has(blockchain.type)
+  );
+
+  return filteredBlockchains;
+}
+
+export function filterWalletsByCategory(
+  wallets: WalletInfoWithNamespaces[],
+  category: string
+) {
+  if (category === BlockchainCategories.ALL) {
+    return wallets;
+  }
+
+  return wallets.filter((wallet) => {
+    for (const type of wallet.blockchainTypes) {
+      if (isBlockchainTypeInCategory(type, category)) {
+        return true;
+      }
+    }
+    return false;
+  });
+}

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"}