@rango-dev/widget-embedded 0.40.2-next.10 → 0.40.2-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.40.2-next.10",
+  "version": "0.40.2-next.11",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/store/slices/settings.ts

@@ -1,5 +1,6 @@
 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';
@@ -53,7 +54,7 @@ export interface SettingsSlice {
 }
 
 export const createSettingsSlice: StateCreator<
-  SettingsSlice & DataSlice & ConfigSlice,
+  SettingsSlice & DataSlice & ConfigSlice & WalletsSlice,
   [],
   [],
   SettingsSlice
@@ -187,10 +188,15 @@ export const createSettingsSlice: StateCreator<
       }),
     });
   },
-  setCustomToken: (token) =>
+  setCustomToken: (token) => {
+    void get().fetchCustomTokensBalance({
+      tokens: [token],
+      connectedWallets: get().connectedWallets,
+    });
     set((state) => ({
       _customTokens: [token, ...state._customTokens],
-    })),
+    }));
+  },
   deleteCustomToken: (token) =>
     set((state) => ({
       _customTokens: state._customTokens.filter(

package/src/store/slices/wallets.ts

@@ -1,6 +1,6 @@
 import type { AppStoreState } from './types';
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { Token, WalletDetail } from 'rango-sdk';
+import type { Asset, Token, WalletDetail } from 'rango-sdk';
 
 import BigNumber from 'bignumber.js';
 
@@ -24,6 +24,7 @@ import {
   extractAssetFromBalanceKey,
   removeBalanceFromAggregatedBalance,
   updateAggregatedBalanceStateForNewAccount,
+  updateBalancesWithNewPrices,
 } from '../utils/wallets';
 
 type WalletAddress = string;
@@ -124,6 +125,10 @@ export interface WalletsSlice {
     accounts: Wallet[],
     options?: { retryOnFailedBalances?: boolean }
   ) => Promise<void>;
+  fetchCustomTokensBalance: (params: {
+    tokens: Asset[];
+    connectedWallets: Wallet[];
+  }) => Promise<void>;
   getBalanceFor: (token: Token) => Balance | null;
   getBalances: () => BalanceState;
   getBalancesForWalletAddress: (address: string) => BalanceState;
@@ -295,6 +300,98 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         });
       }
     },
+    fetchCustomTokensBalance: async (params) => {
+      const { tokens, connectedWallets } = params;
+
+      const tokensByBlockchain = tokens.reduce<{ [key: string]: Asset[] }>(
+        (acc, asset) => {
+          (acc[asset.blockchain] ||= []).push(asset);
+          return acc;
+        },
+        {}
+      );
+
+      const addedWallets = new Set<string>();
+
+      const tokensByWalletAddress = connectedWallets.reduce<{
+        [key: string]: Asset[];
+      }>((acc, wallet) => {
+        const key = `${wallet.address}-${wallet.chain}`;
+        if (addedWallets.has(key)) {
+          return acc;
+        }
+
+        addedWallets.add(key);
+        if (tokensByBlockchain[wallet.chain]) {
+          if (!acc[wallet.address]) {
+            acc[wallet.address] = [];
+          }
+          acc[wallet.address].push(...tokensByBlockchain[wallet.chain]);
+        }
+        return acc;
+      }, {});
+
+      Object.entries(tokensByWalletAddress).forEach(
+        async ([walletAddress, tokens]) => {
+          try {
+            const { balances } = await httpService().getMultipleTokenBalance({
+              assets: tokens.map(({ symbol, address, blockchain }) => ({
+                symbol,
+                address,
+                blockchain,
+              })),
+              walletAddress,
+            });
+
+            if (balances) {
+              let nextBalances: BalanceState = get()._balances;
+              let nextAggregatedBalances: AggregatedBalanceState =
+                get()._aggregatedBalances;
+
+              balances.forEach((balance) => {
+                if (parseFloat(balance.amount.amount) === 0) {
+                  return;
+                }
+
+                const WalletDetail = {
+                  blockChain: balance.asset.blockchain,
+                  balances: [balance],
+                  address: walletAddress,
+                };
+
+                updateBalancesWithNewPrices(WalletDetail, nextBalances, get);
+
+                const balancesForWallet = createBalanceStateForNewAccount(
+                  WalletDetail,
+                  get
+                );
+
+                nextAggregatedBalances =
+                  updateAggregatedBalanceStateForNewAccount(
+                    nextAggregatedBalances,
+                    balancesForWallet
+                  );
+
+                nextBalances = {
+                  ...nextBalances,
+                  ...balancesForWallet,
+                };
+              });
+
+              set((state) => ({
+                _balances: {
+                  ...state._balances,
+                  ...nextBalances,
+                },
+                _aggregatedBalances: nextAggregatedBalances,
+              }));
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      );
+    },
     setWalletsAsSelected: (wallets) => {
       const nextConnectedWalletsWithUpdatedSelectedStatus =
         get().connectedWallets.map((connectedWallet) => {
@@ -332,6 +429,10 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
       get().addConnectedWallet(accounts, namespace);
 
       void get().fetchBalances(accounts);
+      void get().fetchCustomTokensBalance({
+        tokens: get().customTokens(),
+        connectedWallets: accounts,
+      });
     },
     removeBalancesForWallet: (walletType, options) => {
       let walletsNeedsToBeRemoved = get().connectedWallets.filter(
@@ -562,7 +663,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           }
         }
 
-        let nextBalances: BalanceState = {};
+        let nextBalances: BalanceState = get()._balances;
         let nextAggregatedBalances: AggregatedBalanceState =
           get()._aggregatedBalances;
         walletsDetails.forEach((wallet) => {
@@ -570,6 +671,8 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
             return;
           }
 
+          updateBalancesWithNewPrices(wallet, nextBalances, get);
+
           // Remove old balances for current wallet and blockchain
           get().removeBalancesForWallet(walletType, {
             chains: [wallet.blockChain],

package/src/store/utils/wallets.ts

@@ -44,8 +44,36 @@ export function extractAssetFromBalanceKey(key: BalanceKey): Asset {
   };
 }
 
+export function updateBalancesWithNewPrices(
+  wallet: Omit<WalletDetail, 'failed' | 'explorerUrl'>,
+  balanceState: BalanceState,
+  store: () => AppStoreState
+): BalanceState {
+  wallet.balances?.forEach((balance) => {
+    const usdPrice =
+      balance.price ?? store().findToken(balance.asset)?.usdPrice;
+    const balancesToUpdate =
+      store()._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: WalletDetail,
+  account: Omit<WalletDetail, 'failed' | 'explorerUrl'>,
   store: () => AppStoreState
 ): BalanceState {
   const state: BalanceState = {};
@@ -55,7 +83,8 @@ export function createBalanceStateForNewAccount(
     const amount = accountBalance.amount.amount;
     const decimals = accountBalance.amount.decimals;
 
-    const usdPrice = store().findToken(accountBalance.asset)?.usdPrice;
+    const usdPrice =
+      accountBalance.price ?? store().findToken(accountBalance.asset)?.usdPrice;
     const usdValue = usdPrice
       ? new BigNumber(usdPrice ?? ZERO).multipliedBy(amount).toString()
       : '';