Overlay styling for "Wallet Paused"

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- added: "Paused Wallet" visual indicator on wallet list
 - changed: Change FlipInput styling to make the edit functionality more obvious
 - changed: Move asset-specific settings into their own settings page
 

src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap

@@ -221,6 +221,8 @@ exports[`FioAddressList should render with loading props 1`] = `
               "outlineTextInputLabelColorDisabled": "#87939E",
               "outlineTextInputLabelColorFocused": "#00f1a2",
               "outlineTextInputTextColor": "#FFFFFF",
+              "overlayDisabledColor": "rgba(0, 0, 0, .5)",
+              "overlayDisabledTextColor": "#FFFFFF",
               "paymentTypeLogoApplePay": {
                 "testUri": "../../../src/assets/images/paymentTypes/paymentTypeLogoApplePay.png",
               },
@@ -672,6 +674,8 @@ exports[`FioAddressList should render with loading props 1`] = `
               "outlineTextInputLabelColorDisabled": "#87939E",
               "outlineTextInputLabelColorFocused": "#00f1a2",
               "outlineTextInputTextColor": "#FFFFFF",
+              "overlayDisabledColor": "rgba(0, 0, 0, .5)",
+              "overlayDisabledTextColor": "#FFFFFF",
               "paymentTypeLogoApplePay": {
                 "testUri": "../../../src/assets/images/paymentTypes/paymentTypeLogoApplePay.png",
               },

src/components/themed/WalletListCurrencyRow.tsx

@@ -1,12 +1,15 @@
 import { EdgeCurrencyWallet, EdgeToken } from 'edge-core-js'
 import * as React from 'react'
-import { TouchableOpacity } from 'react-native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import { useHandler } from '../../hooks/useHandler'
+import { lstrings } from '../../locales/strings'
+import { useSelector } from '../../types/reactRedux'
 import { triggerHaptic } from '../../util/haptic'
 import { CurrencyRow } from '../data/row/CurrencyRow'
 import { CustomAsset, CustomAssetRow } from '../data/row/CustomAssetRow'
 import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
+import { EdgeText } from './EdgeText'
 
 interface Props {
   customAsset?: CustomAsset
@@ -34,6 +37,8 @@ const WalletListCurrencyRowComponent = (props: Props) => {
   } = props
   const theme = useTheme()
   const styles = getStyles(theme)
+  const pausedWallets = useSelector(state => state.ui.settings.userPausedWalletsSet)
+  const isPaused = pausedWallets != null && pausedWallets.has(wallet.id)
 
   // Currency code and wallet name for display:
   const currencyCode = customAsset?.currencyCode ?? token?.currencyCode ?? wallet.currencyInfo.currencyCode
@@ -50,13 +55,33 @@ const WalletListCurrencyRowComponent = (props: Props) => {
 
   return (
     <TouchableOpacity accessible={false} style={styles.row} onLongPress={handleLongPress} onPress={handlePress}>
-      {customAsset != null ? <CustomAssetRow customAsset={customAsset} /> : <CurrencyRow showRate={showRate} token={token} tokenId={tokenId} wallet={wallet} />}
+      {customAsset != null ? (
+        <CustomAssetRow customAsset={customAsset} />
+      ) : (
+        <CurrencyRow showRate={showRate && !isPaused} token={token} tokenId={tokenId} wallet={wallet} />
+      )}
+      {isPaused ? (
+        <View style={styles.overlayContainer}>
+          <EdgeText style={styles.overlayLabel}>{lstrings.fragment_wallets_wallet_paused}</EdgeText>
+        </View>
+      ) : null}
     </TouchableOpacity>
   )
 }
 
 const getStyles = cacheStyles((theme: Theme) => ({
-  // Layout:
+  overlayLabel: {
+    color: theme.overlayDisabledTextColor
+  },
+  overlayLabelContainer: {
+    ...StyleSheet.absoluteFillObject
+  },
+  overlayContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    backgroundColor: theme.overlayDisabledColor,
+    justifyContent: 'center'
+  },
   row: {
     alignItems: 'center',
     flexDirection: 'row',

src/locales/en_US.ts

@@ -222,6 +222,7 @@ const strings = {
   fragment_wallets_get_seed_wallet: 'Get Seed',
   fragment_wallets_pause_wallet: 'Pause Wallet',
   fragment_wallets_unpause_wallet: 'Unpause Wallet',
+  fragment_wallets_wallet_paused: 'Wallet Paused',
   fragment_wallets_view_private_view_key: 'Private View Key',
   fragment_wallets_view_private_view_key_warning_s: `The private view key allows the receiver to see the balance in your %1$s wallet. Do not share this key unless necessary, such as for tax purposes, accounting, or similar reasons.`,
   fragment_wallets_view_xpub: 'View XPub Address',

src/locales/strings/enUS.json

@@ -166,6 +166,7 @@
   "fragment_wallets_get_seed_wallet": "Get Seed",
   "fragment_wallets_pause_wallet": "Pause Wallet",
   "fragment_wallets_unpause_wallet": "Unpause Wallet",
+  "fragment_wallets_wallet_paused": "Wallet Paused",
   "fragment_wallets_view_private_view_key": "Private View Key",
   "fragment_wallets_view_private_view_key_warning_s": "The private view key allows the receiver to see the balance in your %1$s wallet. Do not share this key unless necessary, such as for tax purposes, accounting, or similar reasons.",
   "fragment_wallets_view_xpub": "View XPub Address",

src/theme/variables/edgeDark.ts

@@ -328,6 +328,10 @@ export const edgeDark: Theme = {
   underlayColor: palette.white,
   underlayOpacity: 0.95,
 
+  // TouchableHighlights overlay
+  overlayDisabledColor: palette.blackOp50,
+  overlayDisabledTextColor: palette.white,
+
   // Tutorials
   tutorialModalUnderlay: palette.transparent,
 

src/theme/variables/edgeLight.ts

@@ -328,6 +328,10 @@ export const edgeLight: Theme = {
   underlayColor: palette.white,
   underlayOpacity: 0.95,
 
+  // TouchableHighlights overlay
+  overlayDisabledColor: palette.blackOp50,
+  overlayDisabledTextColor: palette.white,
+
   // Tutorials
   tutorialModalUnderlay: palette.transparent,
 

src/types/Theme.ts

@@ -328,6 +328,10 @@ export interface Theme {
   underlayColor: string
   underlayOpacity: number
 
+  // TouchableHighlights overlay
+  overlayDisabledColor: string
+  overlayDisabledTextColor: string
+
   // Tutorials
   tutorialModalUnderlay: string