From 5cddbd7f59c470a759965772c70112f6294b0402 Mon Sep 17 00:00:00 2001
From: Andreas Greimel <andreas@mintgarden.io>
Date: Tue, 12 Nov 2024 16:53:25 +0100
Subject: [PATCH] Only show an icon button to copy the asset ID

---
 src/components/CopyBox.tsx    | 28 ++++------------------------
 src/components/CopyButton.tsx | 30 ++++++++++++++++++++++++++++++
 src/components/Header.tsx     |  2 +-
 src/pages/Token.tsx           | 17 +++++++++++------
 4 files changed, 46 insertions(+), 31 deletions(-)
 create mode 100644 src/components/CopyButton.tsx

diff --git a/src/components/CopyBox.tsx b/src/components/CopyBox.tsx
index 204ab1a..52605dd 100644
--- a/src/components/CopyBox.tsx
+++ b/src/components/CopyBox.tsx
@@ -1,22 +1,10 @@
-import { writeText } from '@tauri-apps/plugin-clipboard-manager';
-import { CopyCheckIcon, CopyIcon } from 'lucide-react';
-import { useState } from 'react';
-import { Button } from './ui/button';
+import { CopyButton } from './CopyButton';
 
 export function CopyBox(props: {
   title: string;
   content: string;
   className?: string;
 }) {
-  const [copied, setCopied] = useState(false);
-
-  const copyAddress = () => {
-    writeText(props.content);
-
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
   return (
     <div className={`flex rounded-md shadow-sm max-w-lg ${props.className}`}>
       <input
@@ -26,18 +14,10 @@ export function CopyBox(props: {
         readOnly
         className='block w-full text-sm rounded-none rounded-l-md border-0 py-1.5 px-2 truncate text-muted-foreground bg-background font-mono tracking-tight ring-1 ring-inset ring-neutral-200 dark:ring-neutral-800 sm:leading-6'
       />
-      <Button
-        size='icon'
-        variant='ghost'
+      <CopyButton
+        value={props.content}
         className='relative rounded-none -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-neutral-200 dark:ring-neutral-800 hover:bg-gray-50'
-        onClick={copyAddress}
-      >
-        {copied ? (
-          <CopyCheckIcon className='-ml-0.5 h-5 w-5 text-emerald-500' />
-        ) : (
-          <CopyIcon className='-ml-0.5 h-5 w-5 text-muted-foreground' />
-        )}
-      </Button>
+      />
     </div>
   );
 }
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
new file mode 100644
index 0000000..b81d071
--- /dev/null
+++ b/src/components/CopyButton.tsx
@@ -0,0 +1,30 @@
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { CopyCheckIcon, CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from './ui/button';
+
+export function CopyButton(props: { value: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copyAddress = () => {
+    writeText(props.value);
+
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Button
+      size='icon'
+      variant='ghost'
+      onClick={copyAddress}
+      className={props.className}
+    >
+      {copied ? (
+        <CopyCheckIcon className='h-5 w-5 text-emerald-500' />
+      ) : (
+        <CopyIcon className='h-5 w-5 text-muted-foreground' />
+      )}
+    </Button>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a93fda5..31a5afc 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -11,7 +11,7 @@ import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
 
 export default function Header(
   props: PropsWithChildren<{
-    title: string;
+    title: string | ReactNode;
     back?: () => void;
     children?: ReactNode;
   }>,
diff --git a/src/pages/Token.tsx b/src/pages/Token.tsx
index 95ab33e..6f634b1 100644
--- a/src/pages/Token.tsx
+++ b/src/pages/Token.tsx
@@ -1,7 +1,6 @@
 import CoinList from '@/components/CoinList';
 import ConfirmationDialog from '@/components/ConfirmationDialog';
 import Container from '@/components/Container';
-import { CopyBox } from '@/components/CopyBox';
 import Header from '@/components/Header';
 import { ReceiveAddress } from '@/components/ReceiveAddress';
 import { Button } from '@/components/ui/button';
@@ -53,6 +52,7 @@ import {
   events,
   TransactionSummary,
 } from '../bindings';
+import { CopyButton } from '@/components/CopyButton';
 
 export default function Token() {
   const navigate = useNavigate();
@@ -174,13 +174,18 @@ export default function Token() {
 
   return (
     <>
-      <Header title={asset ? (asset.name ?? 'Unknown asset') : ''} />
+      <Header
+        title={
+          <span>
+            {asset ? (asset.name ?? 'Unknown asset') : ''}{' '}
+            {asset?.asset_id !== 'xch' && (
+              <CopyButton value={asset?.asset_id ?? ''} />
+            )}
+          </span>
+        }
+      />
       <Container>
         <div className='flex flex-col gap-8 max-w-screen-lg'>
-          {asset?.asset_id !== 'xch' && (
-            <CopyBox title='Asset Id' content={asset?.asset_id ?? ''} />
-          )}
-
           <Card>
             <CardHeader className='flex flex-row justify-between items-center space-y-0 space-x-2 pb-2'>
               <div className='flex text-xl sm:text-4xl font-medium font-mono truncate'>