@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/store/slices/data.ts

@@ -6,7 +6,6 @@ import type { StateCreator } from 'zustand';
 
 import { httpService as sdk } from '../../services/httpService';
 import { containsText } from '../../utils/common';
-import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
 import { tokensAreEqual } from '../../utils/wallets';
 
 type BlockchainOptions = {
@@ -14,22 +13,21 @@ type BlockchainOptions = {
 };
 
 type TokenOptions = {
-  type: 'source' | 'destination';
+  type?: 'source' | 'destination';
   // filter by an specific blockchain
   blockchain?: string;
   searchFor?: string;
 };
-export type FetchStatus = 'loading' | 'success' | 'failed';
+
 export interface DataSlice {
   _blockchains: BlockchainMeta[];
   _tokens: Token[];
   _popularTokens: Token[];
   _swappers: SwapperMeta[];
-  fetchStatus: FetchStatus;
+
   blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
   tokens: (options?: TokenOptions) => Token[];
-  swappers: () => SwapperMeta[];
-  isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
+  isTokenPinned: (token: Token) => boolean;
 
   fetch: () => Promise<void>;
 }
@@ -45,7 +43,7 @@ export const createDataSlice: StateCreator<
   _tokens: [],
   _popularTokens: [],
   _swappers: [],
-  fetchStatus: 'loading',
+
   // Selectors
   blockchains: (options) => {
     const blockchainsFromState = get()._blockchains;
@@ -131,10 +129,10 @@ export const createDataSlice: StateCreator<
       })
       .sort((a, b) => {
         // Check pinned tokens
-        if (get().isTokenPinned(a, options.type)) {
+        if (get().isTokenPinned(a)) {
           return -1;
         }
-        if (get().isTokenPinned(b, options.type)) {
+        if (get().isTokenPinned(b)) {
           return 1;
         }
 
@@ -159,84 +157,47 @@ export const createDataSlice: StateCreator<
 
     return list;
   },
-  isTokenPinned: (token, type) => {
-    const pinnedTokens =
-      type === 'source'
-        ? get().config.from?.pinnedTokens
-        : get().config.to?.pinnedTokens;
-    const pinned = !!pinnedTokens?.some((pinnedToken) =>
+  isTokenPinned: (token) => {
+    const pinned = !!get().config.pinnedTokens?.some((pinnedToken) =>
       tokensAreEqual(pinnedToken, token)
     );
     return pinned;
   },
-  swappers: () => {
-    const {
-      config: { enableNewLiquiditySources, liquiditySources },
-    } = get();
-
-    /*
-     * If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
-     * Otherwise, we return all swappers that are included in the config.
-     */
-    const swappers = get()._swappers.filter((swapper) => {
-      const swapperGroupIncludedInLiquiditySources = liquiditySources?.includes(
-        swapper.swapperGroup
-      );
-
-      const shouldExcludeLiquiditySources =
-        enableNewLiquiditySources ||
-        !liquiditySources ||
-        liquiditySources.length === 0;
-
-      return shouldExcludeLiquiditySources
-        ? !swapperGroupIncludedInLiquiditySources
-        : swapperGroupIncludedInLiquiditySources;
-    });
 
-    const sortedSwappers = swappers.sort(sortLiquiditySourcesByGroupTitle);
-
-    return sortedSwappers;
-  },
   // Actions
   fetch: async () => {
-    try {
-      const response = await sdk().getAllMetadata();
+    const response = await sdk().getAllMetadata();
 
-      set({ fetchStatus: 'success' });
-      const blockchains: BlockchainMeta[] = [];
-      const tokens: Token[] = [];
-      const popularTokens: Token[] = response.popularTokens;
-      const swappers: SwapperMeta[] = response.swappers;
+    const blockchains: BlockchainMeta[] = [];
+    const tokens: Token[] = [];
+    const popularTokens: Token[] = response.popularTokens;
+    const swappers: SwapperMeta[] = response.swappers;
 
-      const blockchainsWithAtLeastOneToken = new Set();
+    const blockchainsWithAtLeastOneToken = new Set();
 
-      response.tokens.forEach((token) => {
-        blockchainsWithAtLeastOneToken.add(token.blockchain);
+    response.tokens.forEach((token) => {
+      blockchainsWithAtLeastOneToken.add(token.blockchain);
 
-        tokens.push(token);
-      });
+      tokens.push(token);
+    });
 
-      response.blockchains.forEach((blockchain) => {
-        if (
-          blockchain.enabled &&
-          blockchainsWithAtLeastOneToken.has(blockchain.name)
-        ) {
-          blockchains.push(blockchain);
-        }
-      });
+    response.blockchains.forEach((blockchain) => {
+      if (
+        blockchain.enabled &&
+        blockchainsWithAtLeastOneToken.has(blockchain.name)
+      ) {
+        blockchains.push(blockchain);
+      }
+    });
 
-      // Sort
-      blockchains.sort((a, b) => a.sort - b.sort);
+    // Sort
+    blockchains.sort((a, b) => a.sort - b.sort);
 
-      set({
-        _blockchains: blockchains,
-        _tokens: tokens,
-        _popularTokens: popularTokens,
-        _swappers: swappers,
-      });
-    } catch (error) {
-      set({ fetchStatus: 'failed' });
-      throw error;
-    }
+    set({
+      _blockchains: blockchains,
+      _tokens: tokens,
+      _popularTokens: popularTokens,
+      _swappers: swappers,
+    });
   },
 });

package/src/store/wallets.ts

@@ -1,19 +1,17 @@
-import type { Balance, TokensBalance, Wallet } from '../types';
+import type { Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
-import type { Token } from 'rango-sdk';
 
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { httpService } from '../services/httpService';
 import {
-  createTokenHash,
   isAccountAndWalletMatched,
   makeBalanceFor,
-  makeTokensBalance,
   resetConnectedWalletState,
 } from '../utils/wallets';
 
+import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
 export type TokenBalance = {
@@ -35,31 +33,25 @@ export interface ConnectedWallet extends Wallet {
   loading: boolean;
   error: boolean;
 }
+
 interface WalletsStore {
   connectedWallets: ConnectedWallet[];
-  balances: TokensBalance;
   customDestination: string;
   loading: boolean;
-  connectWallet: (accounts: Wallet[], tokens: Token[]) => void;
+  connectWallet: (accounts: Wallet[]) => void;
   disconnectWallet: (walletType: WalletType) => void;
   selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
   clearConnectedWallet: () => void;
-  getWalletsDetails: (
-    accounts: Wallet[],
-    tokens: Token[],
-    shouldRetry?: boolean
-  ) => void;
-  getBalanceFor: (token: Token) => Balance | null;
+  getWalletsDetails: (accounts: Wallet[], shouldRetry?: boolean) => void;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
     subscribeWithSelector((set, get) => ({
       connectedWallets: [],
-      balances: {},
       customDestination: '',
       loading: false,
-      connectWallet: (accounts, tokens) => {
+      connectWallet: (accounts) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           loading: true,
@@ -85,7 +77,7 @@ export const useWalletsStore = createSelectors(
               })
             ),
         }));
-        getWalletsDetails(accounts, tokens);
+        getWalletsDetails(accounts);
       },
       disconnectWallet: (walletType) => {
         set((state) => {
@@ -96,27 +88,21 @@ export const useWalletsStore = createSelectors(
                 connectedWallet.walletType !== walletType
             )
             .map((selectedWallet) => selectedWallet.chain);
-
-          const 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 };
-            });
-
-          const balances = makeTokensBalance(connectedWallets);
-
           return {
-            balances,
-            connectedWallets,
+            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 };
+              }),
           };
         });
       },
