Skip to content

Commit ad1808e

Browse files
danisharora099danisharora099
authored
chore(keystore-management): cleanup and improvements (#123)
1 parent 36a8ca0 commit ad1808e

30 files changed

+1036
-1074
lines changed

‎examples/keystore-management/package-lock.json‎

Lines changed: 28 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/keystore-management/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13-
"@waku/rln": "0.1.5-6198efb.0",
13+
"@waku/rln": "0.1.5-ad0e277.0",
1414
"next": "15.1.7",
1515
"react": "^19.0.0",
1616
"react-dom": "^19.0.0"

‎examples/keystore-management/src/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ body {
1818
color: var(--foreground);
1919
background: var(--background);
2020
font-family: Arial, Helvetica, sans-serif;
21-
}
21+
}

‎examples/keystore-management/src/app/layout.tsx‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
2+
import { Inter } from 'next/font/google'
33
import "./globals.css";
4-
import { WalletProvider } from "../contexts/WalletContext";
5-
import { RLNUnifiedProvider } from "../contexts/RLNUnifiedContext2";
6-
import { RLNImplementationProvider } from "../contexts/RLNImplementationContext";
7-
import { KeystoreProvider } from "../contexts/KeystoreContext";
4+
import { WalletProvider, RLNImplementationProvider, KeystoreProvider, RLNProvider } from "../contexts/index";
85
import { Header } from "../components/Header";
6+
import { AppStateProvider } from "../contexts/AppStateContext";
97

