Docusaurus migration - website-src-components-3

website/src/components/KeypairGenerator.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Key, ArrowRight, Fingerprint } from 'lucide-react';
+
+export function KeypairGenerator() {
+  const [privateKey, setPrivateKey] = useState('0x' + Array.from({ length: 64 }, () => Math.floor(Math.random() * 16).toString(16)).join(''));
+  const [showPrivate, setShowPrivate] = useState(false);
+
+  const generate = () => {
+    setPrivateKey('0x' + Array.from({ length: 64 }, () => Math.floor(Math.random() * 16).toString(16)).join(''));
+  };
+
+  const publicKey = 'xdc' + privateKey.slice(2, 42);
+
+  return (
+    <div className="my-6 overflow-hidden rounded-xl border border-border bg-card shadow-[0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08)]">
+      <div className="border-b border-border px-5 py-3">
+        <div className="flex items-center gap-2">
+          <Key className="h-4 w-4 text-primary" />
+          <h3 className="text-sm font-semibold">Keypair Demo</h3>
+        </div>
+      </div>
+      <div className="space-y-4 p-5">
+        <div className="flex items-center gap-4">
+          <div className="flex-1 rounded-lg bg-muted p-3">
+            <div className="mb-1 flex items-center gap-2 text-xs text-muted-foreground">
+              <Key className="h-3 w-3" /> Private Key
+            </div>
+            <div className="font-mono text-xs break-all">{showPrivate ? privateKey : '•'.repeat(42)}</div>
+          </div>
+          <ArrowRight className="h-5 w-5 text-muted-foreground" />
+          <div className="flex-1 rounded-lg bg-muted p-3">
+            <div className="mb-1 flex items-center gap-2 text-xs text-muted-foreground">
+              <Fingerprint className="h-3 w-3" /> Public Address
+            </div>
+            <div className="font-mono text-xs break-all text-primary">{publicKey}</div>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowPrivate(!showPrivate)}
+            className="rounded-lg border border-border px-4 py-2 text-sm font-medium transition-colors hover:bg-muted"
+          >
+            {showPrivate ? 'Hide Private Key' : 'Show Private Key'}
+          </button>
+          <button
+            onClick={generate}
+            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            Generate New
+          </button>
+        </div>
+        <p className="text-xs text-muted-foreground">Demo only — never share your real private key.</p>
+      </div>
+    </div>
+  );
+}
+
+export default KeypairGenerator;