add a click to copy functionality

flashbots · Nov 1, 2023 · db10117 · db10117
1 parent f0ecfcc
commit db10117
Showing 1 changed file with 20 additions and 4 deletions.
diff --git a/src/components/ProtectButton/index.tsx b/src/components/ProtectButton/index.tsx
@@ -6,7 +6,6 @@
  */
 import {PropsWithChildren} from 'react';
 import {useSDK} from '@metamask/sdk-react';
-import styles from './styles.module.css';
 
 const RPC_GOERLI_FLASHBOTS_NET = 'https://rpc-goerli.flashbots.net';
 const RPC_SEPOLIA_FLASHBOTS_NET = 'https://rpc-sepolia.flashbots.net';
@@ -128,9 +127,26 @@ function FlashbotsProtectButton(options: ProtectButtonOptions) {
 
   return (
     <div className="flex flex-col items-center gap-2">
-      <div className="min-w-full max-w-full p-3 flex items-start gap-2 border-solid rounded-md border-slate-200">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 mt-0.5 min-w-[16px]">
-          <path fill-rule="evenodd" d="M19.902 4.098a3.75 3.75 0 00-5.304 0l-4.5 4.5a3.75 3.75 0 001.035 6.037.75.75 0 01-.646 1.353 5.25 5.25 0 01-1.449-8.45l4.5-4.5a5.25 5.25 0 117.424 7.424l-1.757 1.757a.75.75 0 11-1.06-1.06l1.757-1.757a3.75 3.75 0 000-5.304zm-7.389 4.267a.75.75 0 011-.353 5.25 5.25 0 011.449 8.45l-4.5 4.5a5.25 5.25 0 11-7.424-7.424l1.757-1.757a.75.75 0 111.06 1.06l-1.757 1.757a3.75 3.75 0 105.304 5.304l4.5-4.5a3.75 3.75 0 00-1.035-6.037.75.75 0 01-.354-1z" clip-rule="evenodd" />
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => navigator.clipboard.writeText(rpcUrl.toString())}
+        onKeyPress={(event) => {
+          if (event.key === 'Enter') {
+            navigator.clipboard.writeText(rpcUrl.toString());
+          }
+        }}
+        className="group relative flex min-w-full max-w-full items-start gap-2 rounded-md border-solid border-slate-200 p-3 transition-colors duration-200 hover:bg-gray-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="mt-0.5 w-4 min-w-[16px]">
+          <path
+            fillRule="evenodd"
+            d="M19.902 4.098a3.75 3.75 0 00-5.304 0l-4.5 4.5a3.75 3.75 0 001.035 6.037.75.75 0 01-.646 1.353 5.25 5.25 0 01-1.449-8.45l4.5-4.5a5.25 5.25 0 117.424 7.424l-1.757 1.757a.75.75 0 11-1.06-1.06l1.757-1.757a3.75 3.75 0 000-5.304zm-7.389 4.267a.75.75 0 011-.353 5.25 5.25 0 011.449 8.45l-4.5 4.5a5.25 5.25 0 11-7.424-7.424l1.757-1.757a.75.75 0 111.06 1.06l-1.757 1.757a3.75 3.75 0 105.304 5.304l4.5-4.5a3.75 3.75 0 00-1.035-6.037.75.75 0 01-.354-1z"
+            clipRule="evenodd"
+          />
         </svg>
         <div>
           <p className="m-0 text-sm font-bold">RPC URL</p>