diff --git a/package-lock.json b/package-lock.json index 9ea2d4cdc..bbdf5a7a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,7 @@ "recharts": "^2.15.3", "ripple-address-codec": "^5.0.0", "ripple-binary-codec": "^2.9.0", + "tldts": "^6.1.86", "topojson-client": "^3.0.0", "usehooks-ts": "^3.1.0", "vite": "^7.3.2", diff --git a/package.json b/package.json index cc8d56238..5e4abf037 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "recharts": "^2.15.3", "ripple-address-codec": "^5.0.0", "ripple-binary-codec": "^2.9.0", + "tldts": "^6.1.86", "topojson-client": "^3.0.0", "usehooks-ts": "^3.1.0", "vite": "^7.3.2", diff --git a/src/containers/Accounts/AccountAsset/assetTables/NFTTable.tsx b/src/containers/Accounts/AccountAsset/assetTables/NFTTable.tsx index f3b3b37b7..1f19cd93e 100644 --- a/src/containers/Accounts/AccountAsset/assetTables/NFTTable.tsx +++ b/src/containers/Accounts/AccountAsset/assetTables/NFTTable.tsx @@ -16,9 +16,9 @@ import { XRP_BASE } from '../../../shared/transactionUtils' import { localizeNumber, shortenAccount, - shortenDomain, shortenNFTTokenID, } from '../../../shared/utils' +import { shortenDomain } from '../../../shared/domainUtils' import { XRP_SMALL_BALANCE_CURRENCY_OPTIONS } from '../../../shared/NumberFormattingUtils' import { useLanguage } from '../../../shared/hooks' import logger from '../../../../rippled/lib/logger' diff --git a/src/containers/Token/IOU/Header/index.tsx b/src/containers/Token/IOU/Header/index.tsx index b826b5091..03003e323 100644 --- a/src/containers/Token/IOU/Header/index.tsx +++ b/src/containers/Token/IOU/Header/index.tsx @@ -18,7 +18,11 @@ import { parsePercent, parsePrice, } from '../../../shared/NumberFormattingUtils' -import { shortenDomain, stripHttpProtocol } from '../../../shared/utils' +import { + getRegistrableDomain, + shortenDomainFromLeft, +} from '../../../shared/domainUtils' +import { calculateIouCirculatingSupply } from '../../shared/utils/circulatingSupply' interface HeaderProps { currency: string @@ -30,27 +34,6 @@ interface HeaderProps { isAmmTvlLoading: boolean } -const calculateCirculatingSupply = ( - tokenData: LOSToken, - holdersData: TokenHoldersData | undefined, -): number => { - if (tokenData.circ_supply) { - return Number(tokenData.circ_supply) - } - let circSupply = Number(tokenData.supply) || holdersData?.totalSupply || 0 - - // For stablecoins, don't subtract large percentage holders from circulating supply - if (tokenData.asset_subclass !== 'stablecoin' && holdersData) { - holdersData.holders.forEach((holder) => { - if (holder.percent >= 20) { - circSupply -= holder.balance - } - }) - } - - return circSupply -} - export const Header = ({ currency, tokenData, @@ -61,7 +44,7 @@ export const Header = ({ isAmmTvlLoading, }: HeaderProps) => { const { t } = useTranslation() - const circSupply = calculateCirculatingSupply(tokenData, holdersData) + const circSupply = calculateIouCirculatingSupply(tokenData, holdersData) const xrpRate = Number(xrpUSDRate) || 0 // Memoized formatted overview data @@ -178,11 +161,10 @@ export const Header = ({ diff --git a/src/containers/Token/IOU/hooks/useMarketCalculations.ts b/src/containers/Token/IOU/hooks/useMarketCalculations.ts deleted file mode 100644 index 4323830ca..000000000 --- a/src/containers/Token/IOU/hooks/useMarketCalculations.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { useMemo } from 'react' -import { formatPrice } from '../../../shared/utils' -import { TokenHoldersData } from '../api/holders' -import { LOSToken } from '../../../shared/losTypes' -import { - calculateCirculatingSupply, - formatCirculatingSupply, -} from '../utils/tokenCalculations' - -interface MarketCalculations { - marketCap: string | null - circSupply: number - formattedCircSupply: string -} - -interface UseMarketCalculationsProps { - holdersData: TokenHoldersData | undefined - tokenData: LOSToken - price: string - xrpUSDRate: string - isHoldersDataLoading: boolean -} - -export const useMarketCalculations = ({ - holdersData, - tokenData, - price, - xrpUSDRate, - isHoldersDataLoading, -}: UseMarketCalculationsProps): MarketCalculations => - useMemo(() => { - const circSupply = calculateCirculatingSupply(holdersData, tokenData) - - const marketCap = - !isHoldersDataLoading && circSupply && price && xrpUSDRate - ? formatPrice( - Number(circSupply) * Number(price) * Number(xrpUSDRate), - ) || null - : null - - const formattedCircSupply = formatCirculatingSupply(circSupply) - - return { - marketCap, - circSupply, - formattedCircSupply, - } - }, [holdersData, tokenData, price, xrpUSDRate, isHoldersDataLoading]) diff --git a/src/containers/Token/IOU/test/Header/Header.test.tsx b/src/containers/Token/IOU/test/Header/Header.test.tsx index 5f048d197..877a1284d 100644 --- a/src/containers/Token/IOU/test/Header/Header.test.tsx +++ b/src/containers/Token/IOU/test/Header/Header.test.tsx @@ -31,8 +31,6 @@ jest.mock('../../../../shared/utils', () => ({ return { num: d.toString(), unit: '' } }, formatSmallNumber: (value: number) => value.toFixed(4), - shortenDomain: (domain: string) => domain, - stripHttpProtocol: (url: string) => url.replace(/^https?:\/\//, ''), })) const TestWrapper = ({ children }: { children: React.ReactNode }) => ( diff --git a/src/containers/Token/IOU/test/hooks/useMarketCalculations.test.ts b/src/containers/Token/IOU/test/hooks/useMarketCalculations.test.ts deleted file mode 100644 index 040ffdf52..000000000 --- a/src/containers/Token/IOU/test/hooks/useMarketCalculations.test.ts +++ /dev/null @@ -1,273 +0,0 @@ -import { renderHook } from '@testing-library/react' -import { useMarketCalculations } from '../../hooks/useMarketCalculations' -import { TokenHoldersData } from '../../api/holders' -import { LOSToken } from '../../../../shared/losTypes' - -describe('useMarketCalculations', () => { - const mockTokenData: LOSToken = { - currency: 'USD', - issuer_account: 'rIssuer', - trustlines: 100, - index: 0, - } - - const mockHoldersData: TokenHoldersData = { - totalSupply: 1000000, - totalHolders: 100, - holders: [], - } - - it('returns market calculations with valid data', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.circSupply).toBe(1000000) - expect(result.current.formattedCircSupply).toBeDefined() - expect(result.current.marketCap).toBeDefined() - }) - - it('returns null marketCap when isHoldersDataLoading is true', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: true, - }), - ) - - expect(result.current.marketCap).toBeNull() - }) - - it('returns null marketCap when circSupply is 0', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: undefined, - tokenData: mockTokenData, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.marketCap).toBeNull() - }) - - it('returns null marketCap when price is empty', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.marketCap).toBeNull() - }) - - it('returns null marketCap when xrpUSDRate is empty', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.marketCap).toBeNull() - }) - - it('calculates marketCap correctly with valid inputs', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '1', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - // 1000000 * 1 * 2 = 2000000 - expect(result.current.marketCap).toBeDefined() - }) - - it('handles zero price', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.marketCap).toBeNull() - }) - - it('handles zero xrpUSDRate', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '0', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.marketCap).toBeNull() - }) - - it('handles very small price values', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.0001', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.marketCap).toBeDefined() - }) - - it('handles very large price values', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '1000000', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.marketCap).toBeDefined() - }) - - it('formats circulating supply', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.formattedCircSupply).toBeDefined() - expect(typeof result.current.formattedCircSupply).toBe('string') - }) - - it('returns circSupply as number', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(typeof result.current.circSupply).toBe('number') - }) - - it('handles undefined holdersData', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: undefined, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.circSupply).toBe(1000000) - }) - - it('handles circ_supply in tokenData', () => { - const { result } = renderHook(() => - useMarketCalculations({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, circ_supply: '500000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }), - ) - - expect(result.current.circSupply).toBe(500000) - }) - - it('memoizes results correctly', () => { - const { result, rerender } = renderHook( - (props) => useMarketCalculations(props), - { - initialProps: { - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }, - }, - ) - - const firstResult = result.current - - rerender({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }) - - expect(result.current).toEqual(firstResult) - }) - - it('updates when dependencies change', () => { - const { result, rerender } = renderHook( - (props) => useMarketCalculations(props), - { - initialProps: { - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '1000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }, - }, - ) - - const firstResult = result.current - - rerender({ - holdersData: mockHoldersData, - tokenData: { ...mockTokenData, supply: '2000000' }, - price: '0.5', - xrpUSDRate: '2', - isHoldersDataLoading: false, - }) - - expect(result.current.circSupply).not.toEqual(firstResult.circSupply) - }) -}) diff --git a/src/containers/Token/IOU/test/utils/tokenCalculations.test.ts b/src/containers/Token/IOU/test/utils/tokenCalculations.test.ts deleted file mode 100644 index 0e4701ccc..000000000 --- a/src/containers/Token/IOU/test/utils/tokenCalculations.test.ts +++ /dev/null @@ -1,217 +0,0 @@ -import { - calculateCirculatingSupply, - formatCirculatingSupply, -} from '../../utils/tokenCalculations' -import { TokenHoldersData } from '../../api/holders' -import { LOSToken } from '../../../../shared/losTypes' - -describe('tokenCalculations', () => { - describe('calculateCirculatingSupply', () => { - const mockTokenData: LOSToken = { - currency: 'USD', - issuer_account: 'rIssuer', - trustlines: 100, - index: 0, - } - - it('returns circ_supply from tokenData if available', () => { - const tokenData = { - ...mockTokenData, - circ_supply: '1000000', - } - const result = calculateCirculatingSupply(undefined, tokenData) - expect(result).toBe(1000000) - }) - - it('returns supply from tokenData when circ_supply is not available', () => { - const tokenData = { - ...mockTokenData, - supply: '5000000', - } - const result = calculateCirculatingSupply(undefined, tokenData) - expect(result).toBe(5000000) - }) - - it('returns totalSupply from holdersData when tokenData supply is not available', () => { - const holdersData: TokenHoldersData = { - totalSupply: 3000000, - totalHolders: 100, - holders: [], - } - const tokenData = { - ...mockTokenData, - } - const result = calculateCirculatingSupply(holdersData, tokenData) - expect(result).toBe(3000000) - }) - - it('returns 0 when no supply data is available', () => { - const tokenData = { - ...mockTokenData, - } - const result = calculateCirculatingSupply(undefined, tokenData) - expect(result).toBe(0) - }) - - it('subtracts large holders (>= 20%) for non-stablecoin tokens', () => { - const holdersData: TokenHoldersData = { - totalSupply: 1000000, - totalHolders: 5, - holders: [ - { account: 'rHolder1', balance: 300000, percent: 30 }, - { account: 'rHolder2', balance: 200000, percent: 20 }, - { account: 'rHolder3', balance: 100000, percent: 10 }, - ], - } - const tokenData = { - ...mockTokenData, - supply: '1000000', - asset_subclass: 'token', - } - const result = calculateCirculatingSupply(holdersData, tokenData) - // 1000000 - 300000 (30%) - 200000 (20%) = 500000 - expect(result).toBe(500000) - }) - - it('does not subtract large holders for stablecoin tokens', () => { - const holdersData: TokenHoldersData = { - totalSupply: 1000000, - totalHolders: 5, - holders: [ - { account: 'rHolder1', balance: 300000, percent: 30 }, - { account: 'rHolder2', balance: 200000, percent: 20 }, - { account: 'rHolder3', balance: 100000, percent: 10 }, - ], - } - const tokenData = { - ...mockTokenData, - supply: '1000000', - asset_subclass: 'stablecoin', - } - const result = calculateCirculatingSupply(holdersData, tokenData) - // For stablecoins, no subtraction: 1000000 - expect(result).toBe(1000000) - }) - - it('handles holders with exactly 20% threshold', () => { - const holdersData: TokenHoldersData = { - totalSupply: 1000000, - totalHolders: 5, - holders: [ - { account: 'rHolder1', balance: 200000, percent: 20 }, - { account: 'rHolder2', balance: 100000, percent: 10 }, - ], - } - const tokenData = { - ...mockTokenData, - supply: '1000000', - asset_subclass: 'token', - } - const result = calculateCirculatingSupply(holdersData, tokenData) - // 1000000 - 200000 (20%) = 800000 - expect(result).toBe(800000) - }) - - it('handles holders with less than 20% threshold', () => { - const holdersData: TokenHoldersData = { - totalSupply: 1000000, - totalHolders: 5, - holders: [ - { account: 'rHolder1', balance: 190000, percent: 19 }, - { account: 'rHolder2', balance: 100000, percent: 10 }, - ], - } - const tokenData = { - ...mockTokenData, - supply: '1000000', - asset_subclass: 'token', - } - const result = calculateCirculatingSupply(holdersData, tokenData) - // No subtraction: 1000000 - expect(result).toBe(1000000) - }) - - it('handles empty holders array', () => { - const holdersData: TokenHoldersData = { - totalSupply: 1000000, - totalHolders: 0, - holders: [], - } - const tokenData = { - ...mockTokenData, - supply: '1000000', - asset_subclass: 'token', - } - const result = calculateCirculatingSupply(holdersData, tokenData) - expect(result).toBe(1000000) - }) - - it('handles multiple large holders', () => { - const holdersData: TokenHoldersData = { - totalSupply: 1000000, - totalHolders: 10, - holders: [ - { account: 'rHolder1', balance: 250000, percent: 25 }, - { account: 'rHolder2', balance: 250000, percent: 25 }, - { account: 'rHolder3', balance: 250000, percent: 25 }, - { account: 'rHolder4', balance: 250000, percent: 25 }, - ], - } - const tokenData = { - ...mockTokenData, - supply: '1000000', - asset_subclass: 'token', - } - const result = calculateCirculatingSupply(holdersData, tokenData) - // 1000000 - (250000 * 4) = 0 - expect(result).toBe(0) - }) - - it('prioritizes circ_supply over supply', () => { - const holdersData: TokenHoldersData = { - totalSupply: 5000000, - totalHolders: 100, - holders: [], - } - const tokenData = { - ...mockTokenData, - circ_supply: '2000000', - supply: '3000000', - } - const result = calculateCirculatingSupply(holdersData, tokenData) - expect(result).toBe(2000000) - }) - }) - - describe('formatCirculatingSupply', () => { - it('formats small numbers with full precision', () => { - const result = formatCirculatingSupply(100) - expect(result).toBe('100') - }) - - it('formats large numbers with abbreviation', () => { - const result = formatCirculatingSupply(1000000) - expect(result).toMatch(/1\.0M|1M/) - }) - - it('formats very large numbers with abbreviation', () => { - const result = formatCirculatingSupply(1000000000) - expect(result).toMatch(/1\.0B|1B/) - }) - - it('formats zero', () => { - const result = formatCirculatingSupply(0) - expect(result).toBe('0') - }) - - it('formats decimal numbers', () => { - const result = formatCirculatingSupply(1234.5678) - expect(result).toBeDefined() - }) - - it('handles very small numbers', () => { - const result = formatCirculatingSupply(0.0001) - expect(result).toBeDefined() - }) - }) -}) diff --git a/src/containers/Token/IOU/utils/tokenCalculations.ts b/src/containers/Token/IOU/utils/tokenCalculations.ts deleted file mode 100644 index 350b204eb..000000000 --- a/src/containers/Token/IOU/utils/tokenCalculations.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { parseIntegerAmount } from '../../../shared/NumberFormattingUtils' -import { TokenHoldersData } from '../api/holders' -import { LOSToken } from '../../../shared/losTypes' - -/** - * Calculates the circulating supply for a token - * @param holdersData - Token holders data - * @param tokenData - Token data - * @returns Calculated circulating supply - */ -export const calculateCirculatingSupply = ( - holdersData: TokenHoldersData | undefined, - tokenData: LOSToken, -): number => { - if (tokenData.circ_supply) { - return Number(tokenData.circ_supply) - } - let circSupply = Number(tokenData.supply) || holdersData?.totalSupply || 0 - - // For stablecoins, don't subtract large percentage holders from circulating supply - if (tokenData.asset_subclass !== 'stablecoin' && holdersData) { - holdersData.holders.forEach((holder) => { - if (holder.percent >= 20) { - circSupply -= holder.balance - } - }) - } - - return circSupply -} - -/** - * Formats the circulating supply for display - * @param circSupply - The circulating supply number - * @returns Formatted circulating supply string - */ -export const formatCirculatingSupply = (circSupply: number): string => - parseIntegerAmount(circSupply) diff --git a/src/containers/Token/MPT/Header/GeneralOverview.tsx b/src/containers/Token/MPT/Header/GeneralOverview.tsx index aa3d8e242..e4c688632 100644 --- a/src/containers/Token/MPT/Header/GeneralOverview.tsx +++ b/src/containers/Token/MPT/Header/GeneralOverview.tsx @@ -36,10 +36,10 @@ export const GeneralOverview = ({
{t('token_page.issuer')}
-
+
diff --git a/src/containers/Token/MPT/Header/MarketData.tsx b/src/containers/Token/MPT/Header/MarketData.tsx index 8fe2c314e..7ad2777ce 100644 --- a/src/containers/Token/MPT/Header/MarketData.tsx +++ b/src/containers/Token/MPT/Header/MarketData.tsx @@ -5,29 +5,35 @@ import { Tooltip, useTooltip } from '../../../shared/components/Tooltip' import { ConfBalanceTooltipIcon } from '../../../shared/components/ConfBalanceTooltipIcon' interface MarketDataProps { - maxAmt?: string outstandingAmt?: string confidentialOutstandingAmt?: string assetScale?: number + // Circulating supply (outstanding minus large holders), scaled decimal string. + circulatingSupply?: string + circulatingSupplyLoading?: boolean } export const MarketData = ({ - maxAmt, outstandingAmt, confidentialOutstandingAmt, assetScale, + circulatingSupply, + circulatingSupplyLoading, }: MarketDataProps): JSX.Element => { const { t } = useTranslation() const { tooltip } = useTooltip() + // Supply is the on-chain outstanding amount. const formattedSupply = parseAmount( - convertScaledPrice(BigInt(maxAmt || '0'), assetScale ?? 0), - ) - - const formattedCircSupply = parseAmount( convertScaledPrice(BigInt(outstandingAmt || '0'), assetScale ?? 0), ) + // Circulating supply is derived from holder data. When that is unavailable + // (e.g. the holders request failed) show "--" rather than the unadjusted + // supply, which would look like a real circulating figure. + const formattedCircSupply = + circulatingSupply === undefined ? '--' : parseAmount(circulatingSupply) + const formattedConfidentialAmt = confidentialOutstandingAmt ? parseAmount( convertScaledPrice(BigInt(confidentialOutstandingAmt), assetScale ?? 0), @@ -45,7 +51,13 @@ export const MarketData = ({
{t('token_page.circulating_supply')}
-
{formattedCircSupply}
+
+ {circulatingSupplyLoading ? ( + + ) : ( + formattedCircSupply + )} +
{formattedConfidentialAmt && (
diff --git a/src/containers/Token/MPT/Header/Metadata.tsx b/src/containers/Token/MPT/Header/Metadata.tsx index 2182abb3b..f37e86af2 100644 --- a/src/containers/Token/MPT/Header/Metadata.tsx +++ b/src/containers/Token/MPT/Header/Metadata.tsx @@ -1,5 +1,8 @@ import { useTranslation } from 'react-i18next' -import { JsonView } from '../../../shared/components/JsonView' +import { + JsonView, + NO_STRING_COLLAPSE, +} from '../../../shared/components/JsonView' interface MetadataProps { decodedMPTMetadata: Record | string @@ -22,7 +25,12 @@ export const Metadata = ({ {isString ? (
{decodedMPTMetadata}
) : ( - + )}
diff --git a/src/containers/Token/MPT/Header/index.tsx b/src/containers/Token/MPT/Header/index.tsx index 74bed94d9..00106edc7 100644 --- a/src/containers/Token/MPT/Header/index.tsx +++ b/src/containers/Token/MPT/Header/index.tsx @@ -5,12 +5,13 @@ import './styles.scss' import { BAD_REQUEST, HASH192_REGEX, - shortenDomain, shortenMPTID, - stripHttpProtocol, convertToHttpURL, - shortenAccount, } from '../../../shared/utils' +import { + getRegistrableDomain, + shortenDomainFromLeft, +} from '../../../shared/domainUtils' import { CopyableText } from '../../../shared/components/CopyableText' import DomainLink from '../../../shared/components/DomainLink' import { FormattedMPTIssuance } from '../../../shared/Interfaces' @@ -37,6 +38,8 @@ interface Props { setError: (error: number | null) => void holdersCount?: number holdersLoading?: boolean + circulatingSupply?: string + circulatingSupplyLoading?: boolean } export const Header = (props: Props) => { @@ -48,6 +51,8 @@ export const Header = (props: Props) => { setError, holdersCount, holdersLoading, + circulatingSupply, + circulatingSupplyLoading, } = props const [showURLDropdown, setShowURLDropdown] = useState(false) const dropdownRef = useRef(null) @@ -87,7 +92,6 @@ export const Header = (props: Props) => { const { issuer, assetScale, - maxAmt, outstandingAmt, confidentialOutstandingAmt, transferFee, @@ -162,13 +166,6 @@ export const Header = (props: Props) => { /> )} - {/* Show issuer name if available */} - {issuerName && ( -
- ({shortenAccount(issuerName)} - ) -
- )} {allUris.length > 0 && ( @@ -181,11 +178,10 @@ export const Header = (props: Props) => { {allUris.length > 1 && (