+ {/* Full Name */}
+
+
+ setFullName(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.fullNamePlaceholder')}
+ />
+
+
+ {/* Father's Name */}
+
+
+ setFatherName(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.fatherNamePlaceholder')}
+ />
+
+
+ {/* Grandfather's Name */}
+
+
+ setGrandfatherName(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.grandfatherNamePlaceholder')}
+ />
+
+
+ {/* Mother's Name */}
+
+
+ setMotherName(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.motherNamePlaceholder')}
+ />
+
+
+ {/* Tribe */}
+
+
+ setTribe(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.tribePlaceholder')}
+ />
+
+
+ {/* Marital Status */}
+
+
+
+
+
+
+
+
+ {/* Children (if married) */}
+ {maritalStatus === 'zewici' && (
+
+
+ {children.map((child, index) => (
+
+
+
+ updateChild(index, 'name', e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.childNamePlaceholder')}
+ />
+
+
+
+
+ updateChild(index, 'birthYear', parseInt(e.target.value) || 2000)
+ }
+ className={inputClass}
+ min={1950}
+ max={2026}
+ />
+
+
+
+ ))}
+
+
+ )}
+
+ {/* Region */}
+
+
+
+
+
+ {/* Email */}
+
+
+ setEmail(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.emailPlaceholder')}
+ />
+
+
+ {/* Profession */}
+
+
+ setProfession(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.professionPlaceholder')}
+ />
+
+
+ {/* Referral Code */}
+
+
+ setReferralCode(e.target.value)}
+ className={inputClass}
+ placeholder={t('citizen.referralCodePlaceholder')}
+ />
+
+
+ {/* Consent */}
+
+
+ {/* Error */}
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Submit Button */}
+
+
+ );
+}
diff --git a/src/components/citizen/CitizenProcessing.tsx b/src/components/citizen/CitizenProcessing.tsx
new file mode 100644
index 0000000..aec17b2
--- /dev/null
+++ b/src/components/citizen/CitizenProcessing.tsx
@@ -0,0 +1,143 @@
+/**
+ * Citizen Processing Component
+ * Shows KurdistanSun animation while preparing data,
+ * then enables sign button when ready
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { KurdistanSun } from '@/components/KurdistanSun';
+import { useTranslation } from '@/i18n';
+import { useTelegram } from '@/hooks/useTelegram';
+import { useWallet } from '@/contexts/WalletContext';
+import type { CitizenshipData } from '@/lib/citizenship';
+import {
+ generateCommitmentHash,
+ generateNullifierHash,
+ saveCitizenshipLocally,
+ uploadToIPFS,
+ submitCitizenshipApplication,
+} from '@/lib/citizenship';
+
+interface Props {
+ citizenshipData: CitizenshipData;
+ onSuccess: (blockHash?: string) => void;
+ onError: (error: string) => void;
+}
+
+type ProcessingState = 'preparing' | 'ready' | 'signing';
+
+export function CitizenProcessing({ citizenshipData, onSuccess, onError }: Props) {
+ const { t } = useTranslation();
+ const { hapticImpact, hapticNotification } = useTelegram();
+ const { peopleApi, keypair } = useWallet();
+
+ const [state, setState] = useState