Merge pull request #8 from webmaster128/fix-fee-display

Fix fee display

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 && (
@@ -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>

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"

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>{`

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 };