Update url formats popular networks (#4644)

* update url format for popular network

* update url feedback

* update url in individual network screen

app/components/UI/NetworkModal/index.tsx

@@ -118,9 +118,11 @@ const NetworkModals = (props: NetworkProps) => {
       nickname,
       ticker,
       rpcUrl,
+      formattedRpcUrl,
       rpcPrefs: { blockExplorerUrl, imageUrl },
     },
   } = props;
+
   const [showDetails, setShowDetails] = React.useState(false);
   const [showInfo, setShowInfo] = React.useState(false);
   const [networkAdded, setNetworkAdded] = React.useState(false);
@@ -219,7 +221,7 @@ const NetworkModals = (props: NetworkProps) => {
             chainId={chainId}
             nickname={nickname}
             ticker={ticker}
-            rpcUrl={rpcUrl}
+            rpcUrl={formattedRpcUrl || rpcUrl}
             blockExplorerUrl={blockExplorerUrl}
           />
         ) : networkAdded ? (
@@ -280,7 +282,7 @@ const NetworkModals = (props: NetworkProps) => {
                 </Text>
                 <Text black>{strings('networks.network_rpc_url')}</Text>
                 <Text bold black style={styles.bottomSpace}>
-                  {rpcUrl}
+                  {formattedRpcUrl || rpcUrl}
                 </Text>
               </View>
             </View>

app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js

@@ -48,8 +48,11 @@ import {
   ADD_NETWORKS_ID,
   RPC_VIEW_CONTAINER_ID,
   ADD_CUSTOM_RPC_NETWORK_BUTTON_ID,
+  INPUT_NETWORK_NAME,
 } from '../../../../../constants/test-ids';
 import EmptyPopularList from './emptyList';
+import hideKeyFromUrl from '../../../../../util/hideKeyFromUrl';
+import { themeAppearanceLight } from '../../../../../constants/storage';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -705,11 +708,24 @@ class NetworkSettings extends PureComponent {
       inputWidth,
     } = this.state;
     const colors = this.context.colors || mockTheme.colors;
-    const themeAppearance = this.context.themeAppearance || 'light';
+    const themeAppearance =
+      this.context.themeAppearance || themeAppearanceLight;
     const styles = createStyles(colors);
 
+    const formatNetworkRpcUrl = (rpcUrl, chainId) => {
+      const isNetworkPrePopulated = PopularList.find(
+        (val) => val.rpcUrl === rpcUrl && val.chainId === chainId,
+      );
+      if (isNetworkPrePopulated !== undefined) {
+        if (isNetworkPrePopulated.warning) {
+          return null;
+        }
+        return hideKeyFromUrl(isNetworkPrePopulated.rpcUrl);
+      }
+    };
+
     return (
-      <SafeAreaView style={styles.wrapper} testID={'new-rpc-screen'}>
+      <SafeAreaView style={styles.wrapper} testID={RPC_VIEW_CONTAINER_ID}>
         <KeyboardAwareScrollView style={styles.informationCustomWrapper}>
           {!network ? (
             <WarningMessage
@@ -731,10 +747,9 @@ class NetworkSettings extends PureComponent {
               placeholder={strings('app_settings.network_name_placeholder')}
               placeholderTextColor={colors.text.muted}
               onSubmitEditing={this.jumpToRpcURL}
-              testID={'input-network-name'}
+              testID={INPUT_NETWORK_NAME}
               keyboardAppearance={themeAppearance}
             />
-
             <Text style={styles.label}>
               {strings('app_settings.network_rpc_url_label')}
             </Text>
@@ -743,7 +758,7 @@ class NetworkSettings extends PureComponent {
               style={[styles.input, inputWidth]}
               autoCapitalize={'none'}
               autoCorrect={false}
-              value={rpcUrl}
+              value={formatNetworkRpcUrl(rpcUrl, chainId) || rpcUrl}
               editable={editable}
               onChangeText={this.onRpcUrlChange}
               onBlur={this.validateRpcUrl}
@@ -874,7 +889,15 @@ class NetworkSettings extends PureComponent {
   };
 
   togglePopularNetwork = (network) =>
-    this.setState({ showPopularNetworkModal: true, popularNetwork: network });
+    this.setState({
+      showPopularNetworkModal: true,
+      popularNetwork: {
+        ...network,
+        formattedRpcUrl: network.warning
+          ? null
+          : hideKeyFromUrl(network.rpcUrl),
+      },
+    });
 
   onCancel = () => this.setState({ showPopularNetworkModal: false });
 

app/constants/storage.js → app/constants/storage.ts

@@ -44,3 +44,5 @@ export const WHATS_NEW_APP_VERSION_SEEN = `${prefix}WhatsNewAppVersionSeen`;
 export const REVIEW_EVENT_COUNT = 'reviewEventCount';
 
 export const REVIEW_SHOWN_TIME = 'reviewShownTime';
+
+export const themeAppearanceLight = 'light';

app/constants/test-ids.js

@@ -66,6 +66,8 @@ export const WHATS_NEW_MODAL_CONTAINER_ID = 'whats-new-modal-container';
 export const WHATS_NEW_MODAL_CLOSE_BUTTON_ID = 'whats-new-modal-close-button';
 export const WHATS_NEW_MODAL_GOT_IT_BUTTON_ID = 'whats-new-modal-got-it-button';
 
+export const INPUT_NETWORK_NAME = 'input-network-name';
+
 // Component library test ids
 export const FAVICON_AVATAR_IMAGE_ID = 'favicon-avatar-image';
 export const NETWORK_AVATAR_IMAGE_ID = 'network-avatar-image';

app/util/hideKeyFromUrl.test.ts

@@ -0,0 +1,15 @@
+import hideKeyFromUrl from './hideKeyFromUrl';
+
+describe('hideKeyFromUrl', () => {
+  it('should hide key from url', () => {
+    const urlString = 'https://www.example.com/v1/1234556';
+    const sanitizedUrl = hideKeyFromUrl(urlString);
+    expect(sanitizedUrl).toEqual('https://www.example.com/v1');
+  });
+
+  it('should do nothing when url is undefined', () => {
+    const urlString = undefined;
+    const sanitizedUrl = hideKeyFromUrl(urlString);
+    expect(sanitizedUrl).toEqual(undefined);
+  });
+});

app/util/hideKeyFromUrl.ts

@@ -0,0 +1,4 @@
+const hideKeyFromUrl = (url: string | undefined) =>
+  url?.substring(0, url.lastIndexOf('/'));
+
+export default hideKeyFromUrl;