@rango-dev/widget-embedded 0.29.1-next.1 → 0.29.1-next.2

package/src/store/wallets.ts

@@ -1,3 +1,4 @@
+import type { FindToken } from './slices/data';
 import type { Balance, TokensBalance, Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Token } from 'rango-sdk';
@@ -6,8 +7,8 @@ import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { httpService } from '../services/httpService';
+import { createTokenHash } from '../utils/meta';
 import {
-  createTokenHash,
   isAccountAndWalletMatched,
   makeBalanceFor,
   makeTokensBalance,
@@ -39,13 +40,13 @@ interface WalletsStore {
   connectedWallets: ConnectedWallet[];
   balances: TokensBalance;
   loading: boolean;
-  connectWallet: (accounts: Wallet[], tokens: Token[]) => void;
+  connectWallet: (accounts: Wallet[], findToken: FindToken) => void;
   disconnectWallet: (walletType: WalletType) => void;
   selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
   clearConnectedWallet: () => void;
   getWalletsDetails: (
     accounts: Wallet[],
-    tokens: Token[],
+    findToken: FindToken,
     shouldRetry?: boolean
   ) => void;
   getBalanceFor: (token: Token) => Balance | null;
@@ -57,7 +58,7 @@ export const useWalletsStore = createSelectors(
       connectedWallets: [],
       balances: {},
       loading: false,
-      connectWallet: (accounts, tokens) => {
+      connectWallet: (accounts, findToken) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           loading: true,
@@ -88,7 +89,7 @@ export const useWalletsStore = createSelectors(
               })
             ),
         }));
