Merge pull request #70 from AElfProject/feature/export-privatekey

feat: added privatekey in deployment page to copy it
AElfProject · Nov 27, 2024 · a5bf8ad · a5bf8ad
2 parents a20a1a5 + 56c711c
commit a5bf8ad
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 10 deletions.
diff --git a/src/routes/deployment.scss b/src/routes/deployment.scss
@@ -0,0 +1,12 @@
+.private-key {
+  width: max-content;
+  > p {
+    filter: blur(8px);
+    user-select: none;
+
+    &.key-visible {
+      filter: none;
+      user-select: auto;
+    }
+  }
+}
diff --git a/src/routes/deployments.tsx b/src/routes/deployments.tsx
@@ -12,6 +12,9 @@ import {
 import { format } from "date-fns";
 import { Link } from "react-router-dom";
 import { useContractList } from "@/data/graphql";
+import "./deployment.scss";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { useState } from "react";
 
 export function Component() {
   const wallet = useWallet();
@@ -31,15 +34,16 @@ export function Component() {
         </TableHeader>
         <TableBody>
           {data ? (
-            data.contractList.items
-              .map((i) => (
-                <TableRow key={i.address}>
-                  <TableCell>{format(i.metadata.block.blockTime, "PPPppp")}</TableCell>
-                  <TableCell>
-                    <ViewAddressOnExplorer address={i.address} />
-                  </TableCell>
-                </TableRow>
-              ))
+            data.contractList.items.map((i) => (
+              <TableRow key={i.address}>
+                <TableCell>
+                  {format(i.metadata.block.blockTime, "PPPppp")}
+                </TableCell>
+                <TableCell>
+                  <ViewAddressOnExplorer address={i.address} />
+                </TableCell>
+              </TableRow>
+            ))
           ) : (
             <TableRow>
               <TableCell>Loading...</TableCell>
@@ -48,10 +52,34 @@ export function Component() {
         </TableBody>
       </Table>
       <h1 className="text-2xl mb-2">Wallet information</h1>
-      <p>
+      <p className="mt-3">
         Wallet address:{" "}
         <ViewAddressOnExplorer address={wallet?.wallet.address} />
       </p>
+      <p className="mt-2">Privatekey:</p>
+      <ViewPrivatekey privateKey={wallet?.wallet.privateKey} />
+    </div>
+  );
+}
+
+function ViewPrivatekey({ privateKey }: { privateKey: string }) {
+  if (!privateKey) {
+    return <></>;
+  }
+  const [isVisibleKey, setIsVisibleKey] = useState(false);
+
+  const toggleKey = () => setIsVisibleKey((prev: boolean) => !prev);
+  return (
+    <div className="flex gap-4 private-key py-2 px-4 mt-1 rounded-xl border-solid border-2 border-grey-900">
+      <p className={isVisibleKey ? "key-visible" : ""}>{privateKey}</p>
+      <EyeIcon
+        className={`cursor-pointer ${isVisibleKey ? "hidden" : ""}`}
+        onClick={toggleKey}
+      />
+      <EyeOffIcon
+        className={`cursor-pointer ${!isVisibleKey ? "hidden" : ""}`}
+        onClick={toggleKey}
+      />
     </div>
   );
 }