refactor(wallet-mobile): portfolio token

apps/wallet-mobile/package.json

@@ -130,7 +130,7 @@
     "@yoroi/explorers": "^1.0.2",
     "@yoroi/identicon": "^1.0.1",
     "@yoroi/links": "^1.5.7",
-    "@yoroi/portfolio": "^1.0.2",
+    "@yoroi/portfolio": "1.0.3",
     "@yoroi/resolver": "^2.0.6",
     "@yoroi/setup-wallet": "^1.0.1",
     "@yoroi/staking": "^1.5.2",

apps/wallet-mobile/src/components/AmountItem/AmountItem.stories.tsx

@@ -9,7 +9,7 @@ import {Amounts} from '../../yoroi-wallets/utils'
 import {Spacer} from '..'
 import {AmountItem} from './AmountItem'
 
-const primaryAmount = Amounts.getAmount(mocks.balances, mocks.wallet.primaryTokenInfo.id)
+const primaryAmount = Amounts.getAmount(mocks.balances, mocks.wallet.portfolioPrimaryTokenInfo.id)
 const secondaryAmount = Amounts.getAmount(
   mocks.balances,
   '698a6ea0ca99f315034072af31eaac6ec11fe8558d3f48e9775aab9d.7444524950',

apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx

@@ -1,6 +1,6 @@
+import {isPrimaryToken} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
-import {Balance} from '@yoroi/types'
-import {Swap} from '@yoroi/types'
+import {Balance, Swap} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, View, ViewProps} from 'react-native'
 
