@rango-dev/widget-embedded 0.17.1-next.24 → 0.17.1-next.26

package/src/store/wallets.ts

@@ -1,4 +1,4 @@
-import type { Wallet } from '../types';
+import type { Balance, TokensBalance, Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Token } from 'rango-sdk';
 
@@ -7,8 +7,10 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { httpService } from '../services/httpService';
 import {
+  createTokenHash,
   isAccountAndWalletMatched,
   makeBalanceFor,
+  makeTokensBalance,
   resetConnectedWalletState,
 } from '../utils/wallets';
 
@@ -33,9 +35,9 @@ 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;
@@ -47,12 +49,14 @@ interface WalletsStore {
     tokens: Token[],
     shouldRetry?: boolean
   ) => void;
+  getBalanceFor: (token: Token) => Balance | null;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
     subscribeWithSelector((set, get) => ({
       connectedWallets: [],
+      balances: {},
       customDestination: '',
       loading: false,
       connectWallet: (accounts, tokens) => {
@@ -92,21 +96,27 @@ 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 {
-            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 };
-              }),
+            balances,
+            connectedWallets,
           };
         });
       },
@@ -159,9 +169,8 @@ export const useWalletsStore = createSelectors(
           const response = await httpService().getWalletsDetails(data);
           const retrievedBalance = response.wallets;
           if (retrievedBalance) {
-            set((state) => ({
-              loading: false,
-              connectedWallets: state.connectedWallets.map(
+            set((state) => {
+              const connectedWallets = state.connectedWallets.map(
                 (connectedWallet) => {
                   const matchedAccount = accounts.find((account) =>
                     isAccountAndWalletMatched(account, connectedWallet)
@@ -190,27 +199,45 @@ export const useWalletsStore = createSelectors(
                       }
                     : connectedWallet;
                 }
-              ),
-            }));
+              );
+
+              const balances = makeTokensBalance(connectedWallets);
+
+              return {
+                loading: false,
+                balances,
+                connectedWallets,
+              };
+            });
           } else {
             throw new Error('Wallet not found');
           }
         } catch (error) {
-          set((state) => ({
-            loading: false,
-            connectedWallets: state.connectedWallets.map((balance) => {
+          set((state) => {
+            const 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/wallets.ts

@@ -1,7 +1,24 @@
-import { WalletType } from '@rango-dev/wallets-shared';
+import type { 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/wallets.ts

@@ -1,8 +1,8 @@
-import type { TokenWithBalance } from '../components/TokenList';
 import type { ConnectedWallet, TokenBalance } from '../store/wallets';
-import type { Wallet } from '../types';
+import type { Balance, TokenHash, TokensBalance, Wallet } from '../types';
 import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
 import type {
+  Asset,
   Network,
   WalletInfo,
   WalletState,
@@ -29,6 +29,12 @@ import BigNumber from 'bignumber.js';
 import { isCosmosBlockchain } from 'rango-types';
 
 import { ZERO } from '../constants/numbers';
+import {
+  BALANCE_MAX_DECIMALS,
+  BALANCE_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../constants/routing';
 import { EXCLUDED_WALLETS } from '../constants/wallets';
 
 import { numberToString } from './numbers';
@@ -218,43 +224,6 @@ export function getRequiredChains(quote: BestRouteResponse | null) {
 
 type Blockchain = { name: string; accounts: ConnectedWallet[] };
 
-export function getBalanceFromWallet(
-  connectedWallets: ConnectedWallet[],
-  chain: string,
-  symbol: string,
-  address: string | null
-): TokenBalance | null {
-  if (connectedWallets.length === 0) {
-    return null;
-  }
-
-  const selectedChainWallets = connectedWallets.filter(
-    (wallet) => wallet.chain === chain
-  );
-  if (selectedChainWallets.length === 0) {
-    return null;
-  }
-
-  return (
-    selectedChainWallets
-      .map(
-        (wallet) =>
-          wallet.balances?.find(
-            (balance) =>
-              (address !== null && balance.address === address) ||
-              (address === null &&
-                balance.address === address &&
-                balance.symbol === symbol)
-          ) || null
-      )
-      .filter((balance) => balance !== null)
-      .sort(
-        (a, b) => parseFloat(b?.amount || '0') - parseFloat(a?.amount || '1')
-      )
-      .find(() => true) || null
-  );
-}
-
 export function isAccountAndWalletMatched(
   account: Wallet,
   connectedWallet: ConnectedWallet
@@ -348,30 +317,6 @@ function numberWithThousandSeparator(number: string | number): string {
   return parts.join('.');
 }
 
-export const sortTokens = (tokens: TokenWithBalance[]): TokenWithBalance[] => {
-  const walletConnected = !!tokens.some((token) => token.balance);
-  if (!walletConnected) {
-    return tokens
-      .filter((token) => !token.address)
-      .concat(
-        tokens.filter((token) => token.address && !token.isSecondaryCoin),
-        tokens.filter((token) => token.isSecondaryCoin)
-      );
-  }
-
-  return tokens
-    .filter((token) => !!token.balance)
-    .sort(
-      (tokenA, tokenB) =>
-        parseFloat(tokenB.balance?.usdValue || '0') -
-        parseFloat(tokenA.balance?.usdValue || '0')
-    )
-    .concat(
-      tokens.filter((token) => !token.balance && !token.isSecondaryCoin),
-      tokens.filter((token) => !token.balance && token.isSecondaryCoin)
-    );
-};
-
 export const getUsdPrice = (
   blockchain: string,
   symbol: string,
@@ -415,98 +360,58 @@ export const getKeplrCompatibleConnectedWallets = (
   );
 };
 
-export function getTokensWithBalance(
-  tokens: TokenWithBalance[],
-  connectedWallets: ConnectedWallet[]
-): TokenWithBalance[] {
-  return tokens.map(({ balance, ...otherProps }) => {
-    const tokenAmount = numberToString(
-      new BigNumber(
-        getBalanceFromWallet(
-          connectedWallets,
-          otherProps.blockchain,
-          otherProps.symbol,
-          otherProps.address
-        )?.amount || ZERO
-      )
-    );
-
-    let tokenUsdValue = '';
-    if (otherProps.usdPrice) {
-      tokenUsdValue = numberToString(
-        new BigNumber(
-          getBalanceFromWallet(
-            connectedWallets,
-            otherProps.blockchain,
-            otherProps.symbol,
-            otherProps.address
-          )?.amount || ZERO
-        ).multipliedBy(otherProps.usdPrice)
-      );
-    }
+export function formatBalance(balance: Balance | null): Balance | null {
+  const formattedBalance: Balance | null = balance
+    ? {
+        ...balance,
+        amount: numberToString(
+          balance.amount,
+          BALANCE_MIN_DECIMALS,
+          BALANCE_MAX_DECIMALS
+        ),
+        usdValue: numberToString(
+          balance.usdValue,
+          USD_VALUE_MIN_DECIMALS,
+          USD_VALUE_MAX_DECIMALS
+        ),
+      }
+    : null;
 
-    return {
-      ...otherProps,
-      ...(tokenAmount !== '0' && {
-        balance: { amount: tokenAmount, usdValue: tokenUsdValue },
-      }),
-    };
-  });
+  return formattedBalance;
 }
 
-export function getTokensBalanceFromWalletAndSort(
-  tokens: TokenWithBalance[],
-  connectedWallets: ConnectedWallet[]
+export function sortTokensByBalance(
+  tokens: Token[],
+  getBalanceFor: (token: Token) => Balance | null
 ) {
-  const list =
-    connectedWallets.length > 0
-      ? getTokensWithBalance(tokens, connectedWallets)
-      : tokens;
-  list.sort((tokenA, tokenB) => {
-    if (tokenA.balance?.usdValue && tokenB.balance?.usdValue) {
+  tokens.sort((token1, token2) => {
+    const token1Balance = getBalanceFor(token1);
+    const token2Balance = getBalanceFor(token2);
+    if (token1Balance?.usdValue && token2Balance?.usdValue) {
       return (
-        parseFloat(tokenB.balance.usdValue) -
-        parseFloat(tokenA.balance.usdValue)
+        parseFloat(token2Balance.usdValue) - parseFloat(token1Balance.usdValue)
       );
     }
 
-    if (!tokenA.balance?.usdValue && tokenB.balance?.usdValue) {
+    if (!token1Balance?.usdValue && token2Balance?.usdValue) {
       return 1;
     }
 
-    if (tokenA.balance?.usdValue && !tokenB.balance?.usdValue) {
+    if (token1Balance?.usdValue && !token2Balance?.usdValue) {
       return -1;
     }
 
-    if (!tokenA.balance?.usdValue && !tokenB.balance?.usdValue) {
+    if (!token1Balance?.usdValue && !token2Balance?.usdValue) {
       return (
-        parseFloat(tokenB.balance?.amount || '0') -
-        parseFloat(tokenA.balance?.amount || '0')
+        parseFloat(token2Balance?.amount || '0') -
+        parseFloat(token1Balance?.amount || '0')
       );
     }
 
     return 0;
   });
 
-  return list;
-}
-
-export function getSortedTokens(
-  chain: BlockchainMeta | null,
-  tokens: Token[],
-  connectedWallets: ConnectedWallet[],
-  otherChainTokens: TokenWithBalance[]
-): TokenWithBalance[] {
-  const fromChainEqualsToToBlockchain =
-    chain?.name === otherChainTokens[0]?.name;
-  if (fromChainEqualsToToBlockchain) {
-    return otherChainTokens;
-  }
-
-  const filteredTokens = tokens.filter(
-    (token) => token.blockchain === chain?.name
-  );
-  return sortTokens(getTokensWithBalance(filteredTokens, connectedWallets));
+  return tokens;
 }
 
 export function tokensAreEqual(
@@ -568,3 +473,44 @@ export function getAddress({
       connectedWallet.chain === chain
   )?.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)
+    .reduce((balances: TokensBalance, balance) => {
+      const currentBalance = {
+        amount: balance?.amount ?? '',
+        decimals: balance?.decimal ?? 0,
+        usdValue: balance?.usdPrice
+          ? new BigNumber(balance?.usdPrice ?? ZERO)
+              .multipliedBy(balance?.amount)
+              .toString()
+          : '',
+      };
+
+      const tokenHash = balance
+        ? createTokenHash({
+            symbol: balance.symbol,
+            blockchain: balance.chain,
+            address: balance.address,
+          })
+        : null;
+
+      const prevBalance = tokenHash ? balances[tokenHash] : null;
+
+      const shouldUpdateBalance =
+        tokenHash &&
+        (!prevBalance ||
+          (prevBalance && prevBalance.amount < currentBalance.amount));
+
+      if (shouldUpdateBalance) {
+        balances[tokenHash] = currentBalance;
+      }
+
+      return balances;
+    }, {});
+}