chore(wallet-mobile): clean ups

apps/wallet-mobile/src/TxHistory/AssetList/ListBalances.tsx

@@ -44,23 +44,27 @@ export const ListBalances = (props: Props) => {
   const handleOnPressNFTs = React.useCallback(() => startTransition(() => setFungibilityFilter('nfts')), [])
   const handleOnPressFTs = React.useCallback(() => startTransition(() => setFungibilityFilter('fts')), [])
   const handleOnPressAll = React.useCallback(() => startTransition(() => setFungibilityFilter('all')), [])
-  const chips = [
-    {label: strings.all, onPress: handleOnPressAll, value: 'all', disabled: isPending},
-    {
-      label: strings.tokens(balances.fts.length),
-      onPress: handleOnPressFTs,
-      value: 'fts',
-      disabled: isPending,
-    },
-  ]
-  if (balances.nfts.length > 0) {
-    chips.push({
-      label: strings.nfts(balances.nfts.length),
-      onPress: handleOnPressNFTs,
-      value: 'nfts',
-      disabled: isPending,
-    })
-  }
+
+  const chips = React.useMemo(() => {
+    const chiplist = [
+      {label: strings.all, onPress: handleOnPressAll, value: 'all', disabled: isPending},
+      {
+        label: strings.tokens(balances.fts.length),
+        onPress: handleOnPressFTs,
+        value: 'fts',
+        disabled: isPending,
+      },
+    ]
+    if (balances.nfts.length > 0) {
+      chiplist.push({
+        label: strings.nfts(balances.nfts.length),
+        onPress: handleOnPressNFTs,
+        value: 'nfts',
+        disabled: isPending,
+      })
+    }
+    return chiplist
+  }, [balances, handleOnPressAll, handleOnPressFTs, handleOnPressNFTs, isPending, strings])
 
   return (
     <View style={styles.assetList} testID="assetList">
@@ -71,8 +75,8 @@ export const ListBalances = (props: Props) => {
         bounces={false}
         data={balances[fungibilityFilter]}
         renderItem={({item: amount}) => (
-          <ExplorableAssetItem
-            isMainnet={wallet.isMainnet}
+          <ExplorableAmount
+            network={wallet.network}
             privacyPlaceholder={privacyPlaceholder}
             isPrivacyOff={isPrivacyOff}
             amount={amount}
@@ -91,7 +95,7 @@ export const ListBalances = (props: Props) => {
 type ExplorableAssetItemProps = TokenAmountItemProps & {
   onPress(): void
 }
-const ExplorableAssetItem = ({onPress, ...tokenAmountProps}: ExplorableAssetItemProps) => {
+const ExplorableAmount = ({onPress, ...tokenAmountProps}: ExplorableAssetItemProps) => {
   const styles = useStyles()
   return (
     <TouchableOpacity style={styles.button} onPress={onPress} testID="assetSelectorItem">

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

@@ -235,7 +235,6 @@ const LoadingWithOverlay = () => {
 
       <Button
         onPress={() => {
-          console.log('refetch', Date.now())
           refetch()
         }}
         title="Refetch"

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

@@ -1,5 +1,5 @@
 import {FlashList, FlashListProps} from '@shopify/flash-list'
-import {Balance} from '@yoroi/types'
+import {Balance, Portfolio} from '@yoroi/types'
 import React from 'react'
 import {Dimensions, StyleSheet, TouchableOpacity, TouchableOpacityProps, View} from 'react-native'
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder'
@@ -21,7 +21,7 @@ export const SkeletonGallery = ({amount}: {amount: number}) => {
 }
 
 type Props = {
-  nfts: Balance.TokenInfo[]
+  amounts: Portfolio.Token.Amount[]
   onSelect: (id: string) => void
   onRefresh: () => void
   isRefreshing: boolean
@@ -31,7 +31,7 @@ type Props = {
   readOnly?: boolean
 }
 export const NftImageGallery = ({
-  nfts = [],
+  amounts = [],
   onSelect,
   onRefresh,
   isRefreshing,
@@ -42,19 +42,24 @@ export const NftImageGallery = ({
 }: Props) => {
   return (
     <GalleryList
-      data={nfts}
+      data={amounts}
       onRefresh={onRefresh}
       refreshing={isRefreshing}
       bounces={bounces}
       ListEmptyComponent={ListEmptyComponent}
       withVerticalPadding={withVerticalPadding}
-      renderItem={(nft) =>
-        !('id' in nft) ? (
+      renderItem={(amount) =>
+        !('id' in amount.info) ? (
           <EmptyImage />
         ) : features.moderatingNftsEnabled ? (
-          <ModeratedImage onPress={() => onSelect(nft.id)} nft={nft} key={nft.id} disabled={readOnly} />
+          <ModeratedImage onPress={() => onSelect(amount.info.id)} nft={nft} key={amount.info.id} disabled={readOnly} />
         ) : (
-          <UnModeratedImage onPress={() => onSelect(nft.id)} nft={nft} key={nft.id} disabled={readOnly} />
+          <UnModeratedImage
+            onPress={() => onSelect(amount.info.id)}
+            nft={nft}
+            key={amount.info.id}
+            disabled={readOnly}
+          />
         )
       }
     />

apps/wallet-mobile/src/features/Links/common/useLinksRequestAction.tsx

@@ -1,3 +1,4 @@
+import {toBigInt} from '@yoroi/common'
 import {linksCardanoModuleMaker, useLinks} from '@yoroi/links'
 import {useTransfer} from '@yoroi/transfer'
 import {Links} from '@yoroi/types'
@@ -6,7 +7,6 @@ import {InteractionManager} from 'react-native'
 
 import {useModal} from '../../../components/Modal/ModalContext'
 import {Logger} from '../../../yoroi-wallets/logging'
-import {asQuantity, Quantities} from '../../../yoroi-wallets/utils/utils'
 import {useSelectedWalletContext} from '../../WalletManager/Context'
 import {RequestedAdaPaymentWithLinkScreen} from '../useCases/RequestedAdaPaymentWithLinkScreen/RequestedAdaPaymentWithLinkScreen'
 import {useNavigateTo} from './useNavigationTo'
@@ -28,19 +28,24 @@ export const useLinksRequestAction = () => {
         reset()
         try {
           const link = decodeURIComponent(action.info.params.link)
-          const parsedCardanoLink = linksCardanoModuleMaker().parse(link)
-          if (parsedCardanoLink) {
-            const redirectTo = action.info.params.redirectTo
-            if (redirectTo != null) linkActionChanged(action)
+          if (wallet) {
+            const parsedCardanoLink = linksCardanoModuleMaker().parse(link)
+            if (parsedCardanoLink) {
+              const redirectTo = action.info.params.redirectTo
+              if (redirectTo != null) linkActionChanged(action)
 
-            const {address: receiver, amount, memo} = parsedCardanoLink.params
-            const ptAmount = Quantities.integer(asQuantity(amount ?? 0), decimals)
-            memoChanged(memo ?? '')
-            receiverResolveChanged(receiver ?? '')
-            amountChanged(ptAmount)
-            closeModal()
-            actionFinished()
-            navigateTo.startTransfer()
+              const {address: receiver, amount, memo} = parsedCardanoLink.params
+              const ptAmount = toBigInt(amount, decimals)
+              memoChanged(memo ?? '')
+              receiverResolveChanged(receiver ?? '')
+              amountChanged({
+                quantity: ptAmount,
+                info: wallet.portfolioPrimaryTokenInfo,
+              })
+              closeModal()
+              actionFinished()
+              navigateTo.startTransfer()
+            }
           }
         } catch (error) {
           // TODO: revisit it should display an alert
@@ -59,6 +64,7 @@ export const useLinksRequestAction = () => {
       navigateTo,
       receiverResolveChanged,
       reset,
+      wallet,
     ],
   )
 

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

@@ -1,6 +1,6 @@
 import {amountFormatter, infoExtractName, isNft} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
-import {Portfolio} from '@yoroi/types'
+import {Chain, Portfolio} from '@yoroi/types'
 import {Swap} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, View, ViewProps} from 'react-native'
@@ -14,7 +14,7 @@ import {TokenInfoIcon} from './TokenInfoIcon'
 export type TokenAmountItemProps = {
   amount: Portfolio.Token.Amount
   privacyPlaceholder: string
-  isMainnet: boolean
+  network: Chain.Network
   isPrivacyOff: boolean
 
   style?: ViewProps['style']
@@ -25,7 +25,7 @@ export type TokenAmountItemProps = {
 }
 
 export const TokenAmountItem = ({
-  isMainnet,
+  network,
   isPrivacyOff,
   privacyPlaceholder,
   style,
@@ -51,7 +51,7 @@ export const TokenAmountItem = ({
   return (
     <View style={[style, styles.container]} testID="assetItem">
       <Left>
-        <TokenInfoIcon info={amount.info} size={variant === 'swap' ? 'sm' : 'md'} isMainnet={isMainnet} />
+        <TokenInfoIcon info={amount.info} size={variant === 'swap' ? 'sm' : 'md'} network={network} />
       </Left>
 
       <Middle>

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

@@ -1,11 +1,11 @@
-import {isString} from '@yoroi/common'
 import {useTheme} from '@yoroi/theme'
 import {Chain, Portfolio} from '@yoroi/types'
 import {Image} from 'expo-image'
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 
 import {Icon} from '../../../../components/Icon'
+import {isEmptyString} from '../../../../utils'
 
 const headers = {
   Accept: 'image/webp',
@@ -16,15 +16,15 @@ const blurhash =
 
 type TokenInfoIconProps = {
   info: Portfolio.Token.Info
-  isMainnet?: boolean
+  network: Chain.Network
   size: 'sm' | 'md'
 }
-export const TokenInfoIcon = React.memo(({info, isMainnet, size = 'md'}: TokenInfoIconProps) => {
+export const TokenInfoIcon = React.memo(({info, network, size = 'md'}: TokenInfoIconProps) => {
   const {styles} = useStyles()
 
   if (info.nature === Portfolio.Token.Nature.Primary) return <PrimaryIcon size={size} />
 
-  if (isString(info.icon) && info.icon.length > 0) {
+  if (!isEmptyString(info.icon)) {
     return (
       <Image
         source={{uri: `data:image/png;base64,${info.icon}`}}
@@ -35,7 +35,6 @@ export const TokenInfoIcon = React.memo(({info, isMainnet, size = 'md'}: TokenIn
   }
 
   const [policy, name] = info.id.split('.')
-  const network = isMainnet ? Chain.Network.Mainnet : Chain.Network.Preprod
   const uri = `https://${network}.processed-media.yoroiwallet.com/${policy}/${name}?width=64&height=64&kind=metadata&fit=cover`
 
   return (
@@ -62,11 +61,10 @@ export const TokenIconPlaceholder = ({size = 'md'}: {size?: 'sm' | 'md'}) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color} = theme
+  const {color} = useTheme()
   const styles = StyleSheet.create({
     primary: {
-      backgroundColor: color.primary[600],
+      backgroundColor: color.primary_c600,
     },
     iconMedium: {
       backgroundColor: 'transparent',
@@ -87,7 +85,7 @@ const useStyles = () => {
       overflow: 'hidden',
     },
     placeholder: {
-      backgroundColor: color.gray[100],
+      backgroundColor: color.gray_c100,
     },
     placeholderSmall: {
       width: 24,
@@ -96,7 +94,7 @@ const useStyles = () => {
   })
 
   const colors = {
-    icon: color.gray[600],
+    icon: color.gray_c600,
   }
 
   return {styles, colors}

apps/wallet-mobile/src/features/Scan/common/useTriggerScanAction.tsx

@@ -1,3 +1,4 @@
+import {toBigInt} from '@yoroi/common'
 import {useTransfer} from '@yoroi/transfer'
 import * as React from 'react'
 import {Alert} from 'react-native'
@@ -9,13 +10,12 @@ import {useClaim} from '../../../features/Claim/module/ClaimProvider'
 import {useClaimTokens} from '../../../features/Claim/module/useClaimTokens'
 import {AskConfirmation} from '../../../features/Claim/useCases/AskConfirmation'
 import {pastedFormatter} from '../../../yoroi-wallets/utils/amountUtils'
-import {asQuantity, Quantities} from '../../../yoroi-wallets/utils/utils'
 import {useSelectedWallet} from '../../WalletManager/Context'
 import {ScanAction, ScanFeature} from './types'
 import {useNavigateTo} from './useNavigateTo'
 
 export const useTriggerScanAction = ({insideFeature}: {insideFeature: ScanFeature}) => {
-  const {primaryTokenInfo} = useSelectedWallet()
+  const {portfolioPrimaryTokenInfo} = useSelectedWallet()
   const {openModal, closeModal, startLoading, stopLoading} = useModal()
   const navigateTo = useNavigateTo()
 
@@ -52,13 +52,14 @@ export const useTriggerScanAction = ({insideFeature}: {insideFeature: ScanFeatur
 
         if (scanAction.params) {
           if ('amount' in scanAction.params) {
-            tokenSelectedChanged(primaryTokenInfo.id)
-            amountChanged(
-              Quantities.integer(
-                asQuantity(pastedFormatter(scanAction.params?.amount?.toString() ?? '')),
-                primaryTokenInfo.decimals ?? 0,
+            tokenSelectedChanged(portfolioPrimaryTokenInfo.id)
+            amountChanged({
+              info: portfolioPrimaryTokenInfo,
+              quantity: toBigInt(
+                pastedFormatter(scanAction.params?.amount?.toString() ?? ''),
+                portfolioPrimaryTokenInfo.decimals,
               ),
-            )
+            })
           }
           if ('memo' in scanAction.params) memoChanged(scanAction.params?.memo ?? '')
         }