refactor(wallet-mobile): refactored privacy

Emurgo · May 4, 2024 · a0905e0 · a0905e0
1 parent 9207b56
commit a0905e0
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 108 deletions.
diff --git a/apps/wallet-mobile/src/TxHistory/AssetList/ListBalances.tsx b/apps/wallet-mobile/src/TxHistory/AssetList/ListBalances.tsx
@@ -10,7 +10,6 @@ import {Spacer} from '../../components/Spacer'
 import {useExplorers} from '../../features/Explorer/common/useExplorers'
 import {usePortfolioBalances} from '../../features/Portfolio/common/hooks/usePortfolioBalances'
 import {TokenAmountItem, TokenAmountItemProps} from '../../features/Portfolio/common/TokenAmountItem/TokenAmountItem'
-import {usePrivacyMode} from '../../features/Settings/PrivacyMode/PrivacyMode'
 import {useSelectedWallet} from '../../features/WalletManager/Context'
 import globalMessages from '../../i18n/global-messages'
 import {useMetrics} from '../../metrics/metricsManager'
@@ -27,7 +26,6 @@ export const ListBalances = (props: Props) => {
   const styles = useStyles()
   const wallet = useSelectedWallet()
   const balances = usePortfolioBalances({wallet})
-  const {isPrivacyOff, privacyPlaceholder} = usePrivacyMode()
 
   const [fungibilityFilter, setFungibilityFilter] = React.useState<Exclude<keyof typeof balances, 'records'>>('all')
   const [isPending, startTransition] = React.useTransition()
@@ -76,9 +74,6 @@ export const ListBalances = (props: Props) => {
         data={balances[fungibilityFilter]}
         renderItem={({item: amount}) => (
           <ExplorableAmount
-            network={wallet.network}
-            privacyPlaceholder={privacyPlaceholder}
-            isPrivacyOff={isPrivacyOff}
             amount={amount}
             onPress={() => Linking.openURL(explorers.cardanoscan.token(amount.info.id))}
           />

diff --git a/apps/wallet-mobile/src/TxHistory/BalanceBanner.tsx b/apps/wallet-mobile/src/TxHistory/BalanceBanner.tsx
@@ -33,12 +33,7 @@ export const BalanceBanner = React.forwardRef<ResetErrorRef>((_, ref) => {
         </CenteredRow>
 
         <CenteredRow>
-          <PairedBalance
-            isPrivacyOff={isPrivacyOff}
-            amount={primaryBalance}
-            privacyPlaceholder={privacyPlaceholder}
-            ref={ref}
-          />
+          <PairedBalance amount={primaryBalance} ref={ref} />
         </CenteredRow>
       </TouchableOpacity>
     </View>

diff --git a/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.stories.tsx b/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.stories.tsx
@@ -20,7 +20,7 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance amount={tokenBalanceMocks.primaryETH} privacyPlaceholder="*.****" />
+              <PairedBalance amount={tokenBalanceMocks.primaryETH} />
             </View>
           </View>
         </SelectedWalletProvider>
@@ -38,7 +38,7 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance amount={tokenBalanceMocks.primaryETH} privacyPlaceholder="-.--" />
+              <PairedBalance amount={tokenBalanceMocks.primaryETH} />
             </View>
           </View>
         </SelectedWalletProvider>
@@ -56,11 +56,7 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance
-                amount={tokenBalanceMocks.primaryETH}
-                privacyPlaceholder="you should see this"
-                isPrivacyOff
-              />
+              <PairedBalance amount={tokenBalanceMocks.primaryETH} ignorePrivacy />
             </View>
           </View>
         </SelectedWalletProvider>
@@ -78,7 +74,7 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance amount={tokenBalanceMocks.primaryETH} privacyPlaceholder="hide it" />
+              <PairedBalance amount={tokenBalanceMocks.primaryETH} />
             </View>
           </View>
         </SelectedWalletProvider>

diff --git a/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.tsx b/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.tsx
@@ -6,60 +6,54 @@ import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet, Text, TextStyle} from 'react-native'
 
 import {useCurrencyContext} from '../../features/Settings/Currency'
+import {usePrivacyMode} from '../../features/Settings/PrivacyMode/PrivacyMode'
 import {useSelectedWallet} from '../../features/WalletManager/Context'
 import {useExchangeRate} from '../../yoroi-wallets/hooks'
 import {CurrencySymbol} from '../../yoroi-wallets/types'
 import {Boundary, ResetError, ResetErrorRef} from '..'
 
 type Props = {
   amount: Portfolio.Token.Amount
-  privacyPlaceholder: string
-  isPrivacyOff?: boolean
+  ignorePrivacy?: boolean
   textStyle?: TextStyle
 }
-export const PairedBalance = React.forwardRef<ResetErrorRef, Props>(
-  ({isPrivacyOff, amount, textStyle, privacyPlaceholder}, ref) => {
-    const {currency} = useCurrencyContext()
+export const PairedBalance = React.forwardRef<ResetErrorRef, Props>(({amount, textStyle, ignorePrivacy}, ref) => {
+  const {currency} = useCurrencyContext()
 
-    // hide pairing when set to the primary token
-    if (currency === 'ADA') return null
+  // hide pairing when set to the primary token
+  if (currency === 'ADA') return null
 
-    return (
-      <Boundary
-        key={currency}
-        loading={{size: 'small'}}
-        error={{
-          fallback: ({resetErrorBoundary}) => (
-            <ResetError resetErrorBoundary={resetErrorBoundary} ref={ref}>
-              <BalanceError textStyle={textStyle} />
-            </ResetError>
-          ),
-        }}
-      >
-        <Price
-          isPrivacyOff={isPrivacyOff}
-          amount={amount}
-          privacyPlaceholder={privacyPlaceholder}
-          textStyle={textStyle}
-        />
-      </Boundary>
-    )
-  },
-)
+  return (
+    <Boundary
+      key={currency}
+      loading={{size: 'small'}}
+      error={{
+        fallback: ({resetErrorBoundary}) => (
+          <ResetError resetErrorBoundary={resetErrorBoundary} ref={ref}>
+            <BalanceError textStyle={textStyle} />
+          </ResetError>
+        ),
+      }}
+    >
+      <Price ignorePrivacy={ignorePrivacy} amount={amount} textStyle={textStyle} />
+    </Boundary>
+  )
+})
 
-const Price = ({isPrivacyOff, amount, textStyle, privacyPlaceholder}: Props) => {
-  const wallet = useSelectedWallet()
+const Price = ({amount, textStyle, ignorePrivacy}: Props) => {
   const styles = useStyles()
+  const wallet = useSelectedWallet()
+  const {isPrivacyOff, privacyPlaceholder} = usePrivacyMode()
   const {currency, config} = useCurrencyContext()
   const rate = useExchangeRate({wallet, to: currency})
 
   const price = React.useMemo(() => {
     if (rate == null) return `... ${currency}`
 
-    return !isPrivacyOff
+    return isPrivacyOff || ignorePrivacy
       ? `${amountBreakdown(amount).bn.times(rate).toFormat(config.decimals)} ${currency}`
       : `${privacyPlaceholder} ${currency}`
-  }, [amount, config.decimals, currency, isPrivacyOff, privacyPlaceholder, rate])
+  }, [amount, config.decimals, currency, ignorePrivacy, isPrivacyOff, privacyPlaceholder, rate])
 
   return (
     <Text style={[styles.pairedBalanceText, textStyle]} testID="pairedTotalText">

diff --git a/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenAmountItem.stories.tsx b/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenAmountItem.stories.tsx
@@ -1,6 +1,5 @@
 import {storiesOf} from '@storybook/react-native'
 import {tokenMocks} from '@yoroi/portfolio'
-import {Chain} from '@yoroi/types'
 import React from 'react'
 import {Text, View} from 'react-native'
 
@@ -19,25 +18,13 @@ storiesOf('TokenAmountItem', module).add('Gallery', () => (
       <View style={{flex: 1, justifyContent: 'center', padding: 16}}>
         <Text>Fungible primary token</Text>
 
-        <TokenAmountItem
-          privacyPlaceholder="-"
-          network={Chain.Network.Mainnet}
-          isPrivacyOff={false}
-          amount={primaryAmount}
-          style={{backgroundColor: 'white', padding: 16, borderRadius: 8}}
-        />
+        <TokenAmountItem amount={primaryAmount} style={{backgroundColor: 'white', padding: 16, borderRadius: 8}} />
 
         <Spacer height={40} />
 
         <Text>Fungible non-primary token</Text>
 
-        <TokenAmountItem
-          privacyPlaceholder="-"
-          network={Chain.Network.Mainnet}
-          isPrivacyOff={false}
-          amount={secondaryAmount}
-          style={{backgroundColor: 'white', padding: 16, borderRadius: 8}}
-        />
+        <TokenAmountItem amount={secondaryAmount} style={{backgroundColor: 'white', padding: 16, borderRadius: 8}} />
       </View>
     </SelectedWalletProvider>
   </QueryProvider>

diff --git a/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenAmountItem.tsx b/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenAmountItem.tsx
@@ -1,21 +1,20 @@
 import {amountFormatter, infoExtractName, isNft, isPrimaryToken} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
-import {Chain, Portfolio} from '@yoroi/types'
+import {Portfolio} from '@yoroi/types'
 import {Swap} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, View, ViewProps} from 'react-native'
 
 import {Icon, Spacer, Text} from '../../../../components'
 import {PairedBalance} from '../../../../components/PairedBalance/PairedBalance'
+import {usePrivacyMode} from '../../../Settings/PrivacyMode/PrivacyMode'
 import {usePriceImpactRiskTheme} from '../../../Swap/common/helpers'
 import {SwapPriceImpactRisk} from '../../../Swap/common/types'
 import {TokenInfoIcon} from './TokenInfoIcon'
 
 export type TokenAmountItemProps = {
   amount: Portfolio.Token.Amount
-  privacyPlaceholder: string
-  network: Chain.Network
-  isPrivacyOff: boolean
+  ignorePrivacy?: boolean
 
   style?: ViewProps['style']
   inWallet?: boolean
@@ -25,9 +24,7 @@ export type TokenAmountItemProps = {
 }
 
 export const TokenAmountItem = ({
-  network,
-  isPrivacyOff,
-  privacyPlaceholder,
+  ignorePrivacy = false,
   style,
   amount,
   inWallet,
@@ -36,22 +33,23 @@ export const TokenAmountItem = ({
   orderType,
 }: TokenAmountItemProps) => {
   const {styles, colors} = useStyles()
+  const {privacyPlaceholder, isPrivacyOff} = usePrivacyMode()
   const priceImpactRiskTheme = usePriceImpactRiskTheme(priceImpactRisk ?? 'none')
 
   const {info} = amount
   const isPrimary = isPrimaryToken(info)
   const detail = isPrimary ? info.description : info.fingerprint
   const name = infoExtractName(info)
 
-  const formattedQuantity = !isPrivacyOff ? amountFormatter()(amount) : privacyPlaceholder
+  const formattedQuantity = isPrivacyOff || ignorePrivacy ? amountFormatter()(amount) : privacyPlaceholder
 
   const showSwapDetails = !isPrimary && variant === 'swap'
   const priceImpactRiskTextColor = orderType === 'market' ? priceImpactRiskTheme.text : colors.text
 
   return (
     <View style={[style, styles.container]} testID="assetItem">
       <Left>
-        <TokenInfoIcon info={amount.info} size={variant === 'swap' ? 'sm' : 'md'} network={network} />
+        <TokenInfoIcon info={amount.info} size={variant === 'swap' ? 'sm' : 'md'} />
       </Left>
 
       <Middle>
@@ -83,9 +81,7 @@ export const TokenAmountItem = ({
           </View>
         )}
 
-        {isPrimary && variant !== 'swap' && (
-          <PairedBalance isPrivacyOff={isPrivacyOff} amount={amount} privacyPlaceholder={privacyPlaceholder} />
-        )}
+        {isPrimary && variant !== 'swap' && <PairedBalance amount={amount} ignorePrivacy={ignorePrivacy} />}
       </Right>
     </View>
   )

diff --git a/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenInfoIcon.tsx b/apps/wallet-mobile/src/features/Portfolio/common/TokenAmountItem/TokenInfoIcon.tsx
@@ -1,20 +1,21 @@
 import {isPrimaryToken} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
-import {Chain, Portfolio} from '@yoroi/types'
+import {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'
+import {useSelectedWallet} from '../../../WalletManager/Context'
 
 type TokenInfoIconProps = {
   info: Portfolio.Token.Info
-  network: Chain.Network
   size: 'sm' | 'md'
 }
-export const TokenInfoIcon = React.memo(({info, network, size = 'md'}: TokenInfoIconProps) => {
+export const TokenInfoIcon = React.memo(({info, size = 'md'}: TokenInfoIconProps) => {
   const {styles} = useStyles()
+  const {network} = useSelectedWallet()
   const [isLoading, setIsLoading] = React.useState(false)
 
   if (isPrimaryToken(info)) return <PrimaryIcon size={size} />

diff --git a/...obile/src/features/Send/useCases/ListAmountsToSend/AddToken/SelectTokenFromListScreen.tsx b/...obile/src/features/Send/useCases/ListAmountsToSend/AddToken/SelectTokenFromListScreen.tsx
@@ -3,7 +3,7 @@ import {FlashList} from '@shopify/flash-list'
 import {infoFilterByName, isPrimaryToken} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {useTransfer} from '@yoroi/transfer'
-import {Chain, Portfolio} from '@yoroi/types'
+import {Portfolio} from '@yoroi/types'
 import React from 'react'
 import {Alert, StyleSheet, TouchableOpacity, View} from 'react-native'
 
@@ -106,7 +106,6 @@ export const SelectTokenFromListScreen = () => {
           <ListSpendables
             canAddAmount={canAddAmount}
             spendableAmounts={filteredAmounts}
-            network={wallet.network}
             isSearching={isSearching}
             isSearchOpened={isSearchOpened}
           />
@@ -166,24 +165,17 @@ const ListSpendableNfts = ({
 type ListSpendableBalancesProps = {
   canAddAmount: boolean
   spendableAmounts: ReadonlyArray<Portfolio.Token.Amount>
-  network: Chain.Network
   isSearching: boolean
   isSearchOpened: boolean
 }
-const ListSpendables = ({
-  canAddAmount,
-  spendableAmounts,
-  network,
-  isSearching,
-  isSearchOpened,
-}: ListSpendableBalancesProps) => {
+const ListSpendables = ({canAddAmount, spendableAmounts, isSearching, isSearchOpened}: ListSpendableBalancesProps) => {
   const {styles} = useStyles()
 
   return (
     <FlashList
       data={spendableAmounts}
       renderItem={({item: amount}) => (
-        <SelectAmount amount={amount} disabled={!canAddAmount && !isPrimaryToken(amount.info)} network={network} />
+        <SelectAmount amount={amount} disabled={!canAddAmount && !isPrimaryToken(amount.info)} />
       )}
       bounces={false}
       contentContainerStyle={styles.spendableAmountsContent}
@@ -233,9 +225,8 @@ const Tabs = ({children}: {children: React.ReactNode}) => {
 type SelectAmountProps = {
   disabled?: boolean
   amount: Portfolio.Token.Amount
-  network: Chain.Network
 }
-const SelectAmount = ({amount, disabled, network}: SelectAmountProps) => {
+const SelectAmount = ({amount, disabled}: SelectAmountProps) => {
   const {styles} = useStyles()
   const navigation = useNavigation<TxHistoryRouteNavigation>()
   const {closeSearch} = useSearch()
@@ -263,7 +254,7 @@ const SelectAmount = ({amount, disabled, network}: SelectAmountProps) => {
       testID="selectTokenButton"
       disabled={disabled}
     >
-      <TokenAmountItem amount={amount} network={network} isPrivacyOff privacyPlaceholder="" />
+      <TokenAmountItem amount={amount} ignorePrivacy />
     </TouchableOpacity>
   )
 }

diff --git a/...allet-mobile/src/features/Send/useCases/ListAmountsToSend/EditAmount/EditAmountScreen.tsx b/...allet-mobile/src/features/Send/useCases/ListAmountsToSend/EditAmount/EditAmountScreen.tsx
@@ -90,14 +90,14 @@ export const EditAmountScreen = () => {
         <ScrollView style={styles.scrollView} bounces={false}>
           <Spacer height={16} />
 
-          <TokenAmountItem amount={amount} isPrivacyOff network={wallet.network} privacyPlaceholder="" />
+          <TokenAmountItem amount={amount} ignorePrivacy />
 
           <Spacer height={40} />
 
           <AmountInput onChange={onChangeQuantity} value={inputValue} ticker={amount.info.ticker} />
 
           <Center>
-            {isPrimary && <PairedBalance amount={amount} privacyPlaceholder="" isPrivacyOff />}
+            {isPrimary && <PairedBalance amount={amount} ignorePrivacy />}
 
             <Spacer height={22} />
 

diff --git a/apps/wallet-mobile/src/features/Send/useCases/ListAmountsToSend/ListAmountsToSendScreen.tsx b/apps/wallet-mobile/src/features/Send/useCases/ListAmountsToSend/ListAmountsToSendScreen.tsx
@@ -129,7 +129,6 @@ type ActionableAmountProps = {
   onRemove(tokenId: Portfolio.Token.Id): void
 }
 const ActionableAmount = ({amount, onRemove, onEdit}: ActionableAmountProps) => {
-  const wallet = useSelectedWallet()
   const {styles} = useStyles()
 
   const handleRemove = () => onRemove(amount.info.id)
@@ -139,7 +138,7 @@ const ActionableAmount = ({amount, onRemove, onEdit}: ActionableAmountProps) =>
     <View style={styles.amountItem} testID="amountItem">
       <Left>
         <EditAmountButton onPress={handleEdit}>
-          <TokenAmountItem amount={amount} privacyPlaceholder="" network={wallet.network} isPrivacyOff />
+          <TokenAmountItem amount={amount} ignorePrivacy />
         </EditAmountButton>
       </Left>