-
Waku Keystore Management
+
);
diff --git a/examples/keystore-management/src/components/KeystoreExporter.tsx b/examples/keystore-management/src/components/KeystoreExporter.tsx
new file mode 100644
index 0000000..b9015ee
--- /dev/null
+++ b/examples/keystore-management/src/components/KeystoreExporter.tsx
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useKeystore } from "@/contexts/keystore";
+import { toast } from "sonner";
+import { ArrowUpToLine } from "lucide-react";
+import { Button } from "./ui/button";
+
+export function KeystoreExporter() {
+ const [showPasswordInput, setShowPasswordInput] = useState(false);
+ const [password, setPassword] = useState("");
+ const [isExporting, setIsExporting] = useState(false);
+ const { exportEntireKeystore, hasStoredCredentials } = useKeystore();
+
+ const handleExport = async () => {
+ if (!password) {
+ toast.error("Password is required");
+ return;
+ }
+
+ try {
+ setIsExporting(true);
+ await exportEntireKeystore(password);
+ toast.success("Keystore exported successfully");
+ setPassword("");
+ setShowPasswordInput(false);
+ setIsExporting(false);
+ } catch (error) {
+ setIsExporting(false);
+ toast.error("Failed to export keystore: " + (error instanceof Error ? error.message : String(error)));
+ }
+ };
+
+ return (
+
+ {!showPasswordInput ? (
+
+ ) : (
+
+
+
setPassword(e.target.value)}
+ placeholder="Enter keystore password"
+ className="flex-1 rounded-sm border border-terminal-border bg-background/80 px-3 py-2 font-mono text-xs text-terminal-text placeholder:text-terminal-text/50 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+ disabled={isExporting}
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/examples/keystore-management/src/components/Layout.tsx b/examples/keystore-management/src/components/Layout.tsx
index 7fbdec3..141ce8a 100644
--- a/examples/keystore-management/src/components/Layout.tsx
+++ b/examples/keystore-management/src/components/Layout.tsx
@@ -1,10 +1,10 @@
"use client";
import React, { Children, isValidElement } from 'react';
-import { TabItem, TabNavigation } from './Tabs/TabNavigation';
-import { useAppState } from '@/contexts/AppStateContext';
+import { useAppState } from '../contexts/AppStateContext';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs';
-const tabs: TabItem [] = [
+const tabs = [
{
id: 'membership',
label: 'Membership Registration',
@@ -24,28 +24,47 @@ export function Layout({ children }: { children: React.ReactNode }) {
const { activeTab, setActiveTab } = useAppState();
const childrenArray = Children.toArray(children);
+ const getTabContent = (tabId: string) => {
+ return childrenArray.find((child) => {
+ if (isValidElement(child) && typeof child.type === 'function') {
+ const componentName = child.type.name;
+ return componentToTabId[componentName] === tabId;
+ }
+ return false;
+ });
+ };
+
return (
-
-
-
-
- {childrenArray.map((child) => {
- if (isValidElement(child) && typeof child.type === 'function') {
- const componentName = child.type.name;
- const tabId = componentToTabId[componentName];
+
+
+
+
+
+
+ {tabs.map((tab) => (
+
+ {tab.label}
+
+ ))}
+
- if (tabId === activeTab) {
- return child;
- }
- }
- return null;
- })}
+ {tabs.map((tab) => (
+
+ {getTabContent(tab.id)}
+
+ ))}
+
+
-
+
);
}
\ No newline at end of file
diff --git a/examples/keystore-management/src/components/RLNImplementationToggle.tsx b/examples/keystore-management/src/components/RLNImplementationToggle.tsx
index f29afd8..b086da3 100644
--- a/examples/keystore-management/src/components/RLNImplementationToggle.tsx
+++ b/examples/keystore-management/src/components/RLNImplementationToggle.tsx
@@ -1,42 +1,38 @@
"use client";
-import { useRLNImplementation } from '@/contexts';
+import { useRLNImplementation } from '../contexts';
import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
export function RLNImplementationToggle() {
const { implementation, setImplementation } = useRLNImplementation();
return (
-
-