Add a new formatDenomWithBadge that returns a ReactNode

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
                       ) : (

components/bank/handlers/createMessageUtils.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { denomToAsset, formatAmount, formatDenom, formatLargeNumber } from '@/utils';
+import { formatAmount, 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 +13,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 = (

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>
     </>
   );

utils/format.ts

@@ -35,15 +35,13 @@
   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() ?? cleanDenom;
+  } else if (cleanDenom.startsWith('u')) {
+    cleanDenom = cleanDenom.slice(1).toUpperCase();
   }
 
   return cleanDenom;

utils/formatNode.tsx

@@ -0,0 +1,23 @@
+/**
+ * A collection of functions to format data, returning react nodes.
+ * This file is intended as a TSX addendum to `./format.ts`.
+ */
+import { ReactNode } from 'react';
+import { DenomVerifiedBadge } from '@/components';
+import { formatDenom } from '@/utils/format';
+
+/**
+ * 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'} inline relative bottom-1 text-primary`;
+
+  return (
+    <>
+      {cleanDenom} <DenomVerifiedBadge base={denom} className={classes} />
+    </>
+  );
+}

utils/index.ts

@@ -11,3 +11,4 @@ export * from './transactionUtils';
 export * from './types';
 export * from './constants';
 export * from './format';
+export * from './formatNode';