feat(explorer): make field values copyable across the app (#6849)

# Description of change

Please write a summary of your changes and why you made them.

## Links to any relevant issues

fixes #6829

## Type of change

Choose a type of change, and delete any options that are not relevant.

- Bug fix (a non-breaking change which fixes an issue)
- Enhancement (a non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Documentation Fix

## How the change has been tested

Describe the tests that you ran to verify your changes.

Make sure to provide instructions for the maintainer as well as any
relevant configurations.

- [ ] Basic tests (linting, compilation, formatting, unit/integration
tests)
- [ ] Patch-specific tests (correctness, functionality coverage)

### Infrastructure QA (only required for crates that are maintained by
@iotaledger/infrastructure)

- [ ] Synchronization of the indexer from genesis for a network
including migration objects.
- [ ] Restart of indexer synchronization locally without resetting the
database.
- [ ] Restart of indexer synchronization on a production-like database.
- [ ] Deployment of services using Docker.
- [ ] Verification of API backward compatibility.

## Change checklist

Tick the boxes that are relevant to your changes, and delete any items
that are not.

- [ ] I have followed the contribution guidelines for this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] I have checked that new and existing unit tests pass locally with
my changes

### Release Notes

<!--
Check each box that your changes affect. If none of the boxes relate to
your changes, release notes aren't required.

For each box you select, include information after the relevant heading
that describes the impact of your changes that a user might notice and
any actions they must take to implement updates.
-->

- [ ] Protocol:
- [ ] Nodes (Validators and Full nodes):
- [ ] Indexer:
- [ ] JSON-RPC:
- [ ] GraphQL:
- [ ] CLI:
- [ ] Rust SDK:
- [ ] REST API:

---------

Co-authored-by: Bran <[email protected]>

Author: evavirseda

.changeset/light-dryers-matter.md

@@ -0,0 +1,5 @@
+---
+'@iota/apps-ui-kit': patch
+---
+
+add copy button to DisplayStats component

apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx

@@ -3,16 +3,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Accordion, AccordionContent, Title, Divider } from '@iota/apps-ui-kit';
-import {
-    CoinFormat,
-    type TransactionSummaryType,
-    useCopyToClipboard,
-    useFormatCoin,
-    toast,
-} from '@iota/core';
-import { Copy } from '@iota/apps-ui-icons';
+import { CoinFormat, type TransactionSummaryType, useFormatCoin } from '@iota/core';
 import { AddressLink, CollapsibleCard, ObjectLink } from '~/components/ui';
 import { Fragment } from 'react';
