chore(wallet-mobile): drop legacy useTokenX (#3620)

apps/wallet-mobile/ios/Podfile.lock

@@ -831,7 +831,7 @@ SPEC CHECKSUMS:
   amplitude-react-native: 1ea3d5e1f80ccc357dd178c55c29e51c89f1cd11
   boost: 57d2868c099736d80fcd648bf211b4431e51a558
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
   EXBarCodeScanner: 8e23fae8d267dbef9f04817833a494200f1fce35
   EXCamera: 0fbfa338a3776af2722d626a3437abe33f708aad
@@ -849,7 +849,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 12ea01e587c9594e7b144e1bfc86ac4d9ac28fde
   FBReactNativeSpec: faca7d16c37626ca5780a87adef703817722fe61
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: d7cc127932c89c53374452d6f93473f1970d8e88
   libaom: 144606b1da4b5915a1054383c3a4459ccdb3c661
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7

apps/wallet-mobile/src/components/index.ts

@@ -32,7 +32,6 @@ export * from './Spacer'
 export * from './Text'
 export * from './TextInput'
 export * from './TitledCard'
-export * from './TokenIcon'
 export * from './Tooltip'
 export * from './TwoActionView'
 export * from './ValidatedTextInput'

apps/wallet-mobile/src/features/Discover/useCases/ReviewTransaction/ReviewTransaction.tsx

@@ -1,6 +1,7 @@
 import {Transaction} from '@emurgo/cross-csl-core'
 import {createTypeGuardFromSchema, isNonNullable, truncateString} from '@yoroi/common'
 import {useTheme} from '@yoroi/theme'
+import {Portfolio} from '@yoroi/types'
 import {uniq} from 'lodash'
 import * as React from 'react'
 import {useEffect} from 'react'
@@ -15,9 +16,9 @@ import {ScrollView} from '../../../../components/ScrollView/ScrollView'
 import {useParams} from '../../../../kernel/navigation'
 import {cip30LedgerExtensionMaker} from '../../../../yoroi-wallets/cardano/cip30/cip30-ledger'
 import {wrappedCsl} from '../../../../yoroi-wallets/cardano/wrappedCsl'
-import {useTokenInfos} from '../../../../yoroi-wallets/hooks'
 import {asQuantity} from '../../../../yoroi-wallets/utils'
 import {formatAdaWithText, formatTokenWithText} from '../../../../yoroi-wallets/utils/format'
+import {usePortfolioTokenInfos} from '../../../Portfolio/common/hooks/usePortfolioTokenInfos'
 import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
 import {useConfirmHWConnectionModal} from '../../common/ConfirmHWConnectionModal'
 import {usePromptRootKey} from '../../common/hooks'
@@ -204,21 +205,21 @@ const useFormattedTransaction = (cbor: string) => {
 
   const inputTokenIds = inputs.flatMap((i) => {
     const receiveUTxO = getUtxoByTxIdAndIndex(i.transaction_id, i.index)
-    return receiveUTxO?.assets.map((a) => `${a.policyId}.${a.assetId}`) ?? []
+    return receiveUTxO?.assets.map((a) => `${a.policyId}.${a.assetId}` as Portfolio.Token.Id) ?? []
   })
 
   const outputTokenIds = outputs.flatMap((o) => {
     if (!o.amount.multiasset) return []
     const policyIds = Object.keys(o.amount.multiasset)
     const tokenIds = policyIds.flatMap((policyId) => {
       const assetIds = Object.keys(o.amount.multiasset?.[policyId] ?? {})
-      return assetIds.map((assetId) => `${policyId}.${assetId}`)
+      return assetIds.map((assetId) => `${policyId}.${assetId}` as Portfolio.Token.Id)
     })
     return tokenIds
   })
 
-  const tokenIds = uniq([...inputTokenIds, ...outputTokenIds])
-  const tokenInfos = useTokenInfos({wallet, tokenIds})
+  const tokenIds = uniq<Portfolio.Token.Id>([...inputTokenIds, ...outputTokenIds])
+  const {tokenInfos} = usePortfolioTokenInfos({wallet, tokenIds}, {suspense: true})
 
   const formattedInputs = inputs.map((input) => {
     const receiveUTxO = getUtxoByTxIdAndIndex(input.transaction_id, input.index)
@@ -229,7 +230,7 @@ const useFormattedTransaction = (cbor: string) => {
     const multiAssets =
       receiveUTxO?.assets
         .map((a) => {
-          const tokenInfo = tokenInfos.find((t) => t.id === a.assetId)
+          const tokenInfo = tokenInfos?.get(a.assetId as Portfolio.Token.Id)
           if (!tokenInfo) return null
           const quantity = asQuantity(a.amount)
           return formatTokenWithText(quantity, tokenInfo)
@@ -253,7 +254,7 @@ const useFormattedTransaction = (cbor: string) => {
     const multiAssets = output.amount.multiasset
       ? Object.entries(output.amount.multiasset).map(([policyId, assets]) => {
           return Object.entries(assets).map(([assetId, amount]) => {
-            const tokenInfo = tokenInfos.find((t) => t.id === `${policyId}.${assetId}`)
+            const tokenInfo = tokenInfos?.get(`${policyId}.${assetId}`)
             if (tokenInfo == null) return null
             const quantity = asQuantity(amount)
             return formatTokenWithText(quantity, tokenInfo)

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

@@ -4,9 +4,9 @@ import {Portfolio} from '@yoroi/types'
 import * as React from 'react'
 import {Pressable, StyleSheet, Text, TextInput, View} from 'react-native'
 
-import {Boundary, Spacer, TokenIconPlaceholder} from '../../../../components'
+import {Boundary, Spacer} from '../../../../components'
 import {isEmptyString} from '../../../../kernel/utils'
-import {TokenInfoIcon} from '../../../Portfolio/common/TokenAmountItem/TokenInfoIcon'
+import {TokenIconPlaceholder, TokenInfoIcon} from '../../../Portfolio/common/TokenAmountItem/TokenInfoIcon'
 import {useStrings} from '../useStrings'
 
 type AmountCardProps = {

apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenInfoIcon.tsx

@@ -9,7 +9,7 @@ import {Icon} from '../../../../components/Icon'
 import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
 
 type TokenInfoIconProps = {
-  info: Portfolio.Token.Info
+  info: Portfolio.Token.Info | undefined | null
   size?: 'sm' | 'md'
   imageStyle?: ImageStyle
 }
@@ -18,7 +18,7 @@ export const TokenInfoIcon = ({info, size = 'md', imageStyle}: TokenInfoIconProp
   const {wallet} = useSelectedWallet()
   const [error, setError] = React.useState(false)
 
-  if (error) return <TokenIconPlaceholder size={size} />
+  if (error || !info) return <TokenIconPlaceholder size={size} />
 
   if (isPrimaryToken(info)) return <PrimaryIcon size={size} imageStyle={imageStyle} />