feat: copy list of wallets with score to clipboard

app/routes/index.tsx

@@ -6,6 +6,8 @@ import Contract from "~/components/Contract";
 import Header from "~/components/Header";
 import Settings from "~/components/Settings/Settings";
 import SettingsMobile from "~/components/Settings/SettingsMobile";
+import {CopyToClipboard} from 'react-copy-to-clipboard';
+import { CheckCircleIcon, ClipboardIcon } from "@heroicons/react/24/outline";
 
 let Graph = lazy(() => import("~/components/Graph"));
 
@@ -15,6 +17,16 @@ export default function Index() {
   const [threshold, setThreshold] = useState(50);
   const [graphStyle, setGraphStyle] = useState(false);
   const [contract, setContract] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+  }
+
+
 
   const toggleMenu = useCallback(() => setMenuOpen(!menuOpen), [setMenuOpen, menuOpen]);
 
@@ -37,6 +49,23 @@ export default function Index() {
           <ClientOnly>
             <Suspense fallback="">
               <Graph graphData={graphData} threshold={threshold} graphStyle={graphStyle} contract={contract} />
+              { graphData.hasOwnProperty("nodes") &&
+                <CopyToClipboard text={JSON.stringify(graphData.nodes)} onCopy={handleCopy}>
+                  <div>
+                  { !copied && <button className="absolute right-2 bottom-6 inline-flex items-center justify-center uppercase text-neutral-100 outine-none rounded-full px-3 py-2 bg-greenish-500 text-center hover:bg-greenish-400" onCopy={handleCopy}>
+                    <ClipboardIcon className="w-6 h-6 mr-2" />
+                    Copy data to clipboard
+                  </button>
+                  }
+                  { copied && <button className="absolute right-2 bottom-6 inline-flex items-center justify-center uppercase text-neutral-100 outine-none rounded-full px-3 py-2 bg-greenish-500 text-center hover:bg-greenish-400" onCopy={handleCopy}>
+                    <CheckCircleIcon className="w-6 h-6 mr-2" />
+                    Copied
+                  </button>
+                  }
+                  </div>
+
+                </CopyToClipboard>
+              }
             </Suspense>
           </ClientOnly>
         </div> 
@@ -53,3 +82,4 @@ export function ClientOnly({ children }: { children: ReactNode }) {
   }, []);
   return mounted ? <>{children}</> : null;
 }
+

app/styles/app.css

@@ -537,6 +537,22 @@ video {
   left: 2px;
 }
 
+.right-6 {
+  right: 1.5rem;
+}
+
+.bottom-6 {
+  bottom: 1.5rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -582,6 +598,14 @@ video {
   height: 100%;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -606,6 +630,10 @@ video {
   width: 75%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }

package.json

@@ -21,6 +21,7 @@
     "isbot": "^3.6.5",
     "react": "^18.2.0",
     "react-burger-menu": "^3.0.9",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-force-graph": "^1.41.20"
@@ -30,6 +31,7 @@
     "@remix-run/eslint-config": "^1.12.0",
     "@types/react": "^18.0.25",
     "@types/react-burger-menu": "^2.8.3",
+    "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.8",
     "concurrently": "^7.6.0",
     "eslint": "^8.27.0",