Merge pull request #102 from cosmos/feat/show-all-holdings

Show all holdings

components/dataViews/HashView.tsx

@@ -1,6 +1,4 @@
-import React from "react";
-
-import { abbreviateLongString } from "../../lib/displayHelpers";
+import { ellideMiddle } from "../../lib/displayHelpers";
 import CopyAndPaste from "./CopyAndPaste";
 
 interface Props {
@@ -10,7 +8,7 @@ interface Props {
 
 const HashView = (props: Props) => (
   <div className="hash-view">
-    <div>{props.abbreviate ? abbreviateLongString(props.hash) : props.hash}</div>
+    <div>{props.abbreviate ? ellideMiddle(props.hash, 12) : props.hash}</div>
     <CopyAndPaste copyText={props.hash} />
     <style jsx>{`
       .hash-view {

components/dataViews/MultisigHoldings.tsx

@@ -1,12 +1,10 @@
-import React from "react";
 import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
-
 import { useAppContext } from "../../context/AppContext";
 import { printableCoin } from "../../lib/displayHelpers";
 import StackableContainer from "../layout/StackableContainer";
 
 interface Props {
-  holdings: Coin | null;
+  holdings: readonly Coin[];
 }
 
 const MultisigHoldings = (props: Props) => {
@@ -15,8 +13,12 @@ const MultisigHoldings = (props: Props) => {
     <StackableContainer lessPadding fullHeight>
       <h2>Holdings</h2>
       <StackableContainer lessPadding lessMargin>
-        {props.holdings ? (
-          <span>{printableCoin(props.holdings, state.chain)}</span>
+        {props.holdings.length ? (
+          props.holdings.map((holding) => (
+            <StackableContainer key={holding.denom} lessPadding lessMargin>
+              <span>{printableCoin(holding, state.chain)}</span>
+            </StackableContainer>
+          ))
         ) : (
           <span>None</span>
         )}
@@ -24,6 +26,7 @@ const MultisigHoldings = (props: Props) => {
       <style jsx>{`
         span {
           text-align: center;
+          overflow-wrap: break-word;
         }
       `}</style>
     </StackableContainer>

lib/displayHelpers.ts

@@ -4,21 +4,15 @@ import { fromBase64, fromBech32, toBase64, toBech32 } from "@cosmjs/encoding";
 import { Decimal } from "@cosmjs/math";
 import { ChainInfo } from "../types";
 
-/**
- * Abbreviates long strings, typically used for
- * addresses and transaction hashes.
- *
- * @param {string} longString The string to abbreviate.
- * @return {string} The abbreviated string.
- */
-const abbreviateLongString = (longString: string) => {
-  if (longString.length < 13) {
-    // no need to abbreviate
-    return longString;
+function ellideMiddle(str: string, maxOutLen: number): string {
+  if (str.length <= maxOutLen) {
+    return str;
   }
-
-  return longString.slice(0, 5) + "..." + longString.slice(-5);
-};
+  const ellide = "…";
+  const frontLen = Math.ceil((maxOutLen - ellide.length) / 2);
+  const tailLen = Math.floor((maxOutLen - ellide.length) / 2);
+  return str.slice(0, frontLen) + ellide + str.slice(str.length - tailLen, str.length);
+}
 
 // NARROW NO-BREAK SPACE (U+202F)
 const thinSpace = "\u202F";
@@ -49,12 +43,21 @@ const printableCoin = (coin: Coin, chainInfo: ChainInfo) => {
   }
 
   // Auto-convert leading "u"s
-  if (coin.denom?.startsWith("u")) {
+  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;
   }
 
+  // Ellide IBC tokens
+  if (coin.denom.startsWith("ibc/")) {
+    const value = coin.amount;
+    const hash = coin.denom.slice(4);
+    const ellidedHash = ellideMiddle(hash, 11);
+    const ticker = `ibc/${ellidedHash}`;
+    return value + thinSpace + ticker;
+  }
+
   // Fallback to plain coin display
   return coin.amount + thinSpace + coin.denom;
 };
@@ -150,7 +153,7 @@ const explorerLinkTx = (link: string, hash: string) => {
 };
 
 export {
-  abbreviateLongString,
+  ellideMiddle,
   printableCoin,
   printableCoins,
   exampleAddress,

pages/multi/[address]/index.tsx

@@ -29,7 +29,7 @@ function participantPubkeysFromMultisig(
 const Multipage = () => {
   const { state } = useAppContext();
   const [txView, setTxView] = useState<TxView>(null);
-  const [holdings, setHoldings] = useState<Coin | null>(null);
+  const [holdings, setHoldings] = useState<readonly Coin[]>([]);
   const [multisigAddress, setMultisigAddress] = useState("");
   const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
   const [pubkey, setPubkey] = useState<MultisigThresholdPubkey>();
@@ -47,7 +47,7 @@ const Multipage = () => {
         assert(state.chain.nodeAddress, "Node address missing");
         const client = await StargateClient.connect(state.chain.nodeAddress);
         assert(state.chain.denom, "denom missing");
-        const tempHoldings = await client.getBalance(address, state.chain.denom);
+        const tempHoldings = await client.getAllBalances(address);
         setHoldings(tempHoldings);
         const result = await getMultisigAccount(address, client);
         setPubkey(result[0]);