feat:add truncate peer id

src/app/service-providers/data/column-definition.tsx

@@ -1,9 +1,9 @@
 import { ID } from '@filecoin-foundation/ui-filecoin/Table/ID'
-import { PeerID } from '@filecoin-foundation/ui-filecoin/Table/PeerID'
 import { YesNoStatus } from '@filecoin-foundation/ui-filecoin/Table/YesNoStatus'
 // import { ExternalTextLink } from '@filecoin-foundation/ui-filecoin/TextLink/ExternalTextLink'
 import { createColumnHelper } from '@tanstack/react-table'
 
+import { CompactPeerID } from '@/components/CompactPeerID'
 import { ProviderOverview } from '@/components/ProviderOverview'
 import { SoftwareVersion } from '@/components/SoftwareVersion'
 
@@ -108,7 +108,13 @@ export const columns = [
   }),
   columnHelper.accessor('peerId', {
     header: 'Peer ID',
-    cell: (info) => <PeerID id={info.getValue() || '-'} />,
+    maxSize: 260,
+    cell: (info) => {
+      const peerId = info.getValue()
+      if (!peerId) return <span>-</span>
+      return <CompactPeerID peerId={peerId} />
+    },
     sortingFn: 'alphanumeric',
+    sortUndefined: 'last',
   }),
 ]

src/app/warm-storage-service/data/column-definition.tsx

@@ -1,8 +1,8 @@
 import { ID } from '@filecoin-foundation/ui-filecoin/Table/ID'
-import { PeerID } from '@filecoin-foundation/ui-filecoin/Table/PeerID'
 // import { ExternalTextLink } from '@filecoin-foundation/ui-filecoin/TextLink/ExternalTextLink'
 import { createColumnHelper } from '@tanstack/react-table'
 
+import { CompactPeerID } from '@/components/CompactPeerID'
 import { ProviderOverview } from '@/components/ProviderOverview'
 import { SoftwareVersion } from '@/components/SoftwareVersion'
 
@@ -64,7 +64,11 @@ export const columns = [
   columnHelper.accessor('peerId', {
     id: 'peerId',
     header: 'Peer ID',
-    cell: (info) => <PeerID id={info.getValue() || '-'} />,
+    cell: (info) => {
+      const peerId = info.getValue()
+      if (!peerId) return <span>-</span>
+      return <CompactPeerID peerId={peerId} />
+    },
     sortingFn: 'alphanumeric',
     sortUndefined: 'last',
   }),

src/components/CompactPeerID.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Icon } from '@filecoin-foundation/ui-filecoin/Icon'
+import { Button } from '@headlessui/react'
+import { CheckSquareIcon, CopyIcon } from '@phosphor-icons/react'
+
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+import { truncatePeerID } from '@/utils/truncate-peer-id'
+
+type CompactPeerIDProps = {
+  peerId: string
+}
+
+export function CompactPeerID({ peerId }: CompactPeerIDProps) {
+  const { copy, isCopied } = useCopyToClipboard()
+
+  return (
+    <div className="inline-flex items-center gap-1">
+      <div
+        className="font-mono text-sm truncate whitespace-nowrap"
+        title={peerId}
+      >
+        {truncatePeerID(peerId)}
+      </div>
+
+      <Button
+        onClick={() => copy(peerId)}
+        aria-label={`Copy ${peerId} to clipboard`}
+        className="grid place-items-center p-1.5 rounded-md hover:bg-zinc-200 cursor-pointer"
+        disabled={isCopied}
+      >
+        {isCopied ? (
+          <span className="text-green-600">
+            <Icon component={CheckSquareIcon} size={18} />
+          </span>
+        ) : (
+          <span className="text-zinc-700">
+            <Icon component={CopyIcon} size={18} />
+          </span>
+        )}
+      </Button>
+    </div>
+  )
+}

src/utils/truncate-peer-id.ts

@@ -0,0 +1,15 @@
+const ELLIPSIS = '...'
+
+export function truncatePeerID(peerId: string, startLength = 8, endLength = 4) {
+  const trimmedPeerId = peerId.trim()
+
+  if (trimmedPeerId.length <= startLength + endLength + ELLIPSIS.length) {
+    return trimmedPeerId
+  }
+
+  return `
+    ${trimmedPeerId.slice(0, startLength)}
+    ${ELLIPSIS}
+    ${trimmedPeerId.slice(-endLength)}
+  `
+}