fix: add HOC

MetaMask · Feb 19, 2024 · b1be882 · b1be882
1 parent f3d2d8f
commit b1be882
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 52 deletions.
diff --git a/app/components/UI/Ramp/hooks/useIsOriginalNativeTokenSymbol.ts b/app/components/UI/Ramp/hooks/useIsOriginalNativeTokenSymbol.ts
@@ -17,7 +17,8 @@ function useIsOriginalNativeTokenSymbol(
   ticker: string | undefined,
   type: string,
 ): boolean {
-  const [isOriginalNativeSymbol, setIsOriginalNativeSymbol] = useState(false);
+  const [isOriginalNativeSymbol, setIsOriginalNativeSymbol] =
+    useState<boolean>(false);
 
   const useSafeChainsListValidation = useSelector(
     selectUseSafeChainsListValidation,

diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx
@@ -120,7 +120,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
     const providerConfig = selectProviderConfig(state);
     return getNetworkNameFromProviderConfig(providerConfig);
   });
-  const { type, rpcTarget } = useSelector(selectProviderConfig);
+  const { type, rpcUrl } = useSelector(selectProviderConfig);
   const chainId = useSelector(selectChainId);
   const ticker = useSelector(selectTicker);
   const currentCurrency = useSelector(selectCurrentCurrency);
