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

package/src/store/ui.ts

@@ -0,0 +1,65 @@
+import type { Watermark } from '../hooks/useFetchApiConfig';
+import type { TabManagerInterface } from '../libs/tabManager';
+
+import { create } from 'zustand';
+
+import { TabManager } from '../libs/tabManager';
+
+import createSelectors from './selectors';
+
+interface UiState {
+  isActiveTab: boolean;
+  tabManagerInitiated: boolean;
+  showActivateTabModal: boolean;
+  watermark: Watermark;
+  showProfileBanner: boolean;
+  showCompactTokenSelector: boolean;
+  activateCurrentTab: (
+    setCurrentTabAsActive: () => void,
+    hasRunningSwaps: boolean
+  ) => void;
+  setShowActivateTabModal: (flag: boolean) => void;
+  setWatermark: (watermark: Watermark) => void;
+  setShowProfileBanner: (showProfileBanner: boolean) => void;
+  setShowCompactTokenSelector: (showCompactTokenSelector: boolean) => void;
+}
+
+export const useUiStore = createSelectors(
+  create<UiState>()((set, get) => ({
+    isActiveTab: false,
+    tabManagerInitiated: false,
+    showActivateTabModal: false,
+    watermark: 'NONE',
+    showProfileBanner: false,
+    fetchingApiConfig: false,
+    showCompactTokenSelector: false,
+    activateCurrentTab: (setCurrentTabAsActive, hasRunningSwaps) => {
+      const { showActivateTabModal } = get();
+
+      if (!showActivateTabModal && hasRunningSwaps) {
+        set({ showActivateTabModal: true });
+      } else if (showActivateTabModal || !hasRunningSwaps) {
+        setCurrentTabAsActive();
+      }
+    },
+    setShowActivateTabModal: (flag) => {
+      set({ showActivateTabModal: flag });
+    },
+    setWatermark: (watermark) => {
+      set({ watermark });
+    },
+    setShowProfileBanner: (showProfileBanner) => {
+      set({ showProfileBanner });
+    },
+    setShowCompactTokenSelector: (showCompactTokenSelector) => {
+      set({ showCompactTokenSelector });
+    },
+  }))
+);
+
+export const tabManager: TabManagerInterface = new TabManager({
+  onInit: () => useUiStore.setState({ tabManagerInitiated: true }),
+  onClaim: () =>
+    useUiStore.setState({ isActiveTab: true, showActivateTabModal: false }),
+  onRelease: () => useUiStore.setState({ isActiveTab: false }),
+});

package/src/store/utils/data.test.ts

