From d11e3c7c168d23ae91f58c1ed6ffd514920a7680 Mon Sep 17 00:00:00 2001 From: Aryan Sharma <10aryansharma@gmail.com> Date: Sun, 28 Sep 2025 01:08:02 +0530 Subject: [PATCH 1/4] Create README.md --- README.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..a3b00e7 --- /dev/null +++ b/README.md @@ -0,0 +1,49 @@ +# BadgeMe Frontend UI (feature/frontend-ui Branch) + +This branch contains the frontend UI for BadgeMe, a zk-KYC verification demo built with Next.js and Tailwind CSS. It integrates a mock API to simulate badge verification and is ready for backend integration (e.g., key gen/attest routes). + +## Key Features +- Privacy-focused KYC badge UI with verified/not verified states. +- Mock API for fetching badge data (flags, region). +- Wallet input validation (starts with '0x' for mock Ethereum-style addresses). +- Re-verify button for dynamic updates. +- Responsive design with Tailwind utilities. + +## Functionality Demo +image + +- Enter "0x123" in the wallet field and submit to see a verified badge with flags (OVER18, AML_OK). +- Enter "abc" to see not verified (no flags). +- The mock API simulates zk-proof responses—replace with real backend for production. + +## How to Run and Test +1. Switch to this branch: + - git checkout feature/frontend-ui +2. Navigate to the frontend folder: + - cd frontend +3. Install dependencies: + - npm install +4. Start the development server: + - npm run dev +5. Open http://localhost:3000 in your browser. +6. Test the UI: +- Enter a valid wallet (starts with '0x') and click "Verify KYC" to see green "Verified" badge. +- Enter an invalid wallet to see red "Not Verified". +- Use the "Re-Verify" button to refetch data. +- Check responsiveness on mobile (resize browser). + +## Known Issues/Notes +- Mock API is temporary—needs real integration with backend (e.g., attestation endpoints). +- Wallet validation is simplified—update to Midnight's Bech32 format if needed. +- Feedback welcome—test and report issues in the PR! + +## Dependencies +- Next.js for routing and API. +- Tailwind CSS for styling. +- React hooks (useState, useEffect) for interactivity. + +## License +MIT License (consistent with project). + +## Contributing +Contributions to this frontend branch are welcome—fork and PR! From 311be2ba6bacdb2f501e5b52ec77b199955c8ab1 Mon Sep 17 00:00:00 2001 From: Aryan Sharma <10aryansharma@gmail.com> Date: Sat, 27 Sep 2025 19:48:58 +0000 Subject: [PATCH 2/4] "Added the Validation to reject spaces and special chars" --- frontend/src/app/api/status/route.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/api/status/route.js b/frontend/src/app/api/status/route.js index 24554e3..b5d0e27 100644 --- a/frontend/src/app/api/status/route.js +++ b/frontend/src/app/api/status/route.js @@ -2,10 +2,11 @@ export async function GET(request) { const url = new URL(request.url); const wallet = url.searchParams.get('wallet') || 'default'; - const verified = wallet.startsWith('0x'); + // Validate: starts with "0x", followed by hex digits (0-9, a-f, A-F), no spaces or special chars + const validWallet = /^0x[a-fA-F0-9]+$/.test(wallet); return new Response(JSON.stringify({ - verified, - flags: verified ? ['OVER18', 'AML_OK'] : [], + verified: validWallet, + flags: validWallet ? ['OVER18', 'AML_OK'] : [], region: 'IN' }), { status: 200, From ea2b54587c92d86c188d0e74b4a8b820eddddab1 Mon Sep 17 00:00:00 2001 From: Aryan Sharma <10aryansharma@gmail.com> Date: Sat, 27 Sep 2025 20:06:05 +0000 Subject: [PATCH 3/4] "added the validation for rejecting the spaces and special chars" --- frontend/src/app/api/status/route.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/api/status/route.js b/frontend/src/app/api/status/route.js index b5d0e27..93b8fd7 100644 --- a/frontend/src/app/api/status/route.js +++ b/frontend/src/app/api/status/route.js @@ -2,7 +2,6 @@ export async function GET(request) { const url = new URL(request.url); const wallet = url.searchParams.get('wallet') || 'default'; - // Validate: starts with "0x", followed by hex digits (0-9, a-f, A-F), no spaces or special chars const validWallet = /^0x[a-fA-F0-9]+$/.test(wallet); return new Response(JSON.stringify({ verified: validWallet, From a0acac6cbb6dc9d953f3157e90a6dbf1a06c19c3 Mon Sep 17 00:00:00 2001 From: Aryan Sharma <10aryansharma@gmail.com> Date: Sun, 28 Sep 2025 01:41:35 +0530 Subject: [PATCH 4/4] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a3b00e7..f6cf803 100644 --- a/README.md +++ b/README.md @@ -12,8 +12,9 @@ This branch contains the frontend UI for BadgeMe, a zk-KYC verification demo bui ## Functionality Demo image -- Enter "0x123" in the wallet field and submit to see a verified badge with flags (OVER18, AML_OK). +- Enter "0x123" or "0xABCDEF456" in the wallet field and submit to see a verified badge with flags (OVER18, AML_OK). - Enter "abc" to see not verified (no flags). +- Spaces and special chars are not allowed. - The mock API simulates zk-proof responses—replace with real backend for production. ## How to Run and Test