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;