From 87d76355367beb7d75b97146a50d2884d31b8fb3 Mon Sep 17 00:00:00 2001 From: Sylva Elendu Date: Mon, 11 Jul 2022 19:43:16 +0100 Subject: [PATCH] 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 | 6 ++-- .../NetworksSettings/NetworkSettings/index.js | 35 +++++++++++++++---- app/constants/{storage.js => storage.ts} | 2 ++ app/constants/test-ids.js | 2 ++ app/util/hideKeyFromUrl.test.ts | 15 ++++++++ app/util/hideKeyFromUrl.ts | 4 +++ app/util/sanitizeUrl.tsx | 3 -- 7 files changed, 56 insertions(+), 11 deletions(-) rename app/constants/{storage.js => storage.ts} (97%) create mode 100644 app/util/hideKeyFromUrl.test.ts create mode 100644 app/util/hideKeyFromUrl.ts delete mode 100644 app/util/sanitizeUrl.tsx diff --git a/app/components/UI/NetworkModal/index.tsx b/app/components/UI/NetworkModal/index.tsx index 479b6779104..5919711c5cd 100644 --- a/app/components/UI/NetworkModal/index.tsx +++ b/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) => { {strings('networks.network_rpc_url')} - {rpcUrl} + {formattedRpcUrl || rpcUrl} diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js index 3951de9a3ec..11173dc936d 100644 --- a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js +++ b/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 ( - + {!network ? ( - {strings('app_settings.network_rpc_url_label')} @@ -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 }); diff --git a/app/constants/storage.js b/app/constants/storage.ts similarity index 97% rename from app/constants/storage.js rename to app/constants/storage.ts index d736667d555..10d1dd3b2bf 100644 --- a/app/constants/storage.js +++ b/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'; diff --git a/app/constants/test-ids.js b/app/constants/test-ids.js index 304a4aafa6e..23698a68b02 100644 --- a/app/constants/test-ids.js +++ b/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'; diff --git a/app/util/hideKeyFromUrl.test.ts b/app/util/hideKeyFromUrl.test.ts new file mode 100644 index 00000000000..75bac38afdd --- /dev/null +++ b/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); + }); +}); diff --git a/app/util/hideKeyFromUrl.ts b/app/util/hideKeyFromUrl.ts new file mode 100644 index 00000000000..7a196758986 --- /dev/null +++ b/app/util/hideKeyFromUrl.ts @@ -0,0 +1,4 @@ +const hideKeyFromUrl = (url: string | undefined) => + url?.substring(0, url.lastIndexOf('/')); + +export default hideKeyFromUrl; diff --git a/app/util/sanitizeUrl.tsx b/app/util/sanitizeUrl.tsx deleted file mode 100644 index f0e828a350a..00000000000 --- a/app/util/sanitizeUrl.tsx +++ /dev/null @@ -1,3 +0,0 @@ -const sanitizeUrl = (url: string) => url.replace(/\/$/, ''); - -export default sanitizeUrl;