@rango-dev/widget-embedded 0.19.0 → 0.19.1-next.1

package/src/store/{bestRoute.ts → quote.ts}

@@ -1,7 +1,11 @@
-import type { TokenWithBalance } from '../components/TokenList';
 import type { Wallet } from '../types';
-import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
-import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import type {
+  BestRouteResponse,
+  BlockchainMeta,
+  MetaResponse,
+  Token,
+} from 'rango-sdk';
+import type { PendingSwap } from 'rango-types';
 
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
@@ -9,53 +13,58 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
-import {
-  createRetryRoute,
-  getBestRouteToTokenUsdPrice,
-} from '../utils/routing';
+import { createRetryQuote, getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
 
-import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
-const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
+export const getUsdValue = (
+  token: Token | null,
+  amount: string
+): BigNumber | null =>
   token?.usdPrice
     ? new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0)
     : null;
 
-export interface RouteState {
+export type Meta = Pick<MetaResponse, 'blockchains' | 'tokens'>;
+
+export type SetTokenParams = { token: Token; meta: Meta } | { token: null };
+
+export interface QuoteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
   inputAmount: string;
   inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
-  fromToken: TokenWithBalance | null;
-  toToken: TokenWithBalance | null;
-  routeWalletsConfirmed: boolean;
+  fromToken: Token | null;
+  toToken: Token | null;
+  quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
-  resetRoute: () => void;
+  quoteWarningsConfirmed: boolean;
+  resetQuote: () => void;
   resetToBlockchain: () => void;
   resetFromBlockchain: () => void;
   setFromBlockchain: (chain: BlockchainMeta | null) => void;
   setToBlockchain: (chian: BlockchainMeta | null) => void;
 
-  setFromToken: (token: Token | null) => void;
-  setToToken: (token: Token | null) => void;
+  setFromToken: (params: SetTokenParams) => void;
+  setToToken: (params: SetTokenParams) => void;
   setInputAmount: (amount: string) => void;
-  bestRoute: BestRouteResponse | null;
-  setRoute: (bestRoute: BestRouteResponse | null) => void;
-  retry: (pendingSwap: PendingSwap) => void;
+  quote: BestRouteResponse | null;
+  setQuote: (quote: BestRouteResponse | null) => void;
+  retry: (pendingSwap: PendingSwap, meta: Meta) => void;
   switchFromAndTo: () => void;
-  setRouteWalletConfirmed: (flag: boolean) => void;
+  setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
   customDestination: string;
   setCustomDestination: (address: string) => void;
-  resetRouteWallets: () => void;
+  resetQuoteWallets: () => void;
+  setQuoteWarningsConfirmed: (flag: boolean) => void;
 }
 
