[FIX] Enable clipboard for private credentials (MetaMask#5750)

* Fix clipboard bug in credentials view * Update styles
bumblebizzy · Feb 25, 2023 · 36f56e7 · 36f56e7
1 parent 8f3968c
commit 36f56e7
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 65 deletions.
diff --git a/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx b/app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
@@ -19,6 +19,10 @@ import ScrollableTabView, {
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import ActionView from '../../UI/ActionView';
 import ButtonReveal from '../../UI/ButtonReveal';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+} from '../../../component-library/components/Buttons/Button';
 import { getNavigationOptionsTitle } from '../../UI/Navbar';
 import InfoModal from '../../UI/Swaps/components/InfoModal';
 import { ScreenshotDeterrent } from '../../UI/ScreenshotDeterrent';
@@ -68,8 +72,7 @@ const RevealPrivateCredential = ({
   const [password, setPassword] = useState<string>('');
   const [warningIncorrectPassword, setWarningIncorrectPassword] =
     useState<string>('');
-  const [isAndroidSupportedVersion, setIsAndroidSupportedVersion] =
-    useState<boolean>(false);
+  const [clipboardEnabled, setClipboardEnabled] = useState<boolean>(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
   const selectedAddress = useSelector(
@@ -297,67 +300,69 @@ const RevealPrivateCredential = ({
     }
   };
 
-  const renderTabView = (privCredentialName: string) => {
+  useEffect(() => {
     Device.isAndroid() &&
       Device.getDeviceAPILevel().then((apiLevel) => {
         if (apiLevel < AppConstants.LEAST_SUPPORTED_ANDROID_API_LEVEL) {
-          setIsAndroidSupportedVersion(false);
+          setClipboardEnabled(false);
+          return;
         }
       });
 
-    return (
-      <ScrollableTabView
-        renderTabBar={() => renderTabBar()}
-        onChangeTab={(event: any) => onTabBarChange(event)}
+    setClipboardEnabled(true);
+  }, []);
+
+  const renderTabView = (privCredentialName: string) => (
+    <ScrollableTabView
+      renderTabBar={() => renderTabBar()}
+      onChangeTab={(event: any) => onTabBarChange(event)}
+    >
+      <View
+        tabLabel={strings(`reveal_credential.text`)}
+        style={styles.tabContent}
       >
-        <View
-          tabLabel={strings(`reveal_credential.text`)}
-          style={styles.tabContent}
-        >
-          <Text style={styles.boldText}>
-            {strings(`reveal_credential.${privCredentialName}`)}
-          </Text>
-          <View style={styles.seedPhraseView}>
-            <TextInput
-              value={clipboardPrivateCredential}
-              numberOfLines={3}
-              multiline
-              selectTextOnFocus
-              style={styles.seedPhrase}
-              editable={false}
-              testID={'private-credential-text'}
-              placeholderTextColor={colors.text.muted}
-              keyboardAppearance={themeAppearance}
+        <Text style={styles.boldText}>
+          {strings(`reveal_credential.${privCredentialName}`)}
+        </Text>
+        <View style={styles.seedPhraseView}>
+          <TextInput
+            value={clipboardPrivateCredential}
+            numberOfLines={3}
+            multiline
+            selectTextOnFocus
+            style={styles.seedPhrase}
+            editable={false}
+            testID={'private-credential-text'}
+            placeholderTextColor={colors.text.muted}
+            keyboardAppearance={themeAppearance}
+          />
+          {clipboardEnabled ? (
+            <Button
+              label={strings('reveal_credential.copy_to_clipboard')}
+              variant={ButtonVariants.Secondary}
+              size={ButtonSize.Sm}
+              onPress={() =>
+                copyPrivateCredentialToClipboard(privCredentialName)
+              }
+              testID={'private-credential-touchable'}
+              style={styles.clipboardButton}
             />
-            {isAndroidSupportedVersion && (
-              <TouchableOpacity
-                style={styles.privateCredentialAction}
-                onPress={() =>
-                  copyPrivateCredentialToClipboard(privCredentialName)
-                }
-                testID={'private-credential-touchable'}
-              >
-                <Text style={styles.blueText}>
-                  {strings('reveal_credential.copy_to_clipboard')}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
+          ) : null}
         </View>
-        <View
-          tabLabel={strings(`reveal_credential.qr_code`)}
-          style={styles.tabContent}
-        >
-          <View style={styles.qrCodeWrapper}>
-            <QRCode
-              value={clipboardPrivateCredential}
-              size={Dimensions.get('window').width - 176}
-            />
-          </View>
+      </View>
+      <View
+        tabLabel={strings(`reveal_credential.qr_code`)}
+        style={styles.tabContent}
+      >
+        <View style={styles.qrCodeWrapper}>
+          <QRCode
+            value={clipboardPrivateCredential}
+            size={Dimensions.get('window').width - 176}
+          />
         </View>
-      </ScrollableTabView>
-    );
-  };
+      </View>
+    </ScrollableTabView>
+  );
 
   const renderPasswordEntry = () => (
     <>

diff --git a/app/components/Views/RevealPrivateCredential/styles.ts b/app/components/Views/RevealPrivateCredential/styles.ts
@@ -21,25 +21,19 @@ export const createStyles = (colors: any) =>
       fontSize: 20,
       textAlign: 'center',
       color: colors.text.default,
-      borderRadius: 10,
-      borderWidth: 1,
-      borderColor: colors.border.default,
       ...fontStyles.normal,
     },
     seedPhraseView: {
       marginTop: 10,
       alignItems: 'center',
-    },
-    privateCredentialAction: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderColor: colors.primary.default,
+      borderRadius: 10,
       borderWidth: 1,
-      borderRadius: 20,
+      borderColor: colors.border.default,
+    },
+    clipboardButton: {
+      alignSelf: 'center',
       width: '90%',
-      paddingVertical: 10,
-      marginBottom: 15,
+      marginVertical: 5,
     },
     rowWrapper: {
       padding: 20,