diff --git a/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts b/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts index 9bf03d0adbc..d4d99c40475 100644 --- a/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts +++ b/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts @@ -3,7 +3,6 @@ import { StyleSheet, ViewStyle } from 'react-native'; // External dependencies. import { Theme } from '../../../../util/theme/models'; -import { fontStyles } from '../../../../styles/common'; // Internal dependencies. import { PickerAccountStyleSheetVars } from './PickerAccount.types'; @@ -24,34 +23,39 @@ const styleSheet = (params: { const { colors } = theme; const { style, cellAccountContainerStyle } = vars; return StyleSheet.create({ - base: Object.assign({} as ViewStyle, style) as ViewStyle, + base: { + ...(style as ViewStyle), + flexDirection: 'row', + padding: 0, + borderWidth: 0, + }, accountAvatar: { - marginRight: 16, + marginRight: 8, }, accountAddressLabel: { color: colors.text.alternative, + textAlign: 'center', }, cellAccount: { - flex: 1, flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', ...cellAccountContainerStyle, }, accountNameLabel: { + alignItems: 'center', + justifyContent: 'center', + }, + accountNameAvatar: { flexDirection: 'row', alignItems: 'center', - justifyContent: 'flex-start', }, - accountNameLabelText: { - marginTop: 4, - marginHorizontal: 5, - paddingHorizontal: 5, - ...fontStyles.bold, - color: colors.text.alternative, - borderWidth: 1, - borderRadius: 10, - borderColor: colors.border.default, + pickerAccountContainer: { justifyContent: 'center', - textAlign: 'center', + alignItems: 'center', + }, + dropDownIcon: { + marginLeft: 8, }, }); }; diff --git a/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx b/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx index 4093e7da1ae..0bec81483f0 100644 --- a/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx +++ b/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx @@ -9,6 +9,7 @@ import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar'; import Text, { TextVariant } from '../../Texts/Text'; import { formatAddress } from '../../../../util/address'; import { useStyles } from '../../../hooks'; +import { IconSize } from '../../Icons/Icon'; // Internal dependencies. import PickerBase from '../PickerBase'; @@ -25,7 +26,6 @@ const PickerAccount: React.ForwardRefRenderFunction< accountAddress, accountName, accountAvatarType, - accountTypeLabel, showAddress = true, cellAccountContainerStyle = {}, ...props @@ -40,33 +40,46 @@ const PickerAccount: React.ForwardRefRenderFunction< const renderCellAccount = () => ( - - - {accountName} - - {showAddress && ( - - {shortenedAddress} + + + + {accountName} - )} + ); return ( - - {renderCellAccount()} - + + + {renderCellAccount()} + + {showAddress && ( + + {shortenedAddress} + + )} + ); }; diff --git a/app/component-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap b/app/component-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap index 0afdb8affeb..a078072c4da 100644 --- a/app/component-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap +++ b/app/component-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap @@ -1,223 +1,242 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PickerAccount should render correctly 1`] = ` - - - - - - - + + + + + + + + + + - - + } + testID="account-label" + > + Orangefox.eth + + - - - Orangefox.eth - - - 0x2990...a21a - - - - + + - + > + 0x2990...a21a + + `; diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx index 948721d6ac4..65666c2e125 100644 --- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx +++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx @@ -45,6 +45,20 @@ describe('PickerNetwork', () => { ).toBeNull(); }); + it('shows network name when hideNetworkName is false', () => { + const { queryByTestId } = render( + , + ); + + expect( + queryByTestId(WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT), + ).not.toBeNull(); + }); + it('calls onPress when pressed', () => { const onPress = jest.fn(); const { getByTestId } = render( diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx index 1b4642ba967..29c48def333 100644 --- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx +++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx @@ -34,6 +34,8 @@ const PickerNetwork = ({ size={AvatarSize.Xs} name={label} imageSource={imageSource} + testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_PICKER} + accessibilityLabel={label} /> {hideNetworkName ? null : ( diff --git a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap index f59fab74933..c2965c38bb0 100644 --- a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap +++ b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap @@ -19,6 +19,7 @@ exports[`PickerNetwork renders correctly 1`] = ` style={null} > { const sdkInit = useRef(); const [onboarded, setOnboarded] = useState(false); + trace({ + name: TraceName.NavInit, + parentContext: getUIStartupSpan(), + op: TraceOperation.NavInit, + }); + const triggerSetCurrentRoute = (route) => { dispatch(setCurrentRoute(route)); if (route === 'Wallet' || route === 'BrowserView') { @@ -599,9 +610,10 @@ const App = (props) => { setOnboarded(!!existingUser); try { if (existingUser) { + // This should only be called if the auth type is not password, which is not the case so consider removing it await trace( { - name: TraceName.BiometricAuthentication, + name: TraceName.AppStartBiometricAuthentication, op: TraceOperation.BiometricAuthentication, }, async () => { @@ -624,6 +636,7 @@ const App = (props) => { }), ); } + await Authentication.lockApp({ reset: false }); trackErrorAsAnalytics( 'App: Max Attempts Reached', @@ -632,9 +645,15 @@ const App = (props) => { ); } }; - appTriggeredAuth().catch((error) => { - Logger.error(error, 'App: Error in appTriggeredAuth'); - }); + appTriggeredAuth() + .catch((error) => { + Logger.error(error, 'App: Error in appTriggeredAuth'); + }) + .finally(() => { + endTrace({ name: TraceName.NavInit }); + + endTrace({ name: TraceName.UIStartup }); + }); }, [navigator, queueOfHandleDeeplinkFunctions]); const handleDeeplink = useCallback(({ error, params, uri }) => { @@ -684,8 +703,6 @@ const App = (props) => { }); if (!prevNavigator.current) { - // Setup navigator with Sentry instrumentation - routingInstrumentation.registerNavigationContainer(navigator); // Subscribe to incoming deeplinks // Branch.io documentation: https://help.branch.io/developers-hub/docs/react-native branch.subscribe((opts) => { @@ -970,7 +987,7 @@ const App = (props) => { { }; }); +const mockNavigate = jest.fn(); + +jest.mock('@react-navigation/native', () => ({ + ...jest.requireActual('@react-navigation/native'), + useNavigation: () => ({ + navigate: mockNavigate, + }), +})); + const initialState = { engine: { backgroundState: { @@ -73,8 +83,9 @@ const initialState = { const onSelectAccount = jest.fn(); const onRemoveImportedAccount = jest.fn(); - -const AccountSelectorListUseAccounts = () => { +const AccountSelectorListUseAccounts: React.FC = ({ + privacyMode = false, +}) => { const { accounts, ensByAccountAddress } = useAccounts(); return ( { accounts={accounts} ensByAccountAddress={ensByAccountAddress} isRemoveAccountEnabled + privacyMode={privacyMode} /> ); }; @@ -109,7 +121,7 @@ const renderComponent = ( // eslint-disable-next-line @typescript-eslint/no-explicit-any state: any = {}, AccountSelectorListTest = AccountSelectorListUseAccounts, -) => renderWithProvider(, { state }); +) => renderWithProvider(, { state }); describe('AccountSelectorList', () => { beforeEach(() => { @@ -229,4 +241,46 @@ describe('AccountSelectorList', () => { expect(snapTag).toBeDefined(); }); }); + it('Text is not hidden when privacy mode is off', async () => { + const state = { + ...initialState, + privacyMode: false, + }; + + const { queryByTestId } = renderComponent(state); + + await waitFor(() => { + const businessAccountItem = queryByTestId( + `${AccountListViewSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${BUSINESS_ACCOUNT}`, + ); + + expect(within(businessAccountItem).getByText(regex.eth(1))).toBeDefined(); + expect( + within(businessAccountItem).getByText(regex.usd(3200)), + ).toBeDefined(); + + expect(within(businessAccountItem).queryByText('••••••')).toBeNull(); + }); + }); + it('Text is hidden when privacy mode is on', async () => { + const state = { + ...initialState, + privacyMode: true, + }; + + const { queryByTestId } = renderComponent(state); + + await waitFor(() => { + const businessAccountItem = queryByTestId( + `${AccountListViewSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${BUSINESS_ACCOUNT}`, + ); + + expect(within(businessAccountItem).queryByText(regex.eth(1))).toBeNull(); + expect( + within(businessAccountItem).queryByText(regex.usd(3200)), + ).toBeNull(); + + expect(within(businessAccountItem).getByText('••••••')).toBeDefined(); + }); + }); }); diff --git a/app/components/UI/AccountSelectorList/AccountSelectorList.tsx b/app/components/UI/AccountSelectorList/AccountSelectorList.tsx index 27405b354f7..30b8241836f 100644 --- a/app/components/UI/AccountSelectorList/AccountSelectorList.tsx +++ b/app/components/UI/AccountSelectorList/AccountSelectorList.tsx @@ -1,17 +1,19 @@ // Third party dependencies. import React, { useCallback, useRef } from 'react'; -import { Alert, ListRenderItem, View } from 'react-native'; +import { Alert, ListRenderItem, View, ViewStyle } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { useSelector } from 'react-redux'; +import { useNavigation } from '@react-navigation/native'; import { KeyringTypes } from '@metamask/keyring-controller'; import type { Hex } from '@metamask/utils'; // External dependencies. +import { selectInternalAccounts } from '../../../selectors/accountsController'; import Cell, { CellVariant, } from '../../../component-library/components/Cells/Cell'; +import { InternalAccount } from '@metamask/keyring-api'; import { useStyles } from '../../../component-library/hooks'; -import { selectPrivacyMode } from '../../../selectors/preferencesController'; import { TextColor } from '../../../component-library/components/Texts/Text'; import SensitiveText, { SensitiveTextLength, @@ -29,11 +31,13 @@ import { AvatarVariant } from '../../../component-library/components/Avatars/Ava import { Account, Assets } from '../../hooks/useAccounts'; import UntypedEngine from '../../../core/Engine'; import { removeAccountsFromPermissions } from '../../../core/Permissions'; +import Routes from '../../../constants/navigation/Routes'; // Internal dependencies. import { AccountSelectorListProps } from './AccountSelectorList.types'; import styleSheet from './AccountSelectorList.styles'; import { AccountListViewSelectorsIDs } from '../../../../e2e/selectors/AccountListView.selectors'; +import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors'; const AccountSelectorList = ({ onSelectAccount, @@ -47,8 +51,10 @@ const AccountSelectorList = ({ isSelectionDisabled, isRemoveAccountEnabled = false, isAutoScrollEnabled = true, + privacyMode = false, ...props }: AccountSelectorListProps) => { + const { navigate } = useNavigation(); // TODO: Replace "any" with type // eslint-disable-next-line @typescript-eslint/no-explicit-any const Engine = UntypedEngine as any; @@ -64,7 +70,8 @@ const AccountSelectorList = ({ ? AvatarAccountType.Blockies : AvatarAccountType.JazzIcon, ); - const privacyMode = useSelector(selectPrivacyMode); + + const internalAccounts = useSelector(selectInternalAccounts); const getKeyExtractor = ({ address }: Account) => address; const renderAccountBalances = useCallback( @@ -170,6 +177,23 @@ const AccountSelectorList = ({ ], ); + const onNavigateToAccountActions = useCallback( + (selectedAccount: string) => { + const account = internalAccounts.find( + (accountData: InternalAccount) => + accountData.address.toLowerCase() === selectedAccount.toLowerCase(), + ); + + if (!account) return; + + navigate(Routes.MODAL.ROOT_MODAL_FLOW, { + screen: Routes.SHEET.ACCOUNT_ACTIONS, + params: { selectedAccount: account }, + }); + }, + [navigate, internalAccounts], + ); + const renderAccountItem: ListRenderItem = useCallback( ({ item: { name, address, assets, type, isSelected, balanceError }, @@ -183,7 +207,7 @@ const AccountSelectorList = ({ const isDisabled = !!balanceError || isLoading || isSelectionDisabled; const cellVariant = isMultiSelect ? CellVariant.MultiSelect - : CellVariant.Select; + : CellVariant.SelectWithMenu; let isSelectedAccount = isSelected; if (selectedAddresses) { const lowercasedSelectedAddresses = selectedAddresses.map( @@ -194,12 +218,16 @@ const AccountSelectorList = ({ ); } - const cellStyle = { + const cellStyle: ViewStyle = { opacity: isLoading ? 0.5 : 1, }; + if (!isMultiSelect) { + cellStyle.alignItems = 'center'; + } return ( { onLongPress({ address, @@ -212,6 +240,7 @@ const AccountSelectorList = ({ isSelected={isSelectedAccount} title={accountName} secondaryText={shortAddress} + showSecondaryTextIcon={false} tertiaryText={balanceError} onPress={() => onSelectAccount?.(address, isSelectedAccount)} avatarProps={{ @@ -222,6 +251,10 @@ const AccountSelectorList = ({ tagLabel={tagLabel} disabled={isDisabled} style={cellStyle} + buttonProps={{ + onButtonClick: () => onNavigateToAccountActions(address), + buttonTestId: `${WalletViewSelectorsIDs.ACCOUNT_ACTIONS}-${index}`, + }} > {renderRightAccessory?.(address, accountName) || (assets && renderAccountBalances(assets, address))} @@ -229,6 +262,7 @@ const AccountSelectorList = ({ ); }, [ + onNavigateToAccountActions, accountAvatarType, onSelectAccount, renderAccountBalances, diff --git a/app/components/UI/AccountSelectorList/AccountSelectorList.types.ts b/app/components/UI/AccountSelectorList/AccountSelectorList.types.ts index 4059c710cc9..a2f651c718e 100644 --- a/app/components/UI/AccountSelectorList/AccountSelectorList.types.ts +++ b/app/components/UI/AccountSelectorList/AccountSelectorList.types.ts @@ -56,4 +56,8 @@ export interface AccountSelectorListProps * Optional boolean to enable removing accounts. */ isRemoveAccountEnabled?: boolean; + /** + * Optional boolean to indicate if privacy mode is enabled. + */ + privacyMode?: boolean; } diff --git a/app/components/UI/AccountSelectorList/__snapshots__/AccountSelector.test.tsx.snap b/app/components/UI/AccountSelectorList/__snapshots__/AccountSelector.test.tsx.snap index 036a2be8d53..dd4954812d8 100644 --- a/app/components/UI/AccountSelectorList/__snapshots__/AccountSelector.test.tsx.snap +++ b/app/components/UI/AccountSelectorList/__snapshots__/AccountSelector.test.tsx.snap @@ -57,591 +57,772 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = ` onLayout={[Function]} style={null} > - - - - - - + - - - + propList={ + [ + "fill", + ] + } + width={32} + x={0} + y={0} + /> + + + + + - - - - Account 1 - - - 0xC495...D272 - - - - $3200.00 + Account 1 - - 1 ETH - + + 0xC495...D272 + + + + + + + $3200.00 + + + 1 ETH + + - + + + + - + testID="main-wallet-account-actions-0" + > + + - + - - - - - - + - - - + propList={ + [ + "fill", + ] + } + width={32} + x={0} + y={0} + /> + + + + + - - - - Account 2 - - - 0xd018...78E7 - - - - $6400.00 + Account 2 - - 2 ETH - + + 0xd018...78E7 + + + + + + + $6400.00 + + + 2 ETH + + + + + + + - + @@ -704,492 +885,672 @@ exports[`AccountSelectorList renders all accounts with right accessory 1`] = ` onLayout={[Function]} style={null} > - - - - - - + - - - - - - - + + + + + + + - Account 1 - - + Account 1 + + + + 0xC495...D272 + + + + - 0xC495...D272 - - - - - 0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272 - Account 1 + + 0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272 - Account 1 + + + + + + - + - - - - - - + - - - + propList={ + [ + "fill", + ] + } + width={32} + x={0} + y={0} + /> + + + + + - - - - Account 2 - - + Account 2 + + + + 0xd018...78E7 + + + + - 0xd018...78E7 - - - - - 0xd018538C87232FF95acbCe4870629b75640a78E7 - Account 2 + + 0xd018538C87232FF95acbCe4870629b75640a78E7 - Account 2 + + + + + + - + @@ -1252,591 +1613,772 @@ exports[`AccountSelectorList renders correctly 1`] = ` onLayout={[Function]} style={null} > - - - - - - + - - - + propList={ + [ + "fill", + ] + } + width={32} + x={0} + y={0} + /> + + + + + - - - - Account 1 - - - 0xC495...D272 - - - - $3200.00 + Account 1 - - 1 ETH - + + 0xC495...D272 + + + + + + + $3200.00 + + + 1 ETH + + - + + + + - + testID="main-wallet-account-actions-0" + > + + - + - - - - - - + - - - + propList={ + [ + "fill", + ] + } + width={32} + x={0} + y={0} + /> + + + + + - - - - Account 2 - - - 0xd018...78E7 - - - - $6400.00 + Account 2 - - 2 ETH - + + 0xd018...78E7 + + + + + + + $6400.00 + + + 2 ETH + + + + + + + - + @@ -1896,309 +2438,490 @@ exports[`AccountSelectorList should render all accounts but only the balance for onLayout={[Function]} style={null} > - - - - - - - Account 1 - - + style={ + { + "flex": 1, + } + } + /> + - $3200.00 + Account 1 - - 1 ETH - + + 0xC495...D272 + + + + + + + $3200.00 + + + 1 ETH + + - + + + + - + testID="main-wallet-account-actions-0" + > + + - + - - - - - - - Account 2 - - + + - 0xd018...78E7 - + + Account 2 + + + + 0xd018...78E7 + + + + + + + + - + diff --git a/app/components/UI/AddressCopy/AddressCopy.styles.ts b/app/components/UI/AddressCopy/AddressCopy.styles.ts index 089c48d5136..46d5ba9d066 100644 --- a/app/components/UI/AddressCopy/AddressCopy.styles.ts +++ b/app/components/UI/AddressCopy/AddressCopy.styles.ts @@ -1,26 +1,14 @@ import { StyleSheet } from 'react-native'; -// External dependencies. -import { Theme } from '../../../util/theme/models'; -const styleSheet = (params: { theme: Theme }) => { - const { theme } = params; - const { colors } = theme; - - return StyleSheet.create({ +const styleSheet = () => + StyleSheet.create({ address: { flexDirection: 'row', alignItems: 'center', }, copyButton: { - flexDirection: 'row', - alignItems: 'center', - backgroundColor: colors.primary.muted, - borderRadius: 20, - paddingHorizontal: 12, padding: 4, - marginLeft: 12, }, - icon: { marginLeft: 4 }, }); -}; + export default styleSheet; diff --git a/app/components/UI/AddressCopy/AddressCopy.tsx b/app/components/UI/AddressCopy/AddressCopy.tsx index d295c5f75ad..a99e46a4727 100644 --- a/app/components/UI/AddressCopy/AddressCopy.tsx +++ b/app/components/UI/AddressCopy/AddressCopy.tsx @@ -3,12 +3,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; // External dependencies -import Text, { - TextColor, - TextVariant, -} from '../../../component-library/components/Texts/Text'; import { TouchableOpacity } from 'react-native-gesture-handler'; -import { formatAddress } from '../../../util/address'; import Icon, { IconColor, IconName, @@ -25,12 +20,11 @@ import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletV // Internal dependencies import styleSheet from './AddressCopy.styles'; -import { AddressCopyProps } from './AddressCopy.types'; import { selectSelectedInternalAccount } from '../../../selectors/accountsController'; import { useMetrics } from '../../../components/hooks/useMetrics'; import { toChecksumHexAddress } from '@metamask/controller-utils'; -const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => { +const AddressCopy = () => { const { styles } = useStyles(styleSheet, {}); const dispatch = useDispatch(); @@ -69,28 +63,15 @@ const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => { }; return ( - - {strings('asset_overview.address')}: - - - {selectedInternalAccount - ? formatAddress(selectedInternalAccount.address, formatAddressType) - : null} - diff --git a/app/components/UI/AddressCopy/AddressCopy.types.ts b/app/components/UI/AddressCopy/AddressCopy.types.ts deleted file mode 100644 index 6efa05bbea0..00000000000 --- a/app/components/UI/AddressCopy/AddressCopy.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface AddressCopyProps { - formatAddressType?: 'short' | 'mid' | 'full'; -} diff --git a/app/components/UI/ConfirmAddAsset/ConfirmAddAsset.test.tsx b/app/components/UI/ConfirmAddAsset/ConfirmAddAsset.test.tsx index ed1a2f5fdc3..99054057d7e 100644 --- a/app/components/UI/ConfirmAddAsset/ConfirmAddAsset.test.tsx +++ b/app/components/UI/ConfirmAddAsset/ConfirmAddAsset.test.tsx @@ -44,6 +44,7 @@ jest.mock('../../../util/navigation/navUtils', () => ({ ticker: 'ETH', addTokenList: jest.fn(), }), + createNavigationDetails: jest.fn(), })); const mockUseBalanceInitialValue: Partial> = { @@ -101,14 +102,12 @@ describe('ConfirmAddAsset', () => { expect(getByText('USDT')).toBeTruthy(); expect(getByText('$27.02')).toBeTruthy(); }); - it('handles cancel button click', () => { const { getByText } = renderWithProvider(, { state: mockInitialState, }); const cancelButton = getByText('Cancel'); fireEvent.press(cancelButton); - expect(getByText('Are you sure you want to exit?')).toBeTruthy(); expect( getByText('Your search information will not be saved.'), diff --git a/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap b/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap index 4d89a952349..3aef46b9799 100644 --- a/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap +++ b/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap @@ -87,6 +87,7 @@ exports[`ManageNetworks should render correctly 1`] = ` style={null} > { @@ -95,7 +101,7 @@ const styles = StyleSheet.create({ disabled: { opacity: 0.3, }, - leftButtonContainer: { + rightElementContainer: { marginRight: 12, flexDirection: 'row', alignItems: 'flex-end', @@ -113,16 +119,11 @@ const styles = StyleSheet.create({ metamaskNameWrapper: { marginLeft: Device.isAndroid() ? 20 : 0, }, - fox: { - width: 24, - height: 24, + leftElementContainer: { marginLeft: 16, }, notificationsWrapper: { - position: 'relative', - flex: 1, - justifyContent: 'center', - alignItems: 'center', + marginHorizontal: 4, }, notificationsBadge: { width: 8, @@ -133,6 +134,9 @@ const styles = StyleSheet.create({ top: 2, right: 10, }, + addressCopyWrapper: { + marginHorizontal: 4, + }, }); const metamask_name = require('../../../images/metamask-name.png'); // eslint-disable-line @@ -903,12 +907,28 @@ export function getOfflineModalNavbar() { } /** - * Function that returns the navigation options - * for our wallet screen, + * Function that returns the navigation options for the wallet screen. * - * @returns {Object} - Corresponding navbar options containing headerTitle, headerTitle and headerTitle + * @param {Object} accountActionsRef - The ref object for the account actions + * @param {string} selectedAddress - The currently selected Ethereum address + * @param {string} accountName - The name of the currently selected account + * @param {string} accountAvatarType - The type of avatar for the currently selected account + * @param {string} networkName - The name of the current network + * @param {Object} networkImageSource - The image source for the network icon + * @param {Function} onPressTitle - Callback function when the title is pressed + * @param {Object} navigation - The navigation object + * @param {Object} themeColors - The theme colors object + * @param {boolean} isNotificationEnabled - Whether notifications are enabled + * @param {boolean | null} isProfileSyncingEnabled - Whether profile syncing is enabled + * @param {number} unreadNotificationCount - The number of unread notifications + * @param {number} readNotificationCount - The number of read notifications + * @returns {Object} An object containing the navbar options for the wallet screen */ export function getWalletNavbarOptions( + accountActionsRef, + selectedAddress, + accountName, + accountAvatarType, networkName, networkImageSource, onPressTitle, @@ -921,7 +941,7 @@ export function getWalletNavbarOptions( ) { const innerStyles = StyleSheet.create({ headerStyle: { - backgroundColor: themeColors.background.default, + backgroundColor: themeColors.background, shadowColor: importedColors.transparent, elevation: 0, }, @@ -1005,24 +1025,40 @@ export function getWalletNavbarOptions( return { headerTitle: () => ( + { + navigation.navigate(...createAccountSelectorNavDetails({})); + }} + accountTypeLabel={getLabelTextByAddress(selectedAddress) || undefined} + showAddress + cellAccountContainerStyle={styles.account} + testID={WalletViewSelectorsIDs.ACCOUNT_ICON} + /> + + ), + headerLeft: () => ( + ), - headerLeft: () => ( - - ), headerRight: () => ( - + + + + {isNotificationsFeatureEnabled() && ( diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap index 8099909473b..fa6b7d2bf5b 100644 --- a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap @@ -233,6 +233,7 @@ exports[`NetworkDetails renders correctly 1`] = ` style={null} > - + {isAlreadyConnected && isDisconnectAllShown && (