From d0cf629529cf45163e1bf26e093f2a5b8399a0a5 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Thu, 13 Apr 2023 14:03:58 +0200 Subject: [PATCH 1/7] Get all holdings --- pages/multi/[address]/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx index 8fc3b5f..6e4484c 100644 --- a/pages/multi/[address]/index.tsx +++ b/pages/multi/[address]/index.tsx @@ -29,7 +29,7 @@ function participantPubkeysFromMultisig( const Multipage = () => { const { state } = useAppContext(); const [txView, setTxView] = useState(null); - const [holdings, setHoldings] = useState(null); + const [holdings, setHoldings] = useState([]); const [multisigAddress, setMultisigAddress] = useState(""); const [accountOnChain, setAccountOnChain] = useState(null); const [pubkey, setPubkey] = useState(); @@ -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]); From a3d9a2c19853d4fe9cdcc87eadcfc075afdfcf3c Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Thu, 13 Apr 2023 14:04:05 +0200 Subject: [PATCH 2/7] Show all holdings --- components/dataViews/MultisigHoldings.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/dataViews/MultisigHoldings.tsx b/components/dataViews/MultisigHoldings.tsx index cda5701..ad646c0 100644 --- a/components/dataViews/MultisigHoldings.tsx +++ b/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,10 @@ const MultisigHoldings = (props: Props) => {

Holdings

- {props.holdings ? ( - {printableCoin(props.holdings, state.chain)} + {props.holdings.length ? ( + props.holdings.map((holding) => ( + {printableCoin(holding, state.chain)} + )) ) : ( None )} From cfba39af614487668b5d779d83eb551827727c85 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Thu, 13 Apr 2023 16:09:37 +0200 Subject: [PATCH 3/7] Turn abbreviateLongString into ellideMiddle --- lib/displayHelpers.ts | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/lib/displayHelpers.ts b/lib/displayHelpers.ts index 97a90ae..5907d35 100644 --- a/lib/displayHelpers.ts +++ b/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 = Decimal.fromAtomics(coin.amount ?? "0", 6).toString(); + const hash = coin.denom.slice(4); + const ellidedHash = ellideMiddle(hash, 12); + 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, From e5ef40566b7188dcbeb0fc14e65173606f02af73 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Thu, 13 Apr 2023 16:10:11 +0200 Subject: [PATCH 4/7] Use ellideMiddle instead of abbreviateLongString --- components/dataViews/HashView.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/dataViews/HashView.tsx b/components/dataViews/HashView.tsx index 2f17c62..a9417f9 100644 --- a/components/dataViews/HashView.tsx +++ b/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) => (
-
{props.abbreviate ? abbreviateLongString(props.hash) : props.hash}
+
{props.abbreviate ? ellideMiddle(props.hash, 12) : props.hash}
From 3af4f62145c0ab24c06b26a193cf907297d57cd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?= <44572727+abefernan@users.noreply.github.com> Date: Thu, 13 Apr 2023 16:29:25 +0200 Subject: [PATCH 6/7] Use raw value without moving decimals Co-authored-by: Simon Warta <2603011+webmaster128@users.noreply.github.com> --- lib/displayHelpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/displayHelpers.ts b/lib/displayHelpers.ts index 5907d35..4e7226c 100644 --- a/lib/displayHelpers.ts +++ b/lib/displayHelpers.ts @@ -51,7 +51,7 @@ const printableCoin = (coin: Coin, chainInfo: ChainInfo) => { // Ellide IBC tokens if (coin.denom.startsWith("ibc/")) { - const value = Decimal.fromAtomics(coin.amount ?? "0", 6).toString(); + const value = coin.amount; const hash = coin.denom.slice(4); const ellidedHash = ellideMiddle(hash, 12); const ticker = `ibc/${ellidedHash}`; From bd28c5de88e27477ce1c8bbe193f1493ffaf42bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?= <44572727+abefernan@users.noreply.github.com> Date: Thu, 13 Apr 2023 16:29:55 +0200 Subject: [PATCH 7/7] Use 5 chars for hash Co-authored-by: Simon Warta <2603011+webmaster128@users.noreply.github.com> --- lib/displayHelpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/displayHelpers.ts b/lib/displayHelpers.ts index 4e7226c..1155cc9 100644 --- a/lib/displayHelpers.ts +++ b/lib/displayHelpers.ts @@ -53,7 +53,7 @@ const printableCoin = (coin: Coin, chainInfo: ChainInfo) => { if (coin.denom.startsWith("ibc/")) { const value = coin.amount; const hash = coin.denom.slice(4); - const ellidedHash = ellideMiddle(hash, 12); + const ellidedHash = ellideMiddle(hash, 11); const ticker = `ibc/${ellidedHash}`; return value + thinSpace + ticker; }