address code quality issues detected by sonar cloud; refactor update …

…allow list ref with use effect, and considering to remove it completely and use only the redux state; update ternary in styles to a function to increase readability
MetaMask · Jan 17, 2025 · 46aebe7 · 46aebe7
1 parent 7a5e07e
commit 46aebe7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/app/components/Views/BrowserTab/BrowserTab.tsx b/app/components/Views/BrowserTab/BrowserTab.tsx
@@ -171,7 +171,7 @@ export const BrowserTab: React.FC<BrowserTabProps> = ({
     sendNotification: (payload: unknown) => void;
     onDisconnect: () => void;
     onMessage: (message: Record<string, unknown>) => void;
-  }>(); // TODO: This type can be improved and updated with typing the BackgroundBridge.js file
+  }>();
   const fromHomepage = useRef(false);
   const wizardScrollAdjustedRef = useRef(false);
   const searchEngine = useSelector(selectSearchEngine);
@@ -266,7 +266,7 @@ export const BrowserTab: React.FC<BrowserTabProps> = ({
     }
     // Reset error state
     setError(false);
-    current && current.goBack();
+    current?.goBack?.();
   }, [backEnabled, toggleOptionsIfNeeded]);
 
   /**
@@ -277,7 +277,7 @@ export const BrowserTab: React.FC<BrowserTabProps> = ({
 
     toggleOptionsIfNeeded();
     const { current } = webviewRef;
-    current?.goForward && current.goForward();
+    current?.goForward?.();
   };
 
   /**
@@ -971,12 +971,9 @@ export const BrowserTab: React.FC<BrowserTabProps> = ({
     }
   }, [isIpfsGatewayEnabled]);
 
-  /**
-   * Allow list updates do not propigate through the useCallbacks this updates a ref that is use in the callbacks
-   */
-  const updateAllowList = () => {
+  useEffect(() => {
     allowList.current = whitelist;
-  };
+  }, [whitelist]);
 
   /**
    * Render the progress bar
@@ -1379,7 +1376,6 @@ export const BrowserTab: React.FC<BrowserTabProps> = ({
             onDismiss={onDismissAutocomplete}
           />
         </View>
-        {updateAllowList()}
         {isTabActive && (
           <PhishingModal
             blockedUrl={blockedUrl}

diff --git a/app/components/Views/BrowserTab/styles.ts b/app/components/Views/BrowserTab/styles.ts
@@ -3,8 +3,28 @@ import { Theme } from '@metamask/design-tokens';
 import { baseStyles, fontStyles } from '../../../styles/common';
 import Device from '../../../util/device';
 
-const styleSheet = ({ theme: { colors, shadows } }: { theme: Theme }) =>
-  StyleSheet.create({
+const styleSheet = ({ theme: { colors, shadows } }: { theme: Theme }) => {
+  const getUrlModalContentPaddingTop = () => {
+    if (Device.isAndroid()) {
+      return 10;
+    }
+    if (Device.isIphoneX()) {
+      return 50;
+    }
+    return 27;
+  };
+
+  const getUrlModalContentHeight = () => {
+    if (Device.isAndroid()) {
+      return 59;
+    }
+    if (Device.isIphoneX()) {
+      return 87;
+    }
+    return 65;
+  };
+
+  return StyleSheet.create({
     wrapper: {
       ...baseStyles.flexGrow,
       backgroundColor: colors.background.default,
@@ -92,9 +112,9 @@ const styleSheet = ({ theme: { colors, shadows } }: { theme: Theme }) =>
     },
     urlModalContent: {
       flexDirection: 'row',
-      paddingTop: Device.isAndroid() ? 10 : Device.isIphoneX() ? 50 : 27,
+      paddingTop: getUrlModalContentPaddingTop(),
       paddingHorizontal: 10,
-      height: Device.isAndroid() ? 59 : Device.isIphoneX() ? 87 : 65,
+      height: getUrlModalContentHeight(),
       backgroundColor: colors.background.default,
     },
     searchWrapper: {
@@ -132,5 +152,6 @@ const styleSheet = ({ theme: { colors, shadows } }: { theme: Theme }) =>
       borderRadius: 4,
     },
   });
+};
 
 export default styleSheet;