Add a new formatDenomWithBadge that returns a ReactNode

This will add a badge if the denom is verified. Fixes #250
liftedinit · Feb 7, 2025 · a5a6c19 · a5a6c19
1 parent 64be274
commit a5a6c19
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 19 deletions.
diff --git a/components/bank/components/historyBox.tsx b/components/bank/components/historyBox.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { TransactionAmount, TxMessage } from '../types';
-import { shiftDigits, formatLargeNumber, formatDenom } from '@/utils';
+import { shiftDigits, formatLargeNumber, formatDenom, formatDenomWithBadge } from '@/utils';
 import { getHandler } from '@/components/bank/handlers/handlerRegistry';
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
 import { useTokenFactoryDenomsMetadata } from '@/hooks';
@@ -159,13 +159,14 @@ export function HistoryBox({
                         tx.sender === address ? (
                           <div className="text-gray-500 text-xs mt-1">
                             Incl.:{' '}
-                            {tx.fee &&
-                              formatLargeNumber(
-                                Number(shiftDigits(tx.fee.amount?.[0]?.amount, -6))
-                              ) +
-                                ' ' +
-                                formatDenom(tx.fee.amount?.[0]?.denom)}{' '}
-                            fee
+                            {tx.fee && (
+                              <>
+                                {formatLargeNumber(
+                                  Number(shiftDigits(tx.fee.amount?.[0]?.amount, -6))
+                                )}{' '}
+                                {formatDenomWithBadge(tx.fee.amount?.[0]?.denom, true)} fee
+                              </>
+                            )}
                           </div>
                         ) : null
                       ) : (

diff --git a/components/bank/handlers/createMessageUtils.tsx b/components/bank/handlers/createMessageUtils.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { denomToAsset, formatAmount, formatDenom, formatLargeNumber } from '@/utils';
+import {
+  denomToAsset,
+  formatAmount,
+  formatDenom,
+  formatDenomWithBadge,
+  formatLargeNumber,
+} from '@/utils';
 import { format } from 'react-string-format';
 import { TruncatedAddressWithCopy } from '@/components/react/addressCopy';
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
@@ -13,8 +19,7 @@ export const createTokenMessage = (
   metadata?: MetadataSDKType[]
 ) => {
   const formattedAmount = formatLargeNumber(formatAmount(amount, denom, metadata));
-
-  const formattedDenom = formatDenom(denom);
+  const formattedDenom = formatDenomWithBadge(denom);
 
   // coloredAmount is {0}
   const coloredAmount = (

diff --git a/components/factory/components/DenomDisplay.tsx b/components/factory/components/DenomDisplay.tsx
@@ -2,6 +2,15 @@ import { DenomImage, VerifiedIcon } from '@/components';
 import { formatTokenDisplay } from '@/utils';
 import React from 'react';
 
+export const DenomVerifiedBadge = ({
+  base,
+  ...props
+}: { base?: string } & { [i: string]: unknown }) => {
+  const verified = base === 'umfx';
+
+  return verified ? <VerifiedIcon {...props} /> : <></>;
+};
+
 export const DenomDisplay = ({
   denom,
   metadata,
@@ -15,7 +24,6 @@ export const DenomDisplay = ({
   withBackground?: boolean;
 }) => {
   const name = formatTokenDisplay(denom ?? metadata?.display ?? '?').toUpperCase();
-  const verified = metadata?.base === 'umfx';
 
   return (
     <>
@@ -24,7 +32,10 @@ export const DenomDisplay = ({
       </div>
       <p className="align-middle font-semibold text-[#161616] dark:text-white">
         {name}
-        {verified && <VerifiedIcon className="w-4 mx-1 inline relative bottom-1 text-primary" />}
+        <DenomVerifiedBadge
+          base={metadata?.base}
+          className="w-4 mx-1 inline relative bottom-1 text-primary"
+        />
       </p>
     </>
   );

diff --git a/utils/format.ts → utils/format.tsx b/utils/format.ts → utils/format.tsx
@@ -1,7 +1,9 @@
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
 import { shiftDigits } from '@/utils/maths';
 import { denomToAsset } from './ibc';
+import { DenomDisplay, DenomVerifiedBadge } from '@/components/factory/components/DenomDisplay';
 import env from '@/config/env';
+import { ReactNode } from 'react';
 
 export function formatLargeNumber(num: number): string {
   if (!Number.isFinite(num)) return 'Invalid number';
@@ -31,19 +33,33 @@ export function formatLargeNumber(num: number): string {
   return num.toFixed(6);
 }
 
+/**
+ * Format a denom to a display name react node with a verified badge.
+ * @param denom The denom to format.
+ * @param small Whether to use a smaller badge.
+ */
+export function formatDenomWithBadge(denom: string, small?: boolean): ReactNode {
+  const cleanDenom = formatDenom(denom);
+  const classes = `${small ? 'w-3' : 'w-5'} mx-1 inline relative bottom-1 text-primary`;
+
+  return (
+    <>
+      {cleanDenom} <DenomVerifiedBadge base={denom} className={classes} />
+    </>
+  );
+}
+
 export function formatDenom(denom: string): string {
   const assetInfo = denomToAsset(env.chain, denom);
 
   // Fallback to cleaning the denom if no assetInfo
-  const cleanDenom = denom?.replace(/^factory\/[^/]+\//, '');
+  let cleanDenom = denom.replace(/^factory\/[^/]+\//, '');
 
   // Skip cleaning for IBC denoms as they should be resolved via assetInfo
   if (cleanDenom.startsWith('ibc/')) {
-    return assetInfo?.display.toUpperCase() ?? '';
-  }
-
-  if (cleanDenom?.startsWith('u')) {
-    return cleanDenom.slice(1).toUpperCase();
+    cleanDenom = assetInfo?.display.toUpperCase() ?? '';
+  } else if (cleanDenom.startsWith('u')) {
+    cleanDenom = cleanDenom.slice(1).toUpperCase();
   }
 
   return cleanDenom;