feat(copyable): add slice prop and copied feedback

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

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} />;
 };

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>,

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}