Merge pull request #117 from alleslabs/fix/native-token-label-format

fix(components): fix native token label formatting

CHANGELOG.md

@@ -106,6 +106,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#117](https://github.com/alleslabs/celatone-frontend/pull/117) Fix native token label formatting
+- [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#122](https://github.com/alleslabs/celatone-frontend/pull/122) Fix unknown code upload block height
 - [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#119](https://github.com/alleslabs/celatone-frontend/pull/119) Fix searching and project ordering in public projects page

src/lib/components/EstimatedFeeRender.tsx

@@ -1,8 +1,7 @@
 import { Spinner } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 
-import type { Token, U } from "lib/types";
-import { formatUDenom, formatUToken } from "lib/utils";
+import { formatBalanceWithDenom } from "lib/utils";
 
 export const EstimatedFeeRender = ({
   estimatedFee,
@@ -18,13 +17,9 @@ export const EstimatedFeeRender = ({
       </>
     );
   }
-  if (!estimatedFee) return <>--</>;
+  const coin = estimatedFee?.amount.at(0);
 
-  const { amount } = estimatedFee;
-  return (
-    <>
-      {formatUToken(amount?.[0].amount as U<Token>)}{" "}
-      {formatUDenom(amount?.[0].denom)}
-    </>
-  );
+  if (!coin) return <>--</>;
+
+  return <>{formatBalanceWithDenom(coin)}</>;
 };

src/lib/components/modal/UnsupportedTokensModal.tsx

@@ -19,12 +19,12 @@ import { MdAttachMoney } from "react-icons/md";
 
 import { Copier } from "../Copier";
 import { ExplorerLink } from "../ExplorerLink";
-import type { BalanceWithAssetInfo, Balance } from "lib/types";
+import type { BalanceWithAssetInfo, Balance, Token } from "lib/types";
 import {
   getFirstQueryParam,
   getTokenType,
-  truncate,
-  formatToken,
+  getTokenLabel,
+  formatTokenWithPrecision,
 } from "lib/utils";
 
 interface UnsupportedTokensModalProps {
@@ -38,14 +38,10 @@ interface UnsupportedTokenProps {
 const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
   // TODO - Move this to utils
   const [tokenLabel, tokenType] = useMemo(() => {
-    const splitId = balance.id.split("/");
+    const label = getTokenLabel(balance.id);
     const type = !balance.id.includes("/")
       ? getTokenType(balance.type)
-      : getTokenType(splitId[0]);
-    if (splitId[1]) {
-      splitId[1] = truncate(splitId[1]);
-    }
-    const label = splitId.length === 1 ? balance.id : splitId.join("/");
+      : getTokenType(balance.id.split("/")[0]);
     return [label, type];
   }, [balance]);
 
@@ -71,7 +67,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
         </Text>
       </Flex>
       <Text variant="body2" fontWeight="900">
-        {formatToken(balance.amount, balance.precision)}
+        {formatTokenWithPrecision(balance.amount as Token, balance.precision)}
       </Text>
     </Flex>
   );

src/lib/hooks/useSingleMessageProps.ts

@@ -15,7 +15,7 @@ import type {
   DetailMigrate,
   DetailClearAdmin,
 } from "lib/types";
-import { formatBalanceWithDenom } from "lib/utils";
+import { formatBalanceWithDenomList } from "lib/utils";
 import { getExecuteMsgTags } from "lib/utils/executeTags";
 
 /**
@@ -187,7 +187,7 @@ const sendSingleMsgProps = (
   return isSuccess
     ? {
         type: "Send",
-        bolds: formatBalanceWithDenom(detail.amount),
+        bolds: formatBalanceWithDenomList(detail.amount),
         text2: "to",
         link1: {
           type: getAddressTypeByLength(chainName, detail.toAddress) as LinkType,

src/lib/pages/contract-details/components/token/TokenCard.tsx

@@ -1,7 +1,7 @@
 import { Flex, Image, Text } from "@chakra-ui/react";
 
-import type { BalanceWithAssetInfo } from "lib/types";
-import { formatToken } from "lib/utils/formatter/token";
+import type { BalanceWithAssetInfo, Token } from "lib/types";
+import { formatTokenWithPrecision } from "lib/utils";
 
 interface TokenCardProps {
   userBalance: BalanceWithAssetInfo;
@@ -21,7 +21,10 @@ export const TokenCard = ({ userBalance }: TokenCardProps) => (
       alt={userBalance.balance.symbol}
     />
     <Text color="text.main" fontWeight="700">
-      {formatToken(userBalance.balance.amount, userBalance.balance.precision)}
+      {formatTokenWithPrecision(
+        userBalance.balance.amount as Token,
+        userBalance.balance.precision
+      )}
     </Text>
     <Text color="text.main">{userBalance.balance.symbol}</Text>
   </Flex>

src/lib/pages/past-txs/components/MsgDetail.tsx

@@ -18,15 +18,12 @@ import type {
   DetailSend,
   DetailUpload,
   Message,
-  Token,
-  U,
 } from "lib/types";
 import {
   camelToSnake,
   encode,
-  formatUDenom,
-  formatUToken,
   extractMsgType,
+  formatBalanceWithDenomList,
 } from "lib/utils";
 
 interface MsgDetailProps {
@@ -137,13 +134,6 @@ export const MsgDetail = ({ msg, success }: MsgDetailProps) => {
       const msgSend = msg.detail as DetailSend;
       setButton("resend");
 
-      const coins = msgSend.amount.map(
-        (amount) =>
-          `${formatUToken(amount.amount as U<Token>)} ${formatUDenom(
-            amount.denom
-          )} `
-      );
-
       // Not able to resend if failure
       if (!success) {
         // Not able to resend if failed
@@ -162,7 +152,7 @@ export const MsgDetail = ({ msg, success }: MsgDetailProps) => {
       return (
         <SingleMsg
           type="Send"
-          bolds={coins}
+          bolds={formatBalanceWithDenomList(msgSend.amount)}
           text2="to"
           link2={{
             type: "contract_address",

src/lib/pages/past-txs/components/PastTxTable.tsx

@@ -31,16 +31,13 @@ import type {
   DetailInstantiate,
   DetailSend,
   DetailUpload,
-  Token,
   Transaction,
-  U,
 } from "lib/types";
 import {
   camelToSnake,
   encode,
-  formatUDenom,
-  formatUToken,
   extractMsgType,
+  formatBalanceWithDenomList,
 } from "lib/utils";
 
 import { MsgDetail } from "./MsgDetail";
@@ -301,16 +298,10 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
         setButton("");
         return <SingleMsg type="Failed" text1="to send assets" />;
       }
-      const coins = sendMsgs[0].amount.map(
-        (amount) =>
-          `${formatUToken(amount.amount as U<Token>)} ${formatUDenom(
-            amount.denom
-          )}`
-      );
       return (
         <SingleMsg
           type="Send"
-          bolds={coins}
+          bolds={formatBalanceWithDenomList(sendMsgs[0].amount)}
           text2="to"
           link1={{
             type: "contract_address",

src/lib/utils/formatter/currency.format.ts

@@ -2,8 +2,14 @@ import type { BigSource } from "big.js";
 
 import type { Token, U } from "lib/types";
 
-import { demicrofy } from "./currency";
+import { formatTokenWithPrecision } from "./token";
 
-export function formatUToken(n: U<Token<BigSource>>): string {
-  return demicrofy(n).toFixed(6);
+export function formatToken(
+  amount: U<Token<BigSource>>,
+  denom: string
+): string {
+  if (denom[0] === "u") {
+    return formatTokenWithPrecision(amount, 6);
+  }
+  return amount.toString();
 }

src/lib/utils/formatter/denom.ts

@@ -2,20 +2,18 @@ import type { StdFee } from "@cosmjs/stargate";
 
 import type { Token, U } from "lib/types";
 
-import { formatUToken } from "./currency.format";
-
-export const formatUDenom = (uDenom: string) => {
-  return uDenom.replace("u", "").toUpperCase();
-};
+import { formatToken } from "./currency.format";
+import { getTokenLabel } from "./tokenType";
 
 export const formatUFee = (uFee: string) => {
   const regex = /([0-9]+)|([a-zA-Z]+)/g;
   const [fee, denom] = uFee.match(regex) as RegExpMatchArray;
-  return `${formatUToken(fee as U<Token>)} ${formatUDenom(denom)}`;
+  return `${formatToken(fee as U<Token>, denom)} ${getTokenLabel(denom)}`;
 };
 
 export const formatStdFee = (fee: StdFee) => {
-  return `${formatUToken(fee.amount[0].amount as U<Token>)} ${formatUDenom(
+  return `${formatToken(
+    fee.amount[0].amount as U<Token>,
     fee.amount[0].denom
-  )}`;
+  )} ${getTokenLabel(fee.amount[0].denom)}`;
 };

src/lib/utils/formatter/formatBalanceWithDenom.ts

@@ -2,11 +2,14 @@ import type { Coin } from "@cosmjs/stargate";
 
 import type { Token, U } from "lib/types";
 
-import { formatUToken } from "./currency.format";
-import { formatUDenom } from "./denom";
-
-export const formatBalanceWithDenom = (coins: Coin[]) =>
-  coins.map(
-    (amount) =>
-      `${formatUToken(amount.amount as U<Token>)} ${formatUDenom(amount.denom)}`
-  );
+import { formatToken } from "./currency.format";
+import { getTokenLabel } from "./tokenType";
+
+export const formatBalanceWithDenom = (coin: Coin) => {
+  return `${formatToken(coin.amount as U<Token>, coin.denom)} ${getTokenLabel(
+    coin.denom
+  )}`;
+};
+
+export const formatBalanceWithDenomList = (coins: Coin[]) =>
+  coins.map(formatBalanceWithDenom);

src/lib/utils/formatter/token.ts

@@ -1,6 +1,8 @@
 import type { BigSource } from "big.js";
 import big from "big.js";
 
+import type { Token } from "lib/types";
+
 export const formatDemimal =
   ({
     decimalPoints,
@@ -32,6 +34,9 @@ export const formatDemimal =
 
 const d6Formatter = formatDemimal({ decimalPoints: 6, delimiter: true });
 
-export const formatToken = (amount: BigSource, precision: number): string => {
+export const formatTokenWithPrecision = (
+  amount: Token<BigSource>,
+  precision: number
+): string => {
   return d6Formatter(big(amount).div(big(10).pow(precision)), "0");
 };

src/lib/utils/formatter/tokenType.ts

@@ -1,3 +1,5 @@
+import { truncate } from "../truncate";
+
 export const getTokenType = (type: string) => {
   switch (type.toLowerCase()) {
     case "ibc":
@@ -7,3 +9,14 @@ export const getTokenType = (type: string) => {
       return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
   }
 };
+
+export const getTokenLabel = (denom: string) => {
+  if (denom[0] === "u") {
+    return denom.replace("u", "").toUpperCase();
+  }
+  const splitId = denom.split("/");
+  if (splitId[1]) {
+    splitId[1] = truncate(splitId[1]);
+  }
+  return splitId.length === 1 ? denom : splitId.join("/");
+};