[issue-1234] Sort the token by the balance on mobile app

Koniverse · Dec 20, 2023 · 1689253 · 1689253
1 parent 9df63dd
commit 1689253
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 51 deletions.
diff --git a/src/components/Modal/common/TokenSelector.tsx b/src/components/Modal/common/TokenSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { ListRenderItemInfo } from 'react-native';
 import i18n from 'utils/i18n/i18n';
 import { FullSizeSelectModal } from 'components/common/SelectModal';
@@ -8,12 +8,20 @@ import { EmptyList } from 'components/EmptyList';
 import { MagnifyingGlass } from 'phosphor-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { RootNavigationProps } from 'routes/index';
+import BigN from 'bignumber.js';
+import { useSelector } from 'react-redux';
+import { RootState } from 'stores/index';
+import { BN_ZERO } from 'utils/chainBalances';
+import { getInputValuesFromString } from 'screens/Transaction/SendFundV2/Amount';
 
 export type TokenItemType = {
   name: string;
   slug: string;
   symbol: string;
   originChain: string;
+  free?: BigN;
+  price?: number;
+  decimals?: number;
 };
 
 interface Props {
@@ -34,6 +42,23 @@ interface Props {
   showAddBtn?: boolean;
 }
 
+const convertChainActivePriority = (active?: boolean) => (active ? 1 : 0);
+
+const convertTokenBalance = (a: TokenItemType, b: TokenItemType) => {
+  const aResult = new BigN(a.free || BN_ZERO).multipliedBy(new BigN(a.price || BN_ZERO));
+  const bResult = new BigN(b.free || BN_ZERO).multipliedBy(new BigN(b.price || BN_ZERO));
+
+  if (aResult.eq(bResult)) {
+    return 0;
+  }
+
+  return Number(getInputValuesFromString(aResult.toFixed(), a.decimals || 0)) -
+    Number(getInputValuesFromString(bResult.toFixed(), b.decimals || 0)) >
+    0
+    ? -1
+    : 1;
+};
+
 export const TokenSelector = ({
   items,
   selectedValueMap,
@@ -52,13 +77,23 @@ export const TokenSelector = ({
   showAddBtn = true,
 }: Props) => {
   const navigation = useNavigation<RootNavigationProps>();
+  const { chainStateMap } = useSelector((state: RootState) => state.chainStore);
   useEffect(() => {
     setAdjustPan();
   }, []);
 
+  const filteredItems = useMemo((): TokenItemType[] => {
+    return items.sort((a, b) => {
+      return (
+        convertChainActivePriority(chainStateMap[b.originChain]?.active) -
+          convertChainActivePriority(chainStateMap[a.originChain]?.active) || convertTokenBalance(a, b)
+      );
+    });
+  }, [chainStateMap, items]);
+
   return (
     <FullSizeSelectModal
-      items={items}
+      items={filteredItems}
       selectedValueMap={selectedValueMap}
       onBackButtonPress={() => tokenSelectorRef?.current?.onCloseModal()}
       selectModalType={'single'}

diff --git a/src/components/TokenSelectItem.tsx b/src/components/TokenSelectItem.tsx
@@ -5,9 +5,11 @@ import Text from 'components/Text';
 import { ColorMap } from 'styles/color';
 import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
 import { CheckCircle } from 'phosphor-react-native';
-import { Icon, Typography } from 'components/design-system-ui';
+import { Icon, Typography, Number } from 'components/design-system-ui';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { ThemeTypes } from 'styles/themes';
+import BigN from 'bignumber.js';
+import { BN_ZERO } from 'utils/chainBalances';
 
 interface Props extends TouchableOpacityProps {
   symbol: string;
@@ -19,6 +21,9 @@ interface Props extends TouchableOpacityProps {
   onSelectNetwork: () => void;
   defaultItemKey?: string;
   iconSize?: number;
+  free?: BigN;
+  decimals?: number;
+  price?: number;
 }
 
 export const TokenSelectItem = ({
@@ -31,6 +36,9 @@ export const TokenSelectItem = ({
   onSelectNetwork,
   defaultItemKey,
   iconSize = 40,
+  free,
+  decimals,
+  price,
 }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const styles = useMemo(() => createStyle(theme), [theme]);
@@ -52,11 +60,24 @@ export const TokenSelectItem = ({
           </View>
         </View>
 
-        {isSelected && (
-          <View style={styles.selectedIconWrapper}>
-            <Icon phosphorIcon={CheckCircle} weight={'fill'} size={'sm'} iconColor={theme.colorSuccess} />
+        {!!decimals && !!price && !new BigN(free || 0).eq(BN_ZERO) && (
+          <View style={{ alignItems: 'flex-end' }}>
+            <Number size={16} value={free || BN_ZERO} decimal={decimals} />
+            <Number
+              prefix={'$'}
+              size={12}
+              unitOpacity={0.45}
+              intOpacity={0.45}
+              decimalOpacity={0.45}
+              value={new BigN(free || 0).multipliedBy(new BigN(price))}
+              decimal={decimals}
+            />
           </View>
         )}
+
+        <View style={styles.selectedIconWrapper}>
+          {isSelected && <Icon phosphorIcon={CheckCircle} weight={'fill'} size={'sm'} iconColor={theme.colorSuccess} />}
+        </View>
       </View>
     </TouchableOpacity>
   );
@@ -81,6 +102,7 @@ function createStyle(theme: ThemeTypes) {
       flexDirection: 'row',
       alignItems: 'center',
       flex: 1,
+      paddingRight: theme.paddingXS,
     },
 
     itemTextStyle: {

diff --git a/src/components/common/CancelUnstakeItem/index.tsx b/src/components/common/CancelUnstakeItem/index.tsx
@@ -63,7 +63,11 @@ export const CancelUnstakeItem = ({ item, isSelected, onPress }: Props) => {
           size={theme.fontSize}
           textStyle={{ ...FontSemiBold }}
         />
-        {isSelected && <Icon phosphorIcon={CheckCircle} weight={'fill'} size={'sm'} iconColor={theme.colorSuccess} />}
+        {isSelected ? (
+          <Icon phosphorIcon={CheckCircle} weight={'fill'} size={'sm'} iconColor={theme.colorSuccess} />
+        ) : (
+          <View style={{ width: 20 }} />
+        )}
       </View>
     </TouchableOpacity>
   );

diff --git a/src/components/common/SelectModal/parts/TokenSelectItem.tsx b/src/components/common/SelectModal/parts/TokenSelectItem.tsx
@@ -13,7 +13,8 @@ interface Props<T> {
 
 export function _TokenSelectItem<T>({ item, selectedValueMap, onSelectItem, onCloseModal }: Props<T>) {
   const chainInfoMap = useSelector((state: RootState) => state.chainStore.chainInfoMap);
-  const { symbol, originChain, slug, name } = item as TokenItemType;
+  const { symbol, originChain, slug, name, free, price, decimals } = item as TokenItemType;
+
   return (
     <TokenSelectItem
       key={`${symbol}-${originChain}`}
@@ -23,10 +24,13 @@ export function _TokenSelectItem<T>({ item, selectedValueMap, onSelectItem, onCl
       logoKey={slug.toLowerCase()}
       subLogoKey={originChain}
       isSelected={!!selectedValueMap[slug]}
+      free={free}
       onSelectNetwork={() => {
         onSelectItem && onSelectItem(item);
         onCloseModal && onCloseModal();
       }}
+      decimals={decimals}
+      price={price}
     />
   );
 }
diff --git a/src/hooks/screen/Staking/useGetSupportedStakingTokens.ts b/src/hooks/screen/Staking/useGetSupportedStakingTokens.ts
@@ -1,4 +1,4 @@
-import { _ChainAsset, _ChainInfo } from '@subwallet/chain-list/types';
+import { _ChainInfo } from '@subwallet/chain-list/types';
 import { StakingType } from '@subwallet/extension-base/background/KoniTypes';
 import { AccountJson } from '@subwallet/extension-base/background/types';
 import { _STAKING_CHAIN_GROUP } from '@subwallet/extension-base/services/chain-service/constants';
@@ -15,7 +15,8 @@ import { ALL_KEY } from 'constants/index';
 import { AccountAddressType } from 'types/index';
 import { findAccountByAddress, getAccountAddressType } from 'utils/account';
 import useChainAssets from 'hooks/chain/useChainAssets';
-import useChainChecker from 'hooks/chain/useChainChecker';
+import { BN_ZERO } from '@polkadot/util';
+import { TokenItemType } from 'components/Modal/common/TokenSelector';
 
 const isChainTypeValid = (chainInfo: _ChainInfo, accounts: AccountJson[], address?: string): boolean => {
   const addressType = getAccountAddressType(address);
@@ -43,13 +44,15 @@ export default function useGetSupportedStakingTokens(
   type: StakingType,
   address?: string,
   chain?: string,
-): _ChainAsset[] {
+): TokenItemType[] {
   const chainInfoMap = useSelector((state: RootState) => state.chainStore.chainInfoMap);
   const assetRegistryMap = useChainAssets().chainAssetRegistry;
-  const accounts = useSelector((state: RootState) => state.accountState.accounts);
-  const { checkChainConnected } = useChainChecker();
+  const priceMap = useSelector((state: RootState) => state.price.priceMap);
+  const { balanceMap } = useSelector((root: RootState) => root.balance);
+  const { accounts, currentAccount } = useSelector((state: RootState) => state.accountState);
   return useMemo(() => {
-    const result: _ChainAsset[] = [];
+    const result: TokenItemType[] = [];
+    const accBalanceMap = currentAccount ? balanceMap[currentAccount.address] : undefined;
 
     if (type === StakingType.NOMINATED) {
       Object.values(chainInfoMap).forEach(chainInfo => {
@@ -61,7 +64,14 @@ export default function useGetSupportedStakingTokens(
             isChainTypeValid(chainInfo, accounts, address) &&
             (!chain || chain === ALL_KEY || chain === chainInfo.slug)
           ) {
-            result.push(assetRegistryMap[nativeTokenSlug]);
+            const item = assetRegistryMap[nativeTokenSlug];
+            const freeBalance = accBalanceMap[item.slug]?.free || BN_ZERO;
+            result.push({
+              ...item,
+              price: item.priceId ? priceMap[item.priceId] : 0,
+              free: accBalanceMap ? freeBalance : BN_ZERO,
+              decimals: item.decimals || undefined,
+            });
           }
         }
       });
@@ -78,26 +88,19 @@ export default function useGetSupportedStakingTokens(
             isChainTypeValid(chainInfo, accounts, address) &&
             (!chain || chain === ALL_KEY || chain === chainInfo.slug)
           ) {
-            result.push(assetRegistryMap[nativeTokenSlug]);
+            const item = assetRegistryMap[nativeTokenSlug];
+            const freeBalance = accBalanceMap[item.slug]?.free || BN_ZERO;
+            result.push({
+              ...item,
+              price: item.priceId ? priceMap[item.priceId] : 0,
+              free: accBalanceMap ? freeBalance : BN_ZERO,
+              decimals: item.decimals || undefined,
+            });
           }
         }
       });
     }
 
-    return result.sort((a, b) => {
-      if (checkChainConnected(a.originChain)) {
-        if (checkChainConnected(b.originChain)) {
-          return 0;
-        } else {
-          return -1;
-        }
-      } else {
-        if (checkChainConnected(b.originChain)) {
-          return 1;
-        } else {
-          return 0;
-        }
-      }
-    });
-  }, [type, chainInfoMap, assetRegistryMap, accounts, address, chain, checkChainConnected]);
+    return result;
+  }, [currentAccount, balanceMap, type, chainInfoMap, assetRegistryMap, accounts, address, chain, priceMap]);
 }
diff --git a/src/screens/Transaction/SendFundV2/index.tsx b/src/screens/Transaction/SendFundV2/index.tsx
@@ -6,6 +6,7 @@ import { AssetSetting, ExtrinsicType } from '@subwallet/extension-base/backgroun
 import { AccountJson } from '@subwallet/extension-base/background/types';
 import {
   _getAssetDecimals,
+  _getAssetPriceId,
   _getOriginChainOfAsset,
   _isAssetFungibleToken,
   _isChainEvmCompatible,
@@ -71,6 +72,7 @@ import { FreeBalanceDisplay } from 'screens/Transaction/parts/FreeBalanceDisplay
 import { ModalRef } from 'types/modalRef';
 import useChainAssets from 'hooks/chain/useChainAssets';
 import { TransactionDone } from 'screens/Transaction/TransactionDone';
+import { BalanceItem } from '@subwallet/extension-base/types';
 
 interface TransferFormValues extends TransactionFormValues {
   to: string;
@@ -95,6 +97,8 @@ function getTokenItems(
   assetRegistry: Record<string, _ChainAsset>,
   assetSettingMap: Record<string, AssetSetting>,
   multiChainAssetMap: Record<string, _MultiChainAsset>,
+  balanceMap: Record<string, BalanceItem>,
+  priceMap: Record<string, number>,
   tokenGroupSlug?: string, // is ether a token slug or a multiChainAsset slug
 ): TokenItemType[] {
   const account = findAccountByAddress(accounts, address);
@@ -109,6 +113,7 @@ function getTokenItems(
   const isAccountEthereum = isEthereumAddress(address);
   const isSetTokenSlug = !!tokenGroupSlug && !!assetRegistry[tokenGroupSlug];
   const isSetMultiChainAssetSlug = !!tokenGroupSlug && !!multiChainAssetMap[tokenGroupSlug];
+  const accBalanceMap = balanceMap[address];
 
   if (tokenGroupSlug) {
     if (!(isSetTokenSlug || isSetMultiChainAssetSlug)) {
@@ -141,10 +146,13 @@ function getTokenItems(
   Object.values(assetRegistry).forEach(chainAsset => {
     const isValidLedger = isLedger ? isAccountEthereum || validLedgerNetwork.includes(chainAsset?.originChain) : true;
     const isTokenFungible = _isAssetFungibleToken(chainAsset);
+    // @ts-ignore
+    const freeBalance = accBalanceMap[chainAsset.slug]?.free || BN_ZERO;
 
     if (!(isTokenFungible && isAssetTypeValid(chainAsset, chainInfoMap, isAccountEthereum) && isValidLedger)) {
       return;
     }
+    const priceId = _getAssetPriceId(chainAsset);
 
     if (isSetMultiChainAssetSlug) {
       if (chainAsset.multiChainAsset === tokenGroupSlug) {
@@ -153,6 +161,9 @@ function getTokenItems(
           slug: chainAsset.slug,
           symbol: chainAsset.symbol,
           originChain: chainAsset.originChain,
+          free: freeBalance,
+          price: priceMap[priceId] || 0,
+          decimals: chainAsset.decimals || undefined,
         });
       }
     } else {
@@ -161,6 +172,9 @@ function getTokenItems(
         slug: chainAsset.slug,
         symbol: chainAsset.symbol,
         originChain: chainAsset.originChain,
+        free: freeBalance,
+        price: priceMap[priceId] || 0,
+        decimals: chainAsset.decimals || undefined,
       });
     }
   });
@@ -366,9 +380,10 @@ export const SendFund = ({
     nativeTokenSlug,
     tokenBalance,
   } = useGetBalance(chainValue, fromValue, assetValue);
-
   const { chainInfoMap, chainStateMap } = useSelector((root: RootState) => root.chainStore);
   const { assetSettingMap, multiChainAssetMap, xcmRefMap } = useSelector((root: RootState) => root.assetRegistry);
+  const priceMap = useSelector((state: RootState) => state.price.priceMap);
+  const { balanceMap } = useSelector((root: RootState) => root.balance);
   const assetRegistry = useChainAssets().chainAssetRegistry;
   const { accounts, isAllAccount } = useSelector((state: RootState) => state.accountState);
   const [maxTransfer, setMaxTransfer] = useState<string>('0');
@@ -466,30 +481,19 @@ export const SendFund = ({
       assetRegistry,
       assetSettingMap,
       multiChainAssetMap,
+      balanceMap,
+      priceMap,
       tokenGroupSlug,
-    ).sort((a, b) => {
-      if (checkChainConnected(a.originChain)) {
-        if (checkChainConnected(b.originChain)) {
-          return 0;
-        } else {
-          return -1;
-        }
-      } else {
-        if (checkChainConnected(b.originChain)) {
-          return 1;
-        } else {
-          return 0;
-        }
-      }
-    });
+    );
   }, [
     accounts,
     assetRegistry,
     assetSettingMap,
+    balanceMap,
     chainInfoMap,
-    checkChainConnected,
     fromValue,
     multiChainAssetMap,
+    priceMap,
     tokenGroupSlug,
   ]);
 

diff --git a/src/screens/Transaction/Stake/index.tsx b/src/screens/Transaction/Stake/index.tsx
@@ -521,9 +521,7 @@ export const Stake = ({
                 selectedValueMap={{ [asset]: true }}
                 onSelectItem={onSelectToken}
                 disabled={stakingChain !== ALL_KEY || !from || loading}
-                defaultValue={asset}
                 showAddBtn={false}
-                acceptDefaultValue={true}
                 tokenSelectorRef={tokenSelectorRef}
                 renderSelected={() => <TokenSelectField logoKey={asset} subLogoKey={chain} value={symbol} showIcon />}
               />