feat: updated front end

.gitignore

@@ -51,3 +51,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*.code-workspace
+/.vscode/

packages/contracts/src/SelfVerification.sol

@@ -9,10 +9,9 @@ contract SelfVerification is SelfVerificationRoot, Ownable {
     // Store no, of times a wallet owner has been verified with a valid ID
     mapping(address => uint32) public verifiedHumans;
     bytes32 public verificationConfigId;
-    address public lastUserAddress;
 
     // Event to track successful verifications
-    event VerificationCompleted(address indexed sender, string indexed nationality, bytes userData);
+    event VerificationCompleted(address indexed sender, string indexed nationality, uint32 times, bytes userData);
 
     /**
      * @notice Constructor for the contract
@@ -43,7 +42,7 @@ contract SelfVerification is SelfVerificationRoot, Ownable {
         string memory nationality = output.nationality;
         verifiedHumans[userId] += 1;
 
-        emit VerificationCompleted(userId, nationality, userData);
+        emit VerificationCompleted(userId, nationality, verifiedHumans[userId], userData);
 
         // Add your custom logic here:
         // - Mint NFT to verified user

packages/web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}

packages/web/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+.next

packages/web/.prettierrc

@@ -0,0 +1 @@
+{}

packages/web/next.config.js

@@ -4,7 +4,7 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
-  webpack: (config, {isServer}) => {
+  webpack: (config, { isServer }) => {
     if (isServer) {
       config.externals = [...(config.externals || []), "@selfxyz/qrcode"];
     }

packages/web/package.json

@@ -6,29 +6,37 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "tsc && prettier -c . && next lint",
     "ngrok": "ngrok http --url=burro-concise-regularly.ngrok-free.app 3000",
-    "tunnel": "concurrently -n 'next,ngrok' -c auto 'pnpm dev' 'pnpm ngrok'"
+    "tunnel": "concurrently -n 'next,ngrok' -c auto 'pnpm dev' 'pnpm ngrok'",
+    "prettier:fix": "prettier -w ."
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.7",
     "@selfxyz/common": "^0.0.7",
     "@selfxyz/core": "^1.0.8",
     "@selfxyz/qrcode": "^1.0.11",
+    "@tanstack/react-query": "^5.85.5",
+    "clsx": "^2.1.1",
+    "connectkit": "^1.9.1",
     "geist": "^1.4.2",
     "next": "14.2.30",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "catalog:"
+    "viem": "catalog:",
+    "wagmi": "^2.16.6"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
+    "@eslint/eslintrc": "^2",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "concurrently": "catalog:",
-    "eslint": "^9",
-    "eslint-config-next": "15.4.6",
+    "eslint": "^8",
+    "eslint-config-next": "13.2.4",
+    "pino-pretty": "^13.1.1",
+    "prettier": "catalog:",
     "tailwindcss": "^4",
     "typescript": "^5"
   },

packages/web/src/app/api/verify/route.ts

@@ -1,11 +1,15 @@
 import { NextRequest, NextResponse } from "next/server";
-import { countries, Country3LetterCode, SelfAppDisclosureConfig } from "@selfxyz/common";
+import {
+  countries,
+  Country3LetterCode,
+  SelfAppDisclosureConfig,
+} from "@selfxyz/common";
 import {
   countryCodes,
   SelfBackendVerifier,
   AllIds,
   DefaultConfigStore,
-  VerificationConfig
+  VerificationConfig,
 } from "@selfxyz/core";
 
 export async function POST(req: NextRequest) {
@@ -17,18 +21,22 @@ export async function POST(req: NextRequest) {
     const { attestationId, proof, publicSignals, userContextData } = body;
 
     if (!attestationId || !proof || !publicSignals || !userContextData) {
-      return NextResponse.json({
-        message: "Proof, publicSignals, attestationId and userContextData are required",
-      }, {
-        status: 400
-      });
+      return NextResponse.json(
+        {
+          message:
+            "Proof, publicSignals, attestationId and userContextData are required",
+        },
+        {
+          status: 400,
+        },
+      );
     }
 
     const requirements: VerificationConfig = {
       minimumAge: 18,
       ofac: false,
       excludedCountries: [],
-    }
+    };
 
     const configStore = new DefaultConfigStore(requirements);
 
@@ -45,20 +53,23 @@ export async function POST(req: NextRequest) {
       attestationId,
       proof,
       publicSignals,
-      userContextData
+      userContextData,
     );
 
     if (!result.isValidDetails.isValid) {
-      return NextResponse.json({
-        status: "error",
-        result: false,
-        message: "Verification failed",
-        details: result.isValidDetails,
-      }, { status: 500 });
+      return NextResponse.json(
+        {
+          status: "error",
+          result: false,
+          message: "Verification failed",
+          details: result.isValidDetails,
+        },
+        { status: 500 },
+      );
     }
 
     const saveOptions = (await configStore.getConfig(
-      result.userData.userIdentifier
+      result.userData.userIdentifier,
     )) as unknown as SelfAppDisclosureConfig;
 
     return NextResponse.json({
@@ -68,13 +79,16 @@ export async function POST(req: NextRequest) {
       verificationOptions: {
         minimumAge: saveOptions.minimumAge,
         ofac: saveOptions.ofac,
-        excludedCountries: saveOptions.excludedCountries?.map((countryName: string) => {
-          const entry = Object.entries(countryCodes).find(([_, name]) => name === countryName);
-          return entry ? entry[0] : countryName;
-        }),
-      }
+        excludedCountries: saveOptions.excludedCountries?.map(
+          (countryName: string) => {
+            const entry = Object.entries(countryCodes).find(
+              ([_, name]) => name === countryName,
+            );
+            return entry ? entry[0] : countryName;
+          },
+        ),
+      },
     });
-
   } catch (error) {
     console.error("Error verifying proof:", error);
     return NextResponse.json({

packages/web/src/app/layout.tsx

@@ -1,13 +1,14 @@
 import type { Metadata } from "next";
 import { GeistSans, GeistMono } from "geist/font";
+import { Web3Provider } from "@/components/Web3Provider";
 import "./globals.css";
 
 const geistSans = GeistSans;
 const geistMono = GeistMono;
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "DHK dao Self Prototype",
+  description: "self-prototype",
 };
 
 export default function RootLayout({
@@ -20,7 +21,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <Web3Provider>{children}</Web3Provider>
       </body>
     </html>
   );