@rango-dev/widget-embedded 0.17.1-next.25 → 0.17.1-next.27

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;
+    }, {});
+}

package/dist/store/settings.d.ts

@@ -1,83 +0,0 @@
-import type { SwapperMeta } from 'rango-sdk';
-import { type Language } from '@rango-dev/ui';
-export type ThemeMode = 'auto' | 'dark' | 'light';
-export interface SettingsState {
-    /** Keeping a history of blockchains that user has selected (in Swap process) */
-    preferredBlockchains: string[];
-    slippage: number;
-    customSlippage: number | null;
-    infiniteApprove: boolean;
-    disabledLiquiditySources: string[];
-    theme: ThemeMode;
-    language: Language;
-    affiliateRef: string | null;
-    affiliatePercent: number | null;
-    affiliateWallets: {
-        [key: string]: string;
-    } | null;
-    setSlippage: (slippage: number) => void;
-    setCustomSlippage: (customSlippage: number | null) => void;
-    toggleInfiniteApprove: () => void;
-    toggleLiquiditySource: (name: string) => void;
-    setTheme: (theme: ThemeMode) => void;
-    setLanguage: (language: Language) => void;
-    toggleAllLiquiditySources: (swappers: SwapperMeta[], shouldReset?: boolean) => void;
-    setAffiliateRef: (affiliateRef: string | null) => void;
-    setAffiliatePercent: (affiliatePercent: number | null) => void;
-    setAffiliateWallets: (affiliateWallets: {
-        [key: string]: string;
-    } | null) => void;
-    addPreferredBlockchain: (blockchain: string) => void;
-}
-export declare const useSettingsStore: {
-    (): SettingsState;
-    <U>(selector: (state: SettingsState) => U): U;
-    <U_1>(selector: (state: SettingsState) => U_1, equalityFn: (a: U_1, b: U_1) => boolean): U_1;
-} & Omit<Omit<import("zustand").StoreApi<SettingsState>, "persist"> & {
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsState, SettingsState>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => void | Promise<void>;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: SettingsState) => void) => () => void;
-        onFinishHydration: (fn: (state: SettingsState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<SettingsState, SettingsState>>;
-    };
-}, "subscribe"> & {
-    subscribe: {
-        (listener: (selectedState: SettingsState, previousSelectedState: SettingsState) => void): () => void;
-        <U_2>(selector: (state: SettingsState) => U_2, listener: (selectedState: U_2, previousSelectedState: U_2) => void, options?: {
-            equalityFn?: ((a: U_2, b: U_2) => boolean) | undefined;
-            fireImmediately?: boolean | undefined;
-        } | undefined): () => void;
-    };
-} & {
-    use: {
-        preferredBlockchains: () => string[];
-        slippage: () => number;
-        customSlippage: () => number | null;
-        infiniteApprove: () => boolean;
-        disabledLiquiditySources: () => string[];
-        theme: () => ThemeMode;
-        language: () => "en" | "es" | "ja" | "fr";
-        affiliateRef: () => string | null;
-        affiliatePercent: () => number | null;
-        affiliateWallets: () => {
-            [key: string]: string;
-        } | null;
-        setSlippage: () => (slippage: number) => void;
-        setCustomSlippage: () => (customSlippage: number | null) => void;
-        toggleInfiniteApprove: () => () => void;
-        toggleLiquiditySource: () => (name: string) => void;
-        setTheme: () => (theme: ThemeMode) => void;
-        setLanguage: () => (language: Language) => void;
-        toggleAllLiquiditySources: () => (swappers: SwapperMeta[], shouldReset?: boolean) => void;
-        setAffiliateRef: () => (affiliateRef: string | null) => void;
-        setAffiliatePercent: () => (affiliatePercent: number | null) => void;
-        setAffiliateWallets: () => (affiliateWallets: {
-            [key: string]: string;
-        } | null) => void;
-        addPreferredBlockchain: () => (blockchain: string) => void;
-    };
-};
-//# sourceMappingURL=settings.d.ts.map

package/dist/store/settings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/store/settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAW9C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,oBAAoB,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAEnD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,yBAAyB,EAAE,CACzB,QAAQ,EAAE,WAAW,EAAE,EACvB,WAAW,CAAC,EAAE,OAAO,KAClB,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,mBAAmB,EAAE,CACnB,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,KAC/C,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAlBH,MAAM,KAAK,IAAI;kDACH,MAAM,GAAG,IAAI,KAAK,IAAI;2CAC7B,IAAI;4CACH,MAAM,KAAK,IAAI;gCAC3B,SAAS,KAAK,IAAI;sCACZ,QAAQ,KAAK,IAAI;oDAE7B,WAAW,EAAE,gBACT,OAAO,KAClB,IAAI;8CACuB,MAAM,GAAG,IAAI,KAAK,IAAI;sDACd,MAAM,GAAG,IAAI,KAAK,IAAI;;;qBAGzD,IAAI;mDAC4B,MAAM,KAAK,IAAI;;CAqHrD,CAAC"}

package/src/store/settings.ts

