diff --git a/components/bank/components/historyBox.tsx b/components/bank/components/historyBox.tsx
index 4bbc0dde..fb386585 100644
--- 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 ? (
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
+ >
+ )}
) : null
) : (
diff --git a/components/bank/handlers/createMessageUtils.tsx b/components/bank/handlers/createMessageUtils.tsx
index 5179ce71..8cd3c4b6 100644
--- 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
index 8e67f5b4..e67800ea 100644
--- 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 ? : <>>;
+};
+
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 = ({
{name}
- {verified && }
+
>
);
diff --git a/utils/format.ts b/utils/format.tsx
similarity index 64%
rename from utils/format.ts
rename to utils/format.tsx
index 6aa72dd7..eb696382 100644
--- a/utils/format.ts
+++ b/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}
+ >
+ );
+}
+
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;