Copy PasswordField code out of FromPrivateKey

oasisprotocol · Sep 22, 2022 · 11f67e8 · 11f67e8
1 parent e299b26
commit 11f67e8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 32 deletions.
diff --git a/src/app/components/PasswordField/index.tsx b/src/app/components/PasswordField/index.tsx
@@ -0,0 +1,36 @@
+export function PasswordField() {
+  return (
+    <FormField
+      htmlFor="privateKey"
+      error={privateKeyIsValid === false ? t('openWallet.privateKey.error', 'Invalid private key') : ''}
+      border
+      contentProps={{ border: privateKeyIsValid ? false : 'bottom' }}
+      round="small"
+      width="xlarge"
+    >
+      <Box direction="row" align="center">
+        <TextInput
+          id="privatekey"
+          data-testid="privatekey"
+          placeholder={t('openWallet.privateKey.enterPrivateKeyHere', 'Enter your private key here')}
+          value={privateKey}
+          onChange={onChange}
+          type={privateKeyIsVisible ? 'text' : 'password'}
+          plain
+        />
+        <Tip
+          content={
+            privateKeyIsVisible
+              ? t('openWallet.privateKey.hidePrivateKey', 'Hide private key')
+              : t('openWallet.privateKey.showPrivateKey', 'Show private key')
+          }
+        >
+          <Button
+            onClick={() => setPrivateKeyIsVisible(!privateKeyIsVisible)}
+            icon={privateKeyIsVisible ? <View /> : <Hide />}
+          />
+        </Tip>
+      </Box>
+    </FormField>
+  )
+}
diff --git a/src/app/pages/OpenWalletPage/Features/FromPrivateKey/index.tsx b/src/app/pages/OpenWalletPage/Features/FromPrivateKey/index.tsx
@@ -54,38 +54,7 @@ export function FromPrivateKey(props: Props) {
             {t('openWallet.privateKey.instruction', 'Enter your private key in Base64 format.')}
           </label>
         </Paragraph>
-        <FormField
-          htmlFor="privateKey"
-          error={privateKeyIsValid === false ? t('openWallet.privateKey.error', 'Invalid private key') : ''}
-          border
-          contentProps={{ border: privateKeyIsValid ? false : 'bottom' }}
-          round="small"
-          width="xlarge"
-        >
-          <Box direction="row" align="center">
-            <TextInput
-              id="privatekey"
-              data-testid="privatekey"
-              placeholder={t('openWallet.privateKey.enterPrivateKeyHere', 'Enter your private key here')}
-              value={privateKey}
-              onChange={onChange}
-              type={privateKeyIsVisible ? 'text' : 'password'}
-              plain
-            />
-            <Tip
-              content={
-                privateKeyIsVisible
-                  ? t('openWallet.privateKey.hidePrivateKey', 'Hide private key')
-                  : t('openWallet.privateKey.showPrivateKey', 'Show private key')
-              }
-            >
-              <Button
-                onClick={() => setPrivateKeyIsVisible(!privateKeyIsVisible)}
-                icon={privateKeyIsVisible ? <View /> : <Hide />}
-              />
-            </Tip>
-          </Box>
-        </FormField>
+        <PasswordField></PasswordField>
         <Box pad={{ vertical: 'medium' }}>
           <Box direction="row" justify="between" margin={{ top: 'medium' }}>
             <Button