From 82d7f873cbadb1e3307f174e4b66206906248711 Mon Sep 17 00:00:00 2001 From: Salim TOUBAL Date: Tue, 7 Jan 2025 13:21:47 +0100 Subject: [PATCH 01/12] fix: fix add network form when addMode is true (#12833) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** fix the add network form when addMode is true ## **Related issues** Fixes: #12836 ## **Manual testing steps** 1. Go to settings 2. Go to networks 3. Go to add networks then custom networls ## **Screenshots/Recordings** ### **Before** Screenshot 2025-01-02 at 23 40 52 ### **After** Screenshot 2025-01-02 at 23 41 43 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../NetworksSettings/NetworkSettings/index.js | 68 ++++++++++--------- .../NetworkSettings/index.test.tsx | 27 ++++++++ 2 files changed, 63 insertions(+), 32 deletions(-) diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js index f937c9130ac..757e41ff5e7 100644 --- a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js +++ b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js @@ -541,7 +541,7 @@ export class NetworkSettings extends PureComponent { editable = false; blockExplorerUrl = networkConfigurations?.[chainId]?.blockExplorerUrls[ - networkConfigurations?.[chainId]?.defaultBlockExplorerUrlIndex + networkConfigurations?.[chainId]?.defaultBlockExplorerUrlIndex ]; rpcUrl = networkConfigurations?.[chainId]?.rpcEndpoints[ @@ -563,13 +563,13 @@ export class NetworkSettings extends PureComponent { ({ rpcEndpoints, defaultRpcEndpointIndex }) => rpcEndpoints[defaultRpcEndpointIndex].url === networkTypeOrRpcUrl || rpcEndpoints[defaultRpcEndpointIndex].networkClientId === - networkTypeOrRpcUrl, + networkTypeOrRpcUrl, ); nickname = networkConfiguration?.name; chainId = networkConfiguration?.chainId; blockExplorerUrl = networkConfiguration?.blockExplorerUrls[ - networkConfiguration?.defaultBlockExplorerUrlIndex + networkConfiguration?.defaultBlockExplorerUrlIndex ]; ticker = networkConfiguration?.nativeCurrency; editable = true; @@ -854,8 +854,8 @@ export class NetworkSettings extends PureComponent { networkConfig, existingNetwork.chainId === chainId ? { - replacementSelectedRpcEndpointIndex: indexRpc, - } + replacementSelectedRpcEndpointIndex: indexRpc, + } : undefined, ); } else { @@ -867,8 +867,8 @@ export class NetworkSettings extends PureComponent { isCustomMainnet ? navigation.navigate('OptinMetrics') : shouldNetworkSwitchPopToWallet - ? navigation.navigate('WalletView') - : navigation.goBack(); + ? navigation.navigate('WalletView') + : navigation.goBack(); }; /** @@ -1534,7 +1534,7 @@ export class NetworkSettings extends PureComponent { const { networkClientId } = networkConfigurations?.rpcEndpoints?.[ - networkConfigurations.defaultRpcEndpointIndex + networkConfigurations.defaultRpcEndpointIndex ] ?? {}; NetworkController.setActiveNetwork(networkClientId); @@ -1950,15 +1950,15 @@ export class NetworkSettings extends PureComponent { // Conditionally include secondaryText only if rpcName exists {...(rpcName ? { - secondaryText: - hideKeyFromUrl(rpcUrl) ?? - hideKeyFromUrl( - networkConfigurations?.[chainId]?.rpcEndpoints?.[ - networkConfigurations?.[chainId] - ?.defaultRpcEndpointIndex - ]?.url, - ), - } + secondaryText: + hideKeyFromUrl(rpcUrl) ?? + hideKeyFromUrl( + networkConfigurations?.[chainId]?.rpcEndpoints?.[ + networkConfigurations?.[chainId] + ?.defaultRpcEndpointIndex + ]?.url, + ), + } : {})} isSelected={false} withAvatar={false} @@ -1993,17 +1993,17 @@ export class NetworkSettings extends PureComponent { {!isNetworkUiRedesignEnabled() ? warningRpcUrl && ( - - {warningRpcUrl} - - ) + + {warningRpcUrl} + + ) : null} @@ -2268,10 +2268,12 @@ export class NetworkSettings extends PureComponent { ) : null} {isNetworkUiRedesignEnabled() && - showMultiBlockExplorerAddModal.isVisible ? ( + showMultiBlockExplorerAddModal.isVisible ? ( 0 ? styles.sheet : styles.sheetSmall + blockExplorerUrls.length > 0 || addMode + ? styles.sheet + : styles.sheetSmall } onDismiss={this.closeBlockExplorerModal} shouldGoBack={false} @@ -2338,7 +2340,9 @@ export class NetworkSettings extends PureComponent { {isNetworkUiRedesignEnabled() && showMultiRpcAddModal.isVisible ? ( 0 ? styles.sheet : styles.sheetSmall} + style={ + rpcUrls.length > 0 || addMode ? styles.sheet : styles.sheetSmall + } onDismiss={this.closeRpcModal} shouldGoBack={false} > @@ -2478,7 +2482,7 @@ export class NetworkSettings extends PureComponent { > {(isNetworkUiRedesignEnabled() && !shouldShowPopularNetworks) || - networkTypeOrRpcUrl ? ( + networkTypeOrRpcUrl ? ( this.customNetwork() ) : ( { expect(wrapper.state('rpcUrls')[0].name).toBe('New RPC'); }); + it('adds add RPC URL through modal and update state when addMode is true', async () => { + wrapper.setState({ addMode: true }); + + const instance = wrapper.instance(); + + await instance.onRpcItemAdd('https://new-rpc-url.com', 'New RPC'); + + expect(wrapper.state('rpcUrls').length).toBe(1); + expect(wrapper.state('rpcUrls')[0].url).toBe('https://new-rpc-url.com'); + expect(wrapper.state('rpcUrls')[0].name).toBe('New RPC'); + }); + it('should correctly add Block Explorer URL through modal and update state', async () => { const instance = wrapper.instance(); @@ -828,6 +840,21 @@ describe('NetworkSettings', () => { ); }); + it('adds correctly add Block Explorer URL through modal and update state when addMode is true', async () => { + wrapper.setState({ addMode: true }); + + const instance = wrapper.instance(); + + // Open Block Explorer form modal and add a new URL + instance.openAddBlockExplorerForm(); + await instance.onBlockExplorerItemAdd('https://new-blockexplorer.com'); + + expect(wrapper.state('blockExplorerUrls').length).toBe(1); + expect(wrapper.state('blockExplorerUrls')[0]).toBe( + 'https://new-blockexplorer.com', + ); + }); + it('should not add an empty Block Explorer URL and should return early', async () => { const instance = wrapper.instance(); From edb523ad746123e4ac4303e73c222b1e1c23fa42 Mon Sep 17 00:00:00 2001 From: Matthew Grainger <46547583+Matt561@users.noreply.github.com> Date: Tue, 7 Jan 2025 10:40:48 -0500 Subject: [PATCH 02/12] fix: updated default button label text variant to bodyMDMedium (#12816) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Updated the `