git push --forceMerge pull request #1036 from Akpamgbo/codex/issues-1…

frontend/src/app/[locale]/settings/page.tsx

@@ -8,14 +8,13 @@ import {
   Shield,
   Monitor,
   Crown,
-  Copy,
-  CheckCheck,
   LogOut,
   Key,
 } from "lucide-react";
 import { Card, CardHeader, CardTitle, CardContent } from "../../components/ui/Card";
 import { Button } from "../../components/ui/Button";
 import { Input } from "../../components/ui/Input";
+import { CopyButton } from "../../components/ui/CopyButton";
 import { GamificationSettings } from "../../components/gamification/GamificationSettings";
 import { useThemeStore } from "../../stores/useThemeStore";
 import {
@@ -53,30 +52,6 @@ const SECTIONS = [
 
 type SectionId = (typeof SECTIONS)[number]["id"];
 
-// ─── Copy-to-clipboard helper ─────────────────────────────────────────────────
-
-function CopyButton({ value }: { value: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  };
-
-  return (
-    <button
-      onClick={handleCopy}
-      className="p-1.5 rounded-md text-zinc-400 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors"
-      title="Copy to clipboard"
-      aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
-    >
-      {copied ? <CheckCheck className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-    </button>
-  );
-}
-
 // ─── Toggle switch ─────────────────────────────────────────────────────────────
 
 function Toggle({

frontend/src/app/[locale]/wallet/page.tsx

@@ -4,8 +4,6 @@ import { useMemo, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
   Wallet,
-  Copy,
-  CheckCheck,
   ArrowDownLeft,
   ArrowUpRight,
   RefreshCw,
@@ -15,6 +13,7 @@ import {
 } from "lucide-react";
 import { Card, CardHeader, CardTitle, CardContent } from "../../components/ui/Card";
 import { Button } from "../../components/ui/Button";
+import { CopyButton } from "../../components/ui/CopyButton";
 import { PaginationControls } from "../../components/ui/PaginationControls";
 import { Spinner } from "../../components/global_ui/Spinner";
 import { TransactionsSkeleton } from "../../components/skeletons/TransactionsSkeleton";
@@ -132,28 +131,6 @@ function useHorizonPayments(address: string, horizonUrl: string, cursor: string
   });
 }
 
-// ─── Copy button ───────────────────────────────────────────────────────────────
-
-function CopyButton({ value }: { value: string }) {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  };
-  return (
-    <button
-      onClick={handleCopy}
-      className="p-1.5 rounded-md text-zinc-400 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors"
-      title="Copy to clipboard"
-      aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
-    >
-      {copied ? <CheckCheck className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-    </button>
-  );
-}
-
 // ─── QR Code display ──────────────────────────────────────────────────────────
 
 function QRDisplay({ address }: { address: string }) {

frontend/src/app/components/ui/CopyButton.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, CheckCheck } from "lucide-react";
+
+interface CopyButtonProps {
+  value: string;
+}
+
+export function CopyButton({ value }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="p-1.5 rounded-md text-zinc-400 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors"
+      title="Copy to clipboard"
+      aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
+    >
+      {copied ? <CheckCheck className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+    </button>
+  );
+}