✨ add Copy & Tooltip component from tzsafe-ui

batcher-ui/package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@taquito/beacon-wallet": "^16.0.0",
     "@taquito/taquito": "^16.0.0",
     "@taquito/tzip12": "^16.0.0",

batcher-ui/src/components/Copy.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, useEffect, useState } from 'react';
+import Tooltip from './Tooltip';
+
+export type copyProps = {
+  children: ReactNode;
+  value: string;
+  disabled?: boolean;
+  text?: string;
+};
+
+const Copy = ({ children, value, disabled = false, text }: copyProps) => {
+  const [isCopying, setIsCopying] = useState(false);
+
+  useEffect(() => {
+    if (!isCopying) return;
+
+    setTimeout(() => {
+      setIsCopying(false);
+    }, 1500);
+  });
+
+  return (
+    <Tooltip
+      text={isCopying ? 'Copied' : text ?? 'Copy'}
+      disabled={disabled}
+      visible={isCopying ? true : disabled ? false : undefined}>
+      <a
+        href="#"
+        onClick={async () => {
+          if (disabled) return;
+
+          setIsCopying(true);
+
+          try {
+            await navigator.clipboard.writeText(value);
+          } catch (err) {
+            console.error('Failed to copy: ', err);
+          }
+        }}
+        data-name="copy">
+        {children}
+      </a>
+    </Tooltip>
+  );
+};
+
+export default Copy;

batcher-ui/src/components/NavBar.tsx

@@ -7,6 +7,7 @@ import Menu from './Menu';
 import LinkComponent from './Link';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Copy from './Copy';
 
 interface NavBarProps {
   isMenuOpen: boolean;
@@ -46,10 +47,12 @@ const NavBar = ({ isMenuOpen, setIsMenuOpen }: NavBarProps) => {
 
         <div className="flex">
           {userAddress ? (
-            <p className="p-4">{`${userAddress.substring(
-              0,
-              3
-            )}...${userAddress.substring(userAddress.length - 3)}`}</p>
+            <Copy value={userAddress} disabled={false}>
+              <p className="p-4">{`${userAddress.substring(
+                0,
+                3
+              )}...${userAddress.substring(userAddress.length - 3)}`}</p>
+            </Copy>
           ) : null}
           <button
             type="button"

batcher-ui/src/components/Tooltip.tsx

@@ -0,0 +1,36 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import React, { ReactNode } from 'react';
+
+type tooltipProps = {
+  children: ReactNode;
+  text: string;
+  disabled?: boolean;
+  visible?: boolean;
+};
+
+const Tooltip = ({
+  children,
+  text,
+  disabled = false,
+  visible,
+}: tooltipProps) => {
+  return (
+    <TooltipPrimitive.Provider delayDuration={0}>
+      <TooltipPrimitive.Root open={visible}>
+        <TooltipPrimitive.Trigger asChild disabled={disabled}>
+          {children}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Content
+          sideOffset={4}
+          className="radix-side-top:animate-slide-down-fade radix-side-right:animate-slide-left-fade radix-side-bottom:animate-slide-up-fade radix-side-left:animate-slide-right-fade inline-flex items-center rounded-md bg-zinc-800 px-4 py-2.5 shadow-lg">
+          <TooltipPrimitive.Arrow className="fill-current text-zinc-800" />
+          <span className="block max-w-xs text-xs leading-none text-zinc-100">
+            {text}
+          </span>
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+};
+
+export default Tooltip;