Merge pull request #14 from webmaster128/make-display-denom-configurable

Make display token denomination configurable

.env.sample

@@ -1,6 +1,8 @@
 FAUNADB_SECRET=
 NEXT_PUBLIC_NODE_ADDRESS=https://cosmoshub.validator.network:443
 NEXT_PUBLIC_DENOM=uatom
+NEXT_PUBLIC_DISPLAY_DENOM=ATOM
+NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT=6
 NEXT_PUBLIC_GAS_PRICE=0.03uatom
 NEXT_PUBLIC_CHAIN_ID=cosmoshub-4
 NEXT_PUBLIC_ADDRESS_PREFIX=cosmos

components/forms/TransactionForm.js

@@ -1,6 +1,6 @@
 import axios from "axios";
-import { coins } from "@cosmjs/amino";
 import { calculateFee } from "@cosmjs/stargate";
+import { Decimal } from "@cosmjs/math";
 import React from "react";
 import { withRouter } from "next/router";
 
@@ -15,7 +15,7 @@ class TransactionForm extends React.Component {
 
     this.state = {
       toAddress: "",
-      amount: 0,
+      amount: "0",
       memo: "",
       gas: 200000,
       gasPrice: process.env.NEXT_PUBLIC_GAS_PRICE,
@@ -31,10 +31,14 @@ class TransactionForm extends React.Component {
   };
 
   createTransaction = (toAddress, amount, gas) => {
+    const amountInAtomics = Decimal.fromUserInput(amount, Number(process.env.NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT)).atomics;
     const msgSend = {
       fromAddress: this.props.address,
       toAddress: toAddress,
-      amount: coins(amount * 1000000, process.env.NEXT_PUBLIC_DENOM),
+      amount: [{
+        amount: amountInAtomics,
+        denom: process.env.NEXT_PUBLIC_DENOM
+      }],
     };
     const msg = {
       typeUrl: "/cosmos.bank.v1beta1.MsgSend",
@@ -90,7 +94,7 @@ class TransactionForm extends React.Component {
         </div>
         <div className="form-item">
           <Input
-            label="Amount (ATOM)"
+            label={`Amount (${process.env.NEXT_PUBLIC_DISPLAY_DENOM})`}
             name="amount"
             type="number"
             value={this.state.amount}

lib/displayHelpers.js

@@ -24,17 +24,32 @@ const thinSpace = "\u202F";
 // Takes a Coin (e.g. `{"amount": "1234", "denom": "uatom"}`) and converts it
 // into a user-readable string.
 //
+// The configured NEXT_PUBLIC_DISPLAY_DENOM/NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT
+// will be used if the denom matches NEXT_PUBLIC_DENOM.
+//
 // A leading "u" is interpreted as µ (micro) and uxyz will be converted to XYZ
 // for displaying.
 const printableCoin = (coin) => {
+  // null, undefined and this sort of things
   if (!coin) return "–";
 
-  if (coin.denom?.startsWith("u")) {
-    const ticker = coin.denom.slice(1).toUpperCase();
-    return Decimal.fromAtomics(coin.amount ?? "0", 6).toString() + thinSpace + ticker;
-  } else {
-    return coin.amount + thinSpace + coin.denom;
+  // The display denom from configuration
+  if (coin.denom === process.env.NEXT_PUBLIC_DENOM) {
+    const exponent = Number(process.env.NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT);
+    const value = Decimal.fromAtomics(coin.amount ?? "0", exponent).toString();
+    const ticker = process.env.NEXT_PUBLIC_DISPLAY_DENOM;
+    return value + thinSpace + ticker;
   }
+
+  // Auto-convert leading "u"s
+  if (coin.denom?.startsWith("u")) {
+    const value = Decimal.fromAtomics(coin.amount ?? "0", 6).toString();
+    const ticker = coin.denom.slice(1).toUpperCase();
+    return value + thinSpace + ticker;
+  }
+  
+  // Fallback to plain coin display
+  return coin.amount + thinSpace + coin.denom;
 }
 
 const printableCoins = (coins) => {