From bca178b1b8a823d17f2895f3686e30c178b67aa5 Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Mon, 10 Jan 2022 11:34:47 +0100
Subject: [PATCH 1/2] Create and use printableCoins

---
 components/dataViews/TransactionInfo.js | 4 ++--
 lib/displayHelpers.js                   | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/dataViews/TransactionInfo.js b/components/dataViews/TransactionInfo.js
index 32063bf..b3b64c2 100644
--- a/components/dataViews/TransactionInfo.js
+++ b/components/dataViews/TransactionInfo.js
@@ -1,6 +1,6 @@
 import HashView from "./HashView";
 import StackableContainer from "../layout/StackableContainer";
-import { printableCoin } from "../../lib/displayHelpers";
+import { printableCoins } from "../../lib/displayHelpers";
 
 export default (props) => (
   <StackableContainer lessPadding lessMargin>
@@ -8,7 +8,7 @@ export default (props) => (
       {props.tx.msgs && (
         <li>
           <label>Amount:</label>
-          <div>{printableCoin(props.tx.msgs[0].value.amount[0])}</div>
+          <div>{printableCoins(props.tx.msgs[0].value.amount)}</div>
         </li>
       )}
       {props.tx.msgs && (
diff --git a/lib/displayHelpers.js b/lib/displayHelpers.js
index 1515620..a706e32 100644
--- a/lib/displayHelpers.js
+++ b/lib/displayHelpers.js
@@ -33,4 +33,11 @@ const printableCoin = (coin) => {
   }
 }
 
-export { abbreviateLongString, printableCoin };
+const printableCoins = (coins) => {
+  if (coins.length !== 1) {
+    throw new Error("Implementation only supports exactly one coin entry.")
+  }
+  return printableCoin(coins[0]);
+}
+
+export { abbreviateLongString, printableCoin, printableCoins };

From b1f00e5bf7968fa3a4ab1043fdafaf4b205f5297 Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Mon, 10 Jan 2022 12:08:07 +0100
Subject: [PATCH 2/2] Print gas price and fee

---
 components/dataViews/TransactionInfo.js | 14 +++++++----
 components/forms/TransactionForm.js     | 32 +++++++++++++++++++------
 components/inputs/Input.js              |  1 +
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/components/dataViews/TransactionInfo.js b/components/dataViews/TransactionInfo.js
index b3b64c2..f210e1d 100644
--- a/components/dataViews/TransactionInfo.js
+++ b/components/dataViews/TransactionInfo.js
@@ -20,10 +20,16 @@ export default (props) => (
         </li>
       )}
       {props.tx.fee && (
-        <li>
-          <label>Gas:</label>
-          <div>{props.tx.fee.gas} UATOM</div>
-        </li>
+        <>
+          <li>
+            <label>Gas:</label>
+            <div>{props.tx.fee.gas}</div>
+          </li>
+          <li>
+            <label>Fee:</label>
+            <div>{printableCoins(props.tx.fee.amount)}</div>
+          </li>
+        </>
       )}
       {props.tx.memo && (
         <li>
diff --git a/components/forms/TransactionForm.js b/components/forms/TransactionForm.js
index 345dc34..ce51860 100644
--- a/components/forms/TransactionForm.js
+++ b/components/forms/TransactionForm.js
@@ -6,6 +6,19 @@ import { withRouter } from "next/router";
 import Button from "../../components/inputs/Button";
 import Input from "../../components/inputs/Input";
 import StackableContainer from "../layout/StackableContainer";
+import { GasPrice } from "@cosmjs/stargate";
+import { Uint53 } from "@cosmjs/math";
+
+// TODO: use `calculateFee` from @cosmjs/stargate after upgrading CosmJS to 0.26+
+function calculateFee(gasLimit, gasPrice) {
+  const processedGasPrice = typeof gasPrice === "string" ? GasPrice.fromString(gasPrice) : gasPrice;
+  const { denom, amount: gasPriceAmount } = processedGasPrice;
+  const amount = Math.ceil(gasPriceAmount.multiply(new Uint53(gasLimit)).toFloatApproximation());
+  return {
+    amount: coins(amount, denom),
+    gas: gasLimit.toString(),
+  };
+}
 
 class TransactionForm extends React.Component {
   constructor(props) {
@@ -16,6 +29,7 @@ class TransactionForm extends React.Component {
       amount: 0,
       memo: "",
       gas: 200000,
+      gasPrice: `0.03${process.env.NEXT_PUBLIC_DENOM}`,
       processing: false,
       addressError: "",
     };
@@ -37,12 +51,7 @@ class TransactionForm extends React.Component {
       typeUrl: "/cosmos.bank.v1beta1.MsgSend",
       value: msgSend,
     };
-    const gasLimit = gas;
-    const fee = {
-      amount: coins(6000, process.env.NEXT_PUBLIC_DENOM),
-      gas: gasLimit.toString(),
-    };
-
+    const fee = calculateFee(Number(gas), this.state.gasPrice);
     return {
       accountNumber: this.props.accountOnChain.accountNumber,
       sequence: this.props.accountOnChain.sequence,
@@ -101,13 +110,22 @@ class TransactionForm extends React.Component {
         </div>
         <div className="form-item">
           <Input
-            label="Gas Limit (UATOM)"
+            label="Gas Limit"
             name="gas"
             type="number"
             value={this.state.gas}
             onChange={this.handleChange}
           />
         </div>
+        <div className="form-item">
+          <Input
+            label="Gas Price"
+            name="gas_price"
+            type="string"
+            value={this.state.gasPrice}
+            disabled={true}
+          />
+        </div>
         <div className="form-item">
           <Input
             label="Memo"
diff --git a/components/inputs/Input.js b/components/inputs/Input.js
index bf70dd0..84318fa 100644
--- a/components/inputs/Input.js
+++ b/components/inputs/Input.js
@@ -9,6 +9,7 @@ const Input = (props) => (
       placeholder={props.placeholder || ""}
       autoComplete="off"
       onBlur={props.onBlur}
+      disabled={props.disabled}
     />
     {props.error && <div className="error">{props.error}</div>}
     <style jsx>{`