From ae099297d13825e3b6547127204061728f01954a Mon Sep 17 00:00:00 2001
From: Emirhan-Cavusoglu-sftw <emirhancavusoglu.sftw@gmail.com>
Date: Mon, 6 Jan 2025 22:54:08 +0300
Subject: [PATCH] feat(copyable): add slice prop and copied feedback

---
 app/package-lock.json                           |  6 ++++--
 app/src/components/Copyable.tsx                 | 17 +++++++++++++----
 app/src/components/shared.tsx                   |  7 ++++++-
 app/src/features/editor/hooks/useCompile.tsx    |  3 ++-
 .../interact/components/ContractInterface.tsx   |  2 +-
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index f1a02b1..681f5c5 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -6609,7 +6609,8 @@
     "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
       "version": "1.1.0",
       "inBundle": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@parcel/watcher-win32-arm64": {
       "version": "2.4.1",
@@ -39659,7 +39660,8 @@
       "dependencies": {
         "napi-wasm": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "peer": true
         }
       }
     },
diff --git a/app/src/components/Copyable.tsx b/app/src/components/Copyable.tsx
index aed81ea..89befcd 100644
--- a/app/src/components/Copyable.tsx
+++ b/app/src/components/Copyable.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
@@ -11,19 +11,28 @@ export interface CopyableProps {
   href?: boolean;
 }
 
-async function handleCopy(value: string) {
+async function handleCopy(value: string, onSuccess: () => void) {
   await navigator.clipboard.writeText(value);
+  onSuccess();
 }
 
 function Copyable({ value, label, tooltip, href }: CopyableProps) {
   const { themeColor } = useTheme();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = async () => {
+    await handleCopy(value, () => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
 
   return (
     <div
       style={{ cursor: "pointer", color: themeColor("gray1") }}
-      onClick={() => handleCopy(value)}
+      onClick={handleCopyClick}
     >
-      <Tooltip title={`Click to copy ${tooltip}`}>
+      <Tooltip title={copied ? "Copied!" : `Click to copy ${tooltip}`}>
         <span>
           {href ? (
             <a
diff --git a/app/src/components/shared.tsx b/app/src/components/shared.tsx
index a6c2205..fac2f4e 100644
--- a/app/src/components/shared.tsx
+++ b/app/src/components/shared.tsx
@@ -25,10 +25,15 @@ export const ButtonSpinner = () => (
 export const CopyableHex = ({
   hex,
   tooltip,
+  slice,
 }: {
   hex: string;
   tooltip: string;
+  slice: boolean;
 }) => {
-  const formattedHex = hex.slice(0, 6) + "..." + hex.slice(-4, hex.length);
+  let formattedHex = "...";
+  if (slice) {
+    formattedHex = hex.slice(0, 6) + "..." + hex.slice(-4, hex.length);
+  }
   return <Copyable value={hex} label={formattedHex} tooltip={tooltip} />;
 };
diff --git a/app/src/features/editor/hooks/useCompile.tsx b/app/src/features/editor/hooks/useCompile.tsx
index 84f864e..6ca2066 100644
--- a/app/src/features/editor/hooks/useCompile.tsx
+++ b/app/src/features/editor/hooks/useCompile.tsx
@@ -18,12 +18,13 @@ function toResults(
   return [
     <div key={"bytecode"}>
       <b>Bytecode</b>:<br />
-      <CopyableHex hex={prefixedBytecode} tooltip="bytecode" />
+      <CopyableHex hex={prefixedBytecode} slice={true} tooltip="bytecode" />
       <br />
       <br />
     </div>,
     <div key={"abi"}>
       <b>ABI:</b>
+      <CopyableHex hex={abi} slice={false} tooltip="ABI" />
       <br />
       {abi}
     </div>,
diff --git a/app/src/features/interact/components/ContractInterface.tsx b/app/src/features/interact/components/ContractInterface.tsx
index 8e8c8af..be4c404 100644
--- a/app/src/features/interact/components/ContractInterface.tsx
+++ b/app/src/features/interact/components/ContractInterface.tsx
@@ -71,7 +71,7 @@ export function ContractInterface({
         >
           Contract Interface
         </div>
-        <CopyableHex hex={contractId} tooltip="contract ID" />
+        <CopyableHex hex={contractId} slice={true} tooltip="contract ID" />
       </div>
 
       {functionInterfaces}