Show toolbar to copy, paste and delete input

Author: ADTC

src/components/IconSpan/index.tsx

@@ -0,0 +1,21 @@
+import styles from "./styles.module.css";
+import cn from "classnames";
+
+export default function IconSpan({
+  icon,
+  hover, // means the parent is hovered
+  onClick,
+}: {
+  icon: React.ReactNode;
+  hover: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <span
+      onClick={onClick}
+      className={cn(styles.iconSpan, hover && styles.hover)}
+    >
+      {icon}
+    </span>
+  );
+}

src/components/IconSpan/styles.module.css

@@ -0,0 +1,15 @@
+.iconSpan {
+  cursor: pointer;
+  padding-inline: 2px;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 0.1s, background-color 0.1s;
+}
+
+.hover {
+  opacity: 1;
+}
+
+.iconSpan:hover {
+  background-color: #003705;
+}

src/components/Text.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import TextField from "@mui/material/TextField";
 import Decimal from "decimal.js";
+import IconSpan from "./IconSpan";
 
 export default function Text({
   label,
@@ -16,6 +17,7 @@ export default function Text({
   error: boolean;
 }) {
   const [stringValue, setStringValue] = useState<string>("");
+  const [hover, setHover] = useState<boolean>(false);
 
   useEffect(() => {
     if (value === undefined) setStringValue("");
@@ -36,11 +38,38 @@ export default function Text({
     } else onChange(undefined);
   }, [onChange, stringValue]);
 
+  const helperText = (
+    <>
+      {label}{" "}
+      <IconSpan
+        icon="📋"
+        hover={hover}
+        onClick={
+          () =>
+            navigator.clipboard
+              .readText()
+              .then((text) => setStringValue(text))
+              .catch(() => {}) // Ignore error
+        }
+      />{" "}
+      <IconSpan
+        icon="📑"
+        hover={hover}
+        onClick={
+          () => navigator.clipboard.writeText(stringValue).catch(() => {}) // Ignore error
+        }
+      />{" "}
+      <IconSpan icon="❌" hover={hover} onClick={() => setStringValue("")} />
+    </>
+  );
+
   return (
     <TextField
+      onPointerEnter={() => setHover(true)}
+      onPointerLeave={() => setHover(false)}
       error={error}
-      helperText={label}
-      sx={xs ? { maxWidth: 130 } : undefined}
+      helperText={helperText}
+      sx={xs ? { maxWidth: 140 } : undefined}
       variant="outlined"
       value={stringValue}
       onChange={(e) => setStringValue(e.target.value)}

src/index.css

@@ -1,13 +1,18 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.MuiFormHelperText-root {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}

src/positions/LongPosition.tsx

@@ -108,7 +108,7 @@ export default function LongPosition() {
           error={error.rewardPercent}
         />
         <Text
-          label="Reward Amount"
+          label="Reward Amt" // "Reward Amount"
           xs
           value={rewardAmount}
           onChange={setRewardAmount}