@@ -157,7 +157,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
 
   const goToNetworkEdit = () => {
     navigation.navigate(Routes.ADD_NETWORK, {
-      network: rpcTarget,
+      network: rpcUrl,
     });
 
     setShowScamWarningModal(false);

diff --git a/app/components/UI/Tokens/styles.ts b/app/components/UI/Tokens/styles.ts
@@ -1,12 +1,9 @@
-import { StyleSheet, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { fontStyles } from '../../../styles/common';
-import { Theme } from 'app/util/theme/models';
+import { Colors } from 'app/util/theme/models';
 
-const createStyles = (params: { theme: Theme }) => {
-  const { theme } = params;
-  const { colors, typography } = theme;
-
-  return StyleSheet.create({
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
     wrapper: {
       backgroundColor: colors.background.default,
       flex: 1,
@@ -127,9 +124,9 @@ const createStyles = (params: { theme: Theme }) => {
     },
 
     textMoadlHeader: {
-      ...typography.sBodyMDBold,
+      ...fontStyles.bold,
       fontSize: 18,
-    } as TextStyle,
+    },
     editNetworkButton: {
       width: '100%',
     },
@@ -142,6 +139,5 @@ const createStyles = (params: { theme: Theme }) => {
       marginTop: 4,
     },
   });
-};
 
 export default createStyles;
diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js
@@ -66,9 +66,10 @@ import { regex } from '../../../../../../app/util/regex';
 import { NetworksViewSelectorsIDs } from '../../../../../../e2e/selectors/Settings/NetworksView.selectors';
 import { isSafeChainId, toHex } from '@metamask/controller-utils';
 import { selectUseSafeChainsListValidation } from '../../../../../../app/selectors/preferencesController';
-import axios from 'axios';
+import withIsOriginalNativeToken from './withIsOriginalNativeToken';
+import { compose } from 'redux';
 
-const createStyles = (colors, typography) =>
+const createStyles = (colors) =>
   StyleSheet.create({
     base: {
       paddingHorizontal: 16,
@@ -101,15 +102,15 @@ const createStyles = (colors, typography) =>
       color: colors.text.default,
     },
     inputWithError: {
-      ...typography.sBodyMD,
+      ...fontStyles.normal,
       borderColor: colors.error.default,
       borderRadius: 5,
       borderWidth: 1,
       padding: 10,
       color: colors.text.default,
     },
     inputWithFocus: {
-      ...typography.sBodyMD,
+      ...fontStyles.normal,
       borderColor: colors.primary.default,
       borderRadius: 5,
       borderWidth: 2,
@@ -152,7 +153,7 @@ const createStyles = (colors, typography) =>
       paddingVertical: 8,
       fontSize: 14,
       color: colors.text.default,
-      ...typography.sBodyMD,
+      ...fontStyles.normal,
     },
     buttonsWrapper: {
       marginVertical: 12,
@@ -225,8 +226,6 @@ const allNetworks = getAllNetworks();
 const allNetworksblockExplorerUrl = (networkName) =>
   `https://${networkName}.infura.io/v3/`;
 
-const CHAIN_ID_NETWORK_URL = 'https://chainid.network/chains.json';
-
 /**
  * Main view for app configurations
  */
@@ -262,9 +261,14 @@ class NetworkSettings extends PureComponent {
     providerConfig: PropTypes.object,
 
     /**
-     * Checks if network is valid
+     * Checks if toggle verification is enabled
      */
     useSafeChainsListValidation: PropTypes.bool,
+
+    /**
+     * Matched object from third provider
+     */
+    matchedChainNetwork: PropTypes.object,
   };
 
   state = {
@@ -331,7 +335,8 @@ class NetworkSettings extends PureComponent {
 
   componentDidMount = () => {
     this.updateNavBar();
-    const { route, networkConfigurations } = this.props;
+    const { route, networkConfigurations, matchedChainNetwork } = this.props;
+
     const isCustomMainnet = route.params?.isCustomMainnet;
     const networkTypeOrRpcUrl = route.params?.network;
     // if network is main, don't show popular network
@@ -383,15 +388,8 @@ class NetworkSettings extends PureComponent {
       this.setState({ addMode: true });
     }
 
-    axios.get(CHAIN_ID_NETWORK_URL).then(({ data: safeChainsList }) => {
-      const matchedChain = safeChainsList.find(
-        (network) => network.networkId === parseInt(chainId),
-      );
-      this.setState({
-        matchedChain,
-      });
-      this.validateSymbol(ticker);
-      this.validateName(nickname);
+    this.setState({
+      matchedChainNetwork,
     });
 
     setTimeout(() => {
@@ -705,20 +703,6 @@ class NetworkSettings extends PureComponent {
 
     this.setState({ warningChainId: undefined, validatedChainId: true });
   };
-  /**
-   * Validates if symbol exists
-   * @returns
-   */
-  validateSymbol = () => {
-    const { ticker } = this.state;
-    if (!ticker) {
-      return this.setState({
-        warningSymbol: strings('app_settings.symbol_required'),
-        validatedSymbol: true,
-      });
-    }
-    this.setState({ warningSymbol: undefined, validatedSymbol: true });
-  };
 
   /**
    * Validates that symbol match with the chainId, setting a warningSymbol if is invalid
@@ -1184,12 +1168,6 @@ class NetworkSettings extends PureComponent {
               </View>
             ) : null}
 
-            {warningSymbol ? (
-              <View style={styles.warningContainer}>
-                <Text style={styles.warningText}>{warningSymbol}</Text>
-              </View>
-            ) : null}
-
             <Text style={styles.label}>
               {strings('app_settings.network_block_explorer_label')}
             </Text>
@@ -1412,4 +1390,8 @@ const mapStateToProps = (state) => ({
   useSafeChainsListValidation: selectUseSafeChainsListValidation(state),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(NetworkSettings);
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withIsOriginalNativeToken,
+)(NetworkSettings);
+// export default connect(mapStateToProps, mapDispatchToProps)(NetworkSettings);
diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/withIsOriginalNativeToken.js b/app/components/Views/Settings/NetworksSettings/NetworkSettings/withIsOriginalNativeToken.js
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { selectChainId } from '../../../../../selectors/networkController';
+import axios from 'axios';
+
+const CHAIN_ID_NETWORK_URL = 'https://chainid.network/chains.json';
+
+const withIsOriginalNativeToken = (WrappedComponent) => {
+  // This is the functional component wrapper that can use hooks
+  const WithIsOriginalNativeTokenWrapper = (props) => {
+    // Use the useSelector hook to access Redux state
+    const chainId = useSelector(selectChainId);
+
+    const [matchedChainNetwork, setMatchedChainNetwork] = useState(null);
+
+    useEffect(() => {
+      axios.get(CHAIN_ID_NETWORK_URL).then(({ data: safeChainsList }) => {
+        const matchedChainNetwork = safeChainsList.find(
+          (network) => network.networkId === parseInt(chainId),
+        );
+        setMatchedChainNetwork({
+          matchedChainNetwork,
+        });
+      });
+    }, [chainId]);
+
+    // Pass the value from useSelector as a prop to the WrappedComponent
+    return (
+      <WrappedComponent {...props} matchedChainNetwork={matchedChainNetwork} />
+    );
+  };
+
+  return WithIsOriginalNativeTokenWrapper;
+};
+
+export default withIsOriginalNativeToken;