Merge pull request #7 from webmaster128/dynamic-coin-conversion

Replace hardcoded ATOM conversion

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 {

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

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

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",

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",

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