CP-12311 - X/P-Chain token details page (#3364)

bogdandobritoiu · web-flow · commit 8b9a4db869f1 · 2025-12-02T16:19:25.000+02:00
diff --git a/packages/core-mobile/app/new/common/components/TokenHeader.tsx b/packages/core-mobile/app/new/common/components/TokenHeader.tsx
@@ -56,7 +56,7 @@ export const TokenHeader = ({
               sx={{ lineHeight: 38, flexShrink: 1 }}
               numberOfLines={1}>
               {token?.balanceDisplayValue ? (
-                <View sx={{ flexDirection: 'row' }}>
+                <View sx={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                   <SubTextNumber
                     number={token.balanceDisplayValue}
                     textColor={colors.$textPrimary}
@@ -66,9 +66,12 @@ export const TokenHeader = ({
                     variant="heading2"
                     sx={{
                       fontFamily: 'Aeonik-Medium',
-                      color: colors.$textPrimary
+                      color: colors.$textPrimary,
+                      fontSize: 18,
+                      lineHeight: 18,
+                      marginBottom: 4
                     }}>
-                    {' ' + token.symbol}
+                    {token.symbol}
                   </Text>
                 </View>
               ) : (
diff --git a/packages/core-mobile/app/new/features/portfolio/assets/components/TokenDetail.tsx b/packages/core-mobile/app/new/features/portfolio/assets/components/TokenDetail.tsx
@@ -4,16 +4,10 @@ import {
 } from '@avalabs/avalanche-module'
 import { TokenUnit } from '@avalabs/core-utils-sdk'
 import { PChainBalance, XChainBalances } from '@avalabs/glacier-sdk'
-import {
-  Icons,
-  SPRING_LINEAR_TRANSITION,
-  Text,
-  useTheme,
-  View
-} from '@avalabs/k2-alpine'
+import { SPRING_LINEAR_TRANSITION, Text, View } from '@avalabs/k2-alpine'
+import { BalanceText } from 'common/components/BalanceText'
 import { CollapsibleTabs } from 'common/components/CollapsibleTabs'
 import { getListItemEnteringAnimation } from 'common/utils/animations'
-import { UNKNOWN_AMOUNT } from 'consts/amount'
 import React, { FC, useCallback, useMemo } from 'react'
 import Animated from 'react-native-reanimated'
 import {
@@ -22,9 +16,6 @@ import {
   LocalTokenWithBalance
 } from 'store/balance'
 import { xpChainToken } from 'utils/units/knownTokens'
-import { BalanceText } from 'common/components/BalanceText'
-import { useFormatCurrency } from 'common/hooks/useFormatCurrency'
-import { LogoWithNetwork } from './LogoWithNetwork'
 
 type PChainBalanceType = keyof PChainBalance
 type XChainBalanceType = keyof XChainBalances
@@ -34,35 +25,6 @@ interface Props {
 }
 
 const TokenDetail: FC<Props> = ({ token }): React.JSX.Element => {
-  const {
-    theme: { colors }
-  } = useTheme()
-  const { formatCurrency } = useFormatCurrency()
-
-  const assetTypes = useMemo(() => {
-    if (token && isTokenWithBalancePVM(token)) {
-      return Object.keys(token.balancePerType)
-        .sort((a, b) => {
-          return Number(
-            (token.balancePerType[b as PChainBalanceType] ?? 0n) -
-              (token.balancePerType[a as PChainBalanceType] ?? 0n)
-          )
-        })
-        .filter(k => (token.balancePerType[k as PChainBalanceType] ?? 0) > 0)
-    }
-    if (token && isTokenWithBalanceAVM(token)) {
-      return Object.keys(token.balancePerType)
-        .sort((a, b) => {
-          return Number(
-            (token.balancePerType[b as XChainBalanceType] ?? 0n) -
-              (token.balancePerType[a as XChainBalanceType] ?? 0n)
-          )
-        })
-        .filter(k => (token.balancePerType[k as XChainBalanceType] ?? 0) > 0)
-    }
-    return []
-  }, [token])
-
   const getBalanceAndAssetName = useCallback(
     (item: string) => {
       const balance =
@@ -82,129 +44,153 @@ const TokenDetail: FC<Props> = ({ token }): React.JSX.Element => {
     [token]
   )
 
+  const data = useMemo(() => {
+    const isPChainToken = token && isTokenWithBalancePVM(token)
+    const isXChainToken = token && isTokenWithBalanceAVM(token)
+
+    if (isPChainToken) {
+      return [
+        ...Object.keys(token.balancePerType).sort((a, b) => {
+          return Number(
+            (token.balancePerType[b as PChainBalanceType] ?? 0n) -
+              (token.balancePerType[a as PChainBalanceType] ?? 0n)
+          )
+        }),
+        'Total'
+      ]
+    }
+
+    if (isXChainToken) {
+      return [
+        ...Object.keys(token.balancePerType).sort((a, b) => {
+          return Number(
+            (token.balancePerType[b as XChainBalanceType] ?? 0n) -
+              (token.balancePerType[a as XChainBalanceType] ?? 0n)
+          )
+        }),
+        'Total'
+      ]
+    }
+    return []
+  }, [token])
+
+  const totalBalance = useMemo(() => {
+    return data
+      .filter(item => item !== 'Total')
+      .reduce((acc, item) => {
+        const { balance } = getBalanceAndAssetName(item)
+        if (balance) {
+          const balanceUnit = new TokenUnit(
+            balance,
+            xpChainToken.maxDecimals,
+            xpChainToken.symbol
+          )
+          return acc.add(balanceUnit)
+        }
+        return acc
+      }, new TokenUnit(0n, xpChainToken.maxDecimals, xpChainToken.symbol))
+  }, [data, getBalanceAndAssetName])
+
   const renderItem = useCallback(
-    ({ item }: { item: string }): React.JSX.Element => {
+    ({ item, index }: { item: string; index: number }): React.JSX.Element => {
       const { balance, assetName } = getBalanceAndAssetName(item)
 
       const balanceInAvax = balance
         ? new TokenUnit(balance, xpChainToken.maxDecimals, xpChainToken.symbol)
         : undefined
+
+      const formattedBalanceInAvax =
+        balanceInAvax?.toDisplay({
+          fixedDp: 2,
+          asNumber: true
+        }) ?? 0
+
       const formattedBalance =
-        balanceInAvax && token?.priceInCurrency
-          ? formatCurrency({
-              amount: balanceInAvax
-                .mul(token.priceInCurrency)
-                .toDisplay({ fixedDp: 2, asNumber: true })
-            })
-          : UNKNOWN_AMOUNT
+        totalBalance?.toDisplay({
+          fixedDp: 2,
+          asNumber: true
+        }) ?? 0
+
+      const title = item === 'Total' ? 'Total balance' : assetName
+      const value = item === 'Total' ? formattedBalance : formattedBalanceInAvax
+      const isFirst = index === 0
+      const isLast = index === data.length - 1
 
-      const isAvailableBalanceType =
-        item === 'unlockedUnstaked' || item === 'unlocked'
+      const containerSx = {
+        paddingHorizontal: 16,
+        backgroundColor: '$surfaceSecondary',
+        ...(isFirst && { borderTopLeftRadius: 16, borderTopRightRadius: 16 }),
+        ...(isLast && {
+          borderBottomLeftRadius: 16,
+          borderBottomRightRadius: 16
+        })
+      }
 
       return (
-        <View
-          sx={{
-            borderRadius: 18,
-            paddingLeft: 16,
-            paddingRight: 12,
-            paddingVertical: 12,
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: '$surfaceSecondary',
-            marginBottom: 12
-          }}>
-          {token && isAvailableBalanceType ? (
-            <LogoWithNetwork
-              token={token}
-              outerBorderColor={colors.$surfaceSecondary}
-            />
-          ) : (
-            <View
-              sx={{
-                width: 36,
-                height: 36,
-                borderRadius: 18,
-                justifyContent: 'center',
-                alignItems: 'center',
-                overflow: 'hidden',
-                backgroundColor: '$borderPrimary',
-                borderColor: '$borderPrimary'
-              }}>
-              <Icons.Custom.Psychiatry
-                width={24}
-                height={24}
-                color={colors.$textPrimary}
-              />
-            </View>
-          )}
+        <View sx={containerSx}>
           <View
             sx={{
-              flexGrow: 1,
-              marginHorizontal: 12,
+              borderBottomWidth: isLast ? 0 : 1,
+              borderBottomColor: '$borderPrimary',
               flexDirection: 'row',
-              justifyContent: 'space-between'
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              height: 48
             }}>
-            <View
+            <Text variant="subtitle2" numberOfLines={1} sx={{ fontSize: 16 }}>
+              {title}
+            </Text>
+            <BalanceText
+              variant="subtitle2"
+              numberOfLines={1}
               sx={{
-                flexShrink: 1
+                color: '$textSecondary',
+                fontSize: 16
               }}>
-              <Text variant="buttonMedium" numberOfLines={1} sx={{ flex: 1 }}>
-                {assetName}
-              </Text>
-              <BalanceText
-                variant="body2"
-                sx={{ lineHeight: 16, flex: 1 }}
-                ellipsizeMode="tail"
-                isCurrency={false}
-                maskType="covered"
-                numberOfLines={1}>
-                {balanceInAvax?.toDisplay()} {xpChainToken.symbol}
-              </BalanceText>
-            </View>
-            <View sx={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-              <BalanceText
-                variant="buttonMedium"
-                numberOfLines={1}
-                sx={{ lineHeight: 18, marginBottom: 1 }}>
-                {formattedBalance}
-              </BalanceText>
-            </View>
+              {value} {xpChainToken.symbol}
+            </BalanceText>
           </View>
         </View>
       )
     },
-    [
-      colors.$textPrimary,
-      colors.$surfaceSecondary,
-      getBalanceAndAssetName,
-      token,
-      formatCurrency
-    ]
+    [getBalanceAndAssetName, totalBalance, data.length]
   )
 
-  const renderHeader = (): JSX.Element => {
-    return (
-      <Text variant="heading3" sx={{ marginBottom: 12 }}>
-        Token breakdown
-      </Text>
-    )
-  }
+  const renderHeader = useCallback((): JSX.Element => {
+    return <></>
+
+    // TODO: Add after ledger is implemented
+    // return (
+    //   <View sx={{ marginTop: 8 }}>
+    //     <GroupList
+    //       data={[
+    //         {
+    //           title:
+    //             'UTXOs across multiple addresses. View all of your balances and UTXOs',
+    //           leftIcon: <Icons.Action.Info color={colors.$textPrimary} />,
+    //           onPress: () => {
+    //             // console.log('info')
+    //           }
+    //         }
+    //       ]}
+    //     />
+    //   </View>
+    // )
+  }, [])
 
   return (
     <Animated.View
       entering={getListItemEnteringAnimation(5)}
       layout={SPRING_LINEAR_TRANSITION}>
       <CollapsibleTabs.FlatList
-        style={{
-          paddingTop: 4
-        }}
         contentContainerStyle={{
           paddingHorizontal: 16,
-          paddingBottom: 16
+          paddingBottom: 16,
+          paddingTop: 12
         }}
-        data={assetTypes}
+        data={data}
+        ListHeaderComponent={renderHeader}
         renderItem={renderItem}
-        ListHeaderComponent={renderHeader()}
         showsVerticalScrollIndicator={false}
         keyExtractor={item => item}
       />
diff --git a/packages/core-mobile/app/new/features/portfolio/assets/screens/TokenDetailScreen.tsx b/packages/core-mobile/app/new/features/portfolio/assets/screens/TokenDetailScreen.tsx
@@ -437,7 +437,7 @@ export const TokenDetailScreen = (): React.JSX.Element => {
     return isXpToken
       ? [
           {
-            tabName: TokenDetailTab.Tokens,
+            tabName: TokenDetailTab.Assets,
             component: <TokenDetail token={token} />
           },
           activityTab
@@ -471,11 +471,11 @@ export const TokenDetailScreen = (): React.JSX.Element => {
 }
 
 export enum TokenDetailTab {
-  Tokens = 'Tokens',
+  Assets = 'Assets',
   Activity = 'Activity'
 }
 
 const SEGMENT_ITEMS = [
-  { title: TokenDetailTab.Tokens },
+  { title: TokenDetailTab.Assets },
   { title: TokenDetailTab.Activity }
 ]
diff --git a/packages/core-mobile/app/store/balance/types.ts b/packages/core-mobile/app/store/balance/types.ts
@@ -9,21 +9,21 @@ export type LocalTokenWithBalance = TokenWithBalance & {
 }
 
 export const assetPDisplayNames: Record<string, string> = {
-  lockedStaked: 'Locked Staked',
-  lockedStakeable: 'Locked Stakeable',
-  lockedPlatform: 'Locked Platform',
-  atomicMemoryLocked: 'Atomic Memory Locked',
-  atomicMemoryUnlocked: 'Atomic Memory Unlocked',
-  unlockedUnstaked: 'Unlocked Unstaked',
-  unlockedStaked: 'Unlocked Staked',
-  pendingStaked: 'Pending Staked'
+  lockedStaked: 'Locked staked',
+  lockedStakeable: 'Locked stakeable',
+  lockedPlatform: 'Locked platform',
+  atomicMemoryLocked: 'Atomic memory locked',
+  atomicMemoryUnlocked: 'Atomic memory unlocked',
+  unlockedUnstaked: 'Unlocked unstaked',
+  unlockedStaked: 'Unlocked staked',
+  pendingStaked: 'Pending staked'
 }
 
 export const assetXDisplayNames: Record<string, string> = {
   locked: 'Locked',
   unlocked: 'Unlocked',
-  atomicMemoryLocked: 'Atomic Memory Locked',
-  atomicMemoryUnlocked: 'Atomic Memory Unlocked'
+  atomicMemoryLocked: 'Atomic memory locked',
+  atomicMemoryUnlocked: 'Atomic memory unlocked'
 }
 
 // Assets

Original file line number	Diff line number	Diff line change
`@@ -437,7 +437,7 @@ export const TokenDetailScreen = (): React.JSX.Element => {`
`437`	`437`	`return isXpToken`
`438`	`438`	`? [`
`439`	`439`	`{`
`440`		`- tabName: TokenDetailTab.Tokens,`
	`440`	`+ tabName: TokenDetailTab.Assets,`
`441`	`441`	`component: <TokenDetail token={token} />`
`442`	`442`	`},`
`443`	`443`	`activityTab`
`@@ -471,11 +471,11 @@ export const TokenDetailScreen = (): React.JSX.Element => {`
`471`	`471`	`}`
`472`	`472`
`473`	`473`	`export enum TokenDetailTab {`
`474`		`- Tokens = 'Tokens',`
	`474`	`+ Assets = 'Assets',`
`475`	`475`	`Activity = 'Activity'`
`476`	`476`	`}`
`477`	`477`
`478`	`478`	`const SEGMENT_ITEMS = [`
`479`		`- { title: TokenDetailTab.Tokens },`
	`479`	`+ { title: TokenDetailTab.Assets },`
`480`	`480`	`{ title: TokenDetailTab.Activity }`
`481`	`481`	`]`