Clarify hidden balance UI

CHANGELOG.md

@@ -15,6 +15,7 @@
 - changed: Use the UI4 warning card for the Reveal Raw Keys and Reveal Master Private Key password confirmation warnings.
 - changed: Tron resource staking now describes its claim action as reclaiming your own TRX, instead of claiming a reward.
 - changed: Add maestro test selectors (testIDs) to the swap scene's from and to wallet pills.
+- changed: The balance card title now reads "Unhide Balance" while balances are hidden, and hiding balances shows a toast explaining how to bring them back.
 - fixed: Force `NODE_ENV=test` in the Jest script so UI tests keep working when npm is invoked via Socket (Socket otherwise sets `NODE_ENV=development`, which makes react-native-gesture-handler treat Jest as a non-test env).
 - fixed: Bitwave CSV exports now use ISO 8601 UTC timestamps, leave the fee columns blank so Bitwave does not double-count fees, and copy the description into the second custom metadata column.
 - fixed: Bitwave account ids are no longer capitalized by the keyboard or padded with whitespace when entered, so exports import without hand-editing the account id.

eslint.config.mjs

@@ -145,7 +145,6 @@ export default [
       'src/components/buttons/ReturnKeyTypeButton.tsx',
       'src/components/buttons/SceneButtons.tsx',
 
-      'src/components/cards/BalanceCard.tsx',
       'src/components/cards/EarnOptionCard.tsx',
 
       'src/components/cards/FiatAmountInputCard.tsx',

src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap

@@ -98,6 +98,7 @@ exports[`BalanceCard should render with loading props 1`] = `
         "opacity": 1,
       }
     }
+    testID="balanceCardToggle"
   >
     <View
       style={
@@ -132,6 +133,7 @@ exports[`BalanceCard should render with loading props 1`] = `
             null,
           ]
         }
+        testID="balanceCardTitle"
       >
         Total Balance
       </Text>

src/actions/LocalSettingsActions.ts

@@ -2,6 +2,8 @@ import type { EdgeAccount } from 'edge-core-js'
 import React from 'react'
 import { makeEvent } from 'yavent'
 
+import { showToast } from '../components/services/AirshipInstance'
+import { lstrings } from '../locales/strings'
 import { useSelector } from '../types/reactRedux'
 import type { ThunkAction } from '../types/reduxTypes'
 import {
@@ -17,6 +19,9 @@ import { logActivity } from '../util/logger'
 
 export const LOCAL_SETTINGS_FILENAME = 'Settings.json'
 
+// Long enough to read the instructions in the balance-hidden toast:
+const TOAST_HIDE_MS = 5000
+
 let localAccountSettings: LocalAccountSettings = asLocalAccountSettings({})
 const [watchAccountSettings, emitAccountSettings] =
   makeEvent<LocalAccountSettings>()
@@ -97,14 +102,18 @@ export function toggleAccountBalanceVisibility(): ThunkAction<Promise<void>> {
     const { account } = state.core
     const currentAccountBalanceVisibility =
       state.ui.settings.isAccountBalanceVisible
-    await writeAccountBalanceVisibility(
-      account,
-      !currentAccountBalanceVisibility
-    )
+    const isAccountBalanceVisible = !currentAccountBalanceVisibility
+    await writeAccountBalanceVisibility(account, isAccountBalanceVisible)
     dispatch({
       type: 'UI/SETTINGS/SET_ACCOUNT_BALANCE_VISIBILITY',
-      data: { isAccountBalanceVisible: !currentAccountBalanceVisibility }
+      data: { isAccountBalanceVisible }
     })
+
+    // Users often hide their balances by accident and then contact support
+    // thinking their funds are gone, so explain how to get them back:
+    if (!isAccountBalanceVisible) {
+      showToast(lstrings.fragment_wallets_balance_hidden_toast, TOAST_HIDE_MS)
+    }
   }
 }
 

src/components/cards/BalanceCard.tsx

@@ -44,7 +44,7 @@ interface Props {
 /**
  * Card that displays balance, deposit/send buttons, and a link to view assets
  */
-export const BalanceCard = (props: Props) => {
+export const BalanceCard: React.FC<Props> = props => {
   const { navigation, onViewAssetsPress } = props
 
   const dispatch = useDispatch()
@@ -72,7 +72,7 @@ export const BalanceCard = (props: Props) => {
     () =>
       activeWalletIds.every(walletId => {
         // Ignore wallets that have crashed:
-        if (currencyWalletErrors[walletId]) return true
+        if (currencyWalletErrors[walletId] != null) return true
 
         // Both the wallet and its rate need to be loaded:
         const wallet = currencyWallets[walletId]
@@ -96,7 +96,7 @@ export const BalanceCard = (props: Props) => {
   )
   const [digitHeight, setDigitHeight] = React.useState(0)
 
-  const fiatSymbol = defaultIsoFiat ? getFiatSymbol(defaultIsoFiat) : ''
+  const fiatSymbol = defaultIsoFiat === '' ? '' : getFiatSymbol(defaultIsoFiat)
   const fiatCurrencyCode = removeIsoPrefix(defaultIsoFiat)
   const formattedFiat = isBalanceVisible
     ? formatNumber(fiatAmount, { toFixed: 2 })
@@ -185,11 +185,14 @@ export const BalanceCard = (props: Props) => {
       </UnscaledText>
       <EdgeTouchableOpacity
         style={styles.balanceContainer}
+        testID="balanceCardToggle"
         onPress={handleToggleAccountBalanceVisibility}
       >
         <View style={styles.titleContainer}>
-          <EdgeText style={theme.cardTextShadow}>
-            {lstrings.fragment_wallets_balance_text}
+          <EdgeText style={theme.cardTextShadow} testID="balanceCardTitle">
+            {isBalanceVisible
+              ? lstrings.fragment_wallets_balance_text
+              : lstrings.fragment_wallets_unhide_balance_text}
           </EdgeText>
           <IonIcon
             name={isBalanceVisible ? 'eye-off-outline' : 'eye-outline'}

src/locales/en_US.ts

@@ -277,6 +277,9 @@ const strings = {
   transaction_list_search_no_result: 'Search returned no results',
   transaction_list_recent_transactions: 'Recent Transactions',
   fragment_wallets_balance_text: 'Total Balance',
+  fragment_wallets_unhide_balance_text: 'Unhide Balance',
+  fragment_wallets_balance_hidden_toast:
+    'Balances are hidden. Tap “Unhide Balance” to show them again.',
   fragment_wallets_delete_wallet: 'Archive Wallet',
   fragment_wallets_delete_token: 'Disable Token',
   fragment_wallets_delete_token_prompt_2s:

src/locales/strings/enUS.json

@@ -180,6 +180,8 @@
   "transaction_list_search_no_result": "Search returned no results",
   "transaction_list_recent_transactions": "Recent Transactions",
   "fragment_wallets_balance_text": "Total Balance",
+  "fragment_wallets_unhide_balance_text": "Unhide Balance",
+  "fragment_wallets_balance_hidden_toast": "Balances are hidden. Tap “Unhide Balance” to show them again.",
   "fragment_wallets_delete_wallet": "Archive Wallet",
   "fragment_wallets_delete_token": "Disable Token",
   "fragment_wallets_delete_token_prompt_2s": "Are you sure you want to disable token %1$s in your %2$s wallet?",