From e269c3b6047c2f7ad988670b09552c258f9a19cb Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Mon, 10 Jan 2022 11:16:13 +0100
Subject: [PATCH] Replace hardcoded ATOM conversion

---
 components/dataViews/MultisigHoldings.js |  9 +++------
 components/dataViews/TransactionInfo.js  |  6 ++----
 lib/displayHelpers.js                    | 21 ++++++++++++++++++++-
 package-lock.json                        |  1 +
 package.json                             |  1 +
 pages/multi/[address]/index.js           |  5 ++---
 6 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/components/dataViews/MultisigHoldings.js b/components/dataViews/MultisigHoldings.js
index 98c0584..c2f3472 100644
--- a/components/dataViews/MultisigHoldings.js
+++ b/components/dataViews/MultisigHoldings.js
@@ -1,16 +1,13 @@
+import { printableCoin } from "../../lib/displayHelpers";
 import StackableContainer from "../layout/StackableContainer";
 
-const MultisigHoldings = (props) => {
-  const uatomToAtom = (uatom) => {
-    if (uatom === 0) return 0;
-    return uatom / 1000000;
-  };
 
+const MultisigHoldings = (props) => {
   return (
     <StackableContainer lessPadding fullHeight>
       <h2>Holdings</h2>
       <StackableContainer lessPadding lessMargin>
-        <span>{props.holdings} ATOM</span>
+        <span>{printableCoin(props.holdings)}</span>
       </StackableContainer>
       <style jsx>{`
         span {
diff --git a/components/dataViews/TransactionInfo.js b/components/dataViews/TransactionInfo.js
index 76e8f12..32063bf 100644
--- a/components/dataViews/TransactionInfo.js
+++ b/components/dataViews/TransactionInfo.js
@@ -1,16 +1,14 @@
 import HashView from "./HashView";
 import StackableContainer from "../layout/StackableContainer";
+import { printableCoin } from "../../lib/displayHelpers";
 
-const uatomToAtom = (uatom) => {
-  return uatom / 1000000;
-};
 export default (props) => (
   <StackableContainer lessPadding lessMargin>
     <ul className="meta-data">
       {props.tx.msgs && (
         <li>
           <label>Amount:</label>
-          <div>{uatomToAtom(props.tx.msgs[0].value.amount[0].amount)} ATOM</div>
+          <div>{printableCoin(props.tx.msgs[0].value.amount[0])}</div>
         </li>
       )}
       {props.tx.msgs && (
diff --git a/lib/displayHelpers.js b/lib/displayHelpers.js
index 83b85a9..1515620 100644
--- a/lib/displayHelpers.js
+++ b/lib/displayHelpers.js
@@ -1,3 +1,5 @@
+import { Decimal } from "@cosmjs/math";
+
 /**
  * Abbreviates long strings, typically used for
  * addresses and transaction hashes.
@@ -14,4 +16,21 @@ const abbreviateLongString = (longString) => {
   return longString.slice(0, 5) + "..." + longString.slice(-5);
 };
 
-export { abbreviateLongString };
+// NARROW NO-BREAK SPACE (U+202F)
+const thinSpace = "\u202F";
+
+// Takes a Coin (e.g. `{"amount": "1234", "denom": "uatom"}`) and converts it
+// into a user-readable string.
+//
+// A leading "u" is interpreted as µ (micro) and uxyz will be converted to XYZ
+// for displaying.
+const printableCoin = (coin) => {
+  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;
+  }
+}
+
+export { abbreviateLongString, printableCoin };
diff --git a/package-lock.json b/package-lock.json
index 88c80e4..65b4ca6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "dependencies": {
         "@cosmjs/amino": "^0.25.6",
         "@cosmjs/launchpad": "^0.25.6",
+        "@cosmjs/math": "^0.25.6",
         "@cosmjs/proto-signing": "^0.25.6",
         "@cosmjs/stargate": "^0.25.6",
         "@keplr-wallet/types": "^0.9.0-alpha.4",
diff --git a/package.json b/package.json
index 0757f9b..9763672 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "@cosmjs/amino": "^0.25.6",
     "@cosmjs/launchpad": "^0.25.6",
+    "@cosmjs/math": "^0.25.6",
     "@cosmjs/proto-signing": "^0.25.6",
     "@cosmjs/stargate": "^0.25.6",
     "@keplr-wallet/types": "^0.9.0-alpha.4",
diff --git a/pages/multi/[address]/index.js b/pages/multi/[address]/index.js
index 8e8cdcf..2bd67a1 100644
--- a/pages/multi/[address]/index.js
+++ b/pages/multi/[address]/index.js
@@ -26,12 +26,12 @@ export async function getServerSideProps(context) {
     const accountOnChain = await getMultisigAccount(multisigAddress, client);
 
     return {
-      props: { accountOnChain, holdings: holdings.amount / 1000000 },
+      props: { accountOnChain, holdings: holdings },
     };
   } catch (error) {
     console.log(error);
     return {
-      props: { error: error.message, holdings: holdings.amount / 1000000 },
+      props: { error: error.message, holdings: holdings },
     };
   }
 }
@@ -69,7 +69,6 @@ const multipage = (props) => {
           <TransactionForm
             address={address}
             accountOnChain={props.accountOnChain}
-            holdings={props.holdings}
             closeForm={() => {
               setShowTxForm(false);
             }}