@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/store/slices/data.ts

@@ -0,0 +1,394 @@
+// We keep all the received data from server in this slice
+
+import type { ConfigSlice } from './config';
+import type { SettingsSlice } from './settings';
+import type { CachedEntries } from '../../services/cacheService';
+import type { Balance, Blockchain, TokenHash } from '../../types';
+import type { StateCreator } from 'zustand';
+
+import {
+  type Asset,
+  type BlockchainMeta,
+  type SwapperMeta,
+  type Token,
+} from 'rango-sdk';
+
+import { ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS } from '../../constants/customTokens';
+import { cacheService } from '../../services/cacheService';
+import { httpService as sdk } from '../../services/httpService';
+import { compareWithSearchFor, containsText } from '../../utils/common';
+import { createTokenHash, isTokenNative } from '../../utils/meta';
+import {
+  addCustomTokensToSupportedTokens,
+  isRoutingEnabled,
+  sortLiquiditySourcesByGroupTitle,
+} from '../../utils/settings';
+import { areTokensEqual, compareTokenBalance } from '../../utils/wallets';
+import {
+  getSupportedBlockchainsFromConfig,
+  matchTokensFromConfigWithMeta,
+} from '../utils';
+
+type BlockchainOptions = {
+  type?: 'source' | 'destination' | 'custom-token';
+};
+
+type TokenOptions = {
+  type: 'source' | 'destination';
+  // filter by an specific blockchain
+  blockchain?: string;
+  searchFor?: string;
+  getBalanceFor?: (token: Token) => Balance | null;
+};
+
+export type FindToken = (asset: Asset) => Token | undefined;
+
+export type FetchStatus = 'loading' | 'success' | 'failed';
+export interface DataSlice {
+  _blockchainsMapByName: Map<string, BlockchainMeta>;
+  _tokensMapByTokenHash: Map<TokenHash, Token>;
+  _tokensMapByBlockchainName: Record<Blockchain, TokenHash[]>;
+  _popularTokens: Token[];
+  _swappers: SwapperMeta[];
+  fetchStatus: FetchStatus;
+  blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
+  tokens: (options?: TokenOptions) => Token[];
+  swappers: () => SwapperMeta[];
+  isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
+  findToken: FindToken;
+  findNativeToken: (blockchain: BlockchainMeta) => Token | undefined;
+  fetch: () => Promise<void>;
+}
+
+export const createDataSlice: StateCreator<
+  DataSlice & ConfigSlice & SettingsSlice,
+  [],
+  [],
+  DataSlice
+> = (set, get) => ({
+  // State
+  _blockchainsMapByName: new Map(),
+  _tokensMapByTokenHash: new Map(),
+  _tokensMapByBlockchainName: {},
+  _popularTokens: [],
+  _swappers: [],
+  fetchStatus: 'loading',
+  // Selectors
+  blockchains: (options) => {
+    const blockchainsMapByName = get()._blockchainsMapByName;
+    const blockchainsFromState = Array.from(
+      blockchainsMapByName?.values() || []
+    );
+
+    if (!options || !options?.type) {
+      return blockchainsFromState;
+    }
+    const config = get().config;
+
+    if (options.type === 'custom-token') {
+      const supportedBlockchainsFromConfig = getSupportedBlockchainsFromConfig({
+        config,
+      });
+
+      let supportedBlockchains: BlockchainMeta[] = blockchainsFromState;
+
+      /*
+       * Supported blockchains can be configured and be limited.
+       * In this case, we only keep those active blockchains which exist in config.
+       */
+      if (supportedBlockchainsFromConfig.length > 0) {
+        supportedBlockchains = supportedBlockchains.filter((blockchain) =>
+          supportedBlockchainsFromConfig.includes(blockchain.name)
+        );
+      }
+
+      return supportedBlockchains.filter((blockchain) =>
+        ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS.includes(blockchain.type)
+      );
+    }
+
+    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 {
+      _tokensMapByTokenHash,
+      _tokensMapByBlockchainName,
+      config,
+      _customTokens,
+    } = get();
+    const tokensFromState = Array.from(_tokensMapByTokenHash.values());
+    const blockchainsMapByName = get()._blockchainsMapByName;
+    if (!options || !options.type) {
+      return tokensFromState;
+    }
+
+    const configType = options.type === 'source' ? 'from' : 'to';
+    const cacheKey: keyof CachedEntries =
+      options.type === 'source'
+        ? 'supportedSourceTokens'
+        : 'supportedDestinationTokens';
+
+    let supportedTokens = cacheService.get(cacheKey);
+    if (!supportedTokens?.length) {
+      supportedTokens = matchTokensFromConfigWithMeta({
+        type: options.type,
+        config: {
+          blockchains: config[configType]?.blockchains,
+          tokens: config[configType]?.tokens,
+        },
+        meta: {
+          tokensMapByTokenHash: _tokensMapByTokenHash,
+          tokensMapByBlockchainName: _tokensMapByBlockchainName,
+        },
+      });
+      cacheService.set(cacheKey, supportedTokens);
+    }
+
+    supportedTokens = addCustomTokensToSupportedTokens(
+      supportedTokens,
+      _customTokens,
+      config.features
+    );
+
+    const blockchains = get().blockchains({
+      type: options.type,
+    });
+
+    const list = supportedTokens
+      .filter((token) => {
+        // 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((tokenA, tokenB) => {
+        //1. sort by pinned tokens
+        const isToken1Pinned = get().isTokenPinned(tokenA, options.type);
+        const isToken2Pinned = get().isTokenPinned(tokenB, options.type);
+        if (isToken1Pinned !== isToken2Pinned) {
+          return isToken1Pinned ? -1 : 1;
+        }
+
+        //2. sort by balance
+        if (options.getBalanceFor) {
+          const token1Balance = options.getBalanceFor(tokenA);
+          const token2Balance = options.getBalanceFor(tokenB);
+          const balanceCompare = compareTokenBalance(
+            token1Balance,
+            token2Balance
+          );
+          if (balanceCompare !== 0) {
+            return balanceCompare;
+          }
+        }
+
+        const blockChainA = blockchainsMapByName.get(tokenA.blockchain);
+        const blockChainB = blockchainsMapByName.get(tokenB.blockchain);
+
+        //3. sort by native token
+        const isNativeTokenA = isTokenNative(tokenA, blockChainA);
+        const isNativeTokenB = isTokenNative(tokenB, blockChainB);
+        if (isNativeTokenA !== isNativeTokenB) {
+          return isNativeTokenA ? -1 : 1;
+        }
+
+        //4. sort by token popularity
+        if (tokenA.isPopular !== tokenB.isPopular) {
+          return tokenA.isPopular ? -1 : 1;
+        }
+
+        //5. sort by search phrase
+        if (options.searchFor) {
+          const symbolSearchForCompare = compareWithSearchFor(
+            tokenA,
+            tokenB,
+            options.searchFor
+          );
+          if (symbolSearchForCompare) {
+            return symbolSearchForCompare;
+          }
+        }
+
+        //6. sort by token isSecondary
+        if (tokenA.isSecondaryCoin !== tokenB.isSecondaryCoin) {
+          return tokenA.isSecondaryCoin ? 1 : -1;
+        }
+
+        //7. sort by blockchain order
+        if (!!blockChainA && !!blockChainB) {
+          return blockChainA.sort - blockChainB.sort;
+        }
+
+        return 0;
+      });
+
+    return list;
+  },
+  findToken: (asset) => {
+    const tokensMapByHashToken = get()._tokensMapByTokenHash;
+    const customTokens = get().customTokens();
+    const tokenHash = createTokenHash(asset);
+    let token = tokensMapByHashToken.get(tokenHash);
+    if (!token) {
+      token = customTokens.find(
+        (customToken) => createTokenHash(customToken) === tokenHash
+      );
+    }
+    return token;
+  },
+  findNativeToken: (blockchain: BlockchainMeta) => {
+    const feeAsset = blockchain.feeAssets[0];
+    return get().findToken({
+      blockchain: blockchain.name,
+      address: feeAsset.address,
+      symbol: feeAsset.symbol,
+    });
+  },
+  isTokenPinned: (token, type) => {
+    const pinnedTokens =
+      type === 'source'
+        ? get().config.from?.pinnedTokens
+        : get().config.to?.pinnedTokens;
+    const pinned = !!pinnedTokens?.some((pinnedToken) =>
+      areTokensEqual(pinnedToken, token)
+    );
+    return pinned;
+  },
+  swappers: () => {
+    const { config, campaignMode } = get();
+
+    const campaignModeLiquiditySource = campaignMode.liquiditySources?.length
+      ? campaignMode.liquiditySources
+      : null;
+
+    const liquiditySources =
+      campaignModeLiquiditySource ?? config.liquiditySources;
+
+    const excludeLiquiditySources = campaignModeLiquiditySource
+      ? false
+      : config.excludeLiquiditySources;
+
+    /*
+     * If the excludeLiquiditySources 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 =
+        excludeLiquiditySources ||
+        !liquiditySources ||
+        liquiditySources.length === 0;
+
+      return shouldExcludeLiquiditySources
+        ? !swapperGroupIncludedInLiquiditySources
+        : swapperGroupIncludedInLiquiditySources;
+    });
+
+    const sortedSwappers = swappers.sort(sortLiquiditySourcesByGroupTitle);
+
+    return sortedSwappers;
+  },
+  // Actions
+  fetch: async () => {
+    try {
+      const { routing } = get().config;
+      const enableCentralizedSwappers = isRoutingEnabled(
+        'enableCentralizedSwappers',
+        routing
+      );
+
+      const response = await sdk().getAllMetadata({
+        enableCentralizedSwappers,
+      });
+      set({ fetchStatus: 'success' });
+      const blockchainsMapByName: Map<string, BlockchainMeta> = new Map<
+        string,
+        BlockchainMeta
+      >();
+
+      const tokensMapByTokenHash: Map<TokenHash, Token> = new Map<
+        TokenHash,
+        Token
+      >();
+      const tokensMapByBlockchainName: DataSlice['_tokensMapByBlockchainName'] =
+        {};
+      const popularTokens: Token[] = response.popularTokens;
+      const swappers: SwapperMeta[] = response.swappers.filter(
+        (swapper) => swapper.enabled
+      );
+
+      const sortedBlockchain = response.blockchains.sort(
+        (a, b) => a.sort - b.sort
+      );
+
+      sortedBlockchain.forEach((blockchain) => {
+        if (blockchain.enabled) {
+          blockchainsMapByName.set(blockchain.name, blockchain);
+        }
+      });
+
+      response.tokens.forEach((token) => {
+        const tokenHash = createTokenHash(token);
+        if (!tokensMapByBlockchainName[token.blockchain]) {
+          tokensMapByBlockchainName[token.blockchain] = [];
+        }
+        tokensMapByTokenHash.set(tokenHash, token);
+        tokensMapByBlockchainName[token.blockchain]?.push(tokenHash);
+      });
+
+      set({
+        _blockchainsMapByName: blockchainsMapByName,
+        _tokensMapByTokenHash: tokensMapByTokenHash,
+        _tokensMapByBlockchainName: tokensMapByBlockchainName,
+        _popularTokens: popularTokens,
+        _swappers: swappers,
+      });
+    } catch (error) {
+      set({ fetchStatus: 'failed' });
+      throw error;
+    }
+  },
+});

package/src/store/slices/settings.ts

@@ -0,0 +1,229 @@
+import type { ConfigSlice } from './config';
+import type { DataSlice } from './data';
+import type { WalletsSlice } from './wallets';
+import type { TokenData } from '../../components/TokenList/TokenList.types';
+import type { WidgetConfig } from '../../types';
+import type { SwapperMeta, Token } 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';
+import { getSupportedBlockchainsFromConfig } from '../utils';
+
+export type ThemeMode = 'auto' | 'dark' | 'light';
+export type QuoteTokensRate = 'default' | 'reversed';
+
+export interface SettingsSlice {
+  theme: ThemeMode;
+  language: Language | null;
+  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;
+  _customTokens: Token[];
+  quoteTokensRate: QuoteTokensRate;
+
+  setSlippage: (slippage: number) => void;
+  setCustomSlippage: (customSlippage: number | null) => void;
+  toggleInfiniteApprove: () => void;
+  toggleLiquiditySource: (name: string) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setLanguage: (language: Language | null) => 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;
+  setCustomToken: (token: TokenData) => void;
+  deleteCustomToken: (token: Token) => void;
+  customTokens: () => Token[];
+  changeQuoteTokensRate: () => void;
+}
+
+export const createSettingsSlice: StateCreator<
+  SettingsSlice & DataSlice & ConfigSlice & WalletsSlice,
+  [],
+  [],
+  SettingsSlice
+> = (set, get) => ({
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  language: null,
+  preferredBlockchains: [],
+  slippage: DEFAULT_SLIPPAGE,
+  customSlippage: null,
+  infiniteApprove: false,
+  affiliateRef: null,
+  affiliatePercent: null,
+  affiliateWallets: null,
+  _customTokens: [],
+  quoteTokensRate: 'default',
+
+  changeQuoteTokensRate: () =>
+    set((state) => ({
+      quoteTokensRate:
+        state.quoteTokensRate === 'default' ? 'reversed' : 'default',
+    })),
+  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, theme } = nextConfig;
+
+    const isThemeHidden = isFeatureHidden('theme', features);
+    const isLanguageHidden = isFeatureHidden('language', features);
+    const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+    const singleTheme = theme?.singleTheme;
+    const autoUpdateSettings =
+      nextConfig?.__UNSTABLE_OR_INTERNAL__?.autoUpdateSettings;
+
+    set({
+      ...(isThemeHidden && { theme: nextConfig.theme?.mode || 'auto' }),
+      ...(singleTheme && { theme: nextConfig.theme?.mode || 'light' }),
+      ...(isLanguageHidden && {
+        language: nextConfig.language || DEFAULT_LANGUAGE,
+      }),
+      ...(isLiquidityHidden && {
+        disabledLiquiditySources: nextConfig.liquiditySources || [],
+      }),
+      ...(autoUpdateSettings && {
+        // For the time being, we have added the language; if more are needed later, we can add other parameters.
+        language: nextConfig.language || DEFAULT_LANGUAGE,
+      }),
+    });
+  },
+  setCustomToken: (token) => {
+    void get().fetchCustomTokensBalances({
+      tokens: [token],
+      connectedWallets: get().connectedWallets,
+    });
+    set((state) => ({
+      _customTokens: [token, ...state._customTokens],
+    }));
+  },
+  deleteCustomToken: (token) =>
+    set((state) => ({
+      _customTokens: state._customTokens.filter(
+        (customToken) => customToken.address !== token.address
+      ),
+    })),
+  customTokens: () => {
+    const config = get().config;
+
+    const customTokens = get()._customTokens;
+    const supportedBlockchainsFromConfig = getSupportedBlockchainsFromConfig({
+      config,
+    });
+
+    return !supportedBlockchainsFromConfig.length
+      ? customTokens
+      : customTokens.filter((token) =>
+          supportedBlockchainsFromConfig.includes(token.blockchain)
+        );
+  },
+});

package/src/store/slices/types.ts

@@ -0,0 +1,9 @@
+import type { ConfigSlice } from './config';
+import type { DataSlice } from './data';
+import type { SettingsSlice } from './settings';
+import type { WalletsSlice } from './wallets';
+
+export type AppStoreState = DataSlice &
+  ConfigSlice &
+  SettingsSlice &
+  WalletsSlice;