From 9047d3c54d0adf6200f28f9edf00fc1e7b660783 Mon Sep 17 00:00:00 2001
From: klk1236 <klk@persistence.one>
Date: Mon, 11 Jul 2022 16:32:23 +0400
Subject: [PATCH 1/3] added delegation txn support

---
 .gitignore                               |   5 +-
 components/dataViews/TransactionInfo.tsx |  40 ++++--
 components/forms/DelegationForm.tsx      | 158 +++++++++++++++++++++++
 lib/displayHelpers.ts                    |  19 +++
 pages/multi/[address]/index.tsx          |  22 +++-
 5 files changed, 228 insertions(+), 16 deletions(-)
 create mode 100644 components/forms/DelegationForm.tsx

diff --git a/.gitignore b/.gitignore
index 5e489ce..c7fbfeb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,4 +21,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # Local Netlify folder
-.netlify
\ No newline at end of file
+.netlify
+
+# IDE folder
+.idea
diff --git a/components/dataViews/TransactionInfo.tsx b/components/dataViews/TransactionInfo.tsx
index 2abb112..482a53a 100644
--- a/components/dataViews/TransactionInfo.tsx
+++ b/components/dataViews/TransactionInfo.tsx
@@ -5,7 +5,7 @@ import { DbTransaction } from "../../types";
 import { useAppContext } from "../../context/AppContext";
 import HashView from "./HashView";
 import StackableContainer from "../layout/StackableContainer";
