From c7def7775220780d6b970ef90c32224c7c106779 Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Tue, 11 Jan 2022 16:03:33 +0100
Subject: [PATCH 1/2] Make display token denomination configurable

---
 .env.sample                         |  2 ++
 components/forms/TransactionForm.js | 12 ++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/.env.sample b/.env.sample
index 8939592..b1a4ded 100644
--- a/.env.sample
+++ b/.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
diff --git a/components/forms/TransactionForm.js b/components/forms/TransactionForm.js
index a6d4b23..54de8dd 100644
--- a/components/forms/TransactionForm.js
+++ b/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}

From 1751962bf1409d37d43fbe4c52dd8142afa9f1cc Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Tue, 11 Jan 2022 16:17:29 +0100
Subject: [PATCH 2/2] Make printableCoin aware of
 NEXT_PUBLIC_DISPLAY_DENOM/NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT

---
 lib/displayHelpers.js | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/lib/displayHelpers.js b/lib/displayHelpers.js
index 654f27e..f5706da 100644
--- a/lib/displayHelpers.js
+++ b/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) => {