From a6b8a21da6b6df37d0e27c279dafee8f156dec69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= Date: Tue, 29 Oct 2024 12:55:28 +0100 Subject: [PATCH] feat: improve type truncation --- apps/explorer/src/components/ui/InternalLink.tsx | 4 ++-- .../src/lib/ui/utils/generateObjectListColumns.tsx | 8 ++++---- .../src/pages/object-result/views/ObjectView.tsx | 3 +-- .../src/components/preview-effects/ObjectLink.tsx | 10 +++++----- sdk/typescript/src/utils/format.ts | 13 +++++++++++++ sdk/typescript/src/utils/index.ts | 2 +- 6 files changed, 26 insertions(+), 14 deletions(-) diff --git a/apps/explorer/src/components/ui/InternalLink.tsx b/apps/explorer/src/components/ui/InternalLink.tsx index 22dfe4d4ee5..64ec36a573a 100644 --- a/apps/explorer/src/components/ui/InternalLink.tsx +++ b/apps/explorer/src/components/ui/InternalLink.tsx @@ -2,7 +2,7 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { formatAddress, formatDigest } from '@iota/iota-sdk/utils'; +import { formatAddress, formatDigest, formatType } from '@iota/iota-sdk/utils'; import { type ReactNode } from 'react'; import { Link, type LinkProps } from '~/components/ui'; @@ -48,6 +48,6 @@ export const CheckpointSequenceLink = createInternalLink('checkpoint', 'sequence export const AddressLink = createInternalLink('address', 'address', (addressOrNs) => formatAddress(addressOrNs), ); -export const ObjectLink = createInternalLink('object', 'objectId', formatAddress); +export const ObjectLink = createInternalLink('object', 'objectId', formatType); export const TransactionLink = createInternalLink('txblock', 'digest', formatDigest); export const ValidatorLink = createInternalLink('validator', 'address', formatAddress); diff --git a/apps/explorer/src/lib/ui/utils/generateObjectListColumns.tsx b/apps/explorer/src/lib/ui/utils/generateObjectListColumns.tsx index 223f4c35305..9407687d2f9 100644 --- a/apps/explorer/src/lib/ui/utils/generateObjectListColumns.tsx +++ b/apps/explorer/src/lib/ui/utils/generateObjectListColumns.tsx @@ -4,11 +4,11 @@ import { TableCellBase, TableCellText } from '@iota/apps-ui-kit'; import type { ColumnDef } from '@tanstack/react-table'; -import { parseObjectType, trimStdLibPrefix } from '~/lib'; -import { ObjectVideoImage, ObjectLink } from '~/components'; import type { IotaObjectResponse } from '@iota/iota-sdk/client'; +import { formatAddress, formatType } from '@iota/iota-sdk/utils'; +import { ObjectLink, ObjectVideoImage } from '~/components'; import { useResolveVideo } from '~/hooks'; -import { formatAddress } from '@iota/iota-sdk/utils'; +import { parseObjectType, trimStdLibPrefix } from '~/lib'; function Asset({ object }: { object: IotaObjectResponse }) { const video = useResolveVideo(object); @@ -56,7 +56,7 @@ export function generateObjectListColumns(): ColumnDef[] { cell({ row: { original: object } }) { const objectId = object?.data?.objectId; if (!objectId) return null; - const type = trimStdLibPrefix(parseObjectType(object)); + const type = trimStdLibPrefix(formatType(parseObjectType(object))); return ( diff --git a/apps/explorer/src/pages/object-result/views/ObjectView.tsx b/apps/explorer/src/pages/object-result/views/ObjectView.tsx index 57003094f59..a193bf51217 100644 --- a/apps/explorer/src/pages/object-result/views/ObjectView.tsx +++ b/apps/explorer/src/pages/object-result/views/ObjectView.tsx @@ -113,12 +113,11 @@ function TypeCard({ objectType }: TypeCardCardProps): JSX.Element { }; const normalizedStructTag = normalizeStructTag(structTag); - return ( + {normalizedStructTag} } diff --git a/dapps/multisig-toolkit/src/components/preview-effects/ObjectLink.tsx b/dapps/multisig-toolkit/src/components/preview-effects/ObjectLink.tsx index fb3be1518a5..d4bedcbfa77 100644 --- a/dapps/multisig-toolkit/src/components/preview-effects/ObjectLink.tsx +++ b/dapps/multisig-toolkit/src/components/preview-effects/ObjectLink.tsx @@ -7,7 +7,7 @@ import { CheckIcon, CopyIcon } from 'lucide-react'; import { useState } from 'react'; import toast from 'react-hot-toast'; -import { formatAddress } from './utils'; +import { formatAddress, formatType } from './utils'; type OwnerDisplay = string | { address: string } | { object: string }; @@ -43,7 +43,7 @@ export function ObjectLink({ if (ownerDisplay) { if (typeof ownerDisplay !== 'string') { objectId = 'address' in ownerDisplay ? ownerDisplay.address : ownerDisplay.object; - display = formatAddress(objectId); + display = formatType(objectId); } else { display = ownerDisplay; } @@ -55,18 +55,18 @@ export function ObjectLink({ if (inputObject) { objectId = inputObject; - display = formatAddress(inputObject); + display = formatType(inputObject); } if (object) { if ('objectId' in object) { objectId = object.objectId; - display = formatAddress(objectId); + display = formatType(objectId); } if ('packageId' in object) { objectId = object.packageId; - display = formatAddress(objectId); + display = formatType(objectId); } } diff --git a/sdk/typescript/src/utils/format.ts b/sdk/typescript/src/utils/format.ts index 1648cf629cb..8f54589df70 100644 --- a/sdk/typescript/src/utils/format.ts +++ b/sdk/typescript/src/utils/format.ts @@ -2,6 +2,8 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 +import { isValidIotaAddress, isValidIotaObjectId, IOTA_ADDRESS_LENGTH } from './iota-types.js'; + const ELLIPSIS = '\u{2026}'; export function formatAddress(address: string) { @@ -18,3 +20,14 @@ export function formatDigest(digest: string) { // Use 10 first characters return `${digest.slice(0, 10)}${ELLIPSIS}`; } + +export function formatType(type: string) { + const objectAddressPattern = new RegExp(`0x[a-fA-F0-9]{${IOTA_ADDRESS_LENGTH * 2}}`, 'g'); + const matches = type.match(objectAddressPattern) ?? []; + for (const match of matches) { + if (isValidIotaAddress(match) || isValidIotaObjectId(match)) { + type = type.replace(match, formatAddress(match)); + } + } + return type; +} diff --git a/sdk/typescript/src/utils/index.ts b/sdk/typescript/src/utils/index.ts index 231636ad254..3f579b43063 100644 --- a/sdk/typescript/src/utils/index.ts +++ b/sdk/typescript/src/utils/index.ts @@ -2,7 +2,7 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -export { formatAddress, formatDigest } from './format.js'; +export { formatAddress, formatDigest, formatType } from './format.js'; export { isValidIotaAddress, isValidIotaObjectId,