@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

package/src/store/slices/config.ts

@@ -0,0 +1,26 @@
+import type { WidgetConfig } from '../../types';
+import type { StateCreator } from 'zustand';
+
+const initConfig: WidgetConfig = { apiKey: '' };
+
+export type ConfigSlice = {
+  config: WidgetConfig;
+
+  updateConfig: (config: WidgetConfig) => void;
+};
+
+export const createConfigSlice: StateCreator<ConfigSlice> = (set, get) => ({
+  config: initConfig,
+
+  // Actions
+  updateConfig: (nextConfig: WidgetConfig) => {
+    const currentConfig = get().config;
+
+    set({
+      config: {
+        ...currentConfig,
+        ...nextConfig,
+      },
+    });
+  },
+});

package/src/store/slices/data.ts

@@ -0,0 +1,203 @@
+// We keep all the received data from server in this slice
+
+import type { ConfigSlice } from './config';
+import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
+import type { StateCreator } from 'zustand';
+
+import { httpService as sdk } from '../../services/httpService';
+import { containsText } from '../../utils/common';
+import { tokensAreEqual } from '../../utils/wallets';
+
+type BlockchainOptions = {
+  type?: 'source' | 'destination';
+};
+
+type TokenOptions = {
+  type?: 'source' | 'destination';
+  // filter by an specific blockchain
+  blockchain?: string;
+  searchFor?: string;
+};
+
+export interface DataSlice {
+  _blockchains: BlockchainMeta[];
+  _tokens: Token[];
+  _popularTokens: Token[];
+  _swappers: SwapperMeta[];
+
+  blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
+  tokens: (options?: TokenOptions) => Token[];
+  isTokenPinned: (token: Token) => boolean;
+
+  fetch: () => Promise<void>;
+}
+
+export const createDataSlice: StateCreator<
+  DataSlice & ConfigSlice,
+  [],
+  [],
+  DataSlice
+> = (set, get) => ({
+  // State
+  _blockchains: [],
+  _tokens: [],
+  _popularTokens: [],
+  _swappers: [],
+
+  // Selectors
+  blockchains: (options) => {
+    const blockchainsFromState = get()._blockchains;
+
+    if (!options || !options?.type) {
+      return blockchainsFromState;
+    }
+
+    const config = get().config;
+    const supportedBlockchainsFromConfig =
+      (options.type === 'source'
+        ? config.from?.blockchains
+        : config.to?.blockchains) ?? [];
+
+    const list = blockchainsFromState.filter((blockchain) => {
+      if (
+        supportedBlockchainsFromConfig.length > 0 &&
+        !supportedBlockchainsFromConfig.includes(blockchain.name)
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+
+    return list;
+  },
+  tokens: (options) => {
+    const tokensFromState = get()._tokens;
+
+    if (!options || !options?.type) {
+      return tokensFromState;
+    }
+
+    const config = get().config;
+    const supportedTokensFromConfig =
+      (options.type === 'source' ? config.from?.tokens : config.to?.tokens) ??
+      [];
+    const blockchains = get().blockchains({
+      type: options.type,
+    });
+
+    const list = tokensFromState
+      .filter((token) => {
+        // If there is a list of tokens in config, we only keep them.
+        if (
+          supportedTokensFromConfig.length > 0 &&
+          !supportedTokensFromConfig.some((asset) => {
+            return tokensAreEqual(asset, token);
+          })
+        ) {
+          return false;
+        }
+
+        // If a specific blockchain has passed, we only keep that blockchain's tokens.
+        if (!!options.blockchain && token.blockchain !== options.blockchain) {
+          return false;
+        }
+
+        // Check only available blockchains
+        if (
+          !blockchains.some((blockchain) => {
+            return blockchain.name === token.blockchain;
+          })
+        ) {
+          return false;
+        }
+
+        // Search functionality
+        if (options.searchFor) {
+          if (
+            containsText(token.symbol, options.searchFor) ||
+            containsText(token.address || '', options.searchFor) ||
+            containsText(token.name || '', options.searchFor)
+          ) {
+            return true;
+          }
+
+          return false;
+        }
+
+        return true;
+      })
+      .sort((a, b) => {
+        // Check pinned tokens
+        if (get().isTokenPinned(a)) {
+          return -1;
+        }
+        if (get().isTokenPinned(b)) {
+          return 1;
+        }
+
+        // Check secondary coins
+        if (a.isSecondaryCoin) {
+          return 1;
+        }
+        if (b.isSecondaryCoin) {
+          return -1;
+        }
+
+        // Check it has an address or not.
+        if (!a.address && b.address) {
+          return -1;
+        }
+        if (a.address && !b.address) {
+          return 1;
+        }
+
+        return 0;
+      });
+
+    return list;
+  },
+  isTokenPinned: (token) => {
+    const pinned = !!get().config.pinnedTokens?.some((pinnedToken) =>
+      tokensAreEqual(pinnedToken, token)
+    );
+    return pinned;
+  },
+
+  // Actions
+  fetch: async () => {
+    const response = await sdk().getAllMetadata();
+
+    const blockchains: BlockchainMeta[] = [];
+    const tokens: Token[] = [];
+    const popularTokens: Token[] = response.popularTokens;
+    const swappers: SwapperMeta[] = response.swappers;
+
+    const blockchainsWithAtLeastOneToken = new Set();
+
+    response.tokens.forEach((token) => {
+      blockchainsWithAtLeastOneToken.add(token.blockchain);
+
+      tokens.push(token);
+    });
+
+    response.blockchains.forEach((blockchain) => {
+      if (
+        blockchain.enabled &&
+        blockchainsWithAtLeastOneToken.has(blockchain.name)
+      ) {
+        blockchains.push(blockchain);
+      }
+    });
+
+    // Sort
+    blockchains.sort((a, b) => a.sort - b.sort);
+
+    set({
+      _blockchains: blockchains,
+      _tokens: tokens,
+      _popularTokens: popularTokens,
+      _swappers: swappers,
+    });
+  },
+});

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,18 @@
-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 +28,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 +139,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 +154,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)
@@ -196,28 +208,5 @@ export const useWalletsStore = createSelectors(
   )
 );
 
-useWalletsStore.subscribe(
-  (state) => state.connectedWallets,
-  (connectedWallets) => {
-    useBestRouteStore.setState(({ sourceTokens, destinationTokens }) => {
-      const sourceTokensWithBalance = getTokensWithBalance(
-        sourceTokens,
-        connectedWallets
-      );
-      const destinationTokensWithBalance = getTokensWithBalance(
-        destinationTokens,
-        connectedWallets
-      );
-      return {
-        sourceTokens: sortTokens(sourceTokensWithBalance),
-        destinationTokens: sortTokens(destinationTokensWithBalance),
-      };
-    });
-  },
-  {
-    equalityFn: shallow,
-  }
-);
-
 export const fetchingBalanceSelector = (state: WalletsStore) =>
   !!state.connectedWallets.find((wallet) => wallet.loading);

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;
@@ -38,6 +38,8 @@ export type WidgetColors = {
  * border color
  * @property {number} borderRadius - `borderRadius` is a property of the `WidgetTheme` type that
  * specifies the radius of the corners of a widget.
+ * @property {number} secondaryBorderRadius - `secondaryBorderRadius` is a property of the `WidgetTheme` type that
+ * specifies the radius of the buttons of a widget.
  * @property {number} width - The `width` property is a number that represents the width of the widget.
  * @property {number} height - The `height` property is a number that specifies the height of the widget.
  * @property {boolean} singleTheme - The `singleTheme` property is a boolean that specifies the theme is support dark and light or only light.
@@ -47,6 +49,7 @@ export type WidgetTheme = {
   fontFamily?: string;
   colors?: { light: WidgetColors; dark: WidgetColors };
   borderRadius?: number;
+  secondaryBorderRadius?: number;
   width?: number;
   height?: number;
   singleTheme?: boolean;
@@ -93,7 +96,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 +124,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 +141,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,
+];