10-
const geistSans = Geist({
11-
variable: "--font-geist-sans",
12-
subsets: ["latin"],
13-
});
14-
15-
const geistMono = Geist_Mono({
16-
variable: "--font-geist-mono",
8+
const inter = Inter({
9+
variable: "--font-inter",
1710
subsets: ["latin"],
1811
});
1912

@@ -30,23 +23,25 @@ export default function RootLayout({
3023
return (
3124
<html lang="en">
3225
<body
33-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
26+
className={`${inter.variable} antialiased`}
3427
>
35-
<WalletProvider>
36-
<RLNImplementationProvider>
37-
<KeystoreProvider>
38-
<RLNUnifiedProvider>
39-
<div className="flex flex-col min-h-screen">
40-
<Header />
41-
<main className="flex-grow">
42-
{children}
43-
</main>
44-
</div>
45-
</RLNUnifiedProvider>
46-
</KeystoreProvider>
47-
</RLNImplementationProvider>
48-
</WalletProvider>
28+
<AppStateProvider>
29+
<WalletProvider>
30+
<RLNImplementationProvider>
31+
<KeystoreProvider>
32+
<RLNProvider>
33+
<div className="flex flex-col min-h-screen">
34+
<Header />
35+
<main className="flex-grow">
36+
{children}
37+
</main>
38+
</div>
39+
</RLNProvider>
40+
</KeystoreProvider>
41+
</RLNImplementationProvider>
42+
</WalletProvider>
43+
</AppStateProvider>
4944
</body>
5045
</html>
5146
);
52-
}
47+
}

‎examples/keystore-management/src/app/page.tsx‎

Lines changed: 11 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,15 @@
1-
import RLNMembershipRegistration from '../components/RLNMembershipRegistration';
2-
import { WalletInfo } from '../components/WalletInfo';
3-
import { RLNImplementationToggle } from '../components/RLNImplementationToggle';
4-
import KeystoreManager from '../components/KeystoreManager';
1+
"use client";
2+
3+
import React from 'react';
4+
import { Layout } from '../components/Layout';
5+
import { MembershipRegistration } from '../components/Tabs/MembershipTab/MembershipRegistration';
6+
import { KeystoreManagement } from '../components/Tabs/KeystoreTab/KeystoreManagement';
57

68
export default function Home() {
79
return (
8-
<div className="container mx-auto px-4 py-8">
9-
<div className="max-w-4xl mx-auto">
10-
<div className="bg-white rounded-lg shadow-md dark:bg-gray-800 p-6">
11-
<h2 className="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Waku Keystore Management</h2>
12-
13-
<div className="space-y-8">
14-
{/* RLN Implementation Toggle */}
15-
<div>
16-
<h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">RLN Implementation</h3>
17-
<RLNImplementationToggle />
18-
</div>
19-
20-
{/* Wallet Information Section */}
21-
<div>
22-
<h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Wallet Connection</h3>
23-
<WalletInfo />
24-
</div>
25-
26-
{/* RLN Membership Registration Section */}
27-
<div>
28-
<h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">RLN Membership</h3>
29-
<p className="mb-4 text-gray-700 dark:text-gray-300">
30-
Register a new RLN membership to participate in Waku RLN Relay without exposing your private key on your node.
31-
Set your desired rate limit for messages per epoch.
32-
</p>
33-
<RLNMembershipRegistration />
34-
</div>
35-
36-
{/* Keystore Management Section */}
37-
<div>
38-
<h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Keystore Management</h3>
39-
<p className="mb-4 text-gray-700 dark:text-gray-300">
40-
Export your keystore credentials to use them with your Waku node or import existing credentials.
41-
Keep your keystores safe as they contain your membership information.
42-
</p>
43-
<KeystoreManager />
44-
</div>
45-
</div>
46-
</div>
47-
</div>
48-
</div>
10+
<Layout>
11+
<MembershipRegistration />
12+
<KeystoreManagement />
13+
</Layout>
4914
);
50-
}
15+
}

‎examples/keystore-management/src/components/Header.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@ import { WalletInfo } from './WalletInfo';
55

66
export function Header() {
77
return (
8-
<header className="sticky top-0 z-10 bg-white dark:bg-gray-900 shadow-sm">
9-
<div className="container mx-auto px-4 py-3 flex justify-between items-center">
8+
<header className="bg-gray-900 border-b border-gray-800">
9+
<div className="container mx-auto px-6 h-16 flex justify-between items-center">
1010
<div className="flex items-center">
11-
<h1 className="text-xl font-bold text-gray-900 dark:text-white">Waku Keystore Management</h1>
12-
</div>
13-
<div className="w-80">
14-
<WalletInfo />
11+
<h1 className="text-xl font-medium text-white">Waku Keystore Management</h1>
1512
</div>
13+
<WalletInfo />
1614
</div>
1715
</header>
1816
);

‎examples/keystore-management/src/components/Layout.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
"use client";
2+
3+
import React, { Children, isValidElement } from 'react';
4+
import { TabNavigation, TabItem } from './Tabs/TabNavigation';
5+
import { useAppState } from '../contexts/AppStateContext';
6+
7+
const tabs: TabItem[] = [
8+
{
9+
id: 'membership',
10+
label: 'Membership Registration',
11+
},
12+
{
13+
id: 'keystore',
14+
label: 'Keystore Management',
15+
},
16+
];
17+
18+
const componentToTabId: Record<string, string> = {
19+
MembershipRegistration: 'membership',
20+
KeystoreManagement: 'keystore',
21+
};
22+
23+
export function Layout({ children }: { children: React.ReactNode }) {
24+
const { activeTab, setActiveTab } = useAppState();
25+
const childrenArray = Children.toArray(children);
26+
27+
return (
28+
<div className="min-h-screen bg-white dark:bg-gray-900">
29+
<main className="container mx-auto px-4 py-6">
30+
<TabNavigation
31+
tabs={tabs}
32+
activeTab={activeTab}
33+
onTabChange={setActiveTab}
34+
/>
35+
<div className="mt-6">
36+
{childrenArray.map((child) => {
37+
if (isValidElement(child) && typeof child.type === 'function') {
38+
const componentName = child.type.name;
39+
const tabId = componentToTabId[componentName];
40+
41+
if (tabId === activeTab) {
42+
return child;
43+
}
44+
}
45+
return null;
46+
})}
47+
</div>
48+
</main>
49+
</div>
50+
);
51+
}

0 commit comments

Comments
 (0)