feat: improve type truncation

iotaledger · Oct 29, 2024 · a6b8a21 · a6b8a21
1 parent d3bd054
commit a6b8a21
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git 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
@@ -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<IotaObjectResponse>[] {
             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 (
                     <TableCellBase>
                         <ObjectLink objectId={objectId} label={type}>

diff --git 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 (
         <DisplayStats
             label="Type"
             value={
-                <ObjectLink objectId={`${address}?module=${module}`}>
+                <ObjectLink objectId={`${address}?module=${module}`} label={normalizedStructTag}>
                     {normalizedStructTag}
                 </ObjectLink>
             }

diff --git 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
@@ -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
@@ -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,