@rango-dev/widget-embedded 0.37.1-next.0 → 0.37.1-next.2

package/package.json

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

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -23,8 +23,8 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const retrySwap = useQuoteStore.use.retry();
   const {
     findToken,
-    connectedWallets,
     getBalances,
+    getConnectedWalletsDetails,
     fetchBalances: refetch,
   } = useAppStore();
 
@@ -49,7 +49,7 @@ export function WidgetInfo(props: React.PropsWithChildren) {
     history,
     wallets: {
       isLoading,
-      details: connectedWallets,
+      details: getConnectedWalletsDetails(),
       totalBalance,
       refetch: async (accounts) => refetch(accounts),
     },

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -1,6 +1,6 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
 import type { FetchStatus, FindToken } from '../../store/slices/data';
-import type { ConnectedWallet } from '../../store/slices/wallets';
+import type { DeprecatedWalletDetail } from '../../store/slices/wallets';
 import type { QuoteInputs, UpdateQuoteInputs, Wallet } from '../../types';
 import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
@@ -10,7 +10,7 @@ export interface WidgetInfoContextInterface {
   setCurrentTabAsActive: () => void;
   history: WidgetHistory;
   wallets: {
-    details: ConnectedWallet[];
+    details: DeprecatedWalletDetail[];
     totalBalance: string;
     isLoading: boolean;
     refetch: (accounts: Wallet[]) => void;

package/src/store/slices/wallets.ts

@@ -4,6 +4,7 @@ import type { StateCreator } from 'zustand';
 
 import BigNumber from 'bignumber.js';
 
+import { ZERO } from '../../constants/numbers';
 import { eventEmitter } from '../../services/eventEmitter';
 import { httpService } from '../../services/httpService';
 import {
@@ -46,6 +47,22 @@ export interface ConnectedWallet extends Wallet {
   error: boolean;
 }
 
+interface DeprecatedTokenBalance {
+  chain: string;
+  symbol: string;
+  ticker: string;
+  address: string | null;
+  rawAmount: string;
+  decimal: number | null;
+  amount: string;
+  logo: string | null;
+  usdPrice: number | null;
+}
+
+export interface DeprecatedWalletDetail extends ConnectedWallet {
+  balances: DeprecatedTokenBalance[] | null;
+}
+
 export interface WalletsSlice {
   _balances: BalanceState;
   _aggregatedBalances: AggregatedBalanceState;
@@ -80,6 +97,13 @@ export interface WalletsSlice {
   ) => Promise<void>;
   getBalanceFor: (token: Token) => Balance | null;
   getBalances: () => BalanceState;
+  getBalancesForWalletAddress: (address: string) => BalanceState;
+
+  /**
+   * @deprecated
+   * This is been added for backward compatibilty for WidgetInfo
+   */
+  getConnectedWalletsDetails: () => DeprecatedWalletDetail[];
 }
 
 export const createWalletsSlice: StateCreator<
@@ -485,4 +509,69 @@ export const createWalletsSlice: StateCreator<
     });
     return maxBalance;
   },
+  getBalancesForWalletAddress: (address: string) => {
+    const balances = get().getBalances();
+    const balanceKeys = Object.keys(balances) as BalanceKey[];
+
+    const balancesForTargetWalletAddress = balanceKeys.reduce(
+      (output, balanceKey) => {
+        const balance = balances[balanceKey];
+
+        const [, , , balanceWalletAddreess] = balanceKey.split('-');
+        if (balanceWalletAddreess === address) {
+          output[balanceKey] = balance;
+        }
+
+        return output;
+      },
+      {} as BalanceState
+    );
+
+    return balancesForTargetWalletAddress;
+  },
+
+  getConnectedWalletsDetails: () => {
+    const connectedWallets = get().connectedWallets;
+    return connectedWallets.map((wallet) => {
+      const balances = get().getBalancesForWalletAddress(wallet.address);
+      const balancesKeys = Object.keys(balances) as BalanceKey[];
+
+      return {
+        ...wallet,
+        balances: balancesKeys.reduce((output, balanceKey) => {
+          const balance = balances[balanceKey];
+          const asset = extractAssetFromBalanceKey(balanceKey);
+
+          if (asset.blockchain === wallet.chain) {
+            const token = get().findToken(asset);
+
+            if (!!token) {
+              const amount = balance.amount
+                ? new BigNumber(balance.amount).shiftedBy(-balance.decimals)
+                : ZERO;
+
+              output.push({
+                chain: wallet.chain,
+                symbol: token.symbol,
+                ticker: token.symbol,
+                address: token.address,
+                rawAmount: balance.amount,
+                decimal: balance.decimals,
+                amount: amount.toString(),
+                logo: token.image,
+                usdPrice: token.usdPrice,
+              });
+            } else {
+              console.debug(
+                "Looking for asset but it couldn't be found in tokens store. May not be provided in meta.'",
+                asset
+              );
+            }
+          }
+
+          return output;
+        }, [] as DeprecatedTokenBalance[]),
+      };
+    });
+  },
 });

package/src/store/utils/wallets.ts

@@ -33,8 +33,11 @@ export function createBalanceKey(
 
 export function extractAssetFromBalanceKey(key: BalanceKey): Asset {
   const [assetChain, assetAddress, assetSymbol] = key.split('-');
+
+  // null will be serialized to 'null', we need to make it back to a null type
+  const address = assetAddress === 'null' ? null : assetAddress;
   return {
-    address: assetAddress,
+    address,
     blockchain: assetChain,
     symbol: assetSymbol,
   };

package/src/utils/wallets.ts

@@ -280,7 +280,10 @@ export function resetConnectedWalletState(
 
 export const calculateWalletUsdValue = (balances: BalanceState) => {
   const total = Object.values(balances).reduce((prev, balance) => {
-    return balance.usdValue ? prev.plus(balance.usdValue) : prev;
+    const formattedBalance = formatBalance(balance);
+    return formattedBalance?.usdValue
+      ? prev.plus(formattedBalance.usdValue)
+      : prev;
   }, new BigNumber(ZERO));
 
   return numberWithThousandSeparator(total.toString());