@@ -0,0 +1,188 @@
+import type { Token } from 'rango-sdk';
+
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { createToken } from '../../test-utils/fixtures';
+import { createTokenHash } from '../../utils/meta';
+
+import { matchTokensFromConfigWithMeta } from './data'; // Adjust path as necessary
+
+type MatchTokensFromConfigWithMetaParam = Parameters<
+  typeof matchTokensFromConfigWithMeta
+>[0];
+
+const BLOCKCHAIN_A = 'blockchainA';
+const BLOCKCHAIN_B = 'blockchainB';
+const BLOCKCHAIN_C = 'blockchainC';
+
+const tokens: Token[] = [
+  { ...createToken(), blockchain: BLOCKCHAIN_A },
+  { ...createToken(), blockchain: BLOCKCHAIN_A },
+  { ...createToken(), blockchain: BLOCKCHAIN_B },
+  { ...createToken(), blockchain: BLOCKCHAIN_C },
+];
+
+function createMetaForMockData(
+  tokens: Token[]
+): MatchTokensFromConfigWithMetaParam['meta'] {
+  const meta: MatchTokensFromConfigWithMetaParam['meta'] = {
+    tokensMapByTokenHash: new Map(),
+    tokensMapByBlockchainName: {},
+  };
+  tokens.forEach((token) => {
+    const tokenHash = createTokenHash(token);
+    meta.tokensMapByTokenHash.set(tokenHash, token);
+    if (!meta.tokensMapByBlockchainName[token.blockchain]) {
+      meta.tokensMapByBlockchainName[token.blockchain] = [];
+    }
+    meta.tokensMapByBlockchainName[token.blockchain]?.push(tokenHash);
+  });
+
+  return meta;
+}
+
+describe('matchTokensFromConfigWithMeta', () => {
+  let token0: Token;
+  let token1: Token;
+  let token2: Token;
+
+  beforeEach(() => {
+    // Assert presence once
+    if (!tokens[0] || !tokens[1] || !tokens[2]) {
+      throw new Error('Test data not populated correctly');
+    }
+    token0 = tokens[0];
+    token1 = tokens[1];
+    token2 = tokens[2];
+  });
+  test('should include tokens from config.tokens array that exist in meta', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: undefined,
+        tokens: [token0, token1],
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([token0, token1]);
+  });
+
+  test('If config.blockchains is not defined or is empty, we should include all tokens from the meta for every blockchain that does not have tokens specified in the config, as well as tokens specified in the config that exist in the meta.', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: undefined,
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [token0], isExcluded: false },
+        },
+      },
+    };
+
+    const runTestWithConfig = (config: {
+      blockchains: MatchTokensFromConfigWithMetaParam['config']['blockchains'];
+    }) => {
+      mockData.config.blockchains = config.blockchains;
+      const result = matchTokensFromConfigWithMeta(mockData);
+      /**
+       * In this case, the result might differ from what was expected.
+       * To pass the test, we reordered the expected result.
+       * Changing the order of tokens does not impact the overall behavior of our app,
+       * as we have a comprehensive sorting logic applied to tokens within the data slice.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      expect(result).toEqual([token2, tokens[3], token0]);
+    };
+
+    runTestWithConfig({ blockchains: undefined });
+    runTestWithConfig({ blockchains: [] });
+  });
+
+  test('should include tokens from config.tokens object that exist in meta', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A, BLOCKCHAIN_B],
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [token0], isExcluded: false },
+          [BLOCKCHAIN_B]: { tokens: [token2], isExcluded: false },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([token0, token2]);
+  });
+
+  test('should not include tokens from config.tokens whose blockchain does not exist in config.blockchains', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {
+          [BLOCKCHAIN_B]: { tokens: [token2], isExcluded: false },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([token0, token1]);
+  });
+
+  test('should include all tokens from a blockchain if that blockchain does not have any tokens in config.tokens', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {},
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([token0, token1]);
+  });
+
+  test('should include all tokens from config.blockchains that exist in the meta, except tokens excluded in config.token', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [token0], isExcluded: true },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([token1]);
+  });
+
+  test('should include all tokens from the meta when config parameters are empty values', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [],
+        tokens: {},
+      },
+    };
+
+    const runTestWithConfig = (
+      config: MatchTokensFromConfigWithMetaParam['config']
+    ) => {
+      mockData.config = config;
+      const result = matchTokensFromConfigWithMeta(mockData);
+      expect(result).toEqual(tokens);
+    };
+
+    runTestWithConfig({ blockchains: [], tokens: {} });
+    runTestWithConfig({ blockchains: undefined, tokens: undefined });
+    runTestWithConfig({ blockchains: [], tokens: [] });
+  });
+});

package/src/store/utils/data.ts

@@ -0,0 +1,150 @@
+import type {
+  BlockchainAndTokenConfig,
+  TokenHash,
+  WidgetConfig,
+} from '../../types';
+import type { DataSlice } from '../slices/data';
+import type { Asset, Token } from 'rango-sdk';
+
+import { createTokenHash } from '../../utils/meta';
+
+/**
+ * This function retrieves tokens and blockchains from the widget configuration and combines them with token data from the meta response to determine which tokens should be displayed in the widget.
+ * To optimize performance, the function minimizes unnecessary iterations over the meta tokens.
+ * The result of this function should be cached and recalculated whenever the widget configuration changes.
+ */
+export function matchTokensFromConfigWithMeta(params: {
+  type: 'source' | 'destination';
+  config: {
+    blockchains: BlockchainAndTokenConfig['blockchains'];
+    tokens: BlockchainAndTokenConfig['tokens'];
+  };
+  meta: {
+    tokensMapByTokenHash: DataSlice['_tokensMapByTokenHash'];
+    tokensMapByBlockchainName: DataSlice['_tokensMapByBlockchainName'];
+  };
+}): Token[] {
+  const { config, meta } = params;
+  const result: Record<TokenHash, Token> = {};
+  const configTokens = config.tokens;
+
+  // Helper function to add tokens to result
+  const addTokens = (tokens: (Asset | TokenHash)[]) => {
+    tokens.forEach((item) => {
+      if (typeof item !== 'string') {
+        item = createTokenHash(item);
+      }
+      const tokenFromMeta = meta.tokensMapByTokenHash.get(item);
+      if (tokenFromMeta) {
+        result[item] = tokenFromMeta;
+      }
+    });
+  };
+
+  /**
+   * We support two types of configurations for passing tokens in the widget config.
+   * We check the type of configuration and calculate the result based on that.
+   */
+  if (Array.isArray(configTokens)) {
+    /**
+     * If "config.tokens" is an array,
+     * we iterate through it and include any token that exists in the meta data in the result.
+     */
+    if (configTokens.length > 0) {
+      addTokens(configTokens);
+      return Object.values(result);
+    }
+    return Array.from(meta.tokensMapByTokenHash.values());
+  }
+
+  /**
+   * From this point onward,
+   * the function handles the other type of widget configuration.
+   */
+  if (!configTokens) {
+    return Array.from(meta.tokensMapByTokenHash.values());
+  }
+
+  let configBlockchains: string[];
+
+  if (config.blockchains?.length) {
+    configBlockchains = config.blockchains;
+  } else {
+    /**
+     * If config.blockchains does not exist,
+     * we include all tokens from every blockchain in the meta data that are not specified in the tokens from the config.
+     */
+    configBlockchains = Object.keys(configTokens);
+    const configBlockchainsSet = new Set(configBlockchains);
+
+    Object.keys(meta.tokensMapByBlockchainName).forEach((blockchain) => {
+      const metaTokensForSelectedBlockchain =
+        meta.tokensMapByBlockchainName[blockchain];
+      if (
+        !configBlockchainsSet.has(blockchain) &&
+        metaTokensForSelectedBlockchain
+      ) {
+        addTokens(metaTokensForSelectedBlockchain);
+      }
+    });
+  }
+  //We iterate over each blockchain and retrieve the related tokens for each one from the configuration.
+  configBlockchains.forEach((blockchain) => {
+    const targetTokensForBlockchain = configTokens[blockchain];
+    /**
+     * If no tokens exist for a blockchain,
+     * we include all tokens for that blockchain from the meta response.
+     */
+    if (
+      !targetTokensForBlockchain &&
+      meta.tokensMapByBlockchainName?.[blockchain]
+    ) {
+      addTokens(meta.tokensMapByBlockchainName[blockchain]);
+      return;
+    }
+
+    if (targetTokensForBlockchain) {
+      if (
+        targetTokensForBlockchain.isExcluded &&
+        meta.tokensMapByBlockchainName[blockchain]
+      ) {
+        /**
+         * If tokens are excluded,
+         * we first include all tokens from the meta for that blockchain,
+         * then remove the excluded tokens from the result.
+         */
+        addTokens(meta.tokensMapByBlockchainName[blockchain]);
+        targetTokensForBlockchain.tokens.forEach((token) => {
+          const tokenHash = createTokenHash(token);
+          delete result[tokenHash];
+        });
+      } else {
+        //We retrieve the corresponding token from the meta and include it in the result.
+        addTokens(targetTokensForBlockchain.tokens);
+      }
+    }
+  });
+
+  return Object.values(result);
+}
+
+export function getSupportedBlockchainsFromConfig(params: {
+  config: WidgetConfig;
+}): string[] {
+  const { config } = params;
+  const configFromBlockchains = config.from?.blockchains || [];
+  const configToBlockchains = config.to?.blockchains || [];
+
+  /*
+   * Empty array means all blockchains. So if any of to or from has an empty array,
+   * it means all blockchains is available to use and there is no limitation from config.
+   */
+  if (!configFromBlockchains.length || !configToBlockchains.length) {
+    return [];
+  }
+  const blockchains = [...configFromBlockchains, ...configToBlockchains];
+
+  const supportedBlockchains = new Set(blockchains);
+
+  return Array.from(supportedBlockchains);
+}

package/src/store/utils/index.ts

@@ -0,0 +1 @@
+export * from './data';

package/src/store/utils/wallets.ts

@@ -0,0 +1,245 @@
+import type { Balance } from '../../types';
+import type { AppStoreState } from '../app';
+import type { FindToken } from '../slices/data';
+import type {
+  AggregatedBalanceState,
+  AssetKey,
+  BalanceKey,
+  BalanceState,
+  ConnectedWallet,
+} from '../slices/wallets';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Asset, WalletDetail } from 'rango-types';
+
+import BigNumber from 'bignumber.js';
+
+import { ZERO } from '../../constants/numbers';
+import { BALANCE_SEPARATOR } from '../../constants/wallets';
+
+/**
+ * Note: We need to use `symbol` as well since native coins and cosmos blockchains don't have `address`
+ * output format: BlockchainId${BALANCE_SEPARATOR}TokenAddress${BALANCE_SEPARATOR}TokenSymbol
+ */
+export function createAssetKey(asset: Asset): AssetKey {
+  return `${asset.blockchain}${BALANCE_SEPARATOR}${asset.address}${BALANCE_SEPARATOR}${asset.symbol}`;
+}
+
+/**
+ * output format: BlockchainId${BALANCE_SEPARATOR}TokenAddress${BALANCE_SEPARATOR}TokenSymbol${BALANCE_SEPARATOR}WalletAddress
+ */
+export function createBalanceKey(
+  accountAddress: string,
+  asset: Asset
+): BalanceKey {
+  const assetKey = createAssetKey(asset);
+  return `${assetKey}${BALANCE_SEPARATOR}${accountAddress}`;
+}
+
+export function extractAssetFromBalanceKey(key: BalanceKey): Asset | null {
+  const [assetChain, assetAddress, assetSymbol] = key.split(BALANCE_SEPARATOR);
+
+  if (!assetChain || !assetAddress || !assetSymbol) {
+    return null;
+  }
+
+  // null will be serialized to 'null', we need to make it back to a null type
+  const address = assetAddress === 'null' ? null : assetAddress;
+  return {
+    address,
+    blockchain: assetChain,
+    symbol: assetSymbol,
+  };
+}
+
+export function computeNextBalancesWithNewPrices(
+  paritalCurrentState: {
+    findToken: FindToken;
+    _aggregatedBalances: AggregatedBalanceState;
+  },
+  wallet: Omit<WalletDetail, 'failed' | 'explorerUrl'>,
+  balanceState: BalanceState
+): BalanceState {
+  wallet.balances?.forEach((balance) => {
+    const usdPrice =
+      balance.price ?? paritalCurrentState.findToken(balance.asset)?.usdPrice;
+    const balancesToUpdate =
+      paritalCurrentState._aggregatedBalances[createAssetKey(balance.asset)];
+
+    balancesToUpdate?.forEach((balanceKey) => {
+      if (balanceState[balanceKey]) {
+        balanceState[balanceKey] = {
+          ...balanceState[balanceKey],
+          usdValue: usdPrice
+            ? new BigNumber(usdPrice ?? ZERO)
+                .multipliedBy(balanceState[balanceKey].amount)
+                .toString()
+            : '',
+        };
+      }
+    });
+  });
+
+  return balanceState;
+}
+
+export function createBalanceStateForNewAccount(
+  account: Omit<WalletDetail, 'failed' | 'explorerUrl'>,
+  store: () => AppStoreState
+): BalanceState {
+  const state: BalanceState = {};
+
+  account.balances?.forEach((accountBalance) => {
+    const key = createBalanceKey(account.address, accountBalance.asset);
+    const amount = accountBalance.amount.amount;
+    const decimals = accountBalance.amount.decimals;
+
+    const usdPrice =
+      accountBalance.price ?? store().findToken(accountBalance.asset)?.usdPrice;
+    const usdValue = usdPrice
+      ? new BigNumber(usdPrice ?? ZERO).multipliedBy(amount).toString()
+      : '';
+
+    const balance: Balance = {
+      amount,
+      decimals,
+      usdValue,
+    };
+
+    state[key] = balance;
+  });
+
+  return state;
+}
+
+export function updateAggregatedBalanceStateForNewAccount(
+  aggregatedBalances: AggregatedBalanceState,
+  balanceState: BalanceState
+) {
+  for (const balanceKey in balanceState) {
+    const asset = extractAssetFromBalanceKey(balanceKey as BalanceKey);
+    if (asset) {
+      const assetKey = createAssetKey(asset);
+
+      if (!aggregatedBalances[assetKey]) {
+        aggregatedBalances[assetKey] = [];
+      }
+
+      if (!aggregatedBalances[assetKey].includes(balanceKey as BalanceKey)) {
+        aggregatedBalances[assetKey] = [
+          ...aggregatedBalances[assetKey],
+          balanceKey as BalanceKey,
+        ];
+      }
+    }
+  }
+
+  return aggregatedBalances;
+}
+
+export function removeBalanceFromAggregatedBalance(
+  aggregatedBalances: AggregatedBalanceState,
+  balanceKey: BalanceKey
+) {
+  const asset = extractAssetFromBalanceKey(balanceKey);
+  if (!asset) {
+    return aggregatedBalances;
+  }
+  const assetKey = createAssetKey(asset);
+
+  if (aggregatedBalances[assetKey]) {
+    aggregatedBalances[assetKey] = aggregatedBalances[assetKey].filter(
+      (aggregatedBalance) => aggregatedBalance !== balanceKey
+    );
+  }
+
+  return aggregatedBalances;
+}
+
+/**
+ * We made a util to remvoe balances to be able batch with other state updates.
+ */
+export function computeNextStateAfterWalletBalanceRemoval(
+  paritalCurrentState: {
+    _balances: BalanceState;
+    _aggregatedBalances: AggregatedBalanceState;
+    connectedWallets: ConnectedWallet[];
+  },
+  walletType: string,
+  options?: {
+    chains?: string[];
+    namespaces?: Namespace[];
+  }
+) {
+  let walletsNeedsToBeRemoved = paritalCurrentState.connectedWallets.filter(
+    (connectedWallet) => connectedWallet.walletType === walletType
+  );
+
+  /*
+   * We only need to delete balances where there is no connected wallets with same chain and address for that balance.
+   * Consider both Metamask and Solana having support for `0xblahblahblahblah` for Ethereum.
+   * If Phantom is disconnecting, we should keep the balance since Metamask has access to same address yet.
+   * So we only delete balance when there is no connected wallet that has access to that specific chain and address.
+   */
+  paritalCurrentState.connectedWallets.forEach((connectedWallet) => {
+    if (connectedWallet.walletType !== walletType) {
+      walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+        const isAnotherWalletHasSameAddressAndChain =
+          wallet.chain === connectedWallet.chain &&
+          wallet.address === connectedWallet.address;
+        return !isAnotherWalletHasSameAddressAndChain;
+      });
+    }
+  });
+
+  if (!!options?.chains && options.chains.length > 0) {
+    walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+      return options.chains?.includes(wallet.chain);
+    });
+  }
+
+  if (!!options?.namespaces && options.namespaces.length > 0) {
+    walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+      if (wallet.namespace) {
+        return options.namespaces?.includes(wallet.namespace);
+      }
+      return false;
+    });
+  }
+
+  const nextBalancesState: BalanceState = {};
+  let nextAggregatedBalanceState: AggregatedBalanceState =
+    paritalCurrentState._aggregatedBalances;
+  const currentBalancesState = paritalCurrentState._balances;
+  const balanceKeys = Object.keys(currentBalancesState) as BalanceKey[];
+
+  balanceKeys.forEach((key) => {
+    const asset = extractAssetFromBalanceKey(key);
+    if (!asset) {
+      return;
+    }
+
+    const shouldBalanceBeRemoved = !!walletsNeedsToBeRemoved.find(
+      (wallet) =>
+        createBalanceKey(wallet.address, {
+          address: asset.address,
+          blockchain: wallet.chain,
+          symbol: asset.symbol,
+        }) === key
+    );
+
+    // if a balance should be removed, we need to remove its caches in _aggregatedBalances as wel.
+    if (shouldBalanceBeRemoved) {
+      nextAggregatedBalanceState = removeBalanceFromAggregatedBalance(
+        nextAggregatedBalanceState,
+        key
+      );
+    } else if (currentBalancesState[key]) {
+      nextBalancesState[key] = currentBalancesState[key];
+    }
+  });
+
+  return {
+    _balances: nextBalancesState,
+    _aggregatedBalances: nextAggregatedBalanceState,
+  };
+}