@@ -149,8 +135,9 @@ export const useWalletsStore = createSelectors(
           connectedWallets: [],
           selectedWallets: [],
         })),
-      getWalletsDetails: async (accounts, tokens, shouldRetry = true) => {
+      getWalletsDetails: async (accounts, shouldRetry = true) => {
         const getWalletsDetails = get().getWalletsDetails;
+        const { tokens } = useMetaStore.getState().meta;
         set((state) => ({
           loading: true,
           connectedWallets: state.connectedWallets.map((wallet) => {
@@ -169,8 +156,9 @@ export const useWalletsStore = createSelectors(
           const response = await httpService().getWalletsDetails(data);
           const retrievedBalance = response.wallets;
           if (retrievedBalance) {
-            set((state) => {
-              const connectedWallets = state.connectedWallets.map(
+            set((state) => ({
+              loading: false,
+              connectedWallets: state.connectedWallets.map(
                 (connectedWallet) => {
                   const matchedAccount = accounts.find((account) =>
                     isAccountAndWalletMatched(account, connectedWallet)
@@ -185,7 +173,7 @@ export const useWalletsStore = createSelectors(
                     matchedAccount &&
                     shouldRetry
                   ) {
-                    getWalletsDetails([matchedAccount], tokens, false);
+                    getWalletsDetails([matchedAccount], false);
                   }
                   return matchedAccount && retrievedBalanceAccount
                     ? {
@@ -195,49 +183,30 @@ export const useWalletsStore = createSelectors(
                           retrievedBalanceAccount,
                           tokens
                         ),
-                        loading: false,
                       }
                     : connectedWallet;
                 }
-              );
-
-              const balances = makeTokensBalance(connectedWallets);
-
-              return {
-                loading: false,
-                balances,
-                connectedWallets,
-              };
-            });
+              ),
+            }));
           } else {
             throw new Error('Wallet not found');
           }
         } catch (error) {
-          set((state) => {
-            const connectedWallets = state.connectedWallets.map((balance) => {
+          set((state) => ({
+            loading: false,
+            connectedWallets: state.connectedWallets.map((balance) => {
               return accounts.find((account) =>
                 isAccountAndWalletMatched(account, balance)
               )
                 ? resetConnectedWalletState(balance)
                 : balance;
-            });
-
-            const balances = makeTokensBalance(connectedWallets);
-
-            return {
-              loading: false,
-              balances,
-              connectedWallets,
-            };
-          });
+            }),
+          }));
         }
       },
-      getBalanceFor: (token) => {
-        const { balances } = get();
-        const tokenHash = createTokenHash(token);
-        const balance = balances[tokenHash];
-        return balance ?? null;
-      },
     }))
   )
 );
+
+export const fetchingBalanceSelector = (state: WalletsStore) =>
+  !!state.connectedWallets.find((wallet) => wallet.loading);

package/src/types/config.ts

@@ -61,7 +61,7 @@ export type WidgetTheme = {
  * @property {{ [key: string]: string }} wallets - If you want to change the default affiliate wallet
  *  addresses, you can provide new values here. (Map of route blockchains to affiliate address)
  */
-export type WidgetAffiliate = {
+export type WidgeAffiliate = {
   ref?: string;
   percent?: number;
   wallets?: { [key: string]: string };
@@ -77,58 +77,21 @@ export type WidgetAffiliate = {
  * blockchains. e.g. ['BSC','ETHEREUM']
  * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
  * you could use that to limit tokens to some limited ones.
- * @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 BlockchainAndTokenConfig = {
   blockchain?: string;
   token?: Asset;
   blockchains?: string[];
   tokens?: Asset[];
-  pinnedTokens?: Asset[];
 };
 
-/**
- * `Features`
- *
- * @property {'visible' | 'hidden'} [theme]
- * - The visibility state for the theme feature. Optional property.
- *
- * @property {'visible' | 'hidden'} [language]
- * - The visibility state for the language feature. Optional property.
- *
- * @property {'disabled' | 'enabled'} [experimentalRoute]
- * - The enablement state for the experimental route feature. Optional property.
- *
- * @property {'visible' | 'hidden'} [connectWalletButton]
- * - The visibility state for the connect wallet button feature. Optional property.
- *
- * @property {'visible' | 'hidden'} [notification]
- * - The visibility state for the notification feature. Optional property.
- *
- * @property {'visible' | 'hidden'} [liquiditySource]
- * - The visibility state for the liquiditySource feature. Optional property.
- */
-export type Features = Partial<
-  Record<
-    | 'theme'
-    | 'language'
-    | 'connectWalletButton'
-    | 'notification'
-    | 'liquiditySource',
-    'visible' | 'hidden'
-  >
-> &
-  Partial<Record<'experimentalRoute', 'disabled' | 'enabled'>>;
-
 /**
  * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
  * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
- * @property {string} apiUrl - The API url used to set custom API url
- * @property {WidgetAffiliate} 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
@@ -156,23 +119,15 @@ export type Features = Partial<
  * 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 {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
+ * @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.
+ * @property {boolean} includeNewLiquiditySources - The `includeNewLiquiditySources` property is a boolean value that when you
  * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
- * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
- *   Keys include:
- *   - 'notification': Visibility state for the notification icon.
- *   - 'theme': Visibility state for the theme.
- *   - 'liquiditySource': Visibility state for liquidity source.
- *   - 'connectWalletButton': Visibility state for the wallet connect icon.
- *   - 'language': Visibility state for the language.
- *   - 'experimentalRoute': Enablement state for the experimental route.
  */
-
 export type WidgetConfig = {
   apiKey: string;
-  apiUrl?: string;
   walletConnectProjectId?: string;
-  affiliate?: WidgetAffiliate;
+  affiliate?: WidgeAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
@@ -183,6 +138,6 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
-  enableNewLiquiditySources?: boolean;
-  features?: Features;
+  pinnedTokens?: Asset[];
+  includeNewLiquiditySources?: boolean;
 };

package/src/types/index.ts

@@ -1,4 +1,4 @@
 export * from './swap';
 export * from './config';
-export * from './quote';
+export * from './routing';
 export * from './wallets';

package/src/types/routing.ts

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+import type { RouteState } from '../store/bestRoute';
+import type { SettingsState } from '../store/settings';
+
+interface BestRouteStoreParams {
+  fromBlockchain?: RouteState['fromBlockchain'];
+  toBlockchain?: RouteState['toBlockchain'];
+  fromToken?: RouteState['fromToken'];
+  toToken?: RouteState['toToken'];
+  inputAmount?: RouteState['inputAmount'];
+}
+
+interface SettingsStoreParams {
+  slippage?: SettingsState['slippage'];
+  customSlippage?: SettingsState['customSlippage'];
+  disabledLiquiditySources?: SettingsState['disabledLiquiditySources'];
+  infiniteApprove?: SettingsState['infiniteApprove'];
+}
+
+export type BestRouteEqualityParams =
+  | {
+      store: 'bestRoute';
+      prevState: BestRouteStoreParams;
+      currentState: BestRouteStoreParams;
+    }
+  | {
+      store: 'settings';
+      prevState: SettingsStoreParams;
+      currentState: SettingsStoreParams;
+    };
+
+export enum ConfirmSwapErrorTypes {
+  NO_ROUTE,
+  ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+  REQUEST_FAILED,
+  REQUEST_CANCELED,
+}
+
+export type ConfirmSwapError =
+  | {
+      type: ConfirmSwapErrorTypes.NO_ROUTE;
+      diagnosisMessage?: string;
+    }
+  | {
+      type: Exclude<ConfirmSwapErrorTypes, ConfirmSwapErrorTypes.NO_ROUTE>;
+    };
+
+export enum RouteWarningType {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+}
+
+export type RouteWarning =
+  | {
+      type: RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      newOutputAmount: string;
+      percentageChange: string;
+    }
+  | {
+      type: Exclude<
+        RouteWarningType,
+        RouteWarningType.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,14 +1,23 @@
-import type { SwapSavedSettings } from 'rango-types';
+import type { SwapSavedSettings } from 'rango-types/lib';
 
 export type PendingSwapSettings = Omit<
   SwapSavedSettings,
   'disabledSwappersIds'
 >;
 
-export type SwapButtonState = {
-  disabled: boolean;
+export enum ButtonState {
+  WAITFORCONNECTING = 'waitForConnecting',
+  SWAP = 'swap',
+  NEEDTOCONFIRM = 'needToConfirm',
+  WARNING = 'warning',
+}
+
+export type SwapButtonState = (
+  | { disabled: true }
+  | { disabled: false; hasWarning?: boolean }
+) & {
   title: string;
-  action: 'connect-wallet' | 'confirm-warning' | 'confirm-swap';
+  state: ButtonState;
 };
 
 export type ConvertedToken = {

package/src/types/wallets.ts

@@ -1,24 +1,7 @@
-import type { WalletType } from '@rango-dev/wallets-shared';
+import { WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;
   address: string;
   walletType: WalletType;
 }
-
-export type Balance = {
-  amount: string;
-  decimals: number;
-  usdValue: string;
-};
-
-type Blockchain = string;
-type TokenSymbol = string;
-type Address = string;
-
-/** `blockchain-symbol-Address` */
-export type TokenHash = `${Blockchain}-${TokenSymbol}-${Address}`;
-
-export type TokensBalance = {
-  [key: TokenHash]: Balance;
-};

package/src/utils/colors.ts

@@ -31,7 +31,7 @@ export const generateRangeColors = (name: string, color: string) => {
   const NUMBER_OF_COLORS = 10;
   const HALF_NUMBER_OF_COLORS = 5;
   const COLOR_SUFFIX = 100;
-  const AMT = 25;
+  const AMT = 32;
 
   let colors = { [name]: color };
   for (let i = 1; i < NUMBER_OF_COLORS; i++) {
@@ -60,7 +60,6 @@ export const generateRangeColors = (name: string, color: string) => {
       };
     }
   }
-
   return colors;
 };
 export const generateColors = (

package/src/utils/configs.ts

@@ -2,7 +2,6 @@ import { RANGO_PUBLIC_API_KEY } from '../constants';
 
 export interface Configs {
   API_KEY: string;
-  BASE_URL?: string;
 }
 
 let configs: Configs = {
@@ -10,7 +9,7 @@ let configs: Configs = {
 };
 
 export function getConfig(name: keyof Configs) {
-  return configs[name] || '';
+  return configs[name];
 }
 
 export function setConfig(name: keyof Configs, value: any) {

package/src/utils/date.ts

@@ -1,5 +1,5 @@
 import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
-import type { PendingSwap } from 'rango-types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 import dayjs from 'dayjs';
 

package/src/utils/meta.ts

@@ -1,4 +1,4 @@
-import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
+import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { tokensAreEqual } from './wallets';
 
@@ -17,13 +17,6 @@ export function getBlockchainShortNameFor(
     ?.shortName;
 }
 
-export function getSwapperDisplayName(
-  swapperId: string,
-  swappers: SwapperMeta[]
-) {
-  return swappers.find((swapper) => swapper.id === swapperId)?.swapperGroup;
-}
-
 export function findToken(t: Asset, tokens: Token[]) {
   return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
 }

package/src/utils/numbers.ts

@@ -16,7 +16,7 @@ export const secondsToString = (s: number): string => {
 };
 
 export const numberToString = (
-  number: BigNumber | string | number | null | undefined,
+  number: BigNumber | string | null | undefined,
   minDecimals: number | null = null,
   maxDecimals: number | null = null
 ): string => {