[5.3] BugFix missing close button in popular network (#4545)

* missing close button in popular network * refactor infoview * fixed misaligned close button in the infomodal * overlay for infomodal
MetaMask · Jun 22, 2022 · 987504b · 987504b
1 parent c1042e8
commit 987504b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 29 deletions.
diff --git a/app/components/UI/NetworkModal/index.tsx b/app/components/UI/NetworkModal/index.tsx
@@ -232,8 +232,6 @@ const NetworkModals = (props: NetworkProps) => {
                 isVisible
                 toggleModal={showToolTip}
                 message={strings('networks.provider')}
-                clickText={undefined}
-                clickPress={undefined}
               />
             )}
             <View style={styles.nameWrapper} testID={APPROVE_NETWORK_MODAL_ID}>

diff --git a/app/components/UI/Swaps/components/InfoModal.js b/app/components/UI/Swaps/components/InfoModal.js
@@ -50,8 +50,12 @@ const createStyles = (colors) =>
       paddingHorizontal: 20,
     },
     messageLimit: {
-      width: '90%',
-      marginVertical: 10,
+      width: '80%',
+    },
+    infoContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      width: '100%',
     },
   });
 
@@ -62,12 +66,41 @@ function InfoModal({
   toggleModal,
   message,
   propagateSwipe,
-  clickText,
-  clickPress,
+  urlText,
+  url,
 }) {
   const { colors } = useAppThemeFromContext() || mockTheme;
   const styles = createStyles(colors);
 
+  const CloseButton = () => (
+    <TouchableOpacity
+      onPress={toggleModal}
+      hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
+    >
+      <IonicIcon name="ios-close" style={styles.closeIcon} size={30} />
+    </TouchableOpacity>
+  );
+
+  const InfoView = () => {
+    if (!message) {
+      return <CloseButton />;
+    }
+
+    return (
+      <View style={styles.infoContainer}>
+        <Text style={styles.messageLimit}>
+          <Text>{message} </Text>
+          {urlText && (
+            <Text link onPress={url}>
+              {urlText}
+            </Text>
+          )}
+        </Text>
+        <CloseButton />
+      </View>
+    );
+  };
+
   return (
     <Modal
       isVisible={isVisible}
@@ -78,29 +111,12 @@ function InfoModal({
       style={styles.modal}
       propagateSwipe={propagateSwipe}
       backdropColor={colors.overlay.default}
-      backdropOpacity={clickText ? 0.2 : 1}
+      backdropOpacity={1}
     >
       <SafeAreaView style={styles.modalView}>
         <View style={styles.title}>
           {title && <Title>{title}</Title>}
-          {message && (
-            <Text style={styles.messageLimit}>
-              <Text>{message} </Text>
-              {clickText && (
-                <Text link onPress={clickPress}>
-                  {clickText}
-                </Text>
-              )}
-            </Text>
-          )}
-          {!message && (
-            <TouchableOpacity
-              onPress={toggleModal}
-              hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
-            >
-              <IonicIcon name="ios-close" style={styles.closeIcon} size={30} />
-            </TouchableOpacity>
-          )}
+          <InfoView />
         </View>
         {body && <View style={styles.body}>{body}</View>}
       </SafeAreaView>
@@ -114,8 +130,8 @@ InfoModal.propTypes = {
   toggleModal: PropTypes.func,
   propagateSwipe: PropTypes.bool,
   message: PropTypes.string,
-  clickText: PropTypes.string,
-  clickPress: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.func,
 };
 
 export default InfoModal;
diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js
@@ -895,8 +895,8 @@ class NetworkSettings extends PureComponent {
           <InfoModal
             isVisible={this.state.showWarningModal}
             message={strings('networks.network_warning')}
-            clickText={strings('networks.learn_more')}
-            clickPress={this.goToLearnMore}
+            urlText={strings('networks.learn_more')}
+            url={this.goToLearnMore}
             toggleModal={this.toggleWarningModal}
           />
         )}