From fba2f80a9dbe0e83112044de043c699607d9a5db Mon Sep 17 00:00:00 2001 From: Finnian Jacobson-Schulte <140328381+finnian0826@users.noreply.github.com> Date: Fri, 3 Nov 2023 08:57:24 -0600 Subject: [PATCH 1/5] add feature gate --- src/app/actions.ts | 12 ++++++------ src/app/reducers.ts | 2 +- src/components/TokenBalance.tsx | 18 ++++++++++++------ src/statsig/constants.ts | 1 + src/statsig/types.ts | 1 + src/transactions/feed/SwapFeedItem.test.tsx | 5 +++++ src/transactions/feed/SwapFeedItem.tsx | 6 +++++- .../feed/TransferFeedItem.test.tsx | 5 +++++ src/transactions/feed/TransferFeedItem.tsx | 6 +++++- 9 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/app/actions.ts b/src/app/actions.ts index 0edef57820d..b84e78250b0 100644 --- a/src/app/actions.ts +++ b/src/app/actions.ts @@ -38,7 +38,7 @@ export enum Actions { PUSH_NOTIFICATIONS_PERMISSION_CHANGED = 'APP/PUSH_NOTIFICATIONS_PERMISSION_CHANGED', IN_APP_REVIEW_REQUESTED = 'APP/IN_APP_REVIEW_REQUESTED', NOTIFICATION_SPOTLIGHT_SEEN = 'APP/NOTIFICATION_SPOTLIGHT_SEEN', - TOGGLE_HIDE_BALANCES = 'APP/TOGGLE_HIDE_BALANCES', + TOGGLE_HIDE_HOME_BALANCES = 'APP/TOGGLE_HIDE_HOME_BALANCES', } export interface SetAppState { @@ -170,8 +170,8 @@ export interface NotificationSpotlightSeen { type: Actions.NOTIFICATION_SPOTLIGHT_SEEN } -interface ToggleHideBalances { - type: Actions.TOGGLE_HIDE_BALANCES +interface ToggleHideHomeBalances { + type: Actions.TOGGLE_HIDE_HOME_BALANCES } export type ActionTypes = @@ -201,7 +201,7 @@ export type ActionTypes = | PushNotificationsPermissionChanged | inAppReviewRequested | NotificationSpotlightSeen - | ToggleHideBalances + | ToggleHideHomeBalances export const setAppState = (state: string): SetAppState => ({ type: Actions.SET_APP_STATE, @@ -369,8 +369,8 @@ export const notificationSpotlightSeen = (): NotificationSpotlightSeen => { } } -export const toggleHideBalances = (): ToggleHideBalances => { +export const toggleHideHomeBalances = (): ToggleHideHomeBalances => { return { - type: Actions.TOGGLE_HIDE_BALANCES, + type: Actions.TOGGLE_HIDE_HOME_BALANCES, } } diff --git a/src/app/reducers.ts b/src/app/reducers.ts index 47843d3ee9f..d994b4672eb 100644 --- a/src/app/reducers.ts +++ b/src/app/reducers.ts @@ -268,7 +268,7 @@ export const appReducer = ( ...state, inAppReviewLastInteractionTimestamp: action.inAppReviewLastInteractionTimestamp, } - case Actions.TOGGLE_HIDE_BALANCES: + case Actions.TOGGLE_HIDE_HOME_BALANCES: return { ...state, hideHomeBalances: !state.hideHomeBalances, diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx index 71975fe81af..42129c456b0 100644 --- a/src/components/TokenBalance.tsx +++ b/src/components/TokenBalance.tsx @@ -17,7 +17,7 @@ import { useDispatch, useSelector } from 'react-redux' import { hideAlert, showToast } from 'src/alert/actions' import { AssetsEvents, FiatExchangeEvents, HomeEvents } from 'src/analytics/Events' import ValoraAnalytics from 'src/analytics/ValoraAnalytics' -import { toggleHideBalances } from 'src/app/actions' +import { toggleHideHomeBalances } from 'src/app/actions' import { hideHomeBalancesSelector } from 'src/app/selectors' import Dialog from 'src/components/Dialog' import { formatValueToDisplay } from 'src/components/TokenDisplay' @@ -242,11 +242,15 @@ export function HomeTokenBalance() { const [infoVisible, setInfoVisible] = useState(false) + const showHideHomeBalancesToggle = getFeatureGate( + StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE + ) + const hideBalance = useSelector(hideHomeBalancesSelector) const eyeIconOnPress = () => { ValoraAnalytics.track(hideBalance ? HomeEvents.show_balances : HomeEvents.hide_balances) - dispatch(toggleHideBalances()) + dispatch(toggleHideHomeBalances()) } return ( @@ -285,11 +289,13 @@ export function HomeTokenBalance() { ? styles.totalBalance : styles.balance } - hideBalance={hideBalance} + hideBalance={showHideHomeBalancesToggle ? hideBalance : false} /> - - {hideBalance ? : } - + {showHideHomeBalancesToggle && ( + + {hideBalance ? : } + + )} ) diff --git a/src/statsig/constants.ts b/src/statsig/constants.ts index 66d7c7746d6..b6046f8eaee 100644 --- a/src/statsig/constants.ts +++ b/src/statsig/constants.ts @@ -42,6 +42,7 @@ export const FeatureGates = { [StatsigFeatureGates.USE_VIEM_FOR_WALLETCONNECT_TRANSACTIONS]: false, [StatsigFeatureGates.USE_NEW_RECIPIENT_SCREEN]: false, [StatsigFeatureGates.USE_NEW_SEND_FLOW]: false, + [StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE]: false, } export const ExperimentConfigs = { diff --git a/src/statsig/types.ts b/src/statsig/types.ts index b8df2f16617..ec9352a45b0 100644 --- a/src/statsig/types.ts +++ b/src/statsig/types.ts @@ -39,6 +39,7 @@ export enum StatsigFeatureGates { USE_VIEM_FOR_WALLETCONNECT_TRANSACTIONS = 'use_viem_for_walletconnect_transactions', USE_NEW_RECIPIENT_SCREEN = 'use_new_recipient_screen', USE_NEW_SEND_FLOW = 'use_new_send_flow', + SHOW_HIDE_HOME_BALANCES_TOGGLE = 'show_hide_home_balances_toggle', } export enum StatsigExperiments { diff --git a/src/transactions/feed/SwapFeedItem.test.tsx b/src/transactions/feed/SwapFeedItem.test.tsx index c0fd0ad62dd..8bb6c6e7760 100644 --- a/src/transactions/feed/SwapFeedItem.test.tsx +++ b/src/transactions/feed/SwapFeedItem.test.tsx @@ -2,6 +2,7 @@ import { render } from '@testing-library/react-native' import React from 'react' import { Provider } from 'react-redux' import { RootState } from 'src/redux/reducers' +import { getFeatureGate } from 'src/statsig' import SwapFeedItem from 'src/transactions/feed/SwapFeedItem' import { Fee, @@ -16,6 +17,8 @@ import { mockCeurTokenId, mockCusdTokenId } from 'test/values' const MOCK_TX_HASH = '0x006b866d20452a24d1d90c7514422188cc7c5d873e2f1ed661ec3f810ad5331c' +jest.mock('src/statsig') + jest.mock('src/web3/networkConfig', () => { const originalModule = jest.requireActual('src/web3/networkConfig') return { @@ -32,6 +35,8 @@ jest.mock('src/web3/networkConfig', () => { } }) +jest.mocked(getFeatureGate).mockReturnValue(true) + describe('SwapFeedItem', () => { function renderScreen({ storeOverrides = {}, diff --git a/src/transactions/feed/SwapFeedItem.tsx b/src/transactions/feed/SwapFeedItem.tsx index eed17c6a2aa..c18c977c6e4 100644 --- a/src/transactions/feed/SwapFeedItem.tsx +++ b/src/transactions/feed/SwapFeedItem.tsx @@ -9,6 +9,8 @@ import TokenDisplay from 'src/components/TokenDisplay' import Touchable from 'src/components/Touchable' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' +import { getFeatureGate } from 'src/statsig' +import { StatsigFeatureGates } from 'src/statsig/types' import colors from 'src/styles/colors' import fontStyles from 'src/styles/fonts' import variables from 'src/styles/variables' @@ -29,7 +31,9 @@ function SwapFeedItem({ exchange }: Props) { navigate(Screens.TransactionDetailsScreen, { transaction: exchange }) ValoraAnalytics.track(HomeEvents.transaction_feed_item_select) } - const hideBalance = useSelector(hideHomeBalancesSelector) + const hideBalance = getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) + ? useSelector(hideHomeBalancesSelector) + : false return ( diff --git a/src/transactions/feed/TransferFeedItem.test.tsx b/src/transactions/feed/TransferFeedItem.test.tsx index 919798878c1..48fc82ccbdd 100644 --- a/src/transactions/feed/TransferFeedItem.test.tsx +++ b/src/transactions/feed/TransferFeedItem.test.tsx @@ -9,6 +9,7 @@ import FiatConnectQuote from 'src/fiatExchanges/quotes/FiatConnectQuote' import { CICOFlow } from 'src/fiatExchanges/utils' import { LocalCurrencyCode } from 'src/localCurrency/consts' import { RootState } from 'src/redux/reducers' +import { getFeatureGate } from 'src/statsig' import TransferFeedItem from 'src/transactions/feed/TransferFeedItem' import { Fee, @@ -41,6 +42,8 @@ const MOCK_CONTACT = { address: MOCK_ADDRESS, } +jest.mock('src/statsig') + jest.mock('src/web3/networkConfig', () => { const originalModule = jest.requireActual('src/web3/networkConfig') return { @@ -57,6 +60,8 @@ jest.mock('src/web3/networkConfig', () => { } }) +jest.mocked(getFeatureGate).mockReturnValue(true) + describe('TransferFeedItem', () => { function renderScreen({ storeOverrides = {}, diff --git a/src/transactions/feed/TransferFeedItem.tsx b/src/transactions/feed/TransferFeedItem.tsx index a33854fda75..d7eea6abf51 100644 --- a/src/transactions/feed/TransferFeedItem.tsx +++ b/src/transactions/feed/TransferFeedItem.tsx @@ -9,6 +9,8 @@ import TokenDisplay from 'src/components/TokenDisplay' import Touchable from 'src/components/Touchable' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' +import { getFeatureGate } from 'src/statsig' +import { StatsigFeatureGates } from 'src/statsig/types' import colors from 'src/styles/colors' import fontStyles from 'src/styles/fonts' import variables from 'src/styles/variables' @@ -38,7 +40,9 @@ function TransferFeedItem({ transfer }: Props) { const colorStyle = new BigNumber(amount.value).isPositive() ? { color: colors.greenUI } : {} - const hideBalance = useSelector(hideHomeBalancesSelector) + const hideBalance = getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) + ? useSelector(hideHomeBalancesSelector) + : false return ( From 36bd0bc915b3f9ba9c8a959faf23dc4e48a8fae3 Mon Sep 17 00:00:00 2001 From: Finnian Jacobson-Schulte <140328381+finnian0826@users.noreply.github.com> Date: Fri, 3 Nov 2023 09:02:35 -0600 Subject: [PATCH 2/5] fix hook calls --- src/transactions/feed/SwapFeedItem.tsx | 4 +++- src/transactions/feed/TransferFeedItem.tsx | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/transactions/feed/SwapFeedItem.tsx b/src/transactions/feed/SwapFeedItem.tsx index c18c977c6e4..e5a1792bf3b 100644 --- a/src/transactions/feed/SwapFeedItem.tsx +++ b/src/transactions/feed/SwapFeedItem.tsx @@ -31,8 +31,10 @@ function SwapFeedItem({ exchange }: Props) { navigate(Screens.TransactionDetailsScreen, { transaction: exchange }) ValoraAnalytics.track(HomeEvents.transaction_feed_item_select) } + + const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) const hideBalance = getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) - ? useSelector(hideHomeBalancesSelector) + ? hideBalanceSelectorReturn : false return ( diff --git a/src/transactions/feed/TransferFeedItem.tsx b/src/transactions/feed/TransferFeedItem.tsx index d7eea6abf51..ec878867a22 100644 --- a/src/transactions/feed/TransferFeedItem.tsx +++ b/src/transactions/feed/TransferFeedItem.tsx @@ -40,8 +40,9 @@ function TransferFeedItem({ transfer }: Props) { const colorStyle = new BigNumber(amount.value).isPositive() ? { color: colors.greenUI } : {} + const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) const hideBalance = getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) - ? useSelector(hideHomeBalancesSelector) + ? hideBalanceSelectorReturn : false return ( From a9e27d1c871eb7f2bd4c050c311d7364d8fcdfac Mon Sep 17 00:00:00 2001 From: Finnian Jacobson-Schulte <140328381+finnian0826@users.noreply.github.com> Date: Mon, 6 Nov 2023 12:15:12 -0700 Subject: [PATCH 3/5] add tests, fix alignmnet --- src/components/TokenBalance.test.tsx | 42 ++++++++++ src/components/TokenBalance.tsx | 77 ++++++++++--------- src/transactions/feed/SwapFeedItem.test.tsx | 27 ++++++- src/transactions/feed/SwapFeedItem.tsx | 5 +- .../feed/TransferFeedItem.test.tsx | 15 +++- src/transactions/feed/TransferFeedItem.tsx | 5 +- 6 files changed, 125 insertions(+), 46 deletions(-) diff --git a/src/components/TokenBalance.test.tsx b/src/components/TokenBalance.test.tsx index 7baded406a6..409009461ab 100644 --- a/src/components/TokenBalance.test.tsx +++ b/src/components/TokenBalance.test.tsx @@ -681,6 +681,48 @@ describe('FiatExchangeTokenBalance and HomeTokenBalance', () => { expect(tree.getByTestId('EyeIcon')).toBeTruthy() }) + it('renders correctly when feature flag is off, hideBalance is false', async () => { + jest + .mocked(getFeatureGate) + .mockImplementation( + (featureGate) => + featureGate !== StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN && + featureGate !== StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE + ) + const store = createMockStore(defaultStore) + + const tree = render( + + + + ) + + expect(getElementText(tree.getByTestId('TotalTokenBalance'))).toEqual('$8.41') + expect(tree.queryByTestId('EyeIcon')).toBeFalsy() + expect(tree.queryByTestId('HiddenEyeIcon')).toBeFalsy() + }) + + it('renders correctly when feature flag is off, hideBalance is true', async () => { + jest + .mocked(getFeatureGate) + .mockImplementation( + (featureGate) => + featureGate !== StatsigFeatureGates.SHOW_ASSET_DETAILS_SCREEN && + featureGate !== StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE + ) + const store = createMockStore({ ...defaultStore, app: { hideHomeBalances: true } }) + + const tree = render( + + + + ) + + expect(getElementText(tree.getByTestId('TotalTokenBalance'))).toEqual('$8.41') + expect(tree.queryByTestId('EyeIcon')).toBeFalsy() + expect(tree.queryByTestId('HiddenEyeIcon')).toBeFalsy() + }) + it('tracks analytics event when eye icon is pressed', async () => { const store = createMockStore(defaultStore) diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx index 42129c456b0..03f219abed3 100644 --- a/src/components/TokenBalance.tsx +++ b/src/components/TokenBalance.tsx @@ -55,11 +55,11 @@ import { getSupportedNetworkIdsForTokenBalances } from 'src/tokens/utils' function TokenBalance({ style = styles.balance, singleTokenViewEnabled = true, - hideBalance = false, + showHideHomeBalancesToggle = false, }: { style?: StyleProp singleTokenViewEnabled?: boolean - hideBalance?: boolean + showHideHomeBalancesToggle?: boolean }) { const supportedNetworkIds = getSupportedNetworkIdsForTokenBalances() const tokensWithUsdValue = useTokensWithUsdValue(supportedNetworkIds) @@ -77,6 +77,9 @@ function TokenBalance({ : undefined const { decimalSeparator } = getNumberFormatSettings() + const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) + const hideBalance = showHideHomeBalancesToggle && hideBalanceSelectorReturn + const balanceDisplay = hideBalance ? `XX${decimalSeparator}XX` : totalBalanceLocal?.toFormat(2) if (tokenFetchError || tokenFetchLoading || tokensAreStale) { @@ -97,10 +100,13 @@ function TokenBalance({ - - {!hideBalance && localCurrencySymbol} - {balanceDisplay ?? '-'} - + + + {!hideBalance && localCurrencySymbol} + {balanceDisplay ?? '-'} + + {showHideHomeBalancesToggle && } + {!hideBalance && ( {formatValueToDisplay(tokenBalance)} {tokensWithUsdValue[0].symbol} @@ -111,14 +117,30 @@ function TokenBalance({ ) } else { return ( - - {!hideBalance && localCurrencySymbol} - {balanceDisplay ?? new BigNumber(0).toFormat(2)} - + + + {!hideBalance && localCurrencySymbol} + {balanceDisplay ?? new BigNumber(0).toFormat(2)} + + {showHideHomeBalancesToggle && } + ) } } +function HideBalanceButton({ hideBalance }: { hideBalance: boolean }) { + const dispatch = useDispatch() + const eyeIconOnPress = () => { + ValoraAnalytics.track(hideBalance ? HomeEvents.show_balances : HomeEvents.hide_balances) + dispatch(toggleHideHomeBalances()) + } + return ( + + {hideBalance ? : } + + ) +} + function useErrorMessageWithRefresh() { const { t } = useTranslation() @@ -218,7 +240,6 @@ export function AssetsTokenBalance({ showInfo }: { showInfo: boolean }) { export function HomeTokenBalance() { const { t } = useTranslation() - const dispatch = useDispatch() const totalBalance = useTotalTokenBalance() const tokenBalances = useTokensWithTokenBalance() @@ -242,17 +263,6 @@ export function HomeTokenBalance() { const [infoVisible, setInfoVisible] = useState(false) - const showHideHomeBalancesToggle = getFeatureGate( - StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE - ) - - const hideBalance = useSelector(hideHomeBalancesSelector) - - const eyeIconOnPress = () => { - ValoraAnalytics.track(hideBalance ? HomeEvents.show_balances : HomeEvents.hide_balances) - dispatch(toggleHideHomeBalances()) - } - return ( @@ -282,21 +292,16 @@ export function HomeTokenBalance() { )} - - - {showHideHomeBalancesToggle && ( - - {hideBalance ? : } - + + /> ) } diff --git a/src/transactions/feed/SwapFeedItem.test.tsx b/src/transactions/feed/SwapFeedItem.test.tsx index 8bb6c6e7760..c071b306846 100644 --- a/src/transactions/feed/SwapFeedItem.test.tsx +++ b/src/transactions/feed/SwapFeedItem.test.tsx @@ -38,6 +38,10 @@ jest.mock('src/web3/networkConfig', () => { jest.mocked(getFeatureGate).mockReturnValue(true) describe('SwapFeedItem', () => { + beforeEach(() => { + jest.clearAllMocks() + jest.mocked(getFeatureGate).mockReturnValue(true) + }) function renderScreen({ storeOverrides = {}, inAmount, @@ -122,7 +126,28 @@ describe('SwapFeedItem', () => { expect(getElementText(getByTestId('SwapFeedItem/outgoingAmount'))).toEqual('-17.54 cEUR') }) - it('hides balance when flag is set', async () => { + it('still shows balances when feature gate false, hide balances root state true', async () => { + jest.mocked(getFeatureGate).mockReturnValue(false) + const { getByTestId } = renderScreen({ + inAmount: { + tokenId: mockCeurTokenId, + value: 2.93, + }, + outAmount: { + tokenId: mockCusdTokenId, + value: 2.87, + }, + }) + + expect(getElementText(getByTestId('SwapFeedItem/title'))).toEqual('swapScreen.title') + expect(getElementText(getByTestId('SwapFeedItem/subtitle'))).toEqual( + 'feedItemSwapPath, {"token1":"cUSD","token2":"cEUR"}' + ) + expect(getElementText(getByTestId('SwapFeedItem/incomingAmount'))).toEqual('+2.93 cEUR') + expect(getElementText(getByTestId('SwapFeedItem/outgoingAmount'))).toEqual('-2.87 cUSD') + }) + + it('hides balance when feature gate true, root state hide home balances flag is set', async () => { const { queryByTestId } = renderScreen({ inAmount: { tokenId: mockCeurTokenId, diff --git a/src/transactions/feed/SwapFeedItem.tsx b/src/transactions/feed/SwapFeedItem.tsx index e5a1792bf3b..a1bb4e79bdc 100644 --- a/src/transactions/feed/SwapFeedItem.tsx +++ b/src/transactions/feed/SwapFeedItem.tsx @@ -33,9 +33,8 @@ function SwapFeedItem({ exchange }: Props) { } const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) - const hideBalance = getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) - ? hideBalanceSelectorReturn - : false + const hideBalance = + getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) && hideBalanceSelectorReturn return ( diff --git a/src/transactions/feed/TransferFeedItem.test.tsx b/src/transactions/feed/TransferFeedItem.test.tsx index 48fc82ccbdd..5db8d548223 100644 --- a/src/transactions/feed/TransferFeedItem.test.tsx +++ b/src/transactions/feed/TransferFeedItem.test.tsx @@ -60,9 +60,11 @@ jest.mock('src/web3/networkConfig', () => { } }) -jest.mocked(getFeatureGate).mockReturnValue(true) - describe('TransferFeedItem', () => { + beforeEach(() => { + jest.clearAllMocks() + jest.mocked(getFeatureGate).mockReturnValue(true) + }) function renderScreen({ storeOverrides = {}, type = TokenTransactionTypeV2.Sent, @@ -623,7 +625,14 @@ describe('TransferFeedItem', () => { }) }) - it('hides balance when flag is set', async () => { + it('shows balance when feature gate false, root state hide home balances flag is set', async () => { + jest.mocked(getFeatureGate).mockReturnValue(false) + const { getByTestId } = renderScreen({ storeOverrides: { app: { hideHomeBalances: true } } }) + expect(getByTestId('TransferFeedItem/amount')).toBeTruthy() + expect(getByTestId('TransferFeedItem/tokenAmount')).toBeTruthy() + }) + + it('hides balance when feature gate true, root state hide home balances flag is set', async () => { const { queryByTestId } = renderScreen({ storeOverrides: { app: { hideHomeBalances: true } } }) expect(queryByTestId('TransferFeedItem/amount')).toBeNull() expect(queryByTestId('TransferFeedItem/tokenAmount')).toBeNull() diff --git a/src/transactions/feed/TransferFeedItem.tsx b/src/transactions/feed/TransferFeedItem.tsx index ec878867a22..423b28f9a68 100644 --- a/src/transactions/feed/TransferFeedItem.tsx +++ b/src/transactions/feed/TransferFeedItem.tsx @@ -41,9 +41,8 @@ function TransferFeedItem({ transfer }: Props) { const colorStyle = new BigNumber(amount.value).isPositive() ? { color: colors.greenUI } : {} const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) - const hideBalance = getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) - ? hideBalanceSelectorReturn - : false + const hideBalance = + getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) && hideBalanceSelectorReturn return ( From 523980b0a5ad34212f0e79afa75ce04b73df22ef Mon Sep 17 00:00:00 2001 From: Finnian Jacobson-Schulte <140328381+finnian0826@users.noreply.github.com> Date: Mon, 6 Nov 2023 15:46:40 -0700 Subject: [PATCH 4/5] feedback --- src/components/TokenBalance.tsx | 40 +++++++++------------ src/transactions/feed/SwapFeedItem.test.tsx | 2 -- src/transactions/feed/SwapFeedItem.tsx | 4 +-- src/transactions/feed/TransferFeedItem.tsx | 4 +-- 4 files changed, 21 insertions(+), 29 deletions(-) diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx index 03f219abed3..ba319cb8ec8 100644 --- a/src/components/TokenBalance.tsx +++ b/src/components/TokenBalance.tsx @@ -77,19 +77,25 @@ function TokenBalance({ : undefined const { decimalSeparator } = getNumberFormatSettings() - const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) - const hideBalance = showHideHomeBalancesToggle && hideBalanceSelectorReturn - + const hideHomeBalanceState = useSelector(hideHomeBalancesSelector) + const hideBalance = showHideHomeBalancesToggle && hideHomeBalanceState const balanceDisplay = hideBalance ? `XX${decimalSeparator}XX` : totalBalanceLocal?.toFormat(2) - if (tokenFetchError || tokenFetchLoading || tokensAreStale) { - // Show '-' if we haven't fetched the tokens yet or prices are stale + const RenderTotalTokenBalance = ({ balanceDisplay }: { balanceDisplay: string }) => { return ( - - {localCurrencySymbol} - {'-'} - + + + {!hideBalance && localCurrencySymbol} + {balanceDisplay} + + {showHideHomeBalancesToggle && } + ) + } + + if (tokenFetchError || tokenFetchLoading || tokensAreStale) { + // Show '-' if we haven't fetched the tokens yet or prices are stale + return } else if ( singleTokenViewEnabled && tokensWithUsdValue.length === 1 && @@ -100,13 +106,7 @@ function TokenBalance({ - - - {!hideBalance && localCurrencySymbol} - {balanceDisplay ?? '-'} - - {showHideHomeBalancesToggle && } - + {!hideBalance && ( {formatValueToDisplay(tokenBalance)} {tokensWithUsdValue[0].symbol} @@ -117,13 +117,7 @@ function TokenBalance({ ) } else { return ( - - - {!hideBalance && localCurrencySymbol} - {balanceDisplay ?? new BigNumber(0).toFormat(2)} - - {showHideHomeBalancesToggle && } - + ) } } diff --git a/src/transactions/feed/SwapFeedItem.test.tsx b/src/transactions/feed/SwapFeedItem.test.tsx index c071b306846..9468d1c30fe 100644 --- a/src/transactions/feed/SwapFeedItem.test.tsx +++ b/src/transactions/feed/SwapFeedItem.test.tsx @@ -35,8 +35,6 @@ jest.mock('src/web3/networkConfig', () => { } }) -jest.mocked(getFeatureGate).mockReturnValue(true) - describe('SwapFeedItem', () => { beforeEach(() => { jest.clearAllMocks() diff --git a/src/transactions/feed/SwapFeedItem.tsx b/src/transactions/feed/SwapFeedItem.tsx index a1bb4e79bdc..9a5a1bba36c 100644 --- a/src/transactions/feed/SwapFeedItem.tsx +++ b/src/transactions/feed/SwapFeedItem.tsx @@ -32,9 +32,9 @@ function SwapFeedItem({ exchange }: Props) { ValoraAnalytics.track(HomeEvents.transaction_feed_item_select) } - const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) + const hideHomeBalanceState = useSelector(hideHomeBalancesSelector) const hideBalance = - getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) && hideBalanceSelectorReturn + getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) && hideHomeBalanceState return ( diff --git a/src/transactions/feed/TransferFeedItem.tsx b/src/transactions/feed/TransferFeedItem.tsx index 423b28f9a68..83a51dda1e9 100644 --- a/src/transactions/feed/TransferFeedItem.tsx +++ b/src/transactions/feed/TransferFeedItem.tsx @@ -40,9 +40,9 @@ function TransferFeedItem({ transfer }: Props) { const colorStyle = new BigNumber(amount.value).isPositive() ? { color: colors.greenUI } : {} - const hideBalanceSelectorReturn = useSelector(hideHomeBalancesSelector) + const hideHomeBalanceState = useSelector(hideHomeBalancesSelector) const hideBalance = - getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) && hideBalanceSelectorReturn + getFeatureGate(StatsigFeatureGates.SHOW_HIDE_HOME_BALANCES_TOGGLE) && hideHomeBalanceState return ( From 559eadb486870ebe31a41d8a85f6c82b8974deb2 Mon Sep 17 00:00:00 2001 From: Finnian Jacobson-Schulte <140328381+finnian0826@users.noreply.github.com> Date: Tue, 7 Nov 2023 16:06:17 -0700 Subject: [PATCH 5/5] feedback --- src/components/TokenBalance.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx index ba319cb8ec8..db97e24ec4c 100644 --- a/src/components/TokenBalance.tsx +++ b/src/components/TokenBalance.tsx @@ -81,7 +81,7 @@ function TokenBalance({ const hideBalance = showHideHomeBalancesToggle && hideHomeBalanceState const balanceDisplay = hideBalance ? `XX${decimalSeparator}XX` : totalBalanceLocal?.toFormat(2) - const RenderTotalTokenBalance = ({ balanceDisplay }: { balanceDisplay: string }) => { + const TotalTokenBalance = ({ balanceDisplay }: { balanceDisplay: string }) => { return ( @@ -95,7 +95,7 @@ function TokenBalance({ if (tokenFetchError || tokenFetchLoading || tokensAreStale) { // Show '-' if we haven't fetched the tokens yet or prices are stale - return + return } else if ( singleTokenViewEnabled && tokensWithUsdValue.length === 1 && @@ -106,7 +106,7 @@ function TokenBalance({ - + {!hideBalance && ( {formatValueToDisplay(tokenBalance)} {tokensWithUsdValue[0].symbol} @@ -116,9 +116,7 @@ function TokenBalance({ ) } else { - return ( - - ) + return } }