diff --git a/examples/keystore-management/README.md b/examples/keystore-management/README.md index f8d6481..f5a3b40 100644 --- a/examples/keystore-management/README.md +++ b/examples/keystore-management/README.md @@ -43,4 +43,5 @@ If you encounter an "ERC20: insufficient allowance" error, it means the token ap - [ ] update descriptions, and link specs/resources - [ ] footer for discord help - [ ] add info about exporting/using keystore/credential and using with nwaku/nwaku-compose/waku-simulator -- [ x ] exporting entire keystore \ No newline at end of file +- [ x ] exporting entire keystore +- [ ] clean comments \ No newline at end of file diff --git a/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx b/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx index c73c6b1..d88ff5d 100644 --- a/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx +++ b/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx @@ -2,13 +2,14 @@ import React, { useState } from 'react'; import { useKeystore } from '../../../contexts/keystore'; -import { readKeystoreFromFile, saveKeystoreCredentialToFile } from '../../../utils/keystore'; +import { readKeystoreFromFile, saveKeystoreCredentialToFile } from '../../../utils/keystore'; import { DecryptedCredentials } from '@waku/rln'; import { useAppState } from '../../../contexts/AppStateContext'; import { TerminalWindow } from '../../ui/terminal-window'; import { Button } from '../../ui/button'; import { Copy, Eye, Download, Trash2, ArrowDownToLine } from 'lucide-react'; import { KeystoreExporter } from '../../KeystoreExporter'; +import { keystoreManagement, type ContentSegment } from '../../../content/index'; export function KeystoreManagement() { const { @@ -116,7 +117,7 @@ export function KeystoreManagement() {

- Keystore Management + {keystoreManagement.title}

@@ -127,7 +128,7 @@ export function KeystoreManagement() { > - Import Keystore + {keystoreManagement.buttons.import} @@ -140,15 +141,67 @@ export function KeystoreManagement() {

⚠️ - Please initialize RLN before managing credentials + {keystoreManagement.noCredentialsWarning}

)} + {/* About Section */} +
+
+ {">"} +

+ {keystoreManagement.infoHeader} +

+
+ +
+ {keystoreManagement.about.map((paragraph: ContentSegment[], i: number) => ( +

+ {paragraph.map((segment: ContentSegment, j: number) => ( + segment.type === 'link' ? ( + + {segment.content} + + ) : ( + {segment.content} + ) + ))} +

+ ))} +
+
+ + {/* Resources Section */} +
+

+ {keystoreManagement.resources.title} +

+
+ {keystoreManagement.resources.links.map((link: { name: string; url: string }, i: number) => ( + + {link.name} + + ))} +
+
+ {/* Stored Credentials */}

- Stored Credentials + {keystoreManagement.storedCredentialsTitle}

{hasStoredCredentials ? ( @@ -189,7 +242,7 @@ export function KeystoreManagement() { className="text-accent hover:text-accent hover:border-accent flex items-center gap-1 py-1" > - View + {keystoreManagement.buttons.view} )} diff --git a/examples/keystore-management/src/content/index.ts b/examples/keystore-management/src/content/index.ts new file mode 100644 index 0000000..f5db952 --- /dev/null +++ b/examples/keystore-management/src/content/index.ts @@ -0,0 +1,104 @@ +// Types for content structure +type Link = { + text: string; + url: string; +}; + +export type ContentSegment = { + type: 'text' | 'link'; + content: string; + url?: string; +}; + +export type Paragraph = ContentSegment[]; + +// Content for RLN Membership Registration +export const membershipRegistration = { + title: "RLN Membership Registration", + aboutTitle: "About RLN Membership on Linea Sepolia", + about: [ + [ + { type: 'text', content: 'RLN (' }, + { type: 'link', content: 'Rate Limiting Nullifier', url: 'https://github.com/Rate-Limiting-Nullifier' }, + { type: 'text', content: ') membership allows you to participate in ' }, + { type: 'link', content: 'Waku RLN Relay', url: 'https://blog.waku.org/explanation-series-rln-relay/' }, + { type: 'text', content: ' with rate limiting protection, without exposing your private keys on your node.' } + ], + [ + { type: 'text', content: 'This application is configured to use the ' }, + { type: 'link', content: 'Linea Sepolia', url: 'https://sepolia.lineascan.build/address/0xb9cd878c90e49f797b4431fbf4fb333108cb90e6' }, + { type: 'text', content: ' testnet for RLN registrations.' } + ], + [ + { type: 'text', content: 'When you register, your wallet will sign a message that will be used to generate a ' }, + { type: 'link', content: 'cryptographic identity', url: 'https://github.com/waku-org/specs/blob/master/standards/application/rln-keystore.md' }, + { type: 'text', content: ' for your membership. This allows your node to prove it has permission to send messages without revealing your identity.' } + ] + ] as Paragraph[], + infoHeader: "RLN Membership Info", + connectWalletPrompt: "Please connect your wallet to register a membership", + initializePrompt: "Please initialize RLN before registering a membership", + networkWarning: "You are not connected to Linea Sepolia network. Please switch networks to register.", + + form: { + rateLimitLabel: "Rate Limit (messages per epoch)", + saveToKeystoreLabel: "Save credentials to keystore", + passwordLabel: "Keystore Password (min 8 characters)", + passwordPlaceholder: "Enter password to encrypt credentials", + registerButton: "Register Membership", + registeringButton: "Registering..." + } +}; + +// Content for Keystore Management +export const keystoreManagement = { + title: "Keystore Management", + buttons: { + import: "Import Keystore", + export: "Export Keystore", + view: "View", + decrypt: "Decrypt", + decrypting: "Decrypting...", + remove: "Remove" + }, + + about: [ + [ + { type: 'text', content: 'Keystore management allows you to securely store, import, export and manage your ' }, + { type: 'link', content: 'RLN membership credentials', url: 'https://github.com/waku-org/specs/blob/master/standards/application/rln-keystore.md' }, + { type: 'text', content: '.' } + ], + [ + { type: 'text', content: 'Credentials are encrypted with your password and can be used across different devices or applications. Learn more about ' }, + { type: 'link', content: 'keystore security', url: 'https://github.com/waku-org/specs/blob/master/standards/application/rln-keystore.md#security-considerations' }, + { type: 'text', content: '.' } + ], + [ + { type: 'text', content: 'You can export your credentials as a file and import them on another device to use the same membership.' } + ] + ] as Paragraph[], + + infoHeader: "About Keystore Management", + noCredentialsWarning: "Please initialize RLN before managing credentials", + storedCredentialsTitle: "Stored Credentials", + passwordPlaceholder: "Enter credential password", + credentialDetailsTitle: "Credential Details", + + resources: { + title: "Resources", + links: [ + { + name: "RLN Specs", + url: "https://specs.status.im/spec/waku/rln-v1" + }, + { + name: "Waku GitHub", + url: "https://github.com/waku-org/waku-rln-contract" + }, + { + name: "Keystore Documentation", + url: "https://github.com/waku-org/specs/blob/master/standards/application/rln-keystore.md" + } + ] + } +}; \ No newline at end of file