+import { onCopySuccess } from '~/lib/utils';
 
 interface GasProps {
     amount?: bigint | number | string;
@@ -53,20 +47,14 @@ function GasAmount({ amount, burnedAmount }: GasProps): JSX.Element | null {
 }
 
 function GasPaymentLinks({ objectIds }: { objectIds: string[] }): JSX.Element {
-    const copyToClipBoard = useCopyToClipboard(() => toast('Copied'));
-
-    const handleCopy = async (objectId: string) => {
-        await copyToClipBoard(objectId);
-    };
-
     return (
         <div className="flex max-h-20 min-h-[20px] flex-wrap items-center gap-x-4 gap-y-2 overflow-y-auto">
             {objectIds.map((objectId, index) => (
                 <div key={index} className="flex items-center gap-x-1.5">
-                    <ObjectLink objectId={objectId} />
-                    <Copy
-                        className="shrink-0 cursor-pointer text-neutral-70"
-                        onClick={() => handleCopy(objectId)}
+                    <ObjectLink
+                        objectId={objectId}
+                        copyText={objectId}
+                        onCopySuccess={onCopySuccess}
                     />
                 </div>
             ))}

apps/explorer/src/components/object/DynamicFieldsCard.tsx

@@ -14,6 +14,7 @@ import {
     Panel,
     LoadingIndicator,
 } from '@iota/apps-ui-kit';
+import { onCopySuccess } from '~/lib/utils';
 
 interface DynamicFieldRowProps {
     id: string;
@@ -35,7 +36,11 @@ function DynamicFieldRow({ id, result, defaultOpen }: DynamicFieldRowProps): JSX
                             String(result.name.value)
                         ) : null}
                     </div>
-                    <ObjectLink objectId={result.objectId} />
+                    <ObjectLink
+                        objectId={result.objectId}
+                        copyText={result.objectId}
+                        onCopySuccess={onCopySuccess}
+                    />
                 </div>
             </AccordionHeader>
             <AccordionContent isExpanded={open}>

apps/explorer/src/components/object/FieldItem.tsx

@@ -6,6 +6,7 @@ import { type IotaMoveNormalizedType } from '@iota/iota-sdk/client';
 import { SyntaxHighlighter } from '~/components';
 import { AddressLink, Link, ObjectLink } from '~/components/ui';
 import { getFieldTypeValue } from '~/lib/ui';
+import { onCopySuccess } from '~/lib/utils';
 
 interface FieldItemProps {
     value: string | number | object | boolean;
@@ -34,15 +35,25 @@ export function FieldItem({
     if (normalizedType === TYPE_ADDRESS) {
         return (
             <div className="break-all">
-                <AddressLink address={value.toString()} noTruncate={!truncate} />
+                <AddressLink
+                    address={value.toString()}
+                    noTruncate={!truncate}
+                    copyText={value.toString()}
+                    onCopySuccess={onCopySuccess}
+                />
             </div>
         );
     }
 
     if (normalizedType === 'string' && TYPE_OBJECT_ID.includes(normalizedType)) {
         return (
             <div className="break-all">
-                <ObjectLink objectId={value.toString()} noTruncate={!truncate} />
+                <ObjectLink
+                    objectId={value.toString()}
+                    noTruncate={!truncate}
+                    copyText={value.toString()}
+                    onCopySuccess={onCopySuccess}
+                />
             </div>
         );
     }

apps/explorer/src/components/owned-coins/CoinItem.tsx

@@ -7,6 +7,7 @@ import { CoinFormat, useFormatCoin } from '@iota/core';
 import { type CoinStruct } from '@iota/iota-sdk/client';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { ObjectLink } from '../ui';
+import { onCopySuccess } from '~/lib/utils';
 
 interface CoinItemProps {
     coin: CoinStruct;
@@ -23,7 +24,12 @@ export function CoinItem({ coin }: CoinItemProps): JSX.Element {
             keyText={`${formattedBalance} ${symbol}`}
             isReverse
             value={
-                <ObjectLink objectId={coin.coinObjectId} label={formatAddress(coin.coinObjectId)} />
+                <ObjectLink
+                    objectId={coin.coinObjectId}
+                    label={formatAddress(coin.coinObjectId)}
+                    copyText={coin.coinObjectId}
+                    onCopySuccess={onCopySuccess}
+                />
             }
             fullwidth
         />

apps/explorer/src/components/top-packages/TopPackagesTable.tsx

@@ -7,6 +7,7 @@ import { type MoveCallMetric } from '@iota/iota-sdk/client';
 import { type ColumnDef } from '@tanstack/react-table';
 
 import { ObjectLink, PlaceholderTable, TableCard } from '~/components/ui';
+import { onCopySuccess } from '~/lib/utils';
 
 interface TopPackagesTableProps {
     data: MoveCallMetric[];
@@ -47,7 +48,7 @@ const tableColumns: ColumnDef<MoveCallMetric>[] = [
             const item = metric[0].package;
             return (
                 <TableCellBase>
-                    <ObjectLink objectId={item}>
+                    <ObjectLink objectId={item} copyText={item} onCopySuccess={onCopySuccess}>
                         <TableCellText>{item}</TableCellText>
                     </ObjectLink>
                 </TableCellBase>

apps/explorer/src/components/ui/InternalLink.tsx

@@ -2,6 +2,8 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Copy } from '@iota/apps-ui-icons';
+import { ButtonUnstyled } from '@iota/apps-ui-kit';
 import { formatAddress, formatDigest, formatType } from '@iota/iota-sdk/utils';
 import { type ReactNode } from 'react';
 
@@ -11,6 +13,9 @@ interface BaseInternalLinkProps extends LinkProps {
     noTruncate?: boolean;
     label?: string | ReactNode;
     queryStrings?: Record<string, string>;
+    copyText?: string;
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    onCopyError?: (e: unknown, text: string) => void;
 }
 
 function createInternalLink<T extends string>(
@@ -23,21 +28,47 @@ function createInternalLink<T extends string>(
         noTruncate,
         label,
         queryStrings = {},
+        copyText,
+        onCopySuccess,
+        onCopyError,
         ...props
     }: BaseInternalLinkProps & Record<T, string>) => {
         const truncatedAddress = noTruncate ? id : formatter(id);
         const queryString = new URLSearchParams(queryStrings).toString();
         const queryStringPrefix = queryString ? `?${queryString}` : '';
 
+        async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
+            event.stopPropagation();
+            if (!navigator.clipboard) {
+                return;
+            }
+            if (copyText) {
+                try {
+                    await navigator.clipboard.writeText(copyText);
+                    onCopySuccess?.(event, copyText);
+                } catch (error) {
+                    console.error('Failed to copy:', error);
+                    onCopyError?.(error, copyText);
+                }
+            }
+        }
+
         return (
-            <Link
-                className="text-primary-30 dark:text-primary-80"
-                variant="mono"
-                to={`/${base}/${encodeURI(id)}${queryStringPrefix}`}
-                {...props}
-            >
-                {label || truncatedAddress}
-            </Link>
+            <div className="flex flex-row items-center gap-x-xxs">
+                <Link
+                    className="text-primary-30 dark:text-primary-80"
+                    variant="mono"
+                    to={`/${base}/${encodeURI(id)}${queryStringPrefix}`}
+                    {...props}
+                >
+                    {label || truncatedAddress}
+                </Link>
+                {copyText && (
+                    <ButtonUnstyled onClick={handleCopyClick}>
+                        <Copy className="text-neutral-60 dark:text-neutral-40" />
+                    </ButtonUnstyled>
+                )}
+            </div>
         );
     };
 }

apps/explorer/src/components/ui/PageHeader.tsx

@@ -12,7 +12,7 @@ import {
     Placeholder,
 } from '@iota/apps-ui-kit';
 import { Copy, Warning } from '@iota/apps-ui-icons';
-import { useCopyToClipboard, toast } from '@iota/core';
+import { onCopySuccess } from '~/lib/utils';
 
 type PageHeaderType = 'Transaction' | 'Checkpoint' | 'Address' | 'Object' | 'Package';
 
@@ -35,12 +35,6 @@ export function PageHeader({
     after,
     status,
 }: PageHeaderProps): JSX.Element {
-    const copyToClipBoard = useCopyToClipboard(() => toast('Copied'));
-
-    const handleCopy = async () => {
-        await copyToClipBoard(title);
-    };
-
     return (
         <Panel>
             <div className="flex w-full items-center p-md--rs">
@@ -83,7 +77,7 @@ export function PageHeader({
                                             {title}
                                         </span>
                                         <Copy
-                                            onClick={handleCopy}
+                                            onClick={onCopySuccess}
                                             className="shrink-0 cursor-pointer"
                                         />
                                     </div>

apps/explorer/src/components/validator/ValidatorMeta.tsx

@@ -5,8 +5,9 @@ import { Badge, BadgeType, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
 import { type IotaValidatorSummary } from '@iota/iota-sdk/client';
 import { ArrowTopRight } from '@iota/apps-ui-icons';
 import { AddressLink } from '~/components/ui';
-import { ImageIcon, ImageIconSize, toast } from '@iota/core';
+import { ImageIcon, ImageIconSize } from '@iota/core';
 import type { InactiveValidatorData } from '~/pages/validator/ValidatorDetails';
+import { onCopySuccess } from '~/lib/utils';
 
 type ValidatorMetaProps = {
     validatorData: IotaValidatorSummary;
@@ -25,9 +26,6 @@ export function InactiveValidators({
 }: {
     validatorData: InactiveValidatorData;
 }): JSX.Element {
-    function handleOnCopy() {
-        toast('Copied to clipboard');
-    }
     return (
         <div className="flex flex-col gap-y-md">
             <Panel>
@@ -71,18 +69,19 @@ export function InactiveValidators({
                         keyText="Pool ID"
                         value={validatorStakingPoolId}
                         copyText={validatorStakingPoolId}
-                        onCopySuccess={handleOnCopy}
+                        onCopySuccess={onCopySuccess}
                     />
                     <KeyValueInfo
                         keyText="Address"
                         value={<AddressLink address={validatorAddress} label={validatorAddress} />}
                         copyText={validatorAddress}
-                        onCopySuccess={handleOnCopy}
+                        onCopySuccess={onCopySuccess}
                     />
                     <KeyValueInfo
                         keyText="Public Key"
                         value={validatorPublicKey}
                         copyText={validatorPublicKey}
+                        onCopySuccess={onCopySuccess}
                     />
                 </div>
             </Panel>
@@ -97,10 +96,6 @@ export function ValidatorMeta({ validatorData }: ValidatorMetaProps): JSX.Elemen
     const description = validatorData.description;
     const projectUrl = validatorData.projectUrl;
 
-    function handleOnCopy() {
-        toast('Copied to clipboard');
-    }
-
     return (
         <div className="flex flex-col gap-y-md">
             <Panel>
@@ -144,7 +139,7 @@ export function ValidatorMeta({ validatorData }: ValidatorMetaProps): JSX.Elemen
                         keyText="Pool ID"
                         value={validatorData.stakingPoolId}
                         copyText={validatorData.stakingPoolId}
-                        onCopySuccess={handleOnCopy}
+                        onCopySuccess={onCopySuccess}
                     />
                     <KeyValueInfo
                         keyText="Address"
@@ -155,7 +150,7 @@ export function ValidatorMeta({ validatorData }: ValidatorMetaProps): JSX.Elemen
                             />
                         }
                         copyText={validatorData.iotaAddress}
-                        onCopySuccess={handleOnCopy}
+                        onCopySuccess={onCopySuccess}
                     />
                     <KeyValueInfo
                         keyText="Public Key"

apps/explorer/src/index.css

@@ -103,15 +103,9 @@ body,
             'node-map';
     }
 
-    @screen md {
-        .home-page-grid-container-bottom {
-            @apply gap-10;
-        }
-    }
-
     @screen lg {
         .home-page-grid-container-bottom {
-            @apply grid grid-cols-2 gap-x-20 gap-y-10;
+            @apply grid grid-cols-2 gap-x-8 gap-y-8;
             grid-template-areas:
                 'activity activity'
                 'packages validators'

apps/explorer/src/lib/ui/utils/generateCheckpointsTableColumns.tsx

@@ -6,6 +6,7 @@ import { TableCellBase, TableCellText } from '@iota/apps-ui-kit';
 import type { Checkpoint } from '@iota/iota-sdk/client';
 import type { ColumnDef } from '@tanstack/react-table';
 import { CheckpointSequenceLink, CheckpointLink } from '~/components';
+import { onCopySuccess } from '~/lib/utils';
 import { getElapsedTime } from '~/pages/epochs/utils';
 
 /**
@@ -23,6 +24,8 @@ export function generateCheckpointsTableColumns(): ColumnDef<Checkpoint>[] {
                         <CheckpointLink
                             digest={digest}
                             label={<TableCellText>{digest}</TableCellText>}
+                            copyText={digest}
+                            onCopySuccess={onCopySuccess}
                         />
                     </TableCellBase>
                 );

apps/explorer/src/lib/ui/utils/generateTransactionsTableColumns.tsx

@@ -10,6 +10,7 @@ import type { ColumnDef } from '@tanstack/react-table';
 import { AddressLink, TransactionLink } from '../../../components/ui';
 import { formatAddress, formatDigest, NANOS_PER_IOTA } from '@iota/iota-sdk/utils';
 import { getElapsedTime } from '~/pages/epochs/utils';
+import { onCopySuccess } from '~/lib/utils';
 
 /**
  * Generate table columns renderers for the transactions data.
@@ -26,6 +27,8 @@ export function generateTransactionsTableColumns(): ColumnDef<IotaTransactionBlo
                         <TransactionLink
                             digest={digest}
                             label={<TableCellText>{formatDigest(digest)}</TableCellText>}
+                            copyText={digest}
+                            onCopySuccess={onCopySuccess}
                         />
                     </TableCellBase>
                 );
@@ -41,6 +44,8 @@ export function generateTransactionsTableColumns(): ColumnDef<IotaTransactionBlo
                         <AddressLink
                             address={address}
                             label={<TableCellText>{formatAddress(address)}</TableCellText>}
+                            copyText={address}
+                            onCopySuccess={onCopySuccess}
                         />
                     </TableCellBase>
                 );

apps/explorer/src/lib/utils/index.ts

@@ -15,3 +15,4 @@ export * from './stringUtils';
 export * from './iotaMoveTypeConverters';
 export * from './getSupplyChangeAfterEpochEnd';
 export * from './sanitizePendingValidators';
+export * from './onCopySuccess';

apps/explorer/src/lib/utils/onCopySuccess.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { toast } from '@iota/core';
+
+export function onCopySuccess() {
+    toast.success('Copied to clipboard');
+}