-        getWalletsDetails(accounts, tokens);
+        getWalletsDetails(accounts, findToken);
       },
       disconnectWallet: (walletType) => {
         set((state) => {
@@ -152,7 +153,7 @@ export const useWalletsStore = createSelectors(
           connectedWallets: [],
           selectedWallets: [],
         })),
-      getWalletsDetails: async (accounts, tokens, shouldRetry = true) => {
+      getWalletsDetails: async (accounts, findToken, shouldRetry = true) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           loading: true,
@@ -188,7 +189,7 @@ export const useWalletsStore = createSelectors(
                     matchedAccount &&
                     shouldRetry
                   ) {
-                    getWalletsDetails([matchedAccount], tokens, false);
+                    getWalletsDetails([matchedAccount], findToken, false);
                   }
                   return matchedAccount && retrievedBalanceAccount
                     ? {
@@ -196,7 +197,7 @@ export const useWalletsStore = createSelectors(
                         explorerUrl: retrievedBalanceAccount.explorerUrl,
                         balances: makeBalanceFor(
                           retrievedBalanceAccount,
-                          tokens
+                          findToken
                         ),
                         loading: false,
                       }

package/src/test-utils/fixtures.ts

@@ -1,10 +1,12 @@
 import type { AppStoreState } from '../store/app';
-import type { WidgetConfig } from '../types';
+import type { TokenHash, WidgetConfig } from '../types';
 import type { BlockchainMeta, EvmBlockchainMeta, Token } from 'rango-sdk';
 
 import { faker } from '@faker-js/faker';
 import { TransactionType } from 'rango-sdk';
 
+import { createTokenHash } from '../utils/meta';
+
 const TOKENS_COUNT = 20;
 const BLOCKCHAINS_COUNT = 20;
 
@@ -230,7 +232,12 @@ export function createInitialAppStore() {
   });
 
   return {
-    _tokens: tokens,
+    _tokensMapByTokenHash: new Map<TokenHash, Token>(
+      tokens.map((token) => {
+        const tokenHash = createTokenHash(token);
+        return [tokenHash, token];
+      })
+    ),
     _blockchainsMapByName: new Map<string, BlockchainMeta>(
       blockchains.map((meta) => [meta.name, meta])
     ),

package/src/utils/meta.ts

@@ -1,7 +1,6 @@
+import type { TokenHash } from '../types';
 import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
-import { areTokensEqual } from './wallets';
-
 export function getBlockchainDisplayNameFor(
   blockchainName: string,
   blockchains: BlockchainMeta[]
@@ -24,10 +23,6 @@ export function getSwapperDisplayName(
   return swappers.find((swapper) => swapper.id === swapperId)?.title;
 }
 
-export function findToken(t: Asset, tokens: Token[]) {
-  return tokens.find((token) => areTokensEqual(token, t)) ?? null;
-}
-
 export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {
   return blockchains.find((blockchain) => blockchain.name === name) ?? null;
 }
@@ -52,3 +47,7 @@ export function isTokenNative(
 
   return false;
 }
+
+export function createTokenHash(asset: Asset): TokenHash {
+  return `${asset.blockchain}-${asset.symbol}-${asset.address ?? ''}`;
+}

package/src/utils/quote.ts

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { RetryQuote } from '../store/quote';
+import type { FindToken } from '../store/slices/data';
 import type { QuoteWarning, SelectedQuote, Wallet } from '../types';
 import type {
   PriceImpactWarningLevel,
@@ -27,7 +29,7 @@ import { getUsdValue } from '../store/quote';
 import { QuoteWarningType } from '../types';
 
 import { areEqual } from './common';
-import { findBlockchain, findToken } from './meta';
+import { createTokenHash, findBlockchain } from './meta';
 import {
   checkSlippageWarnings,
   getMinRequiredSlippage,
@@ -130,27 +132,18 @@ export function findCommonTokens<T extends Asset[], R extends Asset[]>(
   listA: T,
   listB: R
 ) {
-  const tokenToString = (token: Asset): string =>
-    `${token.symbol}-${token.blockchain}-${token.address ?? ''}`;
-
   const set = new Set();
 
-  listA.forEach((token) => set.add(tokenToString(token)));
+  listA.forEach((token) => set.add(createTokenHash(token)));
 
-  return listB.filter((token) => set.has(tokenToString(token))) as R;
+  return listB.filter((token) => set.has(createTokenHash(token))) as R;
 }
 
 export function createRetryQuote(
   pendingSwap: PendingSwap,
   blockchains: BlockchainMeta[],
-  tokens: Token[]
-): {
-  fromBlockchain: BlockchainMeta | null;
-  fromToken: Token | null;
-  toBlockchain: BlockchainMeta | null;
-  toToken: Token | null;
-  inputAmount: string;
-} {
+  findToken: FindToken
+): RetryQuote {
   const firstStep = pendingSwap.steps[0];
   const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
   const lastSuccessfulStep = getLastSuccessfulStep(pendingSwap.steps);
@@ -179,10 +172,9 @@ export function createRetryQuote(
           blockchain: fromBlockchainMeta?.name ?? '',
           symbol: firstStep.fromSymbol,
           address: firstStep.fromSymbolAddress,
-        },
-    tokens
+        }
   );
-  const toTokenMeta = findToken(toToken, tokens);
+  const toTokenMeta = findToken(toToken);
   const inputAmount = lastSuccessfulStep
     ? lastSuccessfulStep.outputAmount ?? ''
     : pendingSwap.inputAmount;
@@ -201,11 +193,11 @@ export function generateQuoteWarnings(
   params: {
     fromToken: Token;
     toToken: Token;
-    tokens: Token[];
+    findToken: FindToken;
     userSlippage: number;
   }
 ): QuoteWarning | null {
-  const { fromToken, toToken, tokens, userSlippage } = params;
+  const { fromToken, toToken, findToken, userSlippage } = params;
   const inputUsdValue = getUsdValue(fromToken, quote.requestAmount);
   const outputUsdValue = getUsdValue(toToken, quote?.outputAmount ?? '');
 
@@ -218,7 +210,7 @@ export function generateQuoteWarnings(
       !!priceImpact && hasHighValueLoss(inputUsdValue, priceImpact);
 
     if (highValueLoss) {
-      const totalFee = getTotalFeeInUsd(quote?.swaps, tokens);
+      const totalFee = getTotalFeeInUsd(quote?.swaps, findToken);
       const warningLevel = getPriceImpactLevel(priceImpact);
       return {
         type: QuoteWarningType.HIGH_VALUE_LOSS,

package/src/utils/swap.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { FeesGroup, NameOfFees } from '../constants/quote';
-import type { FetchStatus } from '../store/slices/data';
+import type { FetchStatus, FindToken } from '../store/slices/data';
 import type { ConnectedWallet } from '../store/wallets';
 import type {
   ConvertedToken,
@@ -260,24 +260,9 @@ export function canComputePriceImpact(
   );
 }
 
-export const getUsdPrice = (
-  blockchain: string,
-  symbol: string,
-  address: string | null,
-  allTokens: Token[]
-): number | null => {
-  const token = allTokens?.find(
-    (t) =>
-      t.blockchain === blockchain &&
-      t.symbol?.toUpperCase() === symbol?.toUpperCase() &&
-      t.address === address
-  );
-  return token?.usdPrice || null;
-};
-
 export function getUsdFeeOfStep(
   step: SwapResult,
-  allTokens: Token[]
+  findToken: FindToken
 ): BigNumber {
   let totalFeeInUsd = ZERO;
   for (let i = 0; i < step.fee.length; i++) {
@@ -286,12 +271,7 @@ export function getUsdFeeOfStep(
       continue;
     }
 
-    const unitPrice = getUsdPrice(
-      fee.asset.blockchain,
-      fee.asset.symbol,
-      fee.asset.address,
-      allTokens
-    );
+    const unitPrice = findToken(fee.asset)?.usdPrice || null;
     totalFeeInUsd = totalFeeInUsd.plus(
       new BigNumber(fee.amount).multipliedBy(unitPrice || 0)
     );
@@ -302,11 +282,11 @@ export function getUsdFeeOfStep(
 
 export function getTotalFeeInUsd(
   swaps: SwapResult[],
-  allTokens: Token[]
+  findToken: FindToken
 ): BigNumber {
   return swaps.reduce(
     (totalFee: BigNumber, step) =>
-      totalFee.plus(getUsdFeeOfStep(step, allTokens)),
+      totalFee.plus(getUsdFeeOfStep(step, findToken)),
     ZERO
   );
 }

package/src/utils/wallets.ts

@@ -1,15 +1,14 @@
+import type { FindToken } from '../store/slices/data';
 import type { ConnectedWallet, TokenBalance } from '../store/wallets';
 import type {
   Balance,
   SelectedQuote,
-  TokenHash,
   TokensBalance,
   Wallet,
   WalletInfoWithNamespaces,
 } from '../types';
 import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
 import type {
-  Asset,
   Network,
   WalletInfo,
   WalletState,
@@ -48,6 +47,7 @@ import {
 import { EXCLUDED_WALLETS } from '../constants/wallets';
 
 import { isBlockchainTypeInCategory, removeDuplicateFrom } from './common';
+import { createTokenHash } from './meta';
 import { numberToString } from './numbers';
 
 export function mapStatusToWalletState(state: WalletState): WalletStatus {
@@ -278,7 +278,7 @@ export function isAccountAndWalletMatched(
 
 export function makeBalanceFor(
   retrievedBalance: WalletDetail,
-  tokens: Token[]
+  findToken: FindToken
 ): TokenBalance[] {
   const { blockChain: chain, balances = [] } = retrievedBalance;
   return (
@@ -293,13 +293,7 @@ export function makeBalanceFor(
         .shiftedBy(-tokenBalance.amount.decimals)
         .toFixed(),
       logo: '',
-      usdPrice:
-        getUsdPrice(
-          chain,
-          tokenBalance.asset.symbol,
-          tokenBalance.asset.address,
-          tokens
-        ) || null,
+      usdPrice: findToken(tokenBalance.asset)?.usdPrice || null,
     })) || []
   );
 }
@@ -358,20 +352,6 @@ function numberWithThousandSeparator(number: string | number): string {
   return parts.join('.');
 }
 
-export const getUsdPrice = (
-  blockchain: string,
-  symbol: string,
-  address: string | null,
-  allTokens: Token[]
-): number | null => {
-  const token = allTokens?.find(
-    (t) =>
-      t.blockchain === blockchain &&
-      t.symbol?.toUpperCase() === symbol?.toUpperCase() &&
-      t.address === address
-  );
-  return token?.usdPrice || null;
-};
 export const isExperimentalChain = (
   blockchains: BlockchainMeta[],
   wallet: string
@@ -502,10 +482,6 @@ export function getAddress({
   )?.address;
 }
 
-export function createTokenHash(token: Asset): TokenHash {
-  return `${token.blockchain}-${token.symbol}-${token.address ?? ''}`;
-}
-
 export function makeTokensBalance(connectedWallets: ConnectedWallet[]) {
   return connectedWallets
     .flatMap((wallet) => wallet.balances)