@rango-dev/widget-embedded 0.12.1-next.7 → 0.12.1-next.8

package/src/store/notification.ts

@@ -0,0 +1,77 @@
+import type { Notification } from '../types/notification';
+import type {
+  Route,
+  RouteEvent,
+  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 {
+  notifications: Notification[];
+  setNotification: (event: RouteEvent | StepEvent, route: Route) => void;
+  setAsRead: (requestId: Notification['requestId']) => void;
+  getUnreadNotifications: () => Notification[];
+}
+
+export const useNotificationStore = createSelectors(
+  create<NotificationState>()(
+    persist(
+      subscribeWithSelector((set, get) => ({
+        notifications: [],
+        setNotification: (event, route) => {
+          const fromStep = route.steps[0];
+          const toStep = route.steps[route.steps.length - 1];
+
+          const notification: Notification = {
+            event,
+            creationTime: Date.now(),
+            read: false,
+            requestId: route.requestId,
+            route: {
+              from: {
+                blockchain: fromStep.fromBlockchain,
+                tokenAddress: fromStep.fromSymbolAddress,
+                tokenSymbol: fromStep.fromSymbol,
+              },
+              to: {
+                blockchain: toStep.toBlockchain,
+                tokenSymbol: toStep.toSymbol,
+                tokenAddress: toStep.toSymbolAddress,
+              },
+            },
+          };
+
+          const excludedList = get().notifications.filter(
+            (notificationItem) => notificationItem.requestId !== route.requestId
+          );
+
+          set(() => ({
+            notifications: [...excludedList, notification],
+          }));
+        },
+        setAsRead: (requestId) => {
+          set((state) => ({
+            notifications: state.notifications.map((notificationItem) =>
+              notificationItem.requestId === requestId
+                ? { ...notificationItem, read: true }
+                : notificationItem
+            ),
+          }));
+        },
+        getUnreadNotifications: () => {
+          return get().notifications.filter(
+            (notificationItem) => !notificationItem.read
+          );
+        },
+      })),
+      {
+        name: 'notification',
+        skipHydration: true,
+      }
+    )
+  )
+);

package/src/store/settings.ts

@@ -1,7 +1,9 @@
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
+
 import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
 import { removeDuplicateFrom } from '../utils/common';
+
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
@@ -21,7 +23,7 @@ export interface SettingsState {
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: Theme) => void;
-  toggleAllLiquiditySources: () => void;
+  toggleAllLiquiditySources: (shouldReset?: boolean) => void;
   setAffiliateRef: (affiliateRef: string | null) => void;
   setAffiliatePercent: (affiliatePercent: number | null) => void;
   setAffiliateWallets: (
@@ -62,20 +64,25 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             affiliateWallets,
           })),
