add: click-to-copy on donate address

Author: Kenbak

app/globals.css

@@ -2350,6 +2350,16 @@
     font-size: 0.6875rem;
     color: var(--color-cyan);
     word-break: break-all;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    transition: opacity 0.15s ease;
+  }
+
+  .nl-donate-addr:hover {
+    opacity: 0.7;
   }
 
   .nl-table-wrap {

components/newsletter/DonateFooter.tsx

@@ -1,14 +1,22 @@
 'use client';
 
+import { useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 
 interface DonateFooterProps {
   address: string;
 }
 
 export function DonateFooter({ address }: DonateFooterProps) {
+  const [copied, setCopied] = useState(false);
   const truncated = `${address.slice(0, 16)}…${address.slice(-16)}`;
 
+  function handleCopy() {
+    navigator.clipboard.writeText(address);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
   return (
     <div className="nl-donate">
       <QRCodeSVG
@@ -20,7 +28,9 @@ export function DonateFooter({ address }: DonateFooterProps) {
       />
       <div className="nl-donate-text">
         <span className="nl-donate-label">Support CipherScan</span>
-        <code className="nl-donate-addr" title={address}>{truncated}</code>
+        <button className="nl-donate-addr" onClick={handleCopy} title="Click to copy">
+          {copied ? 'Copied ✓' : truncated}
+        </button>
       </div>
     </div>
   );