Merge branch 'develop' into notifications

apps/wallet-mobile/src/components/Icon/Change.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  color?: string
+}
+
+export const Change = ({color = 'black'}: Props) => {
+  return (
+    <Svg width={20} height={14} fill="none">
+      <Path
+        fill={color}
+        d="M4.707.293a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L3 3.414V11a3 3 0 003 3h4a1 1 0 100-2H6a1 1 0 01-1-1V3.414l1.293 1.293a1 1 0 001.414-1.414zm7.586 9a1 1 0 011.414 0L15 10.586V3a1 1 0 00-1-1h-4a1 1 0 110-2h4a3 3 0 013 3v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414"
+      />
+    </Svg>
+  )
+}

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

@@ -115,6 +115,8 @@ storiesOf('Icon', module).add('Gallery', () => {
 
         <Item icon={<Icon.PlusCircle size={40} />} title="Plus Circle" />
 
+        <Item icon={<Icon.Change />} title="Change" />
+
         <Item icon={<Icon.CheckFilled size={40} />} title="Check Filled" />
 
         <Item icon={<Icon.CheckOutlined size={40} />} title="Check Outlined" />

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

@@ -14,6 +14,7 @@ import {Burger} from './Burger'
 import {Cardano} from './Cardano'
 import {Catalyst} from './Catalyst'
 import {Categories} from './Categories'
+import {Change} from './Change'
 import {Check} from './Check'
 import {Checkbox} from './Checkbox'
 import {CheckFilled} from './CheckFilled'
@@ -154,6 +155,7 @@ export const Icon = {
   Cardano,
   Catalyst,
   Categories,
+  Change,
   Check,
   Checkbox,
   CheckFilled,

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

@@ -1,5 +1,4 @@
 import {useClaim} from '@yoroi/claim'
-import {useExplorers} from '@yoroi/explorers'
 import {sortTokenAmountsByInfo} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {App, Claim, Portfolio} from '@yoroi/types'
@@ -93,7 +92,7 @@ const TxHash = ({txHash}: {txHash: string}) => {
   const strings = useStrings()
   const {wallet} = useSelectedWallet()
   const {styles, colors} = useStyles()
-  const explorers = useExplorers(wallet.networkManager.network)
+  const explorers = wallet.networkManager.explorers
 
   return (
     <>

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

@@ -225,7 +225,7 @@ const useFormattedTransaction = (cbor: string) => {
     const receiveUTxO = getUtxoByTxIdAndIndex(input.transaction_id, input.index)
     const address = receiveUTxO?.receiver
     const coin = receiveUTxO?.amount != null ? asQuantity(receiveUTxO.amount) : null
-    const coinText = coin != null ? formatAdaWithText(coin, wallet.primaryToken) : null
+    const coinText = coin != null ? formatAdaWithText(coin, wallet.portfolioPrimaryTokenInfo) : null
     const primaryAssets = coinText != null ? [coinText] : []
     const multiAssets =
       receiveUTxO?.assets
@@ -249,7 +249,7 @@ const useFormattedTransaction = (cbor: string) => {
   const formattedOutputs = outputs.map((output) => {
     const address = output.address
     const coin = asQuantity(output.amount.coin)
-    const coinText = formatAdaWithText(coin, wallet.primaryToken)
+    const coinText = formatAdaWithText(coin, wallet.portfolioPrimaryTokenInfo)
     const primaryAssets = coinText != null ? [coinText] : []
     const multiAssets = output.amount.multiasset
       ? Object.entries(output.amount.multiasset).map(([policyId, assets]) => {
@@ -266,7 +266,7 @@ const useFormattedTransaction = (cbor: string) => {
     return {assets, address, ownAddress: address != null && isOwnedAddress(address)}
   })
 
-  const formattedFee = formatAdaWithText(asQuantity(data?.body?.fee ?? '0'), wallet.primaryToken)
+  const formattedFee = formatAdaWithText(asQuantity(data?.body?.fee ?? '0'), wallet.portfolioPrimaryTokenInfo)
 
   return {inputs: formattedInputs, outputs: formattedOutputs, fee: formattedFee}
 }

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

@@ -1,9 +1,8 @@
 import {RouteProp, useRoute} from '@react-navigation/native'
 import {isString} from '@yoroi/common'
-import {useExplorers} from '@yoroi/explorers'
 import {usePortfolioTokenDiscovery, usePortfolioTokenTraits} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
-import {Chain, Network, Portfolio} from '@yoroi/types'
+import {Explorers, Network, Portfolio} from '@yoroi/types'
 import React, {ReactNode, useState} from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {
@@ -98,7 +97,7 @@ type DetailsProps = {
   networkManager: Network.Manager
 }
 const Details = ({activeTab, info, networkManager}: DetailsProps) => {
-  const {tokenManager, network} = networkManager
+  const {tokenManager, network, explorers} = networkManager
 
   const {tokenDiscovery} = usePortfolioTokenDiscovery(
     {
@@ -127,7 +126,7 @@ const Details = ({activeTab, info, networkManager}: DetailsProps) => {
   return (
     <TabPanels>
       <TabPanel active={activeTab === 'overview'}>
-        <NftOverview info={info} network={network} traits={tokenTraits} />
+        <NftOverview info={info} explorers={explorers} traits={tokenTraits} />
       </TabPanel>
 
       <TabPanel active={activeTab === 'metadata'}>
@@ -174,12 +173,11 @@ const MetadataRow = ({title, copyText, children}: {title: string; children: Reac
 type NftOverviewProps = {
   info: Portfolio.Token.Info
   traits: Portfolio.Token.Traits | undefined
-  network: Chain.SupportedNetworks
+  explorers: Record<Explorers.Explorer, Explorers.Manager>
 }
-const NftOverview = ({info, network, traits}: NftOverviewProps) => {
+const NftOverview = ({info, explorers, traits}: NftOverviewProps) => {
   const styles = useStyles()
   const strings = useStrings()
-  const explorers = useExplorers(network)
 
   const [policyId] = info.id.split('.')
 

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokenDetails/PortfolioTokenInfo/Overview/Overview.tsx

@@ -1,4 +1,3 @@
-import {useExplorers} from '@yoroi/explorers'
 import {infoExtractName, isPrimaryToken} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import React, {useState} from 'react'
@@ -19,7 +18,7 @@ export const Overview = () => {
   const {
     wallet: {balances, networkManager},
   } = useSelectedWallet()
-  const explorers = useExplorers(networkManager.network)
+  const explorers = networkManager.explorers
   const tokenInfo = balances.records.get(tokenId)
   const tokenSymbol = tokenInfo ? infoExtractName(tokenInfo.info, {mode: 'currency'}) : ''
   const [policyId] = tokenInfo?.info.id.split('.') ?? []

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/TokenBalanceItem.tsx

@@ -7,6 +7,7 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {Spacer} from '../../../../../components'
 import {PairedBalance} from '../../../../../components/PairedBalance/PairedBalance'
 import {useCurrencyPairing} from '../../../../Settings/Currency'
+import {usePrivacyMode} from '../../../../Settings/PrivacyMode/PrivacyMode'
 import {formatPriceChange, priceChange} from '../../../common/helpers/priceChange'
 import {useNavigateTo} from '../../../common/hooks/useNavigateTo'
 import {PnlTag} from '../../../common/PnlTag/PnlTag'
@@ -19,10 +20,12 @@ type Props = {
 export const TokenBalanceItem = ({amount}: Props) => {
   const {styles} = useStyles()
   const navigationTo = useNavigateTo()
+  const {isPrivacyActive, privacyPlaceholder} = usePrivacyMode()
+
   const {info} = amount
   const name = infoExtractName(info)
   const symbol = infoExtractName(info, {mode: 'currency'})
-  const balanceFormatted = amountBreakdown(amount).bn.toFormat(2)
+  const balanceFormatted = isPrivacyActive ? privacyPlaceholder : amountBreakdown(amount).bn.toFormat(2)
 
   const ptActivity = useCurrencyPairing().ptActivity
 

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/TotalTokensValue/TokenValueBalance.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 
 import {useCurrencyPairing} from '../../../../Settings/Currency'
+import {usePrivacyMode} from '../../../../Settings/PrivacyMode/PrivacyMode'
 import {SkeletonPrimaryToken} from './SkeletonPrimaryToken'
 
 type Props = {
@@ -14,30 +15,26 @@ type Props = {
   rate?: number
 }
 export const TokenValueBalance = ({amount, isFetching, isPrimaryTokenActive, rate}: Props) => {
-  const {currency} = useCurrencyPairing()
+  const {currency, config} = useCurrencyPairing()
+  const {isPrivacyActive, privacyPlaceholder} = usePrivacyMode()
   const {styles} = useStyles()
   const name = infoExtractName(amount.info)
 
-  const renderBalance = () => {
-    if (isFetching || rate === undefined) return <SkeletonPrimaryToken />
-    if (!isPrimaryTokenActive)
-      return <Text style={[styles.balanceText]}>{amountBreakdown(amount).bn.times(rate).toFormat(2)}</Text>
-
-    return <Text style={[styles.balanceText]}>{amountBreakdown(amount).bn.toFormat(2)}</Text>
-  }
-
-  const firstSymbol = isPrimaryTokenActive ? name : currency
-  const secondSymbol = isPrimaryTokenActive ? currency : name
-
   return (
     <View style={styles.balanceBox}>
-      {renderBalance()}
-
-      <Text>
-        <Text style={styles.firstSymbol}>{firstSymbol}</Text>
-
-        <Text style={[styles.secondSymbol]}>/{secondSymbol}</Text>
-      </Text>
+      {isFetching || rate === undefined ? (
+        <SkeletonPrimaryToken />
+      ) : (
+        <Text style={[styles.balanceText]}>
+          {isPrivacyActive
+            ? privacyPlaceholder
+            : isPrimaryTokenActive
+            ? amountBreakdown(amount).bn.toFormat(2)
+            : amountBreakdown(amount).bn.times(rate).toFormat(config.decimals)}
+        </Text>
+      )}
+
+      <Text style={styles.symbol}>{isPrimaryTokenActive ? name : currency}</Text>
     </View>
   )
 }
@@ -55,16 +52,11 @@ const useStyles = () => {
       ...atoms.font_semibold,
       color: color.text_gray_medium,
     },
-    firstSymbol: {
+    symbol: {
       ...atoms.body_1_lg_medium,
       ...atoms.font_semibold,
       color: color.text_gray_medium,
     },
-    secondSymbol: {
-      ...atoms.body_1_lg_medium,
-      ...atoms.font_semibold,
-      color: color.text_gray_low,
-    },
   })
 
   return {styles} as const

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/TotalTokensValue/TokenValuePairedBalance.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import {StyleSheet, Text} from 'react-native'
 
 import {PairedBalance} from '../../../../../components/PairedBalance/PairedBalance'
+import {usePrivacyMode} from '../../../../Settings/PrivacyMode/PrivacyMode'
 import {SkeletonPairedToken} from './SkeletonPairedToken'
 
 type Props = {
@@ -14,11 +15,17 @@ type Props = {
 }
 export const TokenValuePairedBalance = ({amount, isFetching, isPrimaryTokenActive}: Props) => {
   const {styles} = useStyles()
+  const {isPrivacyActive, privacyPlaceholder} = usePrivacyMode()
+
   const name = infoExtractName(amount.info)
 
   if (isFetching) return <SkeletonPairedToken />
   if (isPrimaryTokenActive) return <PairedBalance amount={amount} textStyle={styles.pairedBalance} />
-  return <Text style={[styles.pairedBalance]}>{`${amountBreakdown(amount).bn.toFormat(2)} ${name}`}</Text>
+  return (
+    <Text style={[styles.pairedBalance]}>{`${
+      isPrivacyActive ? privacyPlaceholder : amountBreakdown(amount).bn.toFormat(2)
+    } ${name}`}</Text>
+  )
 }
 
 const useStyles = () => {

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokensList/TotalTokensValue/TotalTokensValueContent.tsx

@@ -3,8 +3,9 @@ import {Portfolio} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 
-import {Spacer} from '../../../../../components'
+import {Icon, Spacer} from '../../../../../components'
 import {useCurrencyPairing} from '../../../../Settings/Currency'
+import {usePrivacyMode} from '../../../../Settings/PrivacyMode/PrivacyMode'
 import {formatPriceChange, priceChange} from '../../../common/helpers/priceChange'
 import {PnlTag} from '../../../common/PnlTag/PnlTag'
 import {usePortfolio} from '../../../common/PortfolioProvider'
@@ -18,14 +19,15 @@ type Props = {
 }
 
 export const TotalTokensValueContent = ({amount, headerCard}: Props) => {
-  const {styles} = useStyles()
+  const {styles, color} = useStyles()
   const {
     currency,
     config,
     ptActivity: {close, open},
     isLoading,
   } = useCurrencyPairing()
   const {isPrimaryTokenActive, setIsPrimaryTokenActive} = usePortfolio()
+  const {togglePrivacyMode} = usePrivacyMode()
 
   const {changePercent, changeValue, variantPnl} = priceChange(open, close)
 
@@ -36,14 +38,20 @@ export const TotalTokensValueContent = ({amount, headerCard}: Props) => {
       <Spacer height={6} />
 
       <View style={styles.balanceContainer}>
-        <TouchableOpacity style={styles.balanceBox} onPress={() => setIsPrimaryTokenActive(!isPrimaryTokenActive)}>
-          <TokenValueBalance
-            rate={close}
-            amount={amount}
-            isFetching={isLoading}
-            isPrimaryTokenActive={isPrimaryTokenActive}
-          />
-        </TouchableOpacity>
+        <View style={styles.balanceBox}>
+          <TouchableOpacity style={styles.balanceBox} onPress={() => togglePrivacyMode()}>
+            <TokenValueBalance
+              rate={close}
+              amount={amount}
+              isFetching={isLoading}
+              isPrimaryTokenActive={isPrimaryTokenActive}
+            />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.button} onPress={() => setIsPrimaryTokenActive(!isPrimaryTokenActive)}>
+            <Icon.Change color={color.el_gray_max} />
+          </TouchableOpacity>
+        </View>
 
         <View style={styles.rowBetween}>
           <TokenValuePairedBalance amount={amount} isFetching={isLoading} isPrimaryTokenActive={isPrimaryTokenActive} />
@@ -75,7 +83,7 @@ export const TotalTokensValueContent = ({amount, headerCard}: Props) => {
 }
 
 const useStyles = () => {
-  const {atoms} = useTheme()
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     rowBetween: {
       ...atoms.flex_row,
@@ -85,17 +93,20 @@ const useStyles = () => {
     balanceBox: {
       ...atoms.flex_row,
       ...atoms.gap_2xs,
-      ...atoms.align_center,
+      ...atoms.align_end,
     },
     balanceContainer: {
       ...atoms.gap_2xs,
     },
+    button: {
+      ...atoms.p_sm,
+    },
     varyContainer: {
       ...atoms.flex_row,
       ...atoms.gap_xs,
       ...atoms.align_stretch,
     },
   })
 
-  return {styles} as const
+  return {styles, color} as const
 }

apps/wallet-mobile/src/features/RegisterCatalyst/common/InsufficientFundsModal.tsx

@@ -7,8 +7,8 @@ import {Platform, StyleSheet, Text, View} from 'react-native'
 import {Button, useModal} from '../../../components'
 import {Space} from '../../../components/Space/Space'
 import globalMessages, {confirmationMessages} from '../../../kernel/i18n/global-messages'
-import {catalystConfig} from '../../../yoroi-wallets/cardano/constants/catalyst-config'
 import {usePortfolioPrimaryBalance} from '../../Portfolio/common/hooks/usePortfolioPrimaryBalance'
+import {catalystConfig} from '../../WalletManager/common/adapters/cardano/catalyst-config'
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 
 const formatter = amountFormatter({template: `{{value}} {{ticker}}`, dropTraillingZeros: true})

apps/wallet-mobile/src/features/RegisterCatalyst/common/hooks.ts

@@ -6,10 +6,10 @@ import {useQuery, UseQueryOptions} from 'react-query'
 import {time} from '../../../kernel/constants'
 import {throwLoggedError} from '../../../kernel/logger/helpers/throw-logged-error'
 import {queryInfo} from '../../../kernel/query-client'
-import {catalystConfig} from '../../../yoroi-wallets/cardano/constants/catalyst-config'
 import {YoroiWallet} from '../../../yoroi-wallets/cardano/types'
 import {isShelley} from '../../../yoroi-wallets/cardano/utils'
 import {usePortfolioPrimaryBalance} from '../../Portfolio/common/hooks/usePortfolioPrimaryBalance'
+import {catalystConfig} from '../../WalletManager/common/adapters/cardano/catalyst-config'
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 
 export const useCanVote = (wallet: YoroiWallet) => {

apps/wallet-mobile/src/features/RegisterCatalyst/useCases/ConfirmVotingTx/ConfirmVotingTx.tsx

@@ -102,8 +102,8 @@ export const ConfirmVotingTx = () => {
 
             <TextInput
               value={formatTokenWithSymbol(
-                Amounts.getAmount(votingRegTx.fee, wallet.primaryToken.identifier).quantity,
-                wallet.primaryToken,
+                Amounts.getAmount(votingRegTx.fee, wallet.portfolioPrimaryTokenInfo.id).quantity,
+                wallet.portfolioPrimaryTokenInfo,
               )}
               editable={false}
               autoComplete="off"