-        toggleAllLiquiditySources: () =>
+        toggleAllLiquiditySources: (shouldReset?: boolean) =>
           set((state) => {
+            if (shouldReset) {
+              return { disabledLiquiditySources: [] };
+            }
             const { swappers } = useMetaStore.getState().meta;
             const swappersGroup = removeDuplicateFrom(
               swappers.map((swapper) => swapper.swapperGroup)
             );
 
-            if (swappersGroup.length === state.disabledLiquiditySources.length)
+            if (
+              swappersGroup.length === state.disabledLiquiditySources.length
+            ) {
               return { disabledLiquiditySources: [] };
-            else {
-              return {
-                disabledLiquiditySources: swappersGroup,
-              };
             }
+
+            return {
+              disabledLiquiditySources: swappersGroup,
+            };
           }),
         toggleInfiniteApprove: () =>
           set((state) => ({
@@ -83,17 +90,17 @@ export const useSettingsStore = createSelectors(
           })),
         toggleLiquiditySource: (name) =>
           set((state) => {
-            if (state.disabledLiquiditySources.includes(name))
+            if (state.disabledLiquiditySources.includes(name)) {
               return {
                 disabledLiquiditySources: state.disabledLiquiditySources.filter(
                   (liquiditySource) => liquiditySource != name
                 ),
               };
-            else
-              return {
-                disabledLiquiditySources:
-                  state.disabledLiquiditySources.concat(name),
-              };
+            }
+            return {
+              disabledLiquiditySources:
+                state.disabledLiquiditySources.concat(name),
+            };
           }),
         setTheme: (theme) =>
           set(() => ({

package/src/store/ui.ts

@@ -1,11 +1,11 @@
 import { create } from 'zustand';
+
 import createSelectors from './selectors';
 
 interface UiState {
   connectWalletsButtonDisabled: boolean;
   selectedSwapRequestId: string | null;
   currentPage: string;
-  toggleConnectWalletsButton: () => void;
   setSelectedSwap: (requestId: string | null) => void;
   setCurrentPage: (path: string) => void;
 }
@@ -15,10 +15,6 @@ export const useUiStore = createSelectors(
     connectWalletsButtonDisabled: false,
     selectedSwapRequestId: null,
     currentPage: '',
-    toggleConnectWalletsButton: () =>
-      set((state) => ({
-        connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled,
-      })),
     setSelectedSwap: (requestId) => set({ selectedSwapRequestId: requestId }),
     setCurrentPage: (path) => set({ currentPage: path }),
   }))

package/src/store/wallets.ts

@@ -1,21 +1,22 @@
-import { SelectableWallet } from '@rango-dev/ui';
-import { WalletType } from '@rango-dev/wallets-shared';
+import type { Wallet } from '../types';
+import type { WalletType } from '@rango-dev/wallets-shared';
+
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
+
 import { httpService } from '../services/httpService';
 import {
-  getRequiredChains,
   getTokensWithBalance,
   isAccountAndWalletMatched,
   makeBalanceFor,
   resetConnectedWalletState,
   sortTokens,
 } from '../utils/wallets';
+
 import { useBestRouteStore } from './bestRoute';
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
-import { Wallet } from '../types';
 
 export type TokenBalance = {
   chain: string;
@@ -31,100 +32,107 @@ export type TokenBalance = {
 
 export interface ConnectedWallet extends Wallet {
   balances: TokenBalance[] | null;
+  explorerUrl: string | null;
+  selected: boolean;
   loading: boolean;
   error: boolean;
-  explorerUrl: string | null;
 }
 
 interface WalletsStore {
   connectedWallets: ConnectedWallet[];
-  selectedWallets: Wallet[];
   customDestination: string;
+  loading: boolean;
   connectWallet: (accounts: Wallet[]) => void;
   disconnectWallet: (walletType: WalletType) => void;
-  initSelectedWallets: () => void;
-  setSelectedWallet: (wallet: SelectableWallet) => void;
+  selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
   clearConnectedWallet: () => void;
   getWalletsDetails: (accounts: Wallet[], shouldRetry?: boolean) => void;
-  setCustomDestination: (customDestination: string) => void;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
     subscribeWithSelector((set, get) => ({
       connectedWallets: [],
-      selectedWallets: [],
       customDestination: '',
+      loading: false,
       connectWallet: (accounts) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
+          loading: true,
           connectedWallets: state.connectedWallets
             .filter((wallet) => wallet.walletType !== accounts[0].walletType)
             .concat(
-              accounts.map((account) => ({
-                balances: [],
-                address: account.address,
-                chain: account.chain,
-                loading: true,
-                walletType: account.walletType,
-                error: false,
-                explorerUrl: null,
-              }))
+              accounts.map((account) => {
+                const shouldMarkWalletAsSelected = !state.connectedWallets.find(
+                  (connectedWallet) =>
+                    connectedWallet.chain === account.chain &&
+                    connectedWallet.selected
+                );
+                return {
+                  balances: [],
+                  address: account.address,
+                  chain: account.chain,
+                  explorerUrl: null,
+                  walletType: account.walletType,
+                  selected: shouldMarkWalletAsSelected,
+                  loading: true,
+                  error: false,
+                };
+              })
             ),
         }));
         getWalletsDetails(accounts);
       },
       disconnectWallet: (walletType) => {
-        set((state) => ({
-          connectedWallets: state.connectedWallets.filter(
-            (balance) => balance.walletType !== walletType
-          ),
-          selectedWallets: state.selectedWallets.filter(
-            (wallet) => wallet.walletType != walletType
-          ),
-        }));
-      },
-      initSelectedWallets: () =>
         set((state) => {
-          const requiredChains = getRequiredChains(
-            useBestRouteStore.getState().bestRoute
-          );
-          const connectedWallets = state.connectedWallets;
-          const selectedWallets: Wallet[] = [];
-          requiredChains.forEach((chain) => {
-            const anyWalletSelected = !!state.selectedWallets.find(
-              (wallet) => wallet.chain === chain
-            );
-
-            if (!anyWalletSelected) {
-              const firstWalletWithMatchedChain = connectedWallets.find(
-                (wallet) => wallet.chain === chain
-              );
-              if (!!firstWalletWithMatchedChain)
-                selectedWallets.push({
-                  address: firstWalletWithMatchedChain.address,
-                  chain: firstWalletWithMatchedChain.chain,
-                  walletType: firstWalletWithMatchedChain.walletType,
-                });
-            }
-          });
+          const selectedWallets = state.connectedWallets
+            .filter(
+              (connectedWallet) =>
+                connectedWallet.selected &&
+                connectedWallet.walletType !== walletType
+            )
+            .map((selectedWallet) => selectedWallet.chain);
           return {
-            selectedWallets: state.selectedWallets.concat(selectedWallets),
+            connectedWallets: state.connectedWallets
+              .filter(
+                (connectedWallet) => connectedWallet.walletType !== walletType
+              )
+              .map((connectedWallet) => {
+                const anyWalletSelectedForBlockchain = selectedWallets.includes(
+                  connectedWallet.chain
+                );
+                if (anyWalletSelectedForBlockchain) {
+                  return connectedWallet;
+                }
+                selectedWallets.push(connectedWallet.chain);
+                return { ...connectedWallet, selected: true };
+              }),
           };
-        }),
-      setSelectedWallet: (wallet) =>
+        });
+      },
+      selectWallets: (wallets) =>
         set((state) => ({
-          selectedWallets: state.selectedWallets
-            .filter((selectedWallet) => selectedWallet.chain !== wallet.chain)
-            .concat({
-              chain: wallet.chain,
-              address: wallet.address,
-              walletType: wallet.walletType,
-            }),
-        })),
-      setCustomDestination: (customDestination) =>
-        set(() => ({
-          customDestination,
+          connectedWallets: state.connectedWallets.map((connectedWallet) => {
+            const walletSelected = !!wallets.find(
+              (wallet) =>
+                wallet.chain === connectedWallet.chain &&
+                wallet.walletType !== connectedWallet.walletType &&
+                connectedWallet.selected
+            );
+            const walletNotSelected = !!wallets.find(
+              (wallet) =>
+                wallet.chain === connectedWallet.chain &&
+                wallet.walletType === connectedWallet.walletType &&
+                !connectedWallet.selected
+            );
+            if (walletSelected) {
+              return { ...connectedWallet, selected: false };
+            } else if (walletNotSelected) {
+              return { ...connectedWallet, selected: true };
+            }
+
+            return connectedWallet;
+          }),
         })),
       clearConnectedWallet: () =>
         set(() => ({
@@ -135,6 +143,7 @@ export const useWalletsStore = createSelectors(
         const getWalletsDetails = get().getWalletsDetails;
         const { tokens } = useMetaStore.getState().meta;
         set((state) => ({
+          loading: true,
           connectedWallets: state.connectedWallets.map((wallet) => {
             return accounts.find((account) =>
               isAccountAndWalletMatched(account, wallet)
@@ -149,39 +158,46 @@ export const useWalletsStore = createSelectors(
             blockchain: chain,
           }));
           const response = await httpService().getWalletsDetails(data);
-          const retrivedBalance = response.wallets;
-          if (retrivedBalance) {
+          const retrievedBalance = response.wallets;
+          if (retrievedBalance) {
             set((state) => ({
+              loading: false,
               connectedWallets: state.connectedWallets.map(
                 (connectedWallet) => {
                   const matchedAccount = accounts.find((account) =>
                     isAccountAndWalletMatched(account, connectedWallet)
                   );
-                  const retrivedBalanceAccount = retrivedBalance.find(
+                  const retrievedBalanceAccount = retrievedBalance.find(
                     (balance) =>
                       balance.address === connectedWallet.address &&
                       balance.blockChain === connectedWallet.chain
                   );
                   if (
-                    retrivedBalanceAccount?.failed &&
+                    retrievedBalanceAccount?.failed &&
                     matchedAccount &&
                     shouldRetry
                   ) {
                     getWalletsDetails([matchedAccount], false);
                   }
-                  return matchedAccount && retrivedBalanceAccount
-                    ? makeBalanceFor(
-                        matchedAccount,
-                        retrivedBalanceAccount,
-                        tokens
-                      )
+                  return matchedAccount && retrievedBalanceAccount
+                    ? {
+                        ...connectedWallet,
+                        explorerUrl: retrievedBalanceAccount.explorerUrl,
+                        balances: makeBalanceFor(
+                          retrievedBalanceAccount,
+                          tokens
+                        ),
+                      }
                     : connectedWallet;
                 }
               ),
             }));
-          } else throw new Error('Wallet not found');
+          } else {
+            throw new Error('Wallet not found');
+          }
         } catch (error) {
           set((state) => ({
+            loading: false,
             connectedWallets: state.connectedWallets.map((balance) => {
               return accounts.find((account) =>
                 isAccountAndWalletMatched(account, balance)

package/src/types/config.ts

@@ -1,7 +1,7 @@
-import { Asset } from 'rango-sdk';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { ProviderInterface } from '@rango-dev/wallets-react';
-import { Language } from '@rango-dev/ui';
+import type { Language } from '@rango-dev/ui';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Asset } from 'rango-sdk';
 
 /**
  * The above type defines a set of optional color properties for a widget.
@@ -13,7 +13,7 @@ import { Language } from '@rango-dev/ui';
  * @property {string} warning
  * @property {string} surface
  * @property {string} neutral
-
+ *
  */
 export type WidgetColors = {
   background?: string;
@@ -93,7 +93,7 @@ export type BlockchainAndTokenConfig = {
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
- * @property {WidgeAffiliate} affiliate - If you want to charge users fee per transaction, you should 
+ * @property {WidgeAffiliate} affiliate - If you want to charge users fee per transaction, you should
  * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
  * @property {number} amount - The default input amount.
  * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
@@ -121,7 +121,8 @@ export type BlockchainAndTokenConfig = {
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
-
+ * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
+ * you could use to pin tokens of your choice to the top of the token list.
  */
 export type WidgetConfig = {
   apiKey: string;
@@ -137,4 +138,5 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
+  pinnedTokens?: Asset[];
 };

package/src/types/notification.ts

@@ -0,0 +1,33 @@
+import {
+  type Route,
+  type RouteEvent,
+  type Step,
+  type StepEvent,
+  StepExecutionBlockedEventStatus,
+} from '@rango-dev/queue-manager-rango-preset';
+
+type NotificationRoute = {
+  from: {
+    blockchain: Step['fromBlockchain'];
+    tokenSymbol: Step['fromSymbol'];
+    tokenAddress: Step['fromSymbolAddress'];
+  };
+  to: {
+    blockchain: Step['toBlockchain'];
+    tokenSymbol: Step['toSymbol'];
+    tokenAddress: Step['toSymbolAddress'];
+  };
+};
+
+export type Notification = Pick<Route, 'requestId'> & {
+  event: RouteEvent | StepEvent;
+  creationTime: number;
+  read: boolean;
+  route: NotificationRoute;
+};
+
+export const validBlockedStatuses: StepExecutionBlockedEventStatus[] = [
+  StepExecutionBlockedEventStatus.WAITING_FOR_CHANGE_WALLET_ACCOUNT,
+  StepExecutionBlockedEventStatus.WAITING_FOR_NETWORK_CHANGE,
+  StepExecutionBlockedEventStatus.WAITING_FOR_WALLET_CONNECT,
+];

package/src/types/routing.ts

@@ -1,9 +1,10 @@
-import { RouteState } from '../store/bestRoute';
-import { SettingsState } from '../store/settings';
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+import type { RouteState } from '../store/bestRoute';
+import type { SettingsState } from '../store/settings';
 
 interface BestRouteStoreParams {
-  fromChain?: RouteState['fromChain'];
-  toChain?: RouteState['toChain'];
+  fromBlockchain?: RouteState['fromBlockchain'];
+  toBlockchain?: RouteState['toBlockchain'];
   fromToken?: RouteState['fromToken'];
   toToken?: RouteState['toToken'];
   inputAmount?: RouteState['inputAmount'];
@@ -32,45 +33,45 @@ export enum ConfirmSwapErrorTypes {
   NO_ROUTE,
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
   REQUEST_FAILED,
-  INSUFFICIENT_SLIPPAGE,
-  INSUFFICIENT_BALANCE,
+  REQUEST_CANCELED,
 }
 
 export type ConfirmSwapError =
   | {
-      type: ConfirmSwapErrorTypes.REQUEST_FAILED;
-      status?: number;
-    }
-  | {
-      type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
-      minRequiredSlippage: string | null;
+      type: ConfirmSwapErrorTypes.NO_ROUTE;
+      diagnosisMessage?: string;
     }
-  | { type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE; messages: string[] }
   | {
-      type: Exclude<
-        ConfirmSwapErrorTypes,
-        | ConfirmSwapErrorTypes.REQUEST_FAILED
-        | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
-        | ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE
-      >;
+      type: Exclude<ConfirmSwapErrorTypes, ConfirmSwapErrorTypes.NO_ROUTE>;
     };
 
-export type ConfirmSwapWarnings =
+export enum RouteWarningType {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+}
+
+export type RouteWarning =
   | {
-      type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      type: RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
       newOutputAmount: string;
       percentageChange: string;
     }
   | {
       type: Exclude<
-        ConfirmSwapWarningTypes,
-        ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
+        RouteWarningType,
+        RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
       >;
     };
 
-export enum ConfirmSwapWarningTypes {
-  ROUTE_UPDATED,
-  ROUTE_SWAPPERS_UPDATED,
-  ROUTE_COINS_UPDATED,
-  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+export enum SlippageWarningType {
+  INSUFFICIENT_SLIPPAGE,
+  HIGH_SLIPPAGE,
 }
+
+export type ConfirmSwapWarnings = {
+  route: RouteWarning | null;
+  balance: { messages: string[] } | null;
+  slippage: { type: SlippageWarningType; slippage: string | null } | null;
+};

package/src/types/swap.ts

@@ -1,15 +1,23 @@
-import { SwapSavedSettings } from 'rango-types/lib';
+import type { SwapSavedSettings } from 'rango-types/lib';
 
 export type PendingSwapSettings = Omit<
   SwapSavedSettings,
   'disabledSwappersIds'
 >;
 
+export enum ButtonState {
+  WAITFORCONNECTING = 'waitForConnecting',
+  SWAP = 'swap',
+  NEEDTOCONFIRM = 'needToConfirm',
+  WARNING = 'warning',
+}
+
 export type SwapButtonState = (
   | { disabled: true }
   | { disabled: false; hasWarning?: boolean }
 ) & {
   title: string;
+  state: ButtonState;
 };
 
 export type ConvertedToken = {