From 463c19c8194a3412468a73ebb4912db59f7c87ac Mon Sep 17 00:00:00 2001 From: Jon Tzeng Date: Thu, 19 Oct 2023 16:28:20 -0700 Subject: [PATCH] Overlay styling for "Wallet Paused" --- CHANGELOG.md | 1 + .../FioAddressListScene.test.tsx.snap | 4 +++ .../themed/WalletListCurrencyRow.tsx | 31 +++++++++++++++++-- src/locales/en_US.ts | 1 + src/locales/strings/enUS.json | 1 + src/theme/variables/edgeDark.ts | 4 +++ src/theme/variables/edgeLight.ts | 4 +++ src/types/Theme.ts | 4 +++ 8 files changed, 47 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 817802eec74..b36f7838265 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap index ec0300b6ef0..a6c4ead768f 100644 --- a/src/__tests__/scenes/__snapshots__/FioAddressListScene.test.tsx.snap +++ b/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", }, diff --git a/src/components/themed/WalletListCurrencyRow.tsx b/src/components/themed/WalletListCurrencyRow.tsx index a9160c375a1..50d042d8664 100644 --- a/src/components/themed/WalletListCurrencyRow.tsx +++ b/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 ( - {customAsset != null ? : } + {customAsset != null ? ( + + ) : ( + + )} + {isPaused ? ( + + {lstrings.fragment_wallets_wallet_paused} + + ) : null} ) } 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', diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts index 2de09c45554..64f0a09913e 100644 --- a/src/locales/en_US.ts +++ b/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', diff --git a/src/locales/strings/enUS.json b/src/locales/strings/enUS.json index 52354a793a8..ab1a7cd603b 100644 --- a/src/locales/strings/enUS.json +++ b/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", diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index f700e529980..7bfceda5227 100644 --- a/src/theme/variables/edgeDark.ts +++ b/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, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 816f6527c99..46088b15c96 100644 --- a/src/theme/variables/edgeLight.ts +++ b/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, diff --git a/src/types/Theme.ts b/src/types/Theme.ts index 97758158379..04d8b7269a2 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -328,6 +328,10 @@ export interface Theme { underlayColor: string underlayOpacity: number + // TouchableHighlights overlay + overlayDisabledColor: string + overlayDisabledTextColor: string + // Tutorials tutorialModalUnderlay: string