diff --git a/app/components/UI/Navbar/__snapshots__/index.test.jsx.snap b/app/components/UI/Navbar/__snapshots__/index.test.jsx.snap
new file mode 100644
index 000000000000..0e1f24031b26
--- /dev/null
+++ b/app/components/UI/Navbar/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,423 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getPaymentRequestOptionsTitle should match snapshot with goBack function 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ๎จจ
+
+
+
+
+
+
+ Payment Request
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
index af4f97817f18..984ef9bf4399 100644
--- a/app/components/UI/Navbar/index.js
+++ b/app/components/UI/Navbar/index.js
@@ -355,9 +355,8 @@ export function getPaymentRequestOptionsTitle(
const goBack = route.params?.dispatch;
const innerStyles = StyleSheet.create({
headerTitleStyle: {
- fontSize: 20,
- color: themeColors.text.default,
- ...fontStyles.normal,
+ justifyContent: 'center',
+ alignItems: 'center',
},
headerIcon: {
color: themeColors.primary.default,
@@ -367,11 +366,18 @@ export function getPaymentRequestOptionsTitle(
shadowColor: importedColors.transparent,
elevation: 0,
},
+ headerCloseButton: {
+ marginRight: 16,
+ },
});
return {
- title,
- headerTitleStyle: innerStyles.headerTitleStyle,
+ headerTitleAlign: 'center',
+ headerTitle: () => (
+
+ {title}
+
+ ),
headerLeft: () =>
goBack ? (
// eslint-disable-next-line react/jsx-no-bind
@@ -390,17 +396,13 @@ export function getPaymentRequestOptionsTitle(
),
headerRight: () => (
- // eslint-disable-next-line react/jsx-no-bind
- navigation.pop()}
- style={styles.closeButton}
- >
-
-
+ style={innerStyles.headerCloseButton}
+ testID={RequestPaymentViewSelectors.BACK_BUTTON_ID}
+ />
),
headerStyle: innerStyles.headerStyle,
headerTintColor: themeColors.primary.default,
diff --git a/app/components/UI/Navbar/index.test.jsx b/app/components/UI/Navbar/index.test.jsx
index e2625d157e6b..7dd184c10517 100644
--- a/app/components/UI/Navbar/index.test.jsx
+++ b/app/components/UI/Navbar/index.test.jsx
@@ -1,10 +1,12 @@
/* eslint-disable react/prop-types */
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
+import { fireEvent } from '@testing-library/react-native';
import renderWithProvider from '../../../util/test/renderWithProvider';
import { backgroundState } from '../../../util/test/initial-root-state';
-import { getNetworkNavbarOptions } from '.';
-import { SolScope } from '@metamask/keyring-api';
+import { getNetworkNavbarOptions, getPaymentRequestOptionsTitle } from '.';
+import { mockTheme } from '../../../util/theme';
+import { RequestPaymentViewSelectors } from '../../../../e2e/selectors/Receive/RequestPaymentView.selectors';
describe('getNetworkNavbarOptions', () => {
const Stack = createStackNavigator();
@@ -15,7 +17,11 @@ describe('getNetworkNavbarOptions', () => {
const TestNavigator = ({ options }) => (
- options.header()} />
+ null}
+ options={options}
+ />
);
@@ -28,9 +34,10 @@ describe('getNetworkNavbarOptions', () => {
'Test Title',
false,
mockNavigation,
+ mockTheme.colors
);
- const { getByText, getByRole } = renderWithProvider(
+ const { getByText } = renderWithProvider(
,
{
state: {
@@ -46,3 +53,81 @@ describe('getNetworkNavbarOptions', () => {
expect(getByText('Test Title')).toBeTruthy();
});
});
+
+describe('getPaymentRequestOptionsTitle', () => {
+ const Stack = createStackNavigator();
+
+ const mockNavigation = {
+ pop: jest.fn(),
+ };
+
+ const TestNavigator = ({ options }) => (
+
+ null}
+ options={options}
+ />
+
+ );
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+
+ it('should match snapshot with goBack function', () => {
+ const mockGoBack = jest.fn();
+ const options = getPaymentRequestOptionsTitle(
+ 'Payment Request',
+ mockNavigation,
+ { params: { dispatch: mockGoBack } },
+ mockTheme.colors
+ );
+
+ const rendered = renderWithProvider(
+ ,
+ {
+ state: {
+ engine: {
+ backgroundState: {
+ ...backgroundState,
+ },
+ },
+ },
+ },
+ );
+
+ expect(rendered).toMatchSnapshot();
+ });
+
+ it('renders title and close button when no goBack provided', () => {
+ const options = getPaymentRequestOptionsTitle(
+ 'Payment Request',
+ mockNavigation,
+ { params: {} },
+ mockTheme.colors
+ );
+
+ const { getByText, getByTestId } = renderWithProvider(
+ ,
+ {
+ state: {
+ engine: {
+ backgroundState: {
+ ...backgroundState,
+ },
+ },
+ },
+ },
+ );
+
+ // Check if title is rendered
+ expect(getByText('Payment Request')).toBeTruthy();
+
+ // Check if close button works
+ const closeButton = getByTestId(RequestPaymentViewSelectors.BACK_BUTTON_ID);
+ fireEvent.press(closeButton);
+ expect(mockNavigation.pop).toHaveBeenCalled();
+ });
+});
diff --git a/app/components/UI/PaymentRequest/__snapshots__/index.test.tsx.snap b/app/components/UI/PaymentRequest/__snapshots__/index.test.tsx.snap
index 4c0ab1f7c0d3..541dbc7ca132 100644
--- a/app/components/UI/PaymentRequest/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/PaymentRequest/__snapshots__/index.test.tsx.snap
@@ -9,6 +9,85 @@ exports[`PaymentRequest renders correctly 1`] = `
}
}
>
+
+
+
+
+
+
+
+
+
+
+
@@ -302,6 +307,18 @@ class PaymentRequest extends PureComponent {
* Object that represents the current route info like params passed to it
*/
route: PropTypes.object,
+ /**
+ * Metrics injected by withMetricsAwareness HOC
+ */
+ metrics: PropTypes.object,
+ /**
+ * Network configurations
+ */
+ networkConfigurations: PropTypes.object,
+ /**
+ * Network image source
+ */
+ networkImageSource: PropTypes.string,
};
amountInput = React.createRef();
@@ -868,13 +885,37 @@ class PaymentRequest extends PureComponent {
);
};
+ handleNetworkPickerPress = () => {
+ this.props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+ screen: Routes.SHEET.NETWORK_SELECTOR,
+ });
+ this.props.metrics.trackEvent(
+ this.props.metrics
+ .createEventBuilder(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED)
+ .addProperties({
+ chain_id: getDecimalChainId(this.props.chainId),
+ })
+ .build(),
+ );
+ };
+
render() {
const { mode } = this.state;
const colors = this.context.colors || mockTheme.colors;
const styles = createStyles(colors);
+ const networkName =
+ this.props.networkConfigurations?.[this.props.chainId]?.name;
+ const networkImageSource = this.props.networkImageSource;
return (
+
+
+
({
ticker: selectEvmTicker(state),
chainId: selectChainId(state),
tokenList: selectTokenListArray(state),
+ networkConfigurations: selectNetworkConfigurations(state),
+ networkImageSource: selectNetworkImageSource(state),
});
-export default connect(mapStateToProps)(PaymentRequest);
+export default withMetricsAwareness(connect(mapStateToProps)(PaymentRequest));
diff --git a/app/components/UI/PaymentRequest/index.test.tsx b/app/components/UI/PaymentRequest/index.test.tsx
index 3eb9798cc25f..42907c592a44 100644
--- a/app/components/UI/PaymentRequest/index.test.tsx
+++ b/app/components/UI/PaymentRequest/index.test.tsx
@@ -11,6 +11,8 @@ import configureMockStore from 'redux-mock-store';
import { ThemeContext, mockTheme } from '../../../util/theme';
import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../util/test/accountsControllerTestUtils';
import { SolScope } from '@metamask/keyring-api';
+import Routes from '../../../constants/navigation/Routes';
+import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
jest.mock('react', () => ({
...jest.requireActual('react'),
@@ -131,6 +133,7 @@ const renderComponent = (props = {}) =>
@@ -202,4 +205,38 @@ describe('PaymentRequest', () => {
expect(mockSetShowError).toHaveBeenCalledWith(true);
expect(queryByText('Invalid request, please try again')).toBeTruthy();
});
+
+ describe('handleNetworkPickerPress', () => {
+ it('should navigate to network selector modal', () => {
+ const mockMetrics = {
+ trackEvent: jest.fn(),
+ createEventBuilder: jest.fn(() => ({
+ addProperties: jest.fn(() => ({
+ build: jest.fn(() => 'builtEvent'),
+ })),
+ })),
+ };
+
+ const { getByTestId } = renderComponent({
+ metrics: mockMetrics,
+ chainId: '0x1',
+ networkImageSource: 'test-network-image.png',
+ });
+
+ const networkPicker = getByTestId(
+ WalletViewSelectorsIDs.NAVBAR_NETWORK_PICKER,
+ );
+
+ act(() => {
+ fireEvent.press(networkPicker);
+ });
+
+ expect(mockNavigation.navigate).toHaveBeenCalledWith(
+ Routes.MODAL.ROOT_MODAL_FLOW,
+ {
+ screen: Routes.SHEET.NETWORK_SELECTOR,
+ },
+ );
+ });
+ });
});