[PE-6005] Add mobile wallet UI (#11890)

Author: faridsalau

packages/common/src/hooks/index.ts

@@ -44,3 +44,5 @@ export * from './content'
 export * from './chats'
 export * from './useSupporterPrompt'
 export * from './useRemixCountdown'
+export * from './useFormattedUSDCBalance'
+export * from './useFormattedAudioBalance'

packages/common/src/hooks/useFormattedAudioBalance.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+
+import { AUDIO } from '@audius/fixed-decimal'
+
+import { useTokenPrice } from '../api'
+import { TOKEN_LISTING_MAP } from '../store'
+import { formatWei, isNullOrUndefined } from '../utils'
+
+import { useTotalBalanceWithFallback } from './useAudioBalance'
+
+// AUDIO token address from Jupiter
+const AUDIO_TOKEN_ID = TOKEN_LISTING_MAP.AUDIO.address
+
+type UseFormattedAudioBalanceReturn = {
+  audioBalance: ReturnType<typeof useTotalBalanceWithFallback>
+  audioBalanceFormatted: string
+  isAudioBalanceLoading: boolean
+  audioPrice: string | null
+  audioDollarValue: string
+  isAudioPriceLoading: boolean
+}
+
+export const useFormattedAudioBalance = (): UseFormattedAudioBalanceReturn => {
+  const audioBalance = useTotalBalanceWithFallback()
+  const audioBalanceFormatted = formatWei(audioBalance, true, 0)
+  const isAudioBalanceLoading = isNullOrUndefined(audioBalance)
+
+  const { data: audioPriceData, isPending: isAudioPriceLoading } =
+    useTokenPrice(AUDIO_TOKEN_ID)
+  const audioPrice = audioPriceData?.price || null
+
+  // Calculate dollar value of user's AUDIO balance
+  const audioDollarValue = useMemo(() => {
+    if (!audioPrice || !audioBalance) return '$0.00'
+
+    const priceNumber = parseFloat(audioPrice)
+    const balanceValue = parseFloat(AUDIO(audioBalance).toString())
+    const totalValue = priceNumber * balanceValue
+
+    return `$${totalValue.toFixed(2)} ($${parseFloat(audioPrice).toFixed(4)})`
+  }, [audioBalance, audioPrice])
+
+  return {
+    audioBalance,
+    audioBalanceFormatted,
+    isAudioBalanceLoading,
+    audioPrice,
+    audioDollarValue,
+    isAudioPriceLoading
+  }
+}

packages/common/src/hooks/useFormattedUSDCBalance.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+
+import { USDC } from '@audius/fixed-decimal'
+import BN from 'bn.js'
+
+import { BNUSDC, Status } from '../models'
+
+import { useUSDCBalance } from './useUSDCBalance'
+
+type UseFormattedUSDCBalanceReturn = {
+  balance: BNUSDC | null
+  balanceFormatted: string
+  balanceCents: number
+  usdcValue: ReturnType<typeof USDC>
+  isLoading: boolean
+  status: Status
+}
+
+export const useFormattedUSDCBalance = (): UseFormattedUSDCBalanceReturn => {
+  const { data: balance, status: balanceStatus } = useUSDCBalance()
+  const usdcValue = USDC(balance ?? new BN(0)).floor(2)
+  const balanceCents = Number(usdcValue.floor(2).toString()) * 100
+  const balanceFormatted = useMemo(() => {
+    return balanceStatus === Status.LOADING
+      ? '0.00'
+      : usdcValue.toFixed(2).replace('$', '')
+  }, [usdcValue, balanceStatus])
+
+  const isLoading = balanceStatus === Status.LOADING
+
+  return {
+    balance,
+    balanceFormatted,
+    balanceCents,
+    usdcValue,
+    isLoading,
+    status: balanceStatus
+  }
+}

packages/common/src/messages/index.ts

@@ -9,3 +9,4 @@ export * from './trackPage'
 export * from './notifications'
 export * from './buySell'
 export * from './remixes'
+export * from './walletMessages'

packages/common/src/messages/walletMessages.ts

@@ -0,0 +1,19 @@
+export const walletMessages = {
+  // CashWallet messages
+  cashBalance: 'Cash Balance',
+  withdraw: 'Withdraw',
+  addFunds: 'Add Cash',
+  cashBalanceTooltip:
+    'Your cash balance is stored as USDC in your built-in wallet',
+  usdc: 'USDC',
+  builtInWallet: 'Built-In Wallet',
+  payoutWallet: 'Payout Wallet',
+  transactionHistory: 'Transaction History',
+
+  // YourCoins messages
+  yourCoins: 'Your Coins',
+  loading: '-- $AUDIO',
+  dollarZero: '$0.00',
+  loadingPrice: '$0.00 (loading...)',
+  buySell: 'Buy/Sell'
+}

packages/mobile/src/screens/app-drawer-screen/left-nav-drawer/useNavConfig.tsx

@@ -3,6 +3,7 @@ import { useMemo, type ReactNode } from 'react'
 import {
   useAccountHasClaimableRewards,
   useChallengeCooldownSchedule,
+  useFeatureFlag,
   useSelectTierInfo,
   useTotalBalanceWithFallback,
   useUSDCBalance
@@ -31,12 +32,13 @@ import {
   IconCloudUpload,
   IconUser,
   IconGift,
+  IconWallet,
   useTheme,
   NotificationCount
 } from '@audius/harmony-native'
 import LogoUSDC from 'app/assets/images/logoUSDC.svg'
 import { IconAudioBadge } from 'app/components/audio-rewards'
-import { useFeatureFlag, useRemoteVar } from 'app/hooks/useRemoteConfig'
+import { useRemoteVar } from 'app/hooks/useRemoteConfig'
 import type { AppTabScreenParamList } from 'app/screens/app-screen'
 import { make } from 'app/services/analytics'
 import { env } from 'app/services/env'
@@ -52,6 +54,7 @@ const messages = {
   upload: 'Upload',
   settings: 'Settings',
   featureFlags: 'Feature Flags',
+  wallet: 'Wallet',
   usdcDollarSign: (balance: string) => `$${balance}`
 }
 
@@ -70,6 +73,9 @@ export const useNavConfig = () => {
   const { isEnabled: isFeatureFlagAccessEnabled } = useFeatureFlag(
     FeatureFlags.FEATURE_FLAG_ACCESS
   )
+  const { isEnabled: isWalletUIUpdateEnabled } = useFeatureFlag(
+    FeatureFlags.WALLET_UI_UPDATE
+  )
   const challengeRewardIds = useRemoteVar(StringKeys.CHALLENGE_REWARD_IDS)
   const hasClaimableRewards = useAccountHasClaimableRewards(challengeRewardIds)
   const hasUnreadMessages = useSelector(getHasUnreadMessages)
@@ -111,31 +117,45 @@ export const useNavConfig = () => {
           unreadMessagesCount > 0 ? (
             <NotificationCount count={unreadMessagesCount} />
           ) : undefined
-      },
-      {
-        icon: IconCrown,
-        label: messages.audio,
-        to: 'AudioScreen',
-        rightIcon: (
-          <BalancePill
-            balance={audioBalanceFormatted}
-            icon={<IconAudioBadge tier={tier} showNoTier size='m' />}
-            isLoading={isAudioBalanceLoading}
-          />
-        )
-      },
-      {
-        icon: IconDonate,
-        label: messages.usdc,
-        to: 'PayAndEarnScreen',
-        rightIcon: (
-          <BalancePill
-            balance={messages.usdcDollarSign(usdcBalanceFormatted)}
-            icon={<LogoUSDC height={spacing.unit5} width={spacing.unit5} />}
-            isLoading={isUSDCBalanceLoading}
-          />
-        )
-      },
+      }
+    ]
+
+    if (isWalletUIUpdateEnabled) {
+      items.push({
+        icon: IconWallet,
+        label: messages.wallet,
+        to: 'wallet'
+      })
+    } else {
+      items.push(
+        {
+          icon: IconCrown,
+          label: messages.audio,
+          to: 'AudioScreen',
+          rightIcon: (
+            <BalancePill
+              balance={audioBalanceFormatted}
+              icon={<IconAudioBadge tier={tier} showNoTier size='m' />}
+              isLoading={isAudioBalanceLoading}
+            />
+          )
+        },
+        {
+          icon: IconDonate,
+          label: messages.usdc,
+          to: 'PayAndEarnScreen',
+          rightIcon: (
+            <BalancePill
+              balance={messages.usdcDollarSign(usdcBalanceFormatted)}
+              icon={<LogoUSDC height={spacing.unit5} width={spacing.unit5} />}
+              isLoading={isUSDCBalanceLoading}
+            />
+          )
+        }
+      )
+    }
+
+    items.push(
       {
         icon: IconGift,
         label: messages.rewards,
@@ -155,7 +175,7 @@ export const useNavConfig = () => {
         label: messages.settings,
         to: 'SettingsScreen'
       }
-    ]
+    )
 
     if (env.ENVIRONMENT === 'staging' || isFeatureFlagAccessEnabled) {
       items.push({
@@ -177,7 +197,8 @@ export const useNavConfig = () => {
     usdcBalanceFormatted,
     isUSDCBalanceLoading,
     hasClaimableRewards,
-    isFeatureFlagAccessEnabled
+    isFeatureFlagAccessEnabled,
+    isWalletUIUpdateEnabled
   ])
 
   return {

packages/mobile/src/screens/app-screen/AppTabScreen.tsx

@@ -57,6 +57,7 @@ import {
   TopSupportersScreen,
   SupportingUsersScreen
 } from 'app/screens/user-list-screen'
+import { WalletScreen } from 'app/screens/wallet-screen'
 
 import { useAppScreenOptions } from './useAppScreenOptions'
 
@@ -108,6 +109,7 @@ export type AppTabScreenParamList = {
   PayAndEarnScreen: undefined
   AudioScreen: undefined
   RewardsScreen: undefined
+  wallet: undefined
   Upload: {
     initialMetadata?: Partial<TrackMetadataForUpload>
   }
@@ -226,6 +228,7 @@ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => {
       <Stack.Screen name='PayAndEarnScreen' component={PayAndEarnScreen} />
       <Stack.Screen name='AudioScreen' component={AudioScreen} />
       <Stack.Screen name='RewardsScreen' component={RewardsScreen} />
+      <Stack.Screen name='wallet' component={WalletScreen} />
 
       <Stack.Group>
         <Stack.Screen name='EditProfile' component={EditProfileScreen} />

packages/mobile/src/screens/wallet-screen/WalletScreen.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import { IconWallet } from '@audius/harmony-native'
+import { ScrollView, Screen, ScreenContent } from 'app/components/core'
+import { makeStyles } from 'app/styles'
+
+import { CashWallet } from './components/CashWallet'
+import { YourCoins } from './components/YourCoins'
+
+const messages = {
+  title: 'WALLET'
+}
+
+const useStyles = makeStyles(({ spacing }) => ({
+  root: {
+    paddingVertical: spacing(8),
+    paddingHorizontal: spacing(3)
+  },
+  container: {
+    gap: spacing(4)
+  }
+}))
+
+export const WalletScreen = () => {
+  const styles = useStyles()
+  return (
+    <Screen
+      url='/wallet'
+      variant='secondary'
+      title={messages.title}
+      style={styles.root}
+      icon={IconWallet}
+    >
+      <ScreenContent>
+        <ScrollView contentContainerStyle={styles.container}>
+          <CashWallet />
+          <YourCoins />
+        </ScrollView>
+      </ScreenContent>
+    </Screen>
+  )
+}