-export const useBestRouteStore = createSelectors(
-  create<RouteState>()(
+export const useQuoteStore = createSelectors(
+  create<QuoteState>()(
     subscribeWithSelector((set) => ({
       fromBlockchain: null,
       fromToken: null,
@@ -65,37 +74,38 @@ export const useBestRouteStore = createSelectors(
       outputUsdValue: new BigNumber(0),
       toBlockchain: null,
       toToken: null,
-      bestRoute: null,
-      routeWalletsConfirmed: false,
+      quote: null,
+      quoteWalletsConfirmed: false,
       selectedWallets: [],
       customDestination: '',
-      setRoute: (bestRoute) =>
+      quoteWarningsConfirmed: false,
+      setQuote: (quote) =>
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
           if (!isPositiveNumber(state.inputAmount)) {
             return {};
           }
-          if (!!bestRoute) {
-            outputAmount = !!bestRoute.result?.outputAmount
-              ? new BigNumber(bestRoute.result?.outputAmount)
+          if (!!quote) {
+            outputAmount = !!quote.result?.outputAmount
+              ? new BigNumber(quote.result?.outputAmount)
               : null;
             outputUsdValue = calcOutputUsdValue(
-              bestRoute.result?.outputAmount,
-              getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice
+              quote.result?.outputAmount,
+              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
             );
           }
           return {
-            bestRoute,
-            ...(!!bestRoute && {
+            quote: quote,
+            ...(!!quote && {
               outputAmount,
               outputUsdValue,
             }),
           };
         }),
-      resetRoute: () =>
+      resetQuote: () =>
         set(() => ({
-          bestRoute: null,
+          quote: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
         })),
@@ -108,7 +118,7 @@ export const useBestRouteStore = createSelectors(
           return {
             fromBlockchain: chain,
             ...(state.fromToken && {
-              bestRoute: null,
+              quote: null,
               fromToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -116,18 +126,17 @@ export const useBestRouteStore = createSelectors(
           };
         });
       },
-      setFromToken: (token) => {
-        const { blockchains } = useMetaStore.getState().meta;
+      setFromToken: (params) => {
         return set((state) => ({
-          fromToken: token,
-          ...(token && {
+          fromToken: params.token,
+          ...(params.token && {
             fromBlockchain:
-              blockchains.find(
-                (blockchain) => blockchain.name === token.blockchain
+              params.meta.blockchains.find(
+                (blockchain) => blockchain.name === params.token.blockchain
               ) ?? null,
           }),
           ...(!!state.inputAmount && {
-            inputUsdValue: getUsdValue(token, state.inputAmount),
+            inputUsdValue: getUsdValue(params.token, state.inputAmount),
           }),
         }));
       },
@@ -140,7 +149,7 @@ export const useBestRouteStore = createSelectors(
           return {
             toBlockchain: chain,
             ...(state.toToken && {
-              bestRoute: null,
+              quote: null,
               toToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -148,14 +157,13 @@ export const useBestRouteStore = createSelectors(
           };
         });
       },
-      setToToken: (token) => {
-        const { blockchains } = useMetaStore.getState().meta;
+      setToToken: (params) => {
         return set(() => ({
-          toToken: token,
-          ...(token && {
+          toToken: params.token,
+          ...(params.token && {
             toBlockchain:
-              blockchains.find(
-                (blockchain) => blockchain.name === token.blockchain
+              params.meta.blockchains.find(
+                (blockchain) => blockchain.name === params.token.blockchain
               ) ?? null,
           }),
         }));
@@ -166,24 +174,22 @@ export const useBestRouteStore = createSelectors(
           ...(!amount && {
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
-            bestRoute: null,
+            quote: null,
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
           }),
         }));
       },
-      retry: (pendingSwap) => {
-        const { tokens, blockchains } = useMetaStore.getState().meta;
-
+      retry: (pendingSwap, meta) => {
+        const { tokens, blockchains } = meta;
         const {
           fromBlockchain,
           fromToken,
           toBlockchain,
           toToken,
           inputAmount,
-        } = createRetryRoute(pendingSwap, blockchains, tokens);
-
+        } = createRetryQuote(pendingSwap, blockchains, tokens);
         set({
           fromBlockchain,
           fromToken,
@@ -193,7 +199,7 @@ export const useBestRouteStore = createSelectors(
           outputUsdValue: new BigNumber(0),
           toBlockchain,
           toToken,
-          bestRoute: null,
+          quote: null,
         });
       },
       switchFromAndTo: () =>
@@ -208,14 +214,13 @@ export const useBestRouteStore = createSelectors(
             state.outputAmount?.toString() || ''
           ),
         })),
-
       resetFromBlockchain: () =>
         set(() => ({
           fromToken: null,
           fromBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          bestRoute: null,
+          quote: null,
         })),
       resetToBlockchain: () =>
         set(() => ({
@@ -223,20 +228,22 @@ export const useBestRouteStore = createSelectors(
           toBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          bestRoute: null,
+          quote: null,
         })),
-      setRouteWalletConfirmed: (flag) =>
+      setQuoteWalletConfirmed: (flag) =>
         set({
-          routeWalletsConfirmed: flag,
+          quoteWalletsConfirmed: flag,
         }),
       setSelectedWallets: (wallets) => set({ selectedWallets: wallets }),
       setCustomDestination: (address) => set({ customDestination: address }),
-      resetRouteWallets: () =>
+      resetQuoteWallets: () =>
         set({
-          routeWalletsConfirmed: false,
+          quoteWalletsConfirmed: false,
           selectedWallets: [],
           customDestination: '',
         }),
+      setQuoteWarningsConfirmed: (flag) =>
+        set({ quoteWarningsConfirmed: flag }),
     }))
   )
 );

package/src/store/slices/config.ts

@@ -1,7 +1,12 @@
 import type { WidgetConfig } from '../../types';
-import type { StateCreator } from 'zustand';
+import type { StateCreatorWithInitialData } from '../app';
 
-const initConfig: WidgetConfig = { apiKey: '' };
+export const DEFAULT_CONFIG: WidgetConfig = {
+  apiKey: '',
+  multiWallets: true,
+  enableNewLiquiditySources: true,
+  customDestination: true,
+};
 
 export type ConfigSlice = {
   config: WidgetConfig;
@@ -9,18 +14,24 @@ export type ConfigSlice = {
   updateConfig: (config: WidgetConfig) => void;
 };
 
-export const createConfigSlice: StateCreator<ConfigSlice> = (set, get) => ({
-  config: initConfig,
+export const createConfigSlice: StateCreatorWithInitialData<
+  WidgetConfig,
+  ConfigSlice,
+  ConfigSlice
+> = (initialData, set, get) => {
+  return {
+    config: { ...DEFAULT_CONFIG, ...initialData },
 
-  // Actions
-  updateConfig: (nextConfig: WidgetConfig) => {
-    const currentConfig = get().config;
+    // Actions
+    updateConfig: (nextConfig: WidgetConfig) => {
+      const currentConfig = get().config;
 
-    set({
-      config: {
-        ...currentConfig,
-        ...nextConfig,
-      },
-    });
-  },
-});
+      set({
+        config: {
+          ...currentConfig,
+          ...nextConfig,
+        },
+      });
+    },
+  };
+};

package/src/store/slices/data.ts

@@ -6,6 +6,7 @@ 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 = {
@@ -13,21 +14,22 @@ 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[];
-  isTokenPinned: (token: Token) => boolean;
+  swappers: () => SwapperMeta[];
+  isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
 
   fetch: () => Promise<void>;
 }
@@ -43,7 +45,7 @@ export const createDataSlice: StateCreator<
   _tokens: [],
   _popularTokens: [],
   _swappers: [],
-
+  fetchStatus: 'loading',
   // Selectors
   blockchains: (options) => {
     const blockchainsFromState = get()._blockchains;
@@ -129,10 +131,10 @@ export const createDataSlice: StateCreator<
       })
       .sort((a, b) => {
         // Check pinned tokens
-        if (get().isTokenPinned(a)) {
+        if (get().isTokenPinned(a, options.type)) {
           return -1;
         }
-        if (get().isTokenPinned(b)) {
+        if (get().isTokenPinned(b, options.type)) {
           return 1;
         }
 
@@ -157,47 +159,84 @@ export const createDataSlice: StateCreator<
 
     return list;
   },
-  isTokenPinned: (token) => {
-    const pinned = !!get().config.pinnedTokens?.some((pinnedToken) =>
+  isTokenPinned: (token, type) => {
+    const pinnedTokens =
+      type === 'source'
+        ? get().config.from?.pinnedTokens
+        : get().config.to?.pinnedTokens;
+    const pinned = !!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 () => {
-    const response = await sdk().getAllMetadata();
+    try {
+      const response = await sdk().getAllMetadata();
 
-    const blockchains: BlockchainMeta[] = [];
-    const tokens: Token[] = [];
-    const popularTokens: Token[] = response.popularTokens;
-    const swappers: SwapperMeta[] = response.swappers;
+      set({ fetchStatus: 'success' });
+      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,
-    });
+      set({
+        _blockchains: blockchains,
+        _tokens: tokens,
+        _popularTokens: popularTokens,
+        _swappers: swappers,
+      });
+    } catch (error) {
+      set({ fetchStatus: 'failed' });
+      throw error;
+    }
   },
 });

package/src/store/slices/settings.ts

@@ -0,0 +1,168 @@
+import type { ConfigSlice } from './config';
+import type { WidgetConfig } from '../../types';
+import type { SwapperMeta } from 'rango-sdk';
+import type { StateCreator } from 'zustand';
+
+import { type Language } from '@rango-dev/ui';
+
+import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
+import { DEFAULT_LANGUAGE } from '../../constants/languages';
+import { DEFAULT_SLIPPAGE } from '../../constants/swapSettings';
+import { removeDuplicateFrom } from '../../utils/common';
+import { isFeatureHidden } from '../../utils/settings';
+
+export type ThemeMode = 'auto' | 'dark' | 'light';
+
+export interface SettingsSlice {
+  theme: ThemeMode;
+  language: Language;
+  disabledLiquiditySources: string[];
+  /** Keeping a history of blockchains that user has selected (in Swap process) */
+  preferredBlockchains: string[];
+  slippage: number;
+  customSlippage: number | null;
+  infiniteApprove: boolean;
+  affiliateRef: string | null;
+  affiliatePercent: number | null;
+  affiliateWallets: { [key: string]: string } | null;
+
+  setSlippage: (slippage: number) => void;
+  setCustomSlippage: (customSlippage: number | null) => void;
+  toggleInfiniteApprove: () => void;
+  toggleLiquiditySource: (name: string) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setLanguage: (language: Language) => void;
+  toggleAllLiquiditySources: (
+    swappers: SwapperMeta[],
+    shouldReset?: boolean
+  ) => void;
+  setAffiliateRef: (affiliateRef: string | null) => void;
+  setAffiliatePercent: (affiliatePercent: number | null) => void;
+  setAffiliateWallets: (
+    affiliateWallets: { [key: string]: string } | null
+  ) => void;
+  addPreferredBlockchain: (blockchain: string) => void;
+  updateSettings: (config: WidgetConfig) => void;
+}
+
+export const createSettingsSlice: StateCreator<
+  SettingsSlice & ConfigSlice,
+  [],
+  [],
+  SettingsSlice
+> = (set, get) => ({
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  language: DEFAULT_LANGUAGE,
+  preferredBlockchains: [],
+  slippage: DEFAULT_SLIPPAGE,
+  customSlippage: null,
+  infiniteApprove: false,
+  affiliateRef: null,
+  affiliatePercent: null,
+  affiliateWallets: null,
+
+  addPreferredBlockchain: (blockchain) => {
+    const currentPreferredBlockchains = get().preferredBlockchains;
+
+    const noNeedToDoAnything = currentPreferredBlockchains.find(
+      (preferredBlockchain, index) => {
+        const isSameBlockchain = preferredBlockchain === blockchain;
+        const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
+
+        return isSameBlockchain && isInVisibleList;
+      }
+    );
+
+    if (noNeedToDoAnything) {
+      return;
+    }
+
+    const nextPreferredBlockchains: string[] =
+      currentPreferredBlockchains.filter((preferredBlockchain) => {
+        const isSameBlockchain = preferredBlockchain === blockchain;
+
+        return !isSameBlockchain;
+      });
+
+    set(() => ({
+      preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
+    }));
+  },
+  setSlippage: (slippage) =>
+    set(() => ({
+      slippage: slippage,
+    })),
+  setCustomSlippage: (customSlippage) =>
+    set(() => ({
+      customSlippage: customSlippage,
+    })),
+  setAffiliateRef: (affiliateRef) =>
+    set(() => ({
+      affiliateRef,
+    })),
+  setAffiliatePercent: (affiliatePercent) =>
+    set(() => ({
+      affiliatePercent,
+    })),
+
+  setAffiliateWallets: (affiliateWallets) =>
+    set(() => ({
+      affiliateWallets,
+    })),
+  toggleAllLiquiditySources: (swappers, shouldReset) =>
+    set((state) => {
+      if (shouldReset) {
+        return { disabledLiquiditySources: [] };
+      }
+      const swappersGroup = removeDuplicateFrom(
+        swappers.map((swapper) => swapper.swapperGroup)
+      );
+
+      if (swappersGroup.length === state.disabledLiquiditySources.length) {
+        return { disabledLiquiditySources: [] };
+      }
+
+      return {
+        disabledLiquiditySources: swappersGroup,
+      };
+    }),
+  toggleInfiniteApprove: () =>
+    set((state) => ({
+      infiniteApprove: !state.infiniteApprove,
+    })),
+  toggleLiquiditySource: (name) =>
+    set((state) => {
+      if (state.disabledLiquiditySources.includes(name)) {
+        return {
+          disabledLiquiditySources: state.disabledLiquiditySources.filter(
+            (liquiditySource) => liquiditySource != name
+          ),
+        };
+      }
+      return {
+        disabledLiquiditySources: state.disabledLiquiditySources.concat(name),
+      };
+    }),
+  setTheme: (theme) =>
+    set(() => ({
+      theme,
+    })),
+  setLanguage: (language) =>
+    set(() => ({
+      language,
+    })),
+  updateSettings: (nextConfig: WidgetConfig) => {
+    const { features } = nextConfig;
+
+    const isThemeHidden = isFeatureHidden('theme', features);
+    const isLanguageHidden = isFeatureHidden('language', features);
+    const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+
+    set({
+      ...(isThemeHidden && { theme: 'auto' }),
+      ...(isLanguageHidden && { language: DEFAULT_LANGUAGE }),
+      ...(isLiquidityHidden && { disabledLiquiditySources: [] }),
+    });
+  },
+});