fix(components): fix native token label formatting

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#117](https://github.com/alleslabs/celatone-frontend/pull/117) Fix native token label formatting
 - [#94](https://github.com/alleslabs/celatone-frontend/pull/94) Add unsupported assets in contract details page
 - [#72](https://github.com/alleslabs/celatone-frontend/pull/72) Fix general wording and grammar
 - [#110](https://github.com/alleslabs/celatone-frontend/pull/110) Fix proposal detail rendering

src/lib/components/EstimatedFeeRender.tsx

@@ -2,7 +2,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 { formatUToken, getTokenLabel } from "lib/utils";
 
 export const EstimatedFeeRender = ({
   estimatedFee,
@@ -24,7 +24,7 @@ export const EstimatedFeeRender = ({
   return (
     <>
       {formatUToken(amount?.[0].amount as U<Token>)}{" "}
-      {formatUDenom(amount?.[0].denom)}
+      {getTokenLabel(amount?.[0].denom)}
     </>
   );
 };

src/lib/components/modal/UnsupportedTokensModal.tsx

@@ -23,8 +23,8 @@ import type { BalanceWithAssetInfo, Balance } from "lib/types";
 import {
   getFirstQueryParam,
   getTokenType,
-  truncate,
   formatToken,
+  getTokenLabel,
 } 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]);
 

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

@@ -24,9 +24,9 @@ import type {
 import {
   camelToSnake,
   encode,
-  formatUDenom,
   formatUToken,
   extractMsgType,
+  getTokenLabel,
 } from "lib/utils";
 
 interface MsgDetailProps {
@@ -139,7 +139,7 @@ export const MsgDetail = ({ msg, success }: MsgDetailProps) => {
 
       const coins = msgSend.amount.map(
         (amount) =>
-          `${formatUToken(amount.amount as U<Token>)} ${formatUDenom(
+          `${formatUToken(amount.amount as U<Token>)} ${getTokenLabel(
             amount.denom
           )} `
       );

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

@@ -38,9 +38,9 @@ import type {
 import {
   camelToSnake,
   encode,
-  formatUDenom,
   formatUToken,
   extractMsgType,
+  getTokenLabel,
 } from "lib/utils";
 
 import { MsgDetail } from "./MsgDetail";
@@ -303,7 +303,7 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
       }
       const coins = sendMsgs[0].amount.map(
         (amount) =>
-          `${formatUToken(amount.amount as U<Token>)} ${formatUDenom(
+          `${formatUToken(amount.amount as U<Token>)} ${getTokenLabel(
             amount.denom
           )}`
       );

src/lib/utils/formatter/denom.ts

@@ -3,19 +3,16 @@ 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 { 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 `${formatUToken(fee as U<Token>)} ${getTokenLabel(denom)}`;
 };
 
 export const formatStdFee = (fee: StdFee) => {
-  return `${formatUToken(fee.amount[0].amount as U<Token>)} ${formatUDenom(
+  return `${formatUToken(fee.amount[0].amount as U<Token>)} ${getTokenLabel(
     fee.amount[0].denom
   )}`;
 };

src/lib/utils/formatter/formatBalanceWithDenom.ts

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

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("/");
+};