@@ -17,7 +17,6 @@ export type AmountItemProps = {
   amount: Balance.Amount
   style?: ViewProps['style']
   isPrivacyActive?: boolean
-  status?: string
   inWallet?: boolean
   variant?: 'swap'
   priceImpactRisk?: SwapPriceImpactRisk
@@ -38,7 +37,7 @@ export const AmountItem = ({
   const {quantity, tokenId} = amount
   const tokenInfo = useTokenInfo({wallet, tokenId})
 
-  const isPrimary = tokenInfo.id === wallet.primaryTokenInfo.id
+  const isPrimary = isPrimaryToken(tokenInfo.id)
   const name = tokenInfo.ticker ?? tokenInfo.name
   const nameLabel = isEmptyString(name) ? '-' : name
   const detail = isPrimary ? tokenInfo.description : tokenInfo.fingerprint

apps/wallet-mobile/src/components/TokenIcon/TokenIcon.stories.tsx

@@ -7,7 +7,7 @@ import {TokenIcon} from './TokenIcon'
 storiesOf('TokenIcon', module)
   .add('PrimaryToken', () => {
     const wallet = mocks.wallet
-    return <TokenIcon wallet={wallet} tokenId={mocks.wallet.primaryTokenInfo.id} />
+    return <TokenIcon wallet={wallet} tokenId={mocks.wallet.portfolioPrimaryTokenInfo.id} />
   })
   .add('Nft', () => {
     const wallet = {

apps/wallet-mobile/src/components/TokenIcon/TokenIcon.tsx

@@ -12,7 +12,7 @@ import {ModeratedNftIcon} from './ModeratedNftIcon'
 export const TokenIcon = ({wallet, tokenId, variant}: {wallet: YoroiWallet; tokenId: string; variant?: 'swap'}) => {
   const {styles} = useStyles()
   const tokenInfo = useTokenInfo({wallet, tokenId})
-  const isPrimary = tokenInfo.id === wallet.primaryTokenInfo.id
+  const isPrimary = tokenInfo.id === wallet.portfolioPrimaryTokenInfo.id
 
   if (isPrimary) return <PrimaryIcon variant={variant} />
   if (tokenInfo.kind === 'ft') {

apps/wallet-mobile/src/features/Claim/useCases/ShowSuccessScreen.tsx

@@ -135,7 +135,7 @@ export const AmountList = ({amounts}: {amounts: Balance.Amounts}) => {
 
   return (
     <FlatList
-      data={sortTokenInfos({wallet, tokenInfos})}
+      data={sortTokenInfos({tokenInfos})}
       renderItem={({item: tokenInfo}) => (
         <AmountItem wallet={wallet} amount={Amounts.getAmount(amounts, tokenInfo.id)} />
       )}

apps/wallet-mobile/src/features/Exchange/common/ShowBuyBanner/ShowBuyBanner.tsx

@@ -18,7 +18,7 @@ export const ShowBuyBanner = () => {
     selected: {network},
   } = useWalletManager()
   const balances = useBalances(wallet)
-  const primaryAmount = Amounts.getAmount(balances, wallet.primaryTokenInfo.id)
+  const primaryAmount = Amounts.getAmount(balances, wallet.portfolioPrimaryTokenInfo.id)
   const hasZeroPt = Quantities.isZero(primaryAmount.quantity)
 
   const showSmallBanner = useShowBuyBannerSmall()

apps/wallet-mobile/src/features/Exchange/common/useShowBuyBannerSmall.tsx

@@ -10,7 +10,7 @@ export const useShowBuyBannerSmall = (options?: UseQueryOptions<boolean, Error,
   const {wallet} = useSelectedWallet()
 
   const balances = useBalances(wallet)
-  const primaryAmount = Amounts.getAmount(balances, wallet.primaryTokenInfo.id)
+  const primaryAmount = Amounts.getAmount(balances, wallet.portfolioPrimaryTokenInfo.id)
   const isInThresholdToBuy = Quantities.isGreaterThan(minAdaThreshold, primaryAmount.quantity)
 
   const storage = useAsyncStorage()

apps/wallet-mobile/src/features/Receive/useCases/RequestSpecificAmountScreen.tsx

@@ -41,7 +41,7 @@ export const RequestSpecificAmountScreen = () => {
   const handleOnChangeAmount = (amount: string) => {
     const edited = editedFormatter(amount)
     const numberOfDecimals = (edited.split('.')[1] ?? []).length
-    if (Number(edited) <= Number.MAX_SAFE_INTEGER && numberOfDecimals <= (wallet.primaryTokenInfo.decimals ?? 0)) {
+    if (Number(edited) <= Number.MAX_SAFE_INTEGER && numberOfDecimals <= wallet.portfolioPrimaryTokenInfo.decimals) {
       setAmount(edited)
     }
   }

apps/wallet-mobile/src/features/Send/useCases/ConfirmTx/Summary/SecondaryTotals.tsx

@@ -15,7 +15,7 @@ import {useSelectedWallet} from '../../../../WalletManager/common/hooks/useSelec
 export const SecondaryTotals = ({yoroiUnsignedTx}: {yoroiUnsignedTx: YoroiUnsignedTx}) => {
   const {wallet} = useSelectedWallet()
   const secondaryAmounts = Amounts.remove(Amounts.getAmountsFromEntries(yoroiUnsignedTx.entries), [
-    wallet.primaryTokenInfo.id,
+    wallet.portfolioPrimaryTokenInfo.id,
   ])
   const sortedAmounts = Amounts.toArray(secondaryAmounts).sort((a, b) =>
     Quantities.isGreaterThan(a.quantity, b.quantity) ? -1 : 1,

apps/wallet-mobile/src/features/Settings/ManageCollateral/ConfirmTx/Summary/SecondaryTotals.tsx

@@ -15,7 +15,7 @@ import {useSelectedWallet} from '../../../../WalletManager/common/hooks/useSelec
 export const SecondaryTotals = ({yoroiUnsignedTx}: {yoroiUnsignedTx: YoroiUnsignedTx}) => {
   const {wallet} = useSelectedWallet()
   const secondaryAmounts = Amounts.remove(Amounts.getAmountsFromEntries(yoroiUnsignedTx.entries), [
-    wallet.primaryTokenInfo.id,
+    wallet.portfolioPrimaryTokenInfo.id,
   ])
   const sortedAmounts = Amounts.toArray(secondaryAmounts).sort((a, b) =>
     Quantities.isGreaterThan(a.quantity, b.quantity) ? -1 : 1,

apps/wallet-mobile/src/features/Settings/ManageCollateral/ManageCollateralScreen.stories.tsx

@@ -21,7 +21,7 @@ const goneCollateral: YoroiWallet = {
     return {
       amount: {
         quantity: '0',
-        tokenId: mocks.wallet.primaryTokenInfo.id,
+        tokenId: mocks.wallet.portfolioPrimaryTokenInfo.id,
       },
       collateralId: mocks.wallet.collateralId,
       utxo: undefined,
@@ -37,7 +37,7 @@ const noCollateral: YoroiWallet = {
     return {
       amount: {
         quantity: '0',
-        tokenId: mocks.wallet.primaryTokenInfo.id,
+        tokenId: mocks.wallet.portfolioPrimaryTokenInfo.id,
       },
       collateralId: '',
       utxo: undefined,
@@ -54,7 +54,7 @@ const noFundsWallet: YoroiWallet = {
     return {
       amount: {
         quantity: '0',
-        tokenId: mocks.wallet.primaryTokenInfo.id,
+        tokenId: mocks.wallet.portfolioPrimaryTokenInfo.id,
       },
       collateralId: '',
       utxo: undefined,

apps/wallet-mobile/src/features/Settings/ManageCollateral/helpers.ts

@@ -14,7 +14,7 @@ export const createCollateralEntry = (wallet: YoroiWallet): YoroiEntry => {
   return {
     address: getCollateralAddress(wallet),
     amounts: {
-      [wallet.primaryTokenInfo.id]: getCollateralAmountInLovelace(),
+      [wallet.portfolioPrimaryTokenInfo.id]: getCollateralAmountInLovelace(),
     },
   }
 }

apps/wallet-mobile/src/features/Settings/SettingsItems.tsx

@@ -1,12 +1,13 @@
+import {amountFormatter} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
-import _ from 'lodash'
 import React, {ReactElement} from 'react'
 import {StyleSheet, TouchableOpacity, TouchableOpacityProps, View} from 'react-native'
 
 import {Hr, Icon, Spacer, Text} from '../../components'
+import {isEmptyString} from '../../kernel/utils'
 import {useCollateralInfo} from '../../yoroi-wallets/cardano/utxoManager/useCollateralInfo'
-import {formatTokenWithSymbol} from '../../yoroi-wallets/utils/format'
 import {useSelectedWallet} from '../WalletManager/common/hooks/useSelectedWallet'
+import {usePrivacyMode} from './PrivacyMode/PrivacyMode'
 
 const Touchable = (props: TouchableOpacityProps) => <TouchableOpacity {...props} activeOpacity={0.5} />
 
@@ -58,7 +59,7 @@ export const SettingsItem = ({label, children, disabled, icon, info}: SettingsIt
           <View>{children}</View>
         </View>
 
-        {!_.isNil(info) && (
+        {!isEmptyString(info) && (
           <>
             <Spacer height={12} />
 
@@ -85,7 +86,7 @@ export const NavigatedSettingsItem = ({label, onNavigate, icon, disabled, select
     <Touchable onPress={onNavigate} disabled={disabled}>
       <SettingsItem icon={icon} label={label} disabled={disabled}>
         <View style={{flexDirection: 'row', alignItems: 'center'}}>
-          {!_.isNil(selected) && <Text style={styles.navigationItem}>{selected}</Text>}
+          {!isEmptyString(selected) && <Text style={styles.navigationItem}>{selected}</Text>}
 
           <Spacer width={16} />
 
@@ -111,16 +112,26 @@ export const SettingsCollateralItem = ({label, onNavigate, icon, disabled}: Navi
   const {styles, colors} = useStyles()
   const {wallet} = useSelectedWallet()
   const {amount} = useCollateralInfo(wallet)
+  const {isPrivacyActive, privacyPlaceholder} = usePrivacyMode()
 
-  const formattedAmount = formatTokenWithSymbol(amount.quantity, wallet.primaryTokenInfo)
+  const formattedCollateral = React.useMemo(() => {
+    const amountCollateral = {
+      info: wallet.portfolioPrimaryTokenInfo,
+      quantity: BigInt(amount.quantity),
+    }
+
+    return !isPrivacyActive
+      ? amountFormatter({template: '{{value}} {{ticker}}'})(amountCollateral)
+      : amountFormatter({template: `${privacyPlaceholder} {{ticker}}`})(amountCollateral)
+  }, [amount.quantity, isPrivacyActive, privacyPlaceholder, wallet.portfolioPrimaryTokenInfo])
 
   return (
     <Touchable onPress={onNavigate} disabled={disabled}>
       <SettingsItem label={label} icon={icon}>
         <View style={styles.row}>
-          <Text secondary>{formattedAmount}</Text>
+          <Text secondary>{formattedCollateral}</Text>
 
-          <Icon.Chevron direction="right" size={28} color={colors.iconColor} />
+          <Icon.Chevron direction="right" size={28} color={colors.icon} />
         </View>
       </SettingsItem>
     </Touchable>
@@ -169,7 +180,7 @@ const useStyles = () => {
   })
 
   const colors = {
-    iconColor: color.gray_600,
+    icon: color.el_gray_medium,
   }
   return {styles, colors, color}
 }

apps/wallet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx

@@ -67,8 +67,7 @@ export const SelectPoolFromList = ({pools = []}: Props) => {
     navigate.startSwap()
   }
 
-  const decimals = wallet.primaryTokenInfo.decimals ?? 0
-  const ticker = wallet.primaryTokenInfo.ticker
+  const {decimals, ticker} = wallet.portfolioPrimaryTokenInfo
 
   const protocolCapitalize = (protocol: string): string => protocol[0].toUpperCase() + protocol.substring(1)
 

apps/wallet-mobile/src/features/Swap/common/SwapFormProvider.tsx

@@ -58,7 +58,7 @@ export const SwapFormProvider = ({
   const hasBuyTokenSupply = poolSupply >= buyQuantity
   const hasSellBalance = sellBalance >= sellQuantity
 
-  const isSellPt = orderData.amounts.sell?.info.id === wallet.primaryTokenInfo.id
+  const isSellPt = orderData.amounts.sell?.info.id === wallet.portfolioPrimaryTokenInfo.id
   const ptTotalRequired = orderData.selectedPoolCalculation?.cost.ptTotalRequired.quantity ?? 0n
   const hasPtBalance = primaryTokenBalance >= (!isSellPt ? 0n : sellQuantity + ptTotalRequired)
 

apps/wallet-mobile/src/features/Swap/common/helpers.ts

@@ -1,12 +1,12 @@
 import {createTypeGuardFromSchema, parseSafe} from '@yoroi/common'
+import {isPrimaryToken, primaryTokenId as ptId} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {Balance, HW} from '@yoroi/types'
 import {SwapApi} from '@yoroi/types/src/swap/api'
 import {useMutation, UseMutationOptions} from 'react-query'
 import {z} from 'zod'
 
 import {convertBech32ToHex} from '../../../yoroi-wallets/cardano/common/signatureUtils'
-import {YoroiWallet} from '../../../yoroi-wallets/cardano/types'
 import {generateCIP30UtxoCbor} from '../../../yoroi-wallets/cardano/utils'
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 import {PRICE_IMPACT_HIGH_RISK, PRICE_IMPACT_MODERATE_RISK} from './constants'
@@ -80,15 +80,15 @@ export const parseOrderTxMetadata = (metadataJson: string, primaryTokenId: strin
 }
 
 const normalisePrimaryTokenId = (tokenId: string, primaryTokenId: string) => {
-  return tokenId === '.' || tokenId === '' ? primaryTokenId : tokenId
+  return tokenId === ptId || tokenId === '' ? primaryTokenId : tokenId
 }
 
 function containsOnlyValidChars(str?: string): boolean {
   const validCharsRegex = /^[a-zA-Z0 ]*$/
   return typeof str === 'string' && validCharsRegex.test(str)
 }
 
-export const sortTokensByName = (a: Balance.TokenInfo, b: Balance.TokenInfo, wallet: YoroiWallet) => {
+export const sortTokensByName = (a: Balance.TokenInfo, b: Balance.TokenInfo) => {
   const isValidNameA = containsOnlyValidChars(a.name)
   const isValidNameB = containsOnlyValidChars(b.name)
   const isValidTickerA = containsOnlyValidChars(a.ticker)
@@ -100,10 +100,10 @@ export const sortTokensByName = (a: Balance.TokenInfo, b: Balance.TokenInfo, wal
   const nameB =
     b.ticker?.toLocaleLowerCase() && isValidTickerB ? b.ticker?.toLocaleLowerCase() : b.name.toLocaleLowerCase()
 
-  const isBPrimary = b.ticker === wallet.primaryTokenInfo.ticker
+  const isBPrimary = isPrimaryToken(b.id)
   if (isBPrimary) return 1
 
-  const isAPrimary = a.ticker === wallet.primaryTokenInfo.ticker
+  const isAPrimary = isPrimaryToken(a.id)
   if (isAPrimary) return -1
 
   if (!isValidNameA && isValidNameB) {
@@ -129,7 +129,9 @@ export const usePriceImpactRiskTheme = (risk: SwapPriceImpactRisk) => {
       text: color.sys_magenta_500,
       background: color.sys_magenta_100,
     }
-  } else if (risk === 'moderate') {
+  }
+
+  if (risk === 'moderate') {
     return {
       text: color.sys_orange_500,
       background: color.sys_orange_100,

apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx

@@ -60,8 +60,8 @@ export const TransactionSummary = () => {
   )} ${tokenToSellName}`
   const formattedFeeText = `${Quantities.format(
     asQuantity((cost.batcherFee.quantity + cost.frontendFeeInfo.fee.quantity).toString()),
-    wallet.primaryTokenInfo.decimals ?? 0,
-  )} ${wallet.primaryTokenInfo.ticker}`
+    wallet.portfolioPrimaryTokenInfo.decimals,
+  )} ${wallet.portfolioPrimaryTokenInfo.ticker}`
   const poolProviderFormatted = capitalize(pool.provider)
   const poolUrl = getPoolUrlByProvider(pool.provider)
 
@@ -74,7 +74,7 @@ export const TransactionSummary = () => {
   const minAdaInfoValue = `${Quantities.format(
     asQuantity(cost.deposit.quantity.toString()),
     wallet.portfolioPrimaryTokenInfo.decimals,
-  )} ${wallet.primaryTokenInfo.ticker}`
+  )} ${wallet.portfolioPrimaryTokenInfo.ticker}`
   const minReceivedInfoValue = `${Quantities.format(
     asQuantity(calculation.buyAmountWithSlippage.quantity.toString()),
     buyTokenInfo.decimals,

apps/wallet-mobile/src/features/Swap/useCases/StartOrderSwapScreen/CreateOrder/EditPool/ShowPoolActions.tsx

@@ -38,15 +38,16 @@ export const ShowPoolActions = () => {
   if (!isBuyTouched || !isSellTouched || calculation === undefined) return null
 
   const {cost, pool} = calculation
+  const {decimals, ticker} = wallet.portfolioPrimaryTokenInfo
 
   const totalFees = Quantities.format(
     asQuantity((cost.batcherFee.quantity + cost.frontendFeeInfo.fee.quantity).toString()),
-    wallet.primaryTokenInfo.decimals ?? 0,
+    decimals,
   )
   const titleTotalFeesFormatted = `${strings.total}: ${Quantities.format(
     asQuantity(amounts.sell?.quantity.toString() ?? '0'),
     sellTokenInfo?.decimals ?? 0,
-  )} ${sellTokenName} + ${totalFees} ${wallet.primaryTokenInfo.ticker}`
+  )} ${sellTokenName} + ${totalFees} ${ticker}`
   const handleOnExpand = () => setIsExpanded((state) => !state)
   const totalFeesTitle = (
     <HeaderWrapper expanded={isExpanded} onPress={handleOnExpand}>
@@ -121,8 +122,9 @@ const ShowLimitOrderFeeBreakdown = ({totalFees}: {totalFees: string}) => {
     wallet.portfolioPrimaryTokenInfo.decimals,
   )
 
-  const depositFormatted = `${deposit} ${wallet.primaryTokenInfo.ticker}`
-  const totalFeesFormatted = `${totalFees} ${wallet.primaryTokenInfo.ticker}`
+  const ticker = wallet.portfolioPrimaryTokenInfo.ticker
+  const depositFormatted = `${deposit} ${ticker}`
+  const totalFeesFormatted = `${totalFees} ${ticker}`
   const minReceivedFormatted = `${minReceived} ${buyTokenName}`
 
   const feeStructure = [
@@ -210,8 +212,9 @@ const ShowMarketOrderFeeBreakdown = ({totalFees}: {totalFees: string}) => {
   )
   const liqFeePerc = pool.fee
 
-  const depositFormatted = `${deposit} ${wallet.primaryTokenInfo.ticker}`
-  const totalFeesFormatted = `${totalFees} ${wallet.primaryTokenInfo.ticker}`
+  const ticker = wallet.portfolioPrimaryTokenInfo.ticker
+  const depositFormatted = `${deposit} ${ticker}`
+  const totalFeesFormatted = `${totalFees} ${ticker}`
   const minReceivedFormatted = `${minReceived} ${buyTokenName}`
   const liqFeeQuantityFormatted = `${liqFeeQuantity} ${sellTokenName}`
   const liqFeePercFormatted = strings.swapLiquidityFeeInfo(liqFeePerc, bold)

apps/wallet-mobile/src/features/Swap/useCases/StartOrderSwapScreen/CreateOrder/StartSwapOrderScreen.tsx

@@ -188,7 +188,7 @@ export const StartSwapOrderScreen = () => {
       swap_fees: Number(
         Quantities.denominated(
           asQuantity(orderData.selectedPoolCalculation.pool.batcherFee.quantity.toString()),
-          Number(wallet.primaryTokenInfo.decimals),
+          Number(wallet.portfolioPrimaryTokenInfo.decimals),
         ),
       ),
     })

apps/wallet-mobile/src/features/Swap/useCases/StartOrderSwapScreen/ListOrders/CompletedOrders.tsx

@@ -111,7 +111,7 @@ export const CompletedOrders = () => {
   }, [])
 
   const transactionsInfos = useTransactionInfos({wallet})
-  const completeOrders = findCompletedOrderTx(Object.values(transactionsInfos), wallet.primaryTokenInfo.id)
+  const completeOrders = findCompletedOrderTx(Object.values(transactionsInfos), wallet.portfolioPrimaryTokenInfo.id)
   const tokenIds = React.useMemo(
     () => _.uniq(completeOrders?.flatMap((o) => [o.metadata.sellTokenId, o.metadata.buyTokenId])),
     [completeOrders],

apps/wallet-mobile/src/features/Swap/useCases/StartOrderSwapScreen/ListOrders/OpenOrders.tsx

@@ -163,7 +163,7 @@ export const OpenOrders = () => {
 
   const hasCollateral = () => {
     const info = wallet.getCollateralInfo()
-    const primaryTokenDecimals = wallet.primaryTokenInfo.decimals ?? 0
+    const primaryTokenDecimals = wallet.portfolioPrimaryTokenInfo.decimals
     return (
       !!info.utxo &&
       Quantities.integer(info.amount.quantity, primaryTokenDecimals) >=