@rango-dev/widget-embedded 0.36.1-next.7 → 0.37.0

package/src/utils/wallets.ts

@@ -1,18 +1,26 @@
-import type { BalanceState, ConnectedWallet } from '../store/slices/wallets';
+import type { FindToken } from '../store/slices/data';
+import type { ConnectedWallet, TokenBalance } from '../store/wallets';
 import type {
   Balance,
   SelectedQuote,
+  TokensBalance,
   Wallet,
   WalletInfoWithExtra,
 } from '../types';
-import type { ExtendedWalletInfo } from '@rango-dev/wallets-react';
+import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
 import type {
   Network,
+  WalletInfo,
   WalletState,
   WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import type { BlockchainMeta, Token, TransactionType } from 'rango-sdk';
+import type {
+  BlockchainMeta,
+  Token,
+  TransactionType,
+  WalletDetail,
+} from 'rango-sdk';
 
 import {
   BlockchainCategories,
@@ -39,11 +47,9 @@ import {
 import { EXCLUDED_WALLETS } from '../constants/wallets';
 
 import { isBlockchainTypeInCategory, removeDuplicateFrom } from './common';
+import { createTokenHash } from './meta';
 import { numberToString } from './numbers';
 
-export type ExtendedModalWalletInfo = WalletInfoWithExtra &
-  Pick<ExtendedWalletInfo, 'properties' | 'isHub'>;
-
 export function mapStatusToWalletState(state: WalletState): WalletStatus {
   switch (true) {
     case state.connected:
@@ -59,10 +65,10 @@ export function mapStatusToWalletState(state: WalletState): WalletStatus {
 
 export function mapWalletTypesToWalletInfo(
   getState: (type: WalletType) => WalletState,
-  getWalletInfo: (type: WalletType) => ExtendedWalletInfo,
+  getWalletInfo: (type: WalletType) => WalletInfo,
   list: WalletType[],
   chain?: string
-): ExtendedModalWalletInfo[] {
+): WalletInfoWithExtra[] {
   return list
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
@@ -91,8 +97,6 @@ export function mapWalletTypesToWalletInfo(
         singleNamespace,
         supportedChains,
         needsDerivationPath,
-        properties,
-        isHub,
       } = getWalletInfo(type);
       const blockchainTypes = removeDuplicateFrom(
         supportedChains.map((item) => item.type)
@@ -110,8 +114,6 @@ export function mapWalletTypesToWalletInfo(
         singleNamespace,
         blockchainTypes,
         needsDerivationPath,
-        properties,
-        isHub,
       };
     });
 }
@@ -263,6 +265,8 @@ export function getQuoteWallets(params: {
   return Array.from(wallets);
 }
 
+type Blockchain = { name: string; accounts: ConnectedWallet[] };
+
 export function isAccountAndWalletMatched(
   account: Wallet,
   connectedWallet: ConnectedWallet
@@ -274,18 +278,74 @@ export function isAccountAndWalletMatched(
   );
 }
 
+export function makeBalanceFor(
+  retrievedBalance: WalletDetail,
+  findToken: FindToken
+): TokenBalance[] {
+  const { blockChain: chain, balances = [] } = retrievedBalance;
+  return (
+    balances?.map((tokenBalance) => ({
+      chain,
+      symbol: tokenBalance.asset.symbol,
+      ticker: tokenBalance.asset.symbol,
+      address: tokenBalance.asset.address || null,
+      rawAmount: tokenBalance.amount.amount,
+      decimal: tokenBalance.amount.decimals,
+      amount: new BigNumber(tokenBalance.amount.amount)
+        .shiftedBy(-tokenBalance.amount.decimals)
+        .toFixed(),
+      logo: '',
+      usdPrice: findToken(tokenBalance.asset)?.usdPrice || null,
+    })) || []
+  );
+}
+
 export function resetConnectedWalletState(
   connectedWallet: ConnectedWallet
 ): ConnectedWallet {
   return { ...connectedWallet, loading: false, error: true };
 }
 
-export const calculateWalletUsdValue = (balances: BalanceState) => {
-  const total = Object.values(balances).reduce((prev, balance) => {
-    return balance.usdValue ? prev.plus(balance.usdValue) : prev;
-  }, new BigNumber(ZERO));
+export const calculateWalletUsdValue = (connectedWallet: ConnectedWallet[]) => {
+  const uniqueAccountAddresses = new Set<string | null>();
+  const uniqueBalance: ConnectedWallet[] = connectedWallet?.reduce(
+    (acc: ConnectedWallet[], current: ConnectedWallet) => {
+      return acc.findIndex(
+        (i) => i.address === current.address && i.chain === current.chain
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      ) === -1
+        ? [...acc, current]
+        : acc;
+    },
+    []
+  );
 
-  return numberWithThousandSeparator(total.toString());
+  const modifiedWalletBlockchains = uniqueBalance?.map((chain) => {
+    const modifiedWalletBlockchain: Blockchain = {
+      name: chain.chain,
+      accounts: [],
+    };
+    if (!uniqueAccountAddresses.has(chain.address)) {
+      uniqueAccountAddresses.add(chain.address);
+    }
+    uniqueAccountAddresses.forEach((accountAddress) => {
+      if (chain.address === accountAddress) {
+        modifiedWalletBlockchain.accounts.push(chain);
+      }
+    });
+    return modifiedWalletBlockchain;
+  });
+  const total = numberToString(
+    modifiedWalletBlockchains
+      ?.flatMap((b) => b.accounts)
+      ?.flatMap((a) => a?.balances)
+      ?.map((b) =>
+        new BigNumber(b?.amount || ZERO).multipliedBy(b?.usdPrice || 0)
+      )
+      ?.reduce((a, b) => a.plus(b), ZERO) || ZERO
+  ).toString();
+
+  return numberWithThousandSeparator(total);
 };
 
 function numberWithThousandSeparator(number: string | number): string {
@@ -324,31 +384,19 @@ export const getKeplrCompatibleConnectedWallets = (
 };
 
 export function formatBalance(balance: Balance | null): Balance | null {
-  if (!balance) {
-    return null;
-  }
-
-  const amount = new BigNumber(balance.amount)
-    .shiftedBy(-balance.decimals)
-    .toFixed();
-  const usdValue = balance.usdValue
-    ? new BigNumber(balance.usdValue).shiftedBy(-balance.decimals).toFixed()
-    : null;
-  const formattedAmount = numberToString(
-    amount,
-    BALANCE_MIN_DECIMALS,
-    BALANCE_MAX_DECIMALS
-  );
-  // null is using for detecing uknown prices
-  const formattedUsdValue = usdValue
-    ? numberToString(usdValue, USD_VALUE_MIN_DECIMALS, USD_VALUE_MAX_DECIMALS)
-    : null;
-
   const formattedBalance: Balance | null = balance
     ? {
         ...balance,
-        amount: formattedAmount,
-        usdValue: formattedUsdValue,
+        amount: numberToString(
+          balance.amount,
+          BALANCE_MIN_DECIMALS,
+          BALANCE_MAX_DECIMALS
+        ),
+        usdValue: numberToString(
+          balance.usdValue,
+          USD_VALUE_MIN_DECIMALS,
+          USD_VALUE_MAX_DECIMALS
+        ),
       }
     : null;
 
@@ -360,39 +408,17 @@ export function compareTokenBalance(
   token2Balance: Balance | null
 ): number {
   if (token1Balance?.usdValue || token2Balance?.usdValue) {
-    const token1UsdValue =
-      !!token1Balance && !!token1Balance.usdValue
-        ? new BigNumber(token1Balance.usdValue).shiftedBy(
-            -token1Balance.decimals
-          )
-        : ZERO;
-    const token2UsdValue =
-      !!token2Balance && !!token2Balance.usdValue
-        ? new BigNumber(token2Balance.usdValue).shiftedBy(
-            -token2Balance.decimals
-          )
-        : ZERO;
-
-    if (token1UsdValue.isEqualTo(token2UsdValue)) {
-      return 0;
-    }
-    return token1UsdValue.isGreaterThan(token2UsdValue) ? -1 : 1;
+    return (
+      parseFloat(token2Balance?.usdValue || '0') -
+      parseFloat(token1Balance?.usdValue || '0')
+    );
   }
 
   if (token1Balance?.amount || token2Balance?.amount) {
-    const token1Amount =
-      !!token1Balance && !!token1Balance.amount
-        ? new BigNumber(token1Balance.amount).shiftedBy(-token1Balance.decimals)
-        : ZERO;
-    const token2Amount =
-      !!token2Balance && !!token2Balance.amount
-        ? new BigNumber(token2Balance.amount).shiftedBy(-token2Balance.decimals)
-        : ZERO;
-
-    if (token1Amount.isEqualTo(token2Amount)) {
-      return 0;
-    }
-    return token1Amount.isGreaterThan(token2Amount) ? -1 : 1;
+    return (
+      parseFloat(token2Balance?.amount || '0') -
+      parseFloat(token1Balance?.amount || '0')
+    );
   }
 
   return 0;
@@ -410,8 +436,8 @@ export function areTokensEqual(
 }
 
 export function sortWalletsBasedOnConnectionState(
-  wallets: ExtendedModalWalletInfo[]
-): ExtendedModalWalletInfo[] {
+  wallets: WalletInfoWithExtra[]
+): WalletInfoWithExtra[] {
   return wallets.sort(
     (a, b) =>
       Number(b.state === WalletStatus.CONNECTED) -
@@ -458,6 +484,43 @@ export function getAddress({
   )?.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;
+    }, {});
+}
+
 export const isFetchingBalance = (
   connectedWallets: ConnectedWallet[],
   blockchain: string
@@ -466,12 +529,12 @@ export const isFetchingBalance = (
     (wallet) => wallet.chain === blockchain && wallet.loading
   );
 
-export function hashWalletsState(walletsInfo: WalletInfoWithExtra[]) {
+export function hashWalletsState(walletsInfo: ModalWalletInfo[]) {
   return walletsInfo.map((w) => w.state).join('-');
 }
 
 export function filterBlockchainsByWalletTypes(
-  wallets: WalletInfoWithExtra[],
+  wallets: ModalWalletInfo[],
   blockchains: BlockchainMeta[]
 ) {
   const uniqueBlockchainTypes = new Set<TransactionType>();
@@ -488,7 +551,7 @@ export function filterBlockchainsByWalletTypes(
 }
 
 export function filterWalletsByCategory(
-  wallets: ExtendedModalWalletInfo[],
+  wallets: WalletInfoWithExtra[],
   category: string
 ) {
   if (category === BlockchainCategories.ALL) {

package/dist/store/slices/types.d.ts

@@ -1,6 +0,0 @@
-import type { ConfigSlice } from './config';
-import type { DataSlice } from './data';
-import type { SettingsSlice } from './settings';
-import type { WalletsSlice } from './wallets';
-export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice & WalletsSlice;
-//# sourceMappingURL=types.d.ts.map

package/dist/store/slices/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/store/slices/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG,SAAS,GACnC,WAAW,GACX,aAAa,GACb,YAAY,CAAC"}

package/dist/store/slices/wallets.d.ts

@@ -1,58 +0,0 @@
-import type { AppStoreState } from './types';
-import type { Token } from 'rango-sdk';
-import type { StateCreator } from 'zustand';
-import { type Balance, type Wallet } from '../../types';
-type WalletAddress = string;
-type TokenAddress = string;
-type TokenSymbol = string;
-type BlockchainId = string;
-/** format: `BlockchainId-TokenAddress-TokenSymbol` */
-export type AssetKey = `${BlockchainId}-${TokenAddress}-${TokenSymbol}`;
-/** format: `BlockchainId-TokenAddress-TokenSymbol-WalletAddress` */
-export type BalanceKey = `${BlockchainId}-${TokenAddress}-${TokenSymbol}-${WalletAddress}`;
-export type BalanceState = {
-    [key: BalanceKey]: Balance;
-};
-export type AggregatedBalanceState = {
-    [key: AssetKey]: BalanceKey[];
-};
-export interface ConnectedWallet extends Wallet {
-    explorerUrl: string | null;
-    selected: boolean;
-    loading: boolean;
-    error: boolean;
-}
-export interface WalletsSlice {
-    _balances: BalanceState;
-    _aggregatedBalances: AggregatedBalanceState;
-    connectedWallets: ConnectedWallet[];
-    fetchingWallets: boolean;
-    setConnectedWalletAsRefetching: (walletType: string) => void;
-    setConnectedWalletHasError: (walletType: string) => void;
-    setConnectedWalletRetrievedData: (walletType: string) => void;
-    removeBalancesForWallet: (walletType: string) => void;
-    addConnectedWallet: (accounts: Wallet[]) => void;
-    setWalletsAsSelected: (wallets: {
-        walletType: string;
-        chain: string;
-    }[]) => void;
-    /**
-     * Add new accounts to store and fetch balances for them.
-     */
-    newWalletConnected: (accounts: Wallet[]) => Promise<void>;
-    /**
-     * Disconnect a wallet and clean up balances after that.
-     */
-    disconnectWallet: (walletType: string) => void;
-    clearConnectedWallet: () => void;
-    fetchBalances: (accounts: Wallet[], options?: {
-        retryOnFailedBalances?: boolean;
-    }) => Promise<void>;
-    getBalanceFor: (token: Token) => Balance | null;
-    getBalances: () => BalanceState;
-}
-export declare const createWalletsSlice: StateCreator<AppStoreState, [
-], [
-], WalletsSlice>;
-export {};
-//# sourceMappingURL=wallets.d.ts.map

package/dist/store/slices/wallets.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../../src/store/slices/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAM5C,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,MAAM,EAGZ,MAAM,aAAa,CAAC;AAWrB,KAAK,aAAa,GAAG,MAAM,CAAC;AAC5B,KAAK,YAAY,GAAG,MAAM,CAAC;AAC3B,KAAK,WAAW,GAAG,MAAM,CAAC;AAC1B,KAAK,YAAY,GAAG,MAAM,CAAC;AAC3B,sDAAsD;AACtD,MAAM,MAAM,QAAQ,GAAG,GAAG,YAAY,IAAI,YAAY,IAAI,WAAW,EAAE,CAAC;AACxE,oEAAoE;AACpE,MAAM,MAAM,UAAU,GACpB,GAAG,YAAY,IAAI,YAAY,IAAI,WAAW,IAAI,aAAa,EAAE,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,UAAU,GAAG,OAAO,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,QAAQ,GAAG,UAAU,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,MAAM;IAC7C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,YAAY,CAAC;IACxB,mBAAmB,EAAE,sBAAsB,CAAC;IAC5C,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,eAAe,EAAE,OAAO,CAAC;IAEzB,8BAA8B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,+BAA+B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,uBAAuB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,oBAAoB,EAAE,CACpB,OAAO,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,KAC7C,IAAI,CAAC;IACV;;OAEG;IACH,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;OAEG;IACH,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,aAAa,EAAE,CACb,QAAQ,EAAE,MAAM,EAAE,EAClB,OAAO,CAAC,EAAE;QAAE,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,KAC1C,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,GAAG,IAAI,CAAC;IAChD,WAAW,EAAE,MAAM,YAAY,CAAC;CACjC;AAED,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAC3C,aAAa,EACb;CAAE,EACF;CAAE,EACF,YAAY,CAyYZ,CAAC"}

package/dist/store/utils/wallets.d.ts

@@ -1,17 +0,0 @@
-import type { AppStoreState } from '../app';
-import type { AggregatedBalanceState, AssetKey, BalanceKey, BalanceState } from '../slices/wallets';
-import type { Asset, WalletDetail } from 'rango-types';
-/**
- * Note: We need to use `symbol` as well since native coins and cosmos blockchains don't have `address`
- * output format: BlockchainId-TokenAddress-TokenSymbol
- */
-export declare function createAssetKey(asset: Asset): AssetKey;
-/**
- * output format: BlockchainId-TokenAddress-TokenSymbol-WalletAddress
- */
-export declare function createBalanceKey(accountAddress: string, asset: Asset): BalanceKey;
-export declare function extractAssetFromBalanceKey(key: BalanceKey): Asset;
-export declare function createBalanceStateForNewAccount(account: WalletDetail, store: () => AppStoreState): BalanceState;
-export declare function updateAggregatedBalanceStateForNewAccount(aggregatedBalances: AggregatedBalanceState, balanceState: BalanceState): AggregatedBalanceState;
-export declare function removeBalanceFromAggregatedBalance(aggregatedBalances: AggregatedBalanceState, balanceKey: BalanceKey): AggregatedBalanceState;
-//# sourceMappingURL=wallets.d.ts.map

package/dist/store/utils/wallets.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../../src/store/utils/wallets.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EACV,sBAAsB,EACtB,QAAQ,EACR,UAAU,EACV,YAAY,EACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMvD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,CAErD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,cAAc,EAAE,MAAM,EACtB,KAAK,EAAE,KAAK,GACX,UAAU,CAGZ;AAED,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,UAAU,GAAG,KAAK,CAOjE;AAED,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,YAAY,EACrB,KAAK,EAAE,MAAM,aAAa,GACzB,YAAY,CAuBd;AAED,wBAAgB,yCAAyC,CACvD,kBAAkB,EAAE,sBAAsB,EAC1C,YAAY,EAAE,YAAY,0BAmB3B;AAED,wBAAgB,kCAAkC,CAChD,kBAAkB,EAAE,sBAAsB,EAC1C,UAAU,EAAE,UAAU,0BAYvB"}

package/dist/utils/hub.d.ts

@@ -1,4 +0,0 @@
-import type { CommonNamespaceKeys } from '@rango-dev/wallets-core';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-export declare function convertCommonNamespacesKeysToLegacyNamespace(namespaces: CommonNamespaceKeys[]): Namespace[];
-//# sourceMappingURL=hub.d.ts.map

package/dist/utils/hub.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hub.d.ts","sourceRoot":"","sources":["../../src/utils/hub.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAE3E,wBAAgB,4CAA4C,CAC1D,UAAU,EAAE,mBAAmB,EAAE,GAChC,SAAS,EAAE,CAeb"}

package/src/store/slices/types.ts

@@ -1,9 +0,0 @@
-import type { ConfigSlice } from './config';
-import type { DataSlice } from './data';
-import type { SettingsSlice } from './settings';
-import type { WalletsSlice } from './wallets';
-
-export type AppStoreState = DataSlice &
-  ConfigSlice &
-  SettingsSlice &
-  WalletsSlice;