Add copy to clipboard button on every address

src/components/AddressDisplay.css

@@ -0,0 +1,44 @@
+.address-display {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--credence-space-2);
+}
+
+.address-display__address {
+  font-family: var(--credence-font-mono);
+  font-size: var(--credence-font-size-sm);
+  padding: var(--credence-space-1) var(--credence-space-2);
+  border-radius: var(--credence-radius-sm);
+  background-color: var(--credence-color-surface-hover);
+  color: var(--credence-text-primary);
+  transition: background-color 0.2s ease;
+  outline: none;
+}
+
+.address-display__address:hover,
+.address-display__address:focus {
+  background-color: var(--credence-color-surface-active);
+}
+
+.address-display__copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--credence-space-1);
+  border: none;
+  border-radius: var(--credence-radius-sm);
+  background: transparent;
+  color: var(--credence-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.address-display__copy-btn:hover {
+  background-color: var(--credence-color-surface-hover);
+  color: var(--credence-text-primary);
+}
+
+.address-display__copy-btn:focus-visible {
+  outline: 2px solid var(--credence-color-primary);
+  outline-offset: 2px;
+}

src/components/AddressDisplay.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import useCopyToClipboard from '../hooks/useCopyToClipboard'
+import { useToast } from './ToastProvider'
+import { truncateAddress } from '../lib/stellar'
+import './AddressDisplay.css'
+
+export interface AddressDisplayProps {
+  address: string
+  className?: string
+  showCopyButton?: boolean
+}
+
+export default function AddressDisplay({
+  address,
+  className = '',
+  showCopyButton = true,
+}: AddressDisplayProps) {
+  const { copy, copied } = useCopyToClipboard()
+  const { addToast } = useToast()
+  const [isHovered, setIsHovered] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+
+  const handleCopy = async () => {
+    const success = await copy(address)
+    if (success) {
+      addToast('success', 'Address copied to clipboard')
+    }
+  }
+
+  const displayAddress = (isHovered || isFocused) ? address : truncateAddress(address)
+
+  return (
+    <div className={`address-display ${className}`}>
+      <code
+        className="address-display__address"
+        title={address}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        tabIndex={0}
+      >
+        {displayAddress}
+      </code>
+      {showCopyButton && (
+        <button
+          type="button"
+          className="address-display__copy-btn"
+          onClick={handleCopy}
+          aria-label={copied ? 'Copied' : 'Copy address'}
+        >
+          {copied ? (
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          ) : (
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
+          )}
+        </button>
+      )}
+    </div>
+  )
+}

src/pages/Dashboard.tsx

@@ -5,6 +5,7 @@ import Badge from '../components/Badge'
 import Banner from '../components/Banner'
 import Button from '../components/Button'
 import TrustGauge from '../components/TrustGauge'
+import AddressDisplay from '../components/AddressDisplay'
 import { EmptyState, LoadingSkeleton } from '../components/states'
 import { useWallet } from '../context/WalletContext'
 import { useSeo } from '../hooks/useSeo'

src/pages/Transactions.tsx

@@ -2,13 +2,13 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import './Transactions.css'
 import Badge from '../components/Badge'
+import AddressDisplay from '../components/AddressDisplay'
 import Select from '../components/controls/Select'
 import { EmptyState, ErrorState, LoadingSkeleton } from '../components/states'
 import { useSettings } from '../context/SettingsContext'
 import { useDocumentTitle } from '../hooks/useDocumentTitle'
 import { useTransactions } from '../hooks/useTransactions'
 import { explorerUrl } from '../lib/explorerUrl'
-import { truncateAddress } from '../lib/stellar'
 import type { Transaction } from '../api/types'
 
 type StatusFilter = 'all' | 'pending' | 'confirmed' | 'failed'
@@ -135,9 +135,7 @@ export default function Transactions() {
                       <time dateTime={tx.timestamp}>{relativeTime(tx.timestamp)}</time>
                     </td>
                     <td data-label="Transaction">
-                      <span className="transactions__hash" title={tx.hash}>
-                        {truncateAddress(tx.hash)}
-                      </span>{' '}
+                      <AddressDisplay address={tx.hash} className="transactions__hash" />{' '}
                       <a
                         href={explorerUrl(network, tx.hash)}
                         target="_blank"