CP-12312: display platform accounts

packages/core-mobile/app/new/common/components/WalletCard.tsx

@@ -8,8 +8,12 @@ import {
 } from '@avalabs/k2-alpine'
 import { useManageWallet } from 'common/hooks/useManageWallet'
 import { WalletDisplayData } from 'common/types'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
+import { useSelector } from 'react-redux'
+import { selectAccounts } from 'store/account'
+import { TotalAccountBalanceForWallet } from 'features/accountSettings/components/ToalAccountBalanceForWallet'
+import { isPlatformAccount } from 'store/account/utils'
 import { DropdownMenu } from './DropdownMenu'
 
 const ITEM_HEIGHT = 50
@@ -34,6 +38,16 @@ const WalletCard = ({
   } = useTheme()
   const { getDropdownItems, handleDropdownSelect } = useManageWallet()
 
+  const accounts = useSelector(selectAccounts)
+
+  // number of accounts in the wallet (excluding X/P chains)
+  const accountsCount = useMemo(() => {
+    return accounts.filter(
+      account =>
+        account.walletId === wallet.id && !isPlatformAccount(account.id)
+    ).length
+  }, [accounts, wallet.id])
+
   const renderExpansionIcon = useCallback(() => {
     return (
       <Icons.Navigation.ChevronRight
@@ -76,24 +90,41 @@ const WalletCard = ({
             alignItems: 'center',
             gap: 8,
             flex: 1,
-            paddingHorizontal: 10
+            padding: 10
           }}>
           <View sx={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
             {renderExpansionIcon()}
             {renderWalletIcon()}
           </View>
-          <Text
-            testID={`manage_accounts_wallet_name__${wallet.name}`}
-            variant="buttonSmall"
-            numberOfLines={1}
-            style={{
-              fontSize: 14,
-              flex: 1
-            }}>
-            {wallet.name}
-          </Text>
+          <View sx={{ flex: 1 }}>
+            <Text
+              testID={`manage_accounts_wallet_name__${wallet.name}`}
+              variant="buttonSmall"
+              numberOfLines={1}
+              style={{
+                fontSize: 14
+              }}>
+              {wallet.name}
+            </Text>
+            <Text
+              testID={`manage_accounts_wallet_name__${wallet.name}`}
+              variant="caption"
+              numberOfLines={2}
+              style={{
+                fontSize: 12,
+                fontWeight: 400,
+                color: colors.$textSecondary
+              }}>
+              {`${accountsCount} ${
+                accountsCount > 1 ? 'accounts' : 'account'
+              } + X/P Chains`}
+            </Text>
+          </View>
         </View>
 
+        {/* total balance */}
+        <TotalAccountBalanceForWallet walletId={wallet.id} />
+
         {showMoreButton && (
           <DropdownMenu
             groups={[

packages/core-mobile/app/new/common/contexts/useBalanceForXpAccunt.ts

@@ -0,0 +1,54 @@
+import { useCallback, useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  fetchXpBalancesForWallet,
+  QueryStatus,
+  selectBalanceTotalInCurrencyForXpNetwork,
+  selectIsXpBalanceLoadedForWallet,
+  selectXpBalanceStatus
+} from 'store/balance'
+import { XpNetworkVMType } from 'store/network'
+import { selectWalletById } from 'store/wallet/slice'
+
+export const useBalanceFoXpAccount = (
+  walletId: string,
+  networkType: XpNetworkVMType
+): {
+  isBalanceLoaded: boolean
+  fetchBalance: () => void
+  isFetchingBalance: boolean
+  balance: number
+} => {
+  const dispatch = useDispatch()
+  const wallet = useSelector(selectWalletById(walletId))
+  const xpBalanceStatus = useSelector(selectXpBalanceStatus)
+  const isBalanceLoading = xpBalanceStatus !== QueryStatus.IDLE
+  const [isFetchingBalance, setIsFetchingBalance] = useState(true)
+  const accountBalance = useSelector(
+    selectBalanceTotalInCurrencyForXpNetwork(walletId, networkType)
+  )
+
+  const isBalanceLoaded = useSelector(
+    selectIsXpBalanceLoadedForWallet(walletId, networkType)
+  )
+
+  const fetchBalance = useCallback(() => {
+    if (wallet) {
+      dispatch(fetchXpBalancesForWallet({ wallet }))
+      setIsFetchingBalance(true)
+    }
+  }, [wallet, dispatch])
+
+  useEffect(() => {
+    if (!isBalanceLoading && isFetchingBalance) {
+      setIsFetchingBalance(false)
+    }
+  }, [isFetchingBalance, isBalanceLoading, setIsFetchingBalance])
+
+  return {
+    balance: accountBalance,
+    fetchBalance,
+    isFetchingBalance,
+    isBalanceLoaded
+  }
+}

packages/core-mobile/app/new/common/hooks/useContacts.ts

@@ -15,12 +15,12 @@ export const useContacts = (): {
   contacts: Contact[]
 } => {
   const selectedRecentContacts = useSelector(selectRecentContacts)
-  const accountCollection = useSelector(selectAccounts)
+  const allAccounts = useSelector(selectAccounts)
   const { avatar } = useAvatar()
 
   const accounts = useMemo(
     () =>
-      Object.values(accountCollection).map(
+      allAccounts.map(
         account =>
           ({
             id: account.id,
@@ -33,7 +33,7 @@ export const useContacts = (): {
             type: 'account'
           } as Contact)
       ),
-    [accountCollection, avatar]
+    [allAccounts, avatar]
   )
   const contactCollection = useSelector(selectContacts)
   const contacts = useMemo(() => {

packages/core-mobile/app/new/common/types.ts

@@ -17,17 +17,20 @@ export type WalletDisplayData = {
   id: string
   name: string
   type: WalletType
-  accounts: Array<{
-    hideSeparator: boolean
-    containerSx: {
-      backgroundColor: string
-      borderRadius: number
-    }
-    title: React.JSX.Element
-    subtitle: React.JSX.Element
-    leftIcon: React.JSX.Element
-    value: React.JSX.Element
-    onPress: () => void
-    accessory: React.JSX.Element
-  }>
+  accounts: AccountDataForWallet[]
+}
+
+export type AccountDataForWallet = {
+  id: string
+  hideSeparator: boolean
+  containerSx: {
+    backgroundColor: string
+    borderRadius: number
+  }
+  title: React.JSX.Element
+  subtitle: React.JSX.Element
+  leftIcon: React.JSX.Element
+  value: React.JSX.Element
+  onPress: () => void
+  accessory: React.JSX.Element
 }

packages/core-mobile/app/new/features/accountSettings/components/AcccountList.tsx

@@ -8,12 +8,14 @@ import { useDispatch, useSelector } from 'react-redux'
 import AnalyticsService from 'services/analytics/AnalyticsService'
 import {
   Account,
-  selectAccounts,
   selectActiveAccount,
+  selectAllAccounts,
   setActiveAccount
 } from 'store/account'
+import { isPlatformAccount } from 'store/account/utils'
 import { useRecentAccounts } from '../store'
 import { AccountItem } from './AccountItem'
+import { XpAccountItem } from './XpAccountItem'
 
 const CARD_PADDING = 12
 
@@ -28,7 +30,7 @@ export const AccountList = (): React.JSX.Element => {
   const dispatch = useDispatch()
   const { navigate, dismiss } = useRouter()
   const activeAccount = useSelector(selectActiveAccount)
-  const accountCollection = useSelector(selectAccounts)
+  const accountCollection = useSelector(selectAllAccounts)
   const flatListRef = useRef<FlatList>(null)
 
   const { recentAccountIds, updateRecentAccount } = useRecentAccounts()
@@ -41,7 +43,7 @@ export const AccountList = (): React.JSX.Element => {
 
   const recentAccounts = useMemo(() => {
     return recentAccountIds
-      .map(id => accountCollection[id])
+      .map(id => (isPlatformAccount(id) ? undefined : accountCollection[id]))
       .filter((account): account is Account => account !== undefined)
   }, [accountCollection, recentAccountIds])
 
@@ -93,15 +95,27 @@ export const AccountList = (): React.JSX.Element => {
   }, [recentAccounts.length])
 
   const renderItem = useCallback(
-    ({ item, index }: { item: Account; index: number }) => (
-      <AccountItem
-        index={index}
-        isActive={item.id === activeAccount?.id}
-        account={item as Account}
-        onSelectAccount={onSelectAccount}
-        gotoAccountDetails={gotoAccountDetails}
-      />
-    ),
+    ({ item, index }: { item: Account; index: number }) => {
+      if (isPlatformAccount(item.id)) {
+        return (
+          <XpAccountItem
+            index={index}
+            isActive={item.id === activeAccount?.id}
+            account={item as Account}
+            onSelectAccount={onSelectAccount}
+          />
+        )
+      }
+      return (
+        <AccountItem
+          index={index}
+          isActive={item.id === activeAccount?.id}
+          account={item as Account}
+          onSelectAccount={onSelectAccount}
+          gotoAccountDetails={gotoAccountDetails}
+        />
+      )
+    },
     [activeAccount?.id, gotoAccountDetails, onSelectAccount]
   )
 

packages/core-mobile/app/new/features/accountSettings/components/AccountBalance.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useMemo } from 'react'
+import {
+  ActivityIndicator,
+  alpha,
+  AnimatedBalance,
+  Icons,
+  Pressable,
+  SCREEN_WIDTH,
+  useTheme
+} from '@avalabs/k2-alpine'
+import { useSelector } from 'react-redux'
+import { selectIsPrivacyModeEnabled } from 'store/settings/securityPrivacy'
+import { useBalanceForAccount } from 'new/common/contexts/useBalanceForAccount'
+import { useFormatCurrency } from 'new/common/hooks/useFormatCurrency'
+import { UNKNOWN_AMOUNT } from 'consts/amount'
+import { HiddenBalanceText } from 'common/components/HiddenBalanceText'
+
+export const AccountBalance = ({
+  isActive,
+  accountId
+}: {
+  isActive: boolean
+  accountId: string
+}): React.JSX.Element => {
+  const isPrivacyModeEnabled = useSelector(selectIsPrivacyModeEnabled)
+  const {
+    theme: { colors }
+  } = useTheme()
+  const {
+    balance: accountBalance,
+    fetchBalance,
+    isFetchingBalance,
+    isBalanceLoaded
+  } = useBalanceForAccount(accountId)
+  const { formatCurrency } = useFormatCurrency()
+
+  const balance = useMemo(() => {
+    return accountBalance === 0
+      ? formatCurrency({ amount: 0 }).replace(/[\d.,]+/g, UNKNOWN_AMOUNT)
+      : formatCurrency({ amount: accountBalance })
+  }, [accountBalance, formatCurrency])
+
+  const renderMaskView = useCallback(() => {
+    return (
+      <HiddenBalanceText
+        variant={'heading6'}
+        sx={{
+          color: isActive
+            ? colors.$textPrimary
+            : alpha(colors.$textPrimary, 0.6),
+          lineHeight: 18
+        }}
+      />
+    )
+  }, [colors.$textPrimary, isActive])
+
+  if (isFetchingBalance) {
+    return <ActivityIndicator size="small" sx={{ marginRight: 4 }} />
+  }
+
+  if (!isBalanceLoaded) {
+    return (
+      <Pressable onPress={fetchBalance}>
+        <Icons.Custom.BalanceRefresh color={colors.$textPrimary} />
+      </Pressable>
+    )
+  }
+
+  return (
+    <AnimatedBalance
+      variant="body1"
+      balance={balance}
+      shouldMask={isPrivacyModeEnabled}
+      balanceSx={{
+        color: isActive ? colors.$textPrimary : alpha(colors.$textPrimary, 0.6),
+        lineHeight: 18,
+        width: SCREEN_WIDTH * 0.3,
+        textAlign: 'right'
+      }}
+      renderMaskView={renderMaskView}
+      shouldAnimate={false}
+    />
+  )
+}