@@ -1,161 +0,0 @@
-import type { SwapperMeta } from 'rango-sdk';
-
-import { type Language } from '@rango-dev/ui';
-import { create } from 'zustand';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
-
-import { BLOCKCHAIN_LIST_SIZE } from '../constants/configs';
-import { DEFAULT_LANGUAGE } from '../constants/languages';
-import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
-import { removeDuplicateFrom } from '../utils/common';
-
-import createSelectors from './selectors';
-
-export type ThemeMode = 'auto' | 'dark' | 'light';
-
-export interface SettingsState {
-  /** Keeping a history of blockchains that user has selected (in Swap process) */
-  preferredBlockchains: string[];
-  slippage: number;
-  customSlippage: number | null;
-  infiniteApprove: boolean;
-  disabledLiquiditySources: string[];
-  theme: ThemeMode;
-  language: Language;
-  affiliateRef: string | null;
-  affiliatePercent: number | null;
-  affiliateWallets: { [key: string]: string } | null;
-
-  setSlippage: (slippage: number) => void;
-  setCustomSlippage: (customSlippage: number | null) => void;
-  toggleInfiniteApprove: () => void;
-  toggleLiquiditySource: (name: string) => void;
-  setTheme: (theme: ThemeMode) => void;
-  setLanguage: (language: Language) => void;
-  toggleAllLiquiditySources: (
-    swappers: SwapperMeta[],
-    shouldReset?: boolean
-  ) => void;
-  setAffiliateRef: (affiliateRef: string | null) => void;
-  setAffiliatePercent: (affiliatePercent: number | null) => void;
-  setAffiliateWallets: (
-    affiliateWallets: { [key: string]: string } | null
-  ) => void;
-  addPreferredBlockchain: (blockchain: string) => void;
-}
-
-export const useSettingsStore = createSelectors(
-  create<SettingsState>()(
-    persist(
-      subscribeWithSelector((set, get) => ({
-        preferredBlockchains: [],
-        slippage: DEFAULT_SLIPPAGE,
-        customSlippage: null,
-        infiniteApprove: false,
-        affiliateRef: null,
-        affiliatePercent: null,
-        affiliateWallets: null,
-        disabledLiquiditySources: [],
-        theme: 'auto',
-        language: DEFAULT_LANGUAGE,
-        addPreferredBlockchain: (blockchain) => {
-          const currentPreferredBlockchains = get().preferredBlockchains;
-
-          const noNeedToDoAnything = currentPreferredBlockchains.find(
-            (preferredBlockchain, index) => {
-              const isSameBlockchain = preferredBlockchain === blockchain;
-              const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
-
-              return isSameBlockchain && isInVisibleList;
-            }
-          );
-
-          if (noNeedToDoAnything) {
-            return;
-          }
-
-          const nextPreferredBlockchains: string[] =
-            currentPreferredBlockchains.filter((preferredBlockchain) => {
-              const isSameBlockchain = preferredBlockchain === blockchain;
-
-              return !isSameBlockchain;
-            });
-
-          set(() => ({
-            preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
-          }));
-        },
-        setSlippage: (slippage) =>
-          set(() => ({
-            slippage: slippage,
-          })),
-        setCustomSlippage: (customSlippage) =>
-          set(() => ({
-            customSlippage: customSlippage,
-          })),
-        setAffiliateRef: (affiliateRef) =>
-          set(() => ({
-            affiliateRef,
-          })),
-        setAffiliatePercent: (affiliatePercent) =>
-          set(() => ({
-            affiliatePercent,
-          })),
-
-        setAffiliateWallets: (affiliateWallets) =>
-          set(() => ({
-            affiliateWallets,
-          })),
-        toggleAllLiquiditySources: (swappers, shouldReset) =>
-          set((state) => {
-            if (shouldReset) {
-              return { disabledLiquiditySources: [] };
-            }
-            const swappersGroup = removeDuplicateFrom(
-              swappers.map((swapper) => swapper.swapperGroup)
-            );
-
-            if (
-              swappersGroup.length === state.disabledLiquiditySources.length
-            ) {
-              return { disabledLiquiditySources: [] };
-            }
-
-            return {
-              disabledLiquiditySources: swappersGroup,
-            };
-          }),
-        toggleInfiniteApprove: () =>
-          set((state) => ({
-            infiniteApprove: !state.infiniteApprove,
-          })),
-        toggleLiquiditySource: (name) =>
-          set((state) => {
-            if (state.disabledLiquiditySources.includes(name)) {
-              return {
-                disabledLiquiditySources: state.disabledLiquiditySources.filter(
-                  (liquiditySource) => liquiditySource != name
-                ),
-              };
-            }
-            return {
-              disabledLiquiditySources:
-                state.disabledLiquiditySources.concat(name),
-            };
-          }),
-        setTheme: (theme) =>
-          set(() => ({
-            theme,
-          })),
-        setLanguage: (language) =>
-          set(() => ({
-            language,
-          })),
-      })),
-      {
-        name: 'user-settings',
-        skipHydration: true,
-      }
-    )
-  )
-);