From 0b2a3feba8b0973ad23e228bcb6ca21e4a21abb0 Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Fri, 6 Feb 2026 19:21:49 +0300
Subject: [PATCH] fix: use People Chain API for citizen verification, improve
 input UI

---
 .../components/citizenship/ExistingCitizenAuth.tsx    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/components/citizenship/ExistingCitizenAuth.tsx b/web/src/components/citizenship/ExistingCitizenAuth.tsx
index b4ba4f3d..e5347e6b 100644
--- a/web/src/components/citizenship/ExistingCitizenAuth.tsx
+++ b/web/src/components/citizenship/ExistingCitizenAuth.tsx
@@ -15,7 +15,7 @@ interface ExistingCitizenAuthProps {
 }
 
 export const ExistingCitizenAuth: React.FC<ExistingCitizenAuthProps> = ({ onClose }) => {
-  const { api, isApiReady, selectedAccount, connectWallet } = usePezkuwi();
+  const { peopleApi, isPeopleReady, selectedAccount, connectWallet } = usePezkuwi();
 
   const [citizenNumber, setCitizenNumber] = useState('');
   const [step, setStep] = useState<'input' | 'verifying' | 'signing' | 'success' | 'error'>('input');
@@ -23,7 +23,7 @@ export const ExistingCitizenAuth: React.FC<ExistingCitizenAuthProps> = ({ onClos
   const [challenge, setChallenge] = useState<AuthChallenge | null>(null);
 
   const handleVerifyNFT = async () => {
-    if (!api || !isApiReady || !selectedAccount) {
+    if (!peopleApi || !isPeopleReady || !selectedAccount) {
       setError('Please connect your wallet first');
       return;
     }
@@ -37,8 +37,8 @@ export const ExistingCitizenAuth: React.FC<ExistingCitizenAuthProps> = ({ onClos
     setStep('verifying');
 
     try {
-      // Verify Citizen Number
-      const isValid = await verifyCitizenNumber(api, citizenNumber, selectedAccount.address);
+      // Verify Citizen Number on People Chain
+      const isValid = await verifyCitizenNumber(peopleApi, citizenNumber, selectedAccount.address);
 
       if (!isValid) {
         setError(`Invalid Citizen Number or it doesn&apos;t match your wallet`);
@@ -131,10 +131,11 @@ export const ExistingCitizenAuth: React.FC<ExistingCitizenAuthProps> = ({ onClos
                 <Label htmlFor="citizenNumber">Citizen Number</Label>
                 <Input
                   id="citizenNumber"
-                  placeholder="e.g., #42-0-123456"
+                  placeholder="#42-0-123456"
                   value={citizenNumber}
                   onChange={(e) => setCitizenNumber(e.target.value)}
                   onKeyDown={(e) => e.key === 'Enter' && handleVerifyNFT()}
+                  className="bg-gray-100 dark:bg-gray-800 placeholder:text-gray-400 dark:placeholder:text-gray-500 font-mono"
                 />
                 <p className="text-xs text-muted-foreground">
                   Enter your full Citizen Number from your Dashboard (format: #CollectionID-ItemID-6digits)