encodes signature for saving, save sig api

components/forms/TransactionSigning.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { encode, decode } from "uint8-to-base64";
 import React from "react";
 import { SigningStargateClient } from "@cosmjs/stargate";
 
@@ -43,7 +44,6 @@ export default class TransactionSigning extends React.Component {
     try {
       await window.keplr.enable("cosmoshub");
       const walletAccount = await window.keplr.getKey("cosmoshub");
-      console.log(walletAccount);
       this.setState({ walletAccount });
     } catch (e) {
       console.log("enable err: ", e);
@@ -68,11 +68,20 @@ export default class TransactionSigning extends React.Component {
         this.props.tx.memo,
         signerData
       );
-      // save body bytes to the tx
-      // save/create the signature in the db
-      console.log(bodyBytes, signatures);
+
+      console.log(bodyBytes, signatures[0]);
+      const signature = {
+        bodyBytes,
+        signature: encode(signatures[0]),
+        address: this.state.walletAccount.bech32Address,
+      };
+      const res = await axios.post(
+        `/api/transaction/${this.props.transactionID}/signature`,
+        signature
+      );
+      console.log(decode(res.data.signature));
     } catch (error) {
-      console.log(error);
+      console.log("Error creating signature:", error);
     }
   };
 

db-schema.graphql

@@ -13,18 +13,15 @@ type SourceAddress {
 type Transaction {
   signatures: [Signature] @relation
   dataJSON: String
-  bodyBytes: String
 }
 
 type Signature {
   transaction: Transaction! @relation
-  dataJSON: String!
+  bodyBytes: String!
+  signature: String!
+  address: String!
 }
 
 type Query {
   getMultisig(address: String!): Multisig
 }
-
-type Mutation {
-  setTransactionBody(address: String!): Multisig
-}

lib/graphqlHelpers.js

@@ -90,10 +90,13 @@ const findTransactionByID = async (id) => {
       query: `
         query {
           findTransactionByID(id: "${id}") {
+            _id
             dataJSON
             signatures {
               data {
-                dataJSON
+                address
+                signature
+                bodyBytes
               }
             }
           }
@@ -106,7 +109,8 @@ const findTransactionByID = async (id) => {
 /**
  * Creates signature record in faunadb
  *
- * @param {object} transaction The base transaction
+ * @param {object} signature an object with bodyBytes (string) and signature set (Uint8 Array)
+ * @param {string} transactionId id of the transaction to relate the signature with
  * @return Returns async function that makes a request to the faunadb graphql endpoint
  */
 const createSignature = async (signature, transactionId) => {
@@ -117,9 +121,14 @@ const createSignature = async (signature, transactionId) => {
         mutation {
           createSignature(data: {
             transaction: {connect: ${transactionId}}, 
-            dataJSON: 
+            bodyBytes: "${signature.bodyBytes}",
+            signature: "${signature.signature}",
+            address: "${signature.address}" 
           }) {
             _id
+            address
+            signature
+            address
           }
         }
       `,
@@ -127,4 +136,10 @@ const createSignature = async (signature, transactionId) => {
   });
 };
 
-export { createMultisig, getMultisig, createTransaction, findTransactionByID };
+export {
+  createMultisig,
+  getMultisig,
+  createTransaction,
+  findTransactionByID,
+  createSignature,
+};

package.json

@@ -6,10 +6,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "@cosmjs/amino": "^0.25.0-alpha.1",
     "@cosmjs/launchpad": "^0.25.0-alpha.1",
     "@cosmjs/proto-signing": "^0.25.0-alpha.1",
     "@cosmjs/stargate": "^0.25.0-alpha.1",
-    "@cosmjs/amino": "^0.25.0-alpha.1",
     "axios": "^0.21.1",
     "chalk": "^4.1.0",
     "encoding": "^0.1.13",
@@ -17,6 +17,7 @@
     "next": "^10.0.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "uint8-to-base64": "^0.2.0",
     "uuid": "^8.3.0"
   }
 }

pages/api/transaction/[transactionID]/signature.js

@@ -1,17 +1,16 @@
-import { createTransaction } from "../../../../lib/graphqlHelpers";
+import { createSignature } from "../../../../lib/graphqlHelpers";
 
 export default async function (req, res) {
   return new Promise(async (resolve) => {
     switch (req.method) {
       case "POST":
         try {
+          const { transactionID } = req.query;
           const data = req.body;
-          console.log("Function `createTransaction` invoked", data);
-          const saveRes = await createTransaction(data.dataJSON);
+          console.log("Function `createSignature` invoked", data);
+          const saveRes = await createSignature(data, transactionID);
           console.log("success", saveRes.data);
-          res
-            .status(200)
-            .send({ transactionID: saveRes.data.data.createTransaction._id });
+          res.status(200).send(saveRes.data.data.createSignature);
           return resolve();
         } catch (err) {
           console.log(err);

pages/multi/[address]/transaction/[transactionID].js

@@ -25,11 +25,11 @@ export async function getServerSideProps(context) {
     console.log(err);
   }
   return {
-    props: { transactionJSON, accountOnChain, holdings },
+    props: { transactionJSON, accountOnChain, holdings, transactionID },
   };
 }
 
-const transactionPage = ({ transactionJSON }) => {
+const transactionPage = ({ transactionJSON, transactionID }) => {
   const txInfo = (transactionJSON && JSON.parse(transactionJSON)) || null;
   console.log(txInfo);
   return (
@@ -39,7 +39,7 @@ const transactionPage = ({ transactionJSON }) => {
           <h1>In Progress Transaction</h1>
         </StackableContainer>
         <TransactionInfo tx={txInfo} />
-        <TransactionSigning tx={txInfo} />
+        <TransactionSigning tx={txInfo} transactionID={transactionID} />
       </StackableContainer>
 
       <style jsx>{``}</style>