From 11f67e87675f9fd583b41ba03b995b9cec57e445 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Thu, 22 Sep 2022 23:40:39 +0200
Subject: [PATCH] Copy PasswordField code out of FromPrivateKey

---
 src/app/components/PasswordField/index.tsx    | 36 +++++++++++++++++++
 .../Features/FromPrivateKey/index.tsx         | 33 +----------------
 2 files changed, 37 insertions(+), 32 deletions(-)
 create mode 100644 src/app/components/PasswordField/index.tsx

diff --git a/src/app/components/PasswordField/index.tsx b/src/app/components/PasswordField/index.tsx
new file mode 100644
index 0000000000..9db509a040
--- /dev/null
+++ 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
index 3845941660..fe0af111e5 100644
--- 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