[pull] master from unlock-protocol:master

governance-app/package.json

@@ -16,7 +16,9 @@
     "ethers": "6.15.0",
     "next": "14.2.35",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1"
   },
   "devDependencies": {
     "@types/node": "22.13.10",

governance-app/src/components/AddressLink.tsx

@@ -0,0 +1,5 @@
+// ABOUTME: Client wrapper for the @unlock-protocol/ui Address component.
+// ABOUTME: Required because the UI package bundle lacks "use client" directives.
+'use client'
+
+export { Address as AddressLink } from '@unlock-protocol/ui'

governance-app/src/components/TruncatedId.tsx

@@ -0,0 +1,61 @@
+// ABOUTME: Client component that displays a truncated ID with a copy-to-clipboard button.
+// Shows first and last N characters separated by "…" and copies the full value on click.
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { MdContentCopy as CopyIcon, MdCheck as CheckIcon } from 'react-icons/md'
+
+type TruncatedIdProps = {
+  id: string
+  keep?: number
+  label?: string
+}
+
+export function TruncatedId({
+  id,
+  keep = 4,
+  label = 'Copy full ID',
+}: TruncatedIdProps) {
+  const [copied, setCopied] = useState(false)
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current)
+    }
+  }, [])
+
+  const display =
+    id.length <= keep * 2 + 1 ? id : `${id.slice(0, keep)}…${id.slice(-keep)}`
+
+  async function handleCopy(e: React.MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(id)
+      setCopied(true)
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current)
+      resetTimerRef.current = setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Clipboard API unavailable (non-HTTPS or permission denied) — fail silently.
+    }
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1">
+      <span className="font-mono">{display}</span>
+      <button
+        aria-label={label}
+        className="text-brand-ui-primary/40 transition-colors hover:text-brand-ui-primary"
+        onClick={handleCopy}
+        type="button"
+      >
+        {copied ? (
+          <CheckIcon className="text-green-500" size={14} />
+        ) : (
+          <CopyIcon size={14} />
+        )}
+      </button>
+    </span>
+  )
+}

governance-app/src/components/proposals/ProposalCard.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { TruncatedId } from '~/components/TruncatedId'
 import {
   formatDateTime,
   formatRelativeTime,
@@ -37,7 +38,12 @@ export function ProposalCard({
           <div className="flex flex-wrap items-center gap-3">
             <ProposalStateBadge state={proposal.state} />
             <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ui-primary/45">
-              Proposal {proposal.id}
+              Proposal{' '}
+              <TruncatedId
+                id={proposal.id}
+                keep={4}
+                label="Copy full proposal ID"
+              />
             </span>
           </div>
           <h2 className="text-2xl font-semibold text-brand-ui-primary">

governance-app/src/components/proposals/ProposalStateBadge.tsx

@@ -5,6 +5,7 @@ const stateClassNames: Record<ProposalState, string> = {
   Canceled: 'bg-slate-200 text-slate-700',
   Defeated: 'bg-rose-100 text-rose-700',
   Executed: 'bg-sky-100 text-sky-700',
+  Expired: 'bg-slate-200 text-slate-700',
   Pending: 'bg-amber-100 text-amber-700',
   Queued: 'bg-violet-100 text-violet-700',
   Succeeded: 'bg-teal-100 text-teal-700',