adds toggle to use pubkey on creation

components/forms/MultisigForm.js

@@ -10,7 +10,7 @@ import StackableContainer from "../layout/StackableContainer";
 import ThresholdInput from "../inputs/ThresholdInput";
 
 let emptyPubKeyGroup = () => {
-  return { address: "", compressedPubkey: "", keyError: "" };
+  return { address: "", compressedPubkey: "", keyError: "", isPubkey: false };
 };
 
 class MultiSigForm extends React.Component {
@@ -70,25 +70,32 @@ class MultiSigForm extends React.Component {
   };
 
   handleKeyBlur = async (index, e) => {
-    let address = e.target.value;
-    if (address.length > 0) {
-      try {
-        // let compressedPubkey = e.target.value;
-        // if (compressedPubkey.length !== 44) {
-        //   throw new Error("Invalid Secp256k1 pubkey");
-        // }
-
-        const pubkey = await this.getPubkeyFromNode(address);
-        const { pubkeys } = this.state;
-        pubkeys[index].compressedPubkey = pubkey;
-        pubkeys[index].keyError = "";
-        this.setState({ pubkeys });
-      } catch (error) {
-        console.log(error);
-        const { pubkeys } = this.state;
-        pubkeys[index].keyError = error.message;
-        this.setState({ pubkeys });
+    try {
+      const { pubkeys } = this.state;
+      let pubkey;
+      // use pubkey
+      console.log(pubkeys[index]);
+      if (pubkeys[index].isPubkey) {
+        pubkey = e.target.value;
+        if (pubkey.length !== 44) {
+          throw new Error("Invalid Secp256k1 pubkey");
+        }
+      } else {
+        // use address to fetch pubkey
+        let address = e.target.value;
+        if (address.length > 0) {
+          pubkey = await this.getPubkeyFromNode(address);
+        }
       }
+
+      pubkeys[index].compressedPubkey = pubkey;
+      pubkeys[index].keyError = "";
+      this.setState({ pubkeys });
+    } catch (error) {
+      console.log(error);
+      const { pubkeys } = this.state;
+      pubkeys[index].keyError = error.message;
+      this.setState({ pubkeys });
     }
   };
 
@@ -109,6 +116,12 @@ class MultiSigForm extends React.Component {
     }
   };
 
+  togglePubkey = (index) => {
+    const { pubkeys } = this.state;
+    pubkeys[index].isPubkey = !pubkeys[index].isPubkey;
+    this.setState({ pubkeys });
+  };
+
   render() {
     return (
       <>
@@ -134,16 +147,34 @@ class MultiSigForm extends React.Component {
                     onChange={(e) => {
                       this.handleKeyGroupChange(index, e);
                     }}
-                    value={pubkeyGroup.address}
-                    label="Address"
-                    name="address"
+                    value={
+                      pubkeyGroup.isPubkey
+                        ? pubkeyGroup.compressedPubkey
+                        : pubkeyGroup.address
+                    }
+                    label={
+                      pubkeyGroup.isPubkey
+                        ? "Public Key (Secp256k1)"
+                        : "Address"
+                    }
+                    name={pubkeyGroup.isPubkey ? "compressedPubkey" : "address"}
                     width="100%"
-                    placeholder="cosmos1vqpjljwsynsn58dugz0w8ut7kun7t8ls2qkmsq"
+                    placeholder={
+                      pubkeyGroup.isPubkey
+                        ? "Akd/qKMWdZXyiMnSu6aFLpQEGDO0ijyal9mXUIcVaPNX"
+                        : "cosmos1vqpjljwsynsn58dugz0w8ut7kun7t8ls2qkmsq"
+                    }
                     error={pubkeyGroup.keyError}
                     onBlur={(e) => {
                       this.handleKeyBlur(index, e);
                     }}
                   />
+                  <button
+                    className="toggle-type"
+                    onClick={() => this.togglePubkey(index)}
+                  >
+                    Use {pubkeyGroup.isPubkey ? "Address" : "Public Key"}
+                  </button>
                 </div>
               </div>
             </StackableContainer>
@@ -172,6 +203,8 @@ class MultiSigForm extends React.Component {
         <style jsx>{`
           .key-inputs {
             display: flex;
+            flex-direction: column;
+            align-items: end;
             justify-content: space-between;
             max-width: 350px;
           }
@@ -201,6 +234,15 @@ class MultiSigForm extends React.Component {
           p:first-child {
             margin-top: 0;
           }
+          .toggle-type {
+            margin-top: 10px;
+            font-size: 12px;
+            font-style: italic;
+            border: none;
+            background: none;
+            color: white;
+            text-decoration: underline;
+          }
         `}</style>
       </>
     );