-import { printableCoins } from "../../lib/displayHelpers";
+import { printableCoins, printableCoin } from "../../lib/displayHelpers";
 
 interface Props {
   tx: DbTransaction;
@@ -16,19 +16,33 @@ const TransactionInfo = (props: Props) => {
   return (
     <StackableContainer lessPadding lessMargin>
       <ul className="meta-data">
-        {props.tx.msgs && (
-          <li>
-            <label>Amount:</label>
-            <div>{printableCoins(props.tx.msgs[0].value.amount, state.chain)}</div>
-          </li>
+        {props.tx.msgs && props.tx.msgs[0].typeUrl === "/cosmos.bank.v1beta1.MsgSend" && (
+          <>
+            <li>
+              <label>Amount:</label>
+              <div>{printableCoins(props.tx.msgs[0].value.amount, state.chain)}</div>
+            </li>
+            <li>
+              <label>To:</label>
+              <div title={props.tx.msgs[0].value.toAddress}>
+                <HashView hash={props.tx.msgs[0].value.toAddress} />
+              </div>
+            </li>
+          </>
         )}
-        {props.tx.msgs && (
-          <li>
-            <label>To:</label>
-            <div title={props.tx.msgs[0].value.toAddress}>
-              <HashView hash={props.tx.msgs[0].value.toAddress} />
-            </div>
-          </li>
+        {props.tx.msgs && props.tx.msgs[0].typeUrl === "/cosmos.staking.v1beta1.MsgDelegate" && (
+          <>
+            <li>
+              <label>Amount:</label>
+              <div>{printableCoin(props.tx.msgs[0].value.amount, state.chain)}</div>
+            </li>
+            <li>
+              <label>Validator Address:</label>
+              <div title={props.tx.msgs[0].value.validatorAddress}>
+                <HashView hash={props.tx.msgs[0].value.validatorAddress} />
+              </div>
+            </li>
+          </>
         )}
         {props.tx.fee && (
           <>
diff --git a/components/forms/DelegationForm.tsx b/components/forms/DelegationForm.tsx
new file mode 100644
index 0000000..bb5d31d
--- /dev/null
+++ b/components/forms/DelegationForm.tsx
@@ -0,0 +1,158 @@
+import axios from "axios";
+import { Account, calculateFee } from "@cosmjs/stargate";
+import { Decimal } from "@cosmjs/math";
+import { assert } from "@cosmjs/utils";
+import React, { useState } from "react";
+import { withRouter, NextRouter } from "next/router";
+import { useAppContext } from "../../context/AppContext";
+import Button from "../inputs/Button";
+import Input from "../inputs/Input";
+import StackableContainer from "../layout/StackableContainer";
+import { checkValidatorAddress } from "../../lib/displayHelpers";
+
+interface Props {
+  address: string | null;
+  accountOnChain: Account | null;
+  router: NextRouter;
+  closeForm: () => void;
+}
+
+const DelegationForm = (props: Props) => {
+  const { state } = useAppContext();
+  const [validatorAddress, setValidatorAddress] = useState("");
+  const [amount, setAmount] = useState("0");
+  const [memo, setMemo] = useState("");
+  const [gas, setGas] = useState(200000);
+  const [gasPrice, _setGasPrice] = useState(state.chain.gasPrice);
+  const [_processing, setProcessing] = useState(false);
+  const [addressError, setAddressError] = useState("");
+
+  const createTransaction = (txValidatorAddress: string, txAmount: string, txGas: number) => {
+    const amountInAtomics = Decimal.fromUserInput(
+      txAmount,
+      Number(state.chain.displayDenomExponent),
+    ).atomics;
+    const msgDelegate = {
+      delegatorAddress: props.address,
+      validatorAddress: txValidatorAddress,
+      amount: {
+        amount: amountInAtomics,
+        denom: state.chain.denom,
+      },
+    };
+    const msg = {
+      typeUrl: "/cosmos.staking.v1beta1.MsgDelegate",
+      value: msgDelegate,
+    };
+    assert(gasPrice, "gasPrice missing");
+    const fee = calculateFee(Number(txGas), gasPrice);
+    const { accountOnChain } = props;
+    assert(accountOnChain, "accountOnChain missing");
+    return {
+      accountNumber: accountOnChain.accountNumber,
+      sequence: accountOnChain.sequence,
+      chainId: state.chain.chainId,
+      msgs: [msg],
+      fee: fee,
+      memo: memo,
+    };
+  };
+
+  const handleCreate = async () => {
+    assert(state.chain.addressPrefix, "addressPrefix missing");
+    const validatorAddressError = checkValidatorAddress(
+      validatorAddress,
+      state.chain.addressPrefix,
+    );
+    if (validatorAddressError) {
+      setAddressError(
+        `Invalid address for network ${state.chain.chainId}: ${validatorAddressError}`,
+      );
+      return;
+    }
+
+    setProcessing(true);
+    const tx = createTransaction(validatorAddress, amount, gas);
+    console.log(tx, "tx data");
+    const dataJSON = JSON.stringify(tx);
+    const res = await axios.post("/api/transaction", { dataJSON });
+    console.log(dataJSON, "tx dataJSON", res);
+    const { transactionID } = res.data;
+    props.router.push(`${props.address}/transaction/${transactionID}`);
+  };
+
+  assert(state.chain.addressPrefix, "addressPrefix missing");
+
+  return (
+    <StackableContainer lessPadding>
+      <button className="remove" onClick={() => props.closeForm()}>
+        ✕
+      </button>
+      <h2>Create Delegation</h2>
+      <div className="form-item">
+        <Input
+          label="Validator Address"
+          name="validatorAddress"
+          value={validatorAddress}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValidatorAddress(e.target.value)}
+          error={addressError}
+          placeholder={`E.g. cosmosvaloper1sjllsnramtg3ewxqwwrwjxfgc4n4ef9u2lcnj0`}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label={`Amount (${state.chain.displayDenom})`}
+          name="amount"
+          type="number"
+          value={amount}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAmount(e.target.value)}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Gas Limit"
+          name="gas"
+          type="number"
+          value={gas}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setGas(parseInt(e.target.value, 10))
+          }
+        />
+      </div>
+      <div className="form-item">
+        <Input label="Gas Price" name="gas_price" type="string" value={gasPrice} disabled={true} />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Memo"
+          name="memo"
+          type="text"
+          value={memo}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemo(e.target.value)}
+        />
+      </div>
+      <Button label="Delegate" onClick={handleCreate} />
+      <style jsx>{`
+        p {
+          margin-top: 15px;
+        }
+        .form-item {
+          margin-top: 1.5em;
+        }
+        button.remove {
+          background: rgba(255, 255, 255, 0.2);
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          border: none;
+          color: white;
+          position: absolute;
+          right: 10px;
+          top: 10px;
+        }
+      `}</style>
+    </StackableContainer>
+  );
+};
+
+export default withRouter(DelegationForm);
diff --git a/lib/displayHelpers.ts b/lib/displayHelpers.ts
index c54a587..f3f5cd9 100644
--- a/lib/displayHelpers.ts
+++ b/lib/displayHelpers.ts
@@ -126,6 +126,24 @@ const checkAddress = (input: string, chainAddressPrefix: string) => {
   return null;
 };
 
+/**
+ * Returns an error message for invalid addresses.
+ *
+ * Returns null of there is no error.
+ */
+const checkValidatorAddress = (input: string, chainAddressPrefix: string) => {
+  if (!input) return "Empty";
+  try {
+    const data = fromBech32(input).data;
+    const address = toBech32(chainAddressPrefix, data);
+    checkAddress(address, chainAddressPrefix);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    return error.toString();
+  }
+  return null;
+};
+
 /**
  * Returns a link to a transaction in an explorer if an explorer is configured
  * for transactions. Returns null otherwise.
@@ -145,4 +163,5 @@ export {
   examplePubkey,
   checkAddress,
   explorerLinkTx,
+  checkValidatorAddress,
 };
diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index 16db4c5..5962983 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -14,6 +14,7 @@ import MultisigMembers from "../../../components/dataViews/MultisigMembers";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
 import TransactionForm from "../../../components/forms/TransactionForm";
+import DelegationForm from "../../../components/forms/DelegationForm";
 
 function participantPubkeysFromMultisig(multisigPubkey: Pubkey) {
   return multisigPubkey.value.pubkeys;
@@ -28,6 +29,7 @@ function participantAddressesFromMultisig(multisigPubkey: Pubkey, addressPrefix:
 const multipage = () => {
   const { state } = useAppContext();
   const [showTxForm, setShowTxForm] = useState(false);
+  const [showDelegateTxForm, setShowDelegateTxForm] = useState(false);
   const [holdings, setHoldings] = useState<Coin | null>(null);
   const [multisigAddress, setMultisigAddress] = useState("");
   const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
@@ -97,7 +99,7 @@ const multipage = () => {
             </div>
           </StackableContainer>
         )}
-        {showTxForm ? (
+        {showTxForm && (
           <TransactionForm
             address={multisigAddress}
             accountOnChain={accountOnChain}
@@ -105,7 +107,17 @@ const multipage = () => {
               setShowTxForm(false);
             }}
           />
-        ) : (
+        )}
+        {showDelegateTxForm && (
+          <DelegationForm
+            address={multisigAddress}
+            accountOnChain={accountOnChain}
+            closeForm={() => {
+              setShowDelegateTxForm(false);
+            }}
+          />
+        )}
+        {!showTxForm && !showDelegateTxForm && (
           <div className="interfaces">
             <div className="col-1">
               <MultisigHoldings holdings={holdings} />
@@ -123,6 +135,12 @@ const multipage = () => {
                     setShowTxForm(true);
                   }}
                 />
+                <Button
+                  label="Create Delegation"
+                  onClick={() => {
+                    setShowDelegateTxForm(true);
+                  }}
+                />
               </StackableContainer>
             </div>
           </div>

From d5bcb9ea78c6a209b546061d75c324f3b303ed9a Mon Sep 17 00:00:00 2001
From: klk1236 <klk@persistence.one>
Date: Tue, 12 Jul 2022 11:13:32 +0400
Subject: [PATCH 2/3] updated css for to show delegation button

---
 pages/multi/[address]/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index 5962983..72d7e7f 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -151,10 +151,12 @@ const multipage = () => {
           display: flex;
           justify-content: space-between;
           margin-top: 50px;
+          flex-direction: column;
         }
         .col-1 {
           flex: 1;
-          padding-right: 50px;
+          padding-right: 0;
+          margin-bottom: 50px;
         }
         .col-2 {
           flex: 1;
@@ -165,6 +167,7 @@ const multipage = () => {
         }
         p {
           margin-top: 15px;
+          max-width: 100%;
         }
         .multisig-error p {
           max-width: 550px;

From d5d6f11c82d3defd67b949a7590b62087800d791 Mon Sep 17 00:00:00 2001
From: klk1236 <klk@persistence.one>
Date: Tue, 12 Jul 2022 18:26:31 +0400
Subject: [PATCH 3/3] optimised code for delegation txn

---
 components/dataViews/TransactionInfo.tsx | 111 ++++++++++++++---------
 components/forms/DelegationForm.tsx      |   5 +-
 lib/displayHelpers.ts                    |  16 +++-
 pages/multi/[address]/index.tsx          |  10 +-
 4 files changed, 85 insertions(+), 57 deletions(-)

diff --git a/components/dataViews/TransactionInfo.tsx b/components/dataViews/TransactionInfo.tsx
index 482a53a..ac01b44 100644
--- a/components/dataViews/TransactionInfo.tsx
+++ b/components/dataViews/TransactionInfo.tsx
@@ -16,52 +16,75 @@ const TransactionInfo = (props: Props) => {
   return (
     <StackableContainer lessPadding lessMargin>
       <ul className="meta-data">
-        {props.tx.msgs && props.tx.msgs[0].typeUrl === "/cosmos.bank.v1beta1.MsgSend" && (
-          <>
+        <>
+          {(props.tx.msgs || []).map((msg) =>
+            msg.typeUrl === "/cosmos.bank.v1beta1.MsgSend" ? (
+              <>
+                <li>
+                  <label>Amount:</label>
+                  <div>{printableCoins(msg.value.amount, state.chain)}</div>
+                </li>
+                <li>
+                  <label>To:</label>
+                  <div title={msg.value.toAddress}>
+                    <HashView hash={msg.value.toAddress} />
+                  </div>
+                </li>
+              </>
+            ) : msg.typeUrl === "/cosmos.staking.v1beta1.MsgDelegate" ||
+              msg.typeUrl === "/cosmos.staking.v1beta1.MsgUnDelegate" ? (
+              <>
+                <li>
+                  <label>Amount:</label>
+                  <div>{printableCoin(props.tx.msgs[0].value.amount, state.chain)}</div>
+                </li>
+                <li>
+                  <label>Validator Address:</label>
+                  <div title={props.tx.msgs[0].value.validatorAddress}>
+                    <HashView hash={props.tx.msgs[0].value.validatorAddress} />
+                  </div>
+                </li>
+              </>
+            ) : msg.typeUrl === "/cosmos.staking.v1beta1.MsgBeginRedelegate" ? (
+              <>
+                <li>
+                  <label>Amount:</label>
+                  <div>{printableCoin(props.tx.msgs[0].value.amount, state.chain)}</div>
+                </li>
+                <li>
+                  <label>Source Validator Address:</label>
+                  <div title={props.tx.msgs[0].value.validatorSrcAddress}>
+                    <HashView hash={props.tx.msgs[0].value.validatorSrcAddress} />
+                  </div>
+                </li>
+                <li>
+                  <label>Destination Validator Address:</label>
+                  <div title={props.tx.msgs[0].value.validatorDstAddress}>
+                    <HashView hash={props.tx.msgs[0].value.validatorDstAddress} />
+                  </div>
+                </li>
+              </>
+            ) : null,
+          )}
+          {props.tx.fee && (
+            <>
+              <li>
+                <label>Gas:</label>
+                <div>{props.tx.fee.gas}</div>
+              </li>
+              <li>
+                <label>Fee:</label>
+                <div>{printableCoins(props.tx.fee.amount as Coin[], state.chain)}</div>
+              </li>
+            </>
+          )}
+          {props.tx.memo && (
             <li>
-              <label>Amount:</label>
-              <div>{printableCoins(props.tx.msgs[0].value.amount, state.chain)}</div>
+              <label>Memo:</label>
+              <div>{props.tx.memo}</div>
             </li>
-            <li>
-              <label>To:</label>
-              <div title={props.tx.msgs[0].value.toAddress}>
-                <HashView hash={props.tx.msgs[0].value.toAddress} />
-              </div>
-            </li>
-          </>
-        )}
-        {props.tx.msgs && props.tx.msgs[0].typeUrl === "/cosmos.staking.v1beta1.MsgDelegate" && (
-          <>
-            <li>
-              <label>Amount:</label>
-              <div>{printableCoin(props.tx.msgs[0].value.amount, state.chain)}</div>
-            </li>
-            <li>
-              <label>Validator Address:</label>
-              <div title={props.tx.msgs[0].value.validatorAddress}>
-                <HashView hash={props.tx.msgs[0].value.validatorAddress} />
-              </div>
-            </li>
-          </>
-        )}
-        {props.tx.fee && (
-          <>
-            <li>
-              <label>Gas:</label>
-              <div>{props.tx.fee.gas}</div>
-            </li>
-            <li>
-              <label>Fee:</label>
-              <div>{printableCoins(props.tx.fee.amount as Coin[], state.chain)}</div>
-            </li>
-          </>
-        )}
-        {props.tx.memo && (
-          <li>
-            <label>Memo:</label>
-            <div>{props.tx.memo}</div>
-          </li>
-        )}
+          )}
+        </>
       </ul>
       <style jsx>{`
         ul {
diff --git a/components/forms/DelegationForm.tsx b/components/forms/DelegationForm.tsx
index bb5d31d..d988de0 100644
--- a/components/forms/DelegationForm.tsx
+++ b/components/forms/DelegationForm.tsx
@@ -60,10 +60,7 @@ const DelegationForm = (props: Props) => {
 
   const handleCreate = async () => {
     assert(state.chain.addressPrefix, "addressPrefix missing");
-    const validatorAddressError = checkValidatorAddress(
-      validatorAddress,
-      state.chain.addressPrefix,
-    );
+    const validatorAddressError = checkValidatorAddress(validatorAddress, "cosmosvaloper");
     if (validatorAddressError) {
       setAddressError(
         `Invalid address for network ${state.chain.chainId}: ${validatorAddressError}`,
diff --git a/lib/displayHelpers.ts b/lib/displayHelpers.ts
index f3f5cd9..872fb17 100644
--- a/lib/displayHelpers.ts
+++ b/lib/displayHelpers.ts
@@ -131,16 +131,24 @@ const checkAddress = (input: string, chainAddressPrefix: string) => {
  *
  * Returns null of there is no error.
  */
-const checkValidatorAddress = (input: string, chainAddressPrefix: string) => {
+const checkValidatorAddress = (input: string, chainAddressPrefix: string): string | null => {
   if (!input) return "Empty";
+  let prefix;
   try {
-    const data = fromBech32(input).data;
-    const address = toBech32(chainAddressPrefix, data);
-    checkAddress(address, chainAddressPrefix);
+    ({ prefix } = fromBech32(input));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     return error.toString();
   }
+
+  if (prefix !== chainAddressPrefix) {
+    return `Expected address prefix '${chainAddressPrefix}' but got '${prefix}'`;
+  }
+
+  if (input.length !== 52) {
+    return "Invalid address length in validator address. Must be 52 bytes.";
+  }
+
   return null;
 };
 
diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index 72d7e7f..ffdf9b0 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -28,7 +28,7 @@ function participantAddressesFromMultisig(multisigPubkey: Pubkey, addressPrefix:
 
 const multipage = () => {
   const { state } = useAppContext();
-  const [showTxForm, setShowTxForm] = useState(false);
+  const [showSendTxForm, setShowSendTxForm] = useState(false);
   const [showDelegateTxForm, setShowDelegateTxForm] = useState(false);
   const [holdings, setHoldings] = useState<Coin | null>(null);
   const [multisigAddress, setMultisigAddress] = useState("");
@@ -99,12 +99,12 @@ const multipage = () => {
             </div>
           </StackableContainer>
         )}
-        {showTxForm && (
+        {showSendTxForm && (
           <TransactionForm
             address={multisigAddress}
             accountOnChain={accountOnChain}
             closeForm={() => {
-              setShowTxForm(false);
+              setShowSendTxForm(false);
             }}
           />
         )}
@@ -117,7 +117,7 @@ const multipage = () => {
             }}
           />
         )}
-        {!showTxForm && !showDelegateTxForm && (
+        {!showSendTxForm && !showDelegateTxForm && (
           <div className="interfaces">
             <div className="col-1">
               <MultisigHoldings holdings={holdings} />
@@ -132,7 +132,7 @@ const multipage = () => {
                 <Button
                   label="Create Transaction"
                   onClick={() => {
-                    setShowTxForm(true);
+                    setShowSendTxForm(true);
                   }}
                 />
                 <Button