feat: complete i18n support for all components (6 languages)

Add full internationalization across 127+ components and pages.
790+ translation keys in en, tr, kmr, ckb, ar, fa locales.
Remove duplicate keys and delete unused .json locale files.

web/src/components/wallet/MultiSigWallet.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -20,6 +21,7 @@ interface MultiSigTransaction {
 }
 
 export const MultiSigWallet: React.FC = () => {
+  const { t } = useTranslation();
   const [amount, setAmount] = useState('');
   const [recipient, setRecipient] = useState('');
   const [description, setDescription] = useState('');
@@ -62,7 +64,7 @@ export const MultiSigWallet: React.FC = () => {
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <Card className="bg-gray-900 border-gray-800">
           <CardHeader className="pb-3">
-            <CardTitle className="text-sm text-gray-400">Wallet Balance</CardTitle>
+            <CardTitle className="text-sm text-gray-400">{t('multisig.walletBalance')}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-white">50,000 HEZ</div>
@@ -72,33 +74,33 @@ export const MultiSigWallet: React.FC = () => {
 
         <Card className="bg-gray-900 border-gray-800">
           <CardHeader className="pb-3">
-            <CardTitle className="text-sm text-gray-400">Required Signatures</CardTitle>
+            <CardTitle className="text-sm text-gray-400">{t('multisig.requiredSignatures')}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-white">3 of 5</div>
-            <p className="text-xs text-gray-500 mt-1">Signers required</p>
+            <p className="text-xs text-gray-500 mt-1">{t('multisig.signersRequired')}</p>
           </CardContent>
         </Card>
 
         <Card className="bg-gray-900 border-gray-800">
           <CardHeader className="pb-3">
-            <CardTitle className="text-sm text-gray-400">Pending Transactions</CardTitle>
+            <CardTitle className="text-sm text-gray-400">{t('multisig.pendingTransactions')}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold text-yellow-500">2</div>
-            <p className="text-xs text-gray-500 mt-1">Awaiting signatures</p>
+            <p className="text-xs text-gray-500 mt-1">{t('multisig.awaitingSignatures')}</p>
           </CardContent>
         </Card>
       </div>
 
       <Card className="bg-gray-900 border-gray-800">
         <CardHeader>
-          <CardTitle>Create Transaction</CardTitle>
+          <CardTitle>{t('multisig.createTransaction')}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <Label>Recipient Address</Label>
+              <Label>{t('multisig.recipientAddress')}</Label>
               <Input
                 placeholder="0x..."
                 value={recipient}
@@ -107,7 +109,7 @@ export const MultiSigWallet: React.FC = () => {
               />
             </div>
             <div>
-              <Label>Amount</Label>
+              <Label>{t('multisig.amount')}</Label>
               <Input
                 type="number"
                 placeholder="0"
@@ -118,9 +120,9 @@ export const MultiSigWallet: React.FC = () => {
             </div>
           </div>
           <div>
-            <Label>Description</Label>
+            <Label>{t('multisig.description')}</Label>
             <Input
-              placeholder="Transaction purpose"
+              placeholder={t('multisig.txPurpose')}
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               className="bg-gray-800 border-gray-700"
@@ -128,14 +130,14 @@ export const MultiSigWallet: React.FC = () => {
           </div>
           <Button onClick={handleCreateTransaction} className="bg-green-600 hover:bg-green-700">
             <Send className="w-4 h-4 mr-2" />
-            Create Transaction
+            {t('multisig.createTransaction')}
           </Button>
         </CardContent>
       </Card>
 
       <Card className="bg-gray-900 border-gray-800">
         <CardHeader>
-          <CardTitle>Pending Transactions</CardTitle>
+          <CardTitle>{t('multisig.pendingTransactions')}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           {transactions.map((tx) => (
@@ -155,14 +157,14 @@ export const MultiSigWallet: React.FC = () => {
                     <div className="flex items-center gap-4">
                       <Progress value={(tx.currentSignatures / tx.requiredSignatures) * 100} className="w-32" />
                       <span className="text-sm text-gray-400">
-                        {tx.currentSignatures}/{tx.requiredSignatures} signatures
+                        {t('multisig.signatures', { current: tx.currentSignatures, required: tx.requiredSignatures })}
                       </span>
                     </div>
                   </div>
                   {tx.status === 'pending' && (
                     <Button size="sm" onClick={() => handleSign(tx.id)} className="bg-blue-600 hover:bg-blue-700">
                       <Key className="w-4 h-4 mr-1" />
-                      Sign
+                      {t('multisig.sign')}
                     </Button>
                   )}
                 </div>

web/src/components/wallet/TransactionModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Send, Loader2, CheckCircle, XCircle } from 'lucide-react';
 import {
   Dialog,
@@ -27,6 +28,7 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
   type
 }) => {
   const { signTransaction, signMessage } = useWallet();
+  const { t } = useTranslation();
   const [recipient, setRecipient] = useState('');
   const [amount, setAmount] = useState('');
   const [message, setMessage] = useState('');
@@ -36,7 +38,7 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
 
   const handleSendTransaction = async () => {
     if (!recipient || !amount) {
-      setError('Please fill in all fields');
+      setError(t('txModal.fillAllFields'));
       return;
     }
 
@@ -62,7 +64,7 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
 
   const handleSignMessage = async () => {
     if (!message) {
-      setError('Please enter a message to sign');
+      setError(t('txModal.enterMessage'));
       return;
     }
 
@@ -95,14 +97,14 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Send className="h-5 w-5 text-kesk" />
-            {type === 'send' ? 'Send HEZ' : type === 'vote' ? 'Cast Vote' : 'Delegate Voting Power'}
+            {type === 'send' ? t('txModal.sendHez') : type === 'vote' ? t('txModal.castVote') : t('txModal.delegateVoting')}
           </DialogTitle>
           <DialogDescription>
             {type === 'send'
-              ? 'Send HEZ tokens to another address'
+              ? t('txModal.sendHezDesc')
               : type === 'vote'
-              ? 'Submit your vote for the proposal'
-              : 'Delegate your voting power to another address'}
+              ? t('txModal.voteDesc')
+              : t('txModal.delegateDesc')}
           </DialogDescription>
         </DialogHeader>
 
@@ -111,7 +113,7 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
             {type === 'send' && (
               <>
                 <div>
-                  <Label htmlFor="recipient">Recipient Address</Label>
+                  <Label htmlFor="recipient">{t('txModal.recipientAddress')}</Label>
                   <Input
                     id="recipient"
                     placeholder="0x..."
@@ -121,7 +123,7 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
                   />
                 </div>
                 <div>
-                  <Label htmlFor="amount">Amount (HEZ)</Label>
+                  <Label htmlFor="amount">{t('txModal.amountHez')}</Label>
                   <Input
                     id="amount"
                     type="number"
@@ -135,10 +137,10 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
 
             {type === 'vote' && (
               <div>
-                <Label htmlFor="message">Vote Message</Label>
+                <Label htmlFor="message">{t('txModal.voteMessage')}</Label>
                 <Textarea
                   id="message"
-                  placeholder="Enter your vote reason (optional)"
+                  placeholder={t('txModal.votePlaceholder')}
                   value={message}
                   onChange={(e) => setMessage(e.target.value)}
                 />
@@ -161,17 +163,17 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
                 {loading ? (
                   <>
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Processing...
+                    {t('txModal.processing')}
                   </>
                 ) : (
                   <>
                     <Send className="mr-2 h-4 w-4" />
-                    {type === 'send' ? 'Send Transaction' : 'Sign & Submit'}
+                    {type === 'send' ? t('txModal.sendTransaction') : t('txModal.signSubmit')}
                   </>
                 )}
               </Button>
               <Button variant="outline" onClick={resetForm} disabled={loading}>
-                Cancel
+                {t('txModal.cancel')}
               </Button>
             </div>
           </div>
@@ -180,15 +182,15 @@ export const TransactionModal: React.FC<TransactionModalProps> = ({
             <Alert className="border-kesk/20">
               <CheckCircle className="h-4 w-4 text-kesk" />
               <AlertDescription>
-                Transaction submitted successfully!
+                {t('txModal.txSubmitted')}
               </AlertDescription>
             </Alert>
             <div className="p-3 bg-muted rounded-lg">
-              <div className="text-sm text-muted-foreground">Transaction Hash</div>
+              <div className="text-sm text-muted-foreground">{t('txModal.txHash')}</div>
               <div className="font-mono text-xs break-all">{txHash}</div>
             </div>
             <Button onClick={resetForm} className="w-full">
-              Close
+              {t('txModal.close')}
             </Button>
           </div>
         )}

web/src/components/wallet/WalletButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Wallet, LogOut, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
@@ -14,10 +15,11 @@ import { formatAddress, formatBalance } from '@pezkuwi/lib/wallet';
 import { Badge } from '@/components/ui/badge';
 
 export const WalletButton: React.FC = () => {
-  const { 
-    isConnected, 
-    address, 
-    balance, 
+  const { t } = useTranslation();
+  const {
+    isConnected,
+    address,
+    balance,
     chainId,
     error,
     connectMetaMask,
@@ -39,7 +41,7 @@ export const WalletButton: React.FC = () => {
           className="bg-kesk hover:bg-kesk/90 text-white"
         >
           <Wallet className="mr-2 h-4 w-4" />
-          Connect Wallet
+          {t('walletBtn.connectWallet')}
         </Button>
       </div>
     );
@@ -59,41 +61,41 @@ export const WalletButton: React.FC = () => {
             </div>
             {!isCorrectNetwork && (
               <Badge variant="destructive" className="ml-2 bg-sor">
-                Wrong Network
+                {t('walletBtn.wrongNetwork')}
               </Badge>
             )}
           </div>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-56">
-        <DropdownMenuLabel>Wallet Details</DropdownMenuLabel>
+        <DropdownMenuLabel>{t('walletBtn.walletDetails')}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <div className="px-2 py-1.5">
-          <div className="text-sm text-muted-foreground">Address</div>
+          <div className="text-sm text-muted-foreground">{t('walletBtn.address')}</div>
           <div className="text-sm font-mono">{formatAddress(address!)}</div>
         </div>
         <div className="px-2 py-1.5">
-          <div className="text-sm text-muted-foreground">Balance</div>
+          <div className="text-sm text-muted-foreground">{t('walletBtn.balance')}</div>
           <div className="text-sm font-medium">{formatBalance(balance)} HEZ</div>
         </div>
         <div className="px-2 py-1.5">
-          <div className="text-sm text-muted-foreground">Network</div>
+          <div className="text-sm text-muted-foreground">{t('walletBtn.network')}</div>
           <div className="text-sm font-medium">
-            {isCorrectNetwork ? 'PezkuwiChain' : 'Unknown Network'}
+            {isCorrectNetwork ? t('walletBtn.pezkuwiChain') : t('walletBtn.unknownNetwork')}
           </div>
         </div>
         <DropdownMenuSeparator />
         {!isCorrectNetwork && (
           <>
             <DropdownMenuItem onClick={switchNetwork} className="text-zer">
-              Switch to PezkuwiChain
+              {t('walletBtn.switchNetwork')}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem onClick={disconnect} className="text-sor">
           <LogOut className="mr-2 h-4 w-4" />
-          Disconnect
+          {t('walletBtn.disconnect')}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

web/src/components/wallet/WalletModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Wallet, Chrome, ExternalLink, Copy, Check, LogOut, Award, Users, TrendingUp, Shield } from 'lucide-react';
 import {
   Dialog,
@@ -30,6 +31,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
     error
   } = usePezkuwi();
 
+  const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
   const [scores, setScores] = useState<UserScores>({
     trustScore: 0,
@@ -103,12 +105,12 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Wallet className="h-5 w-5 text-purple-400" />
-            {selectedAccount ? 'Wallet Connected' : 'Connect Wallet'}
+            {selectedAccount ? t('walletModal.connected') : t('walletModal.connect')}
           </DialogTitle>
           <DialogDescription>
             {selectedAccount
-              ? 'Manage your Pezkuwi account'
-              : 'Connect your Pezkuwi.js extension to interact with PezkuwiChain'}
+              ? t('walletModal.manageAccount')
+              : t('walletModal.connectDesc')}
           </DialogDescription>
         </DialogHeader>
 
@@ -126,7 +128,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
               className="w-full bg-gradient-to-r from-purple-600 to-cyan-400 hover:from-purple-700 hover:to-cyan-500"
             >
               <Wallet className="mr-2 h-4 w-4" />
-              Try Again
+              {t('walletModal.tryAgain')}
             </Button>
           </div>
         )}
@@ -149,13 +151,13 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
               >
                 <Button className="w-full bg-green-600 hover:bg-green-700">
                   <Chrome className="mr-2 h-4 w-4" />
-                  Install from Chrome Web Store
+                  {t('walletModal.installChrome')}
                 </Button>
               </a>
             </div>
 
             <p className="text-xs text-gray-400 text-center">
-              After installing, refresh the page and try again
+              {t('walletModal.afterInstall')}
             </p>
           </div>
         )}
@@ -166,12 +168,12 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
             {/* Account Info */}
             <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
               <div>
-                <div className="text-xs text-gray-400 mb-1">Account Name</div>
-                <div className="font-medium">{selectedAccount.meta.name || 'Unnamed Account'}</div>
+                <div className="text-xs text-gray-400 mb-1">{t('walletModal.accountName')}</div>
+                <div className="font-medium">{selectedAccount.meta.name || t('walletModal.unnamed')}</div>
               </div>
 
               <div>
-                <div className="text-xs text-gray-400 mb-1">Address</div>
+                <div className="text-xs text-gray-400 mb-1">{t('walletModal.address')}</div>
                 <div className="flex items-center justify-between gap-2">
                   <code className="text-sm font-mono text-gray-300 truncate">
                     {formatAddress(selectedAccount.address)}
@@ -192,36 +194,36 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
               </div>
 
               <div>
-                <div className="text-xs text-gray-400 mb-2">Scores from Blockchain</div>
+                <div className="text-xs text-gray-400 mb-2">{t('walletModal.scoresFromBlockchain')}</div>
                 {loadingScores ? (
-                  <div className="text-sm text-gray-400">Loading scores...</div>
+                  <div className="text-sm text-gray-400">{t('walletModal.loadingScores')}</div>
                 ) : (
                   <div className="grid grid-cols-2 gap-3">
                     <div className="bg-gray-900/50 rounded p-2">
                       <div className="flex items-center gap-1 mb-1">
                         <Shield className="h-3 w-3 text-purple-400" />
-                        <span className="text-xs text-gray-400">Trust</span>
+                        <span className="text-xs text-gray-400">{t('walletModal.trust')}</span>
                       </div>
                       <span className="text-sm font-bold text-purple-400">{scores.trustScore}</span>
                     </div>
                     <div className="bg-gray-900/50 rounded p-2">
                       <div className="flex items-center gap-1 mb-1">
                         <Users className="h-3 w-3 text-cyan-400" />
-                        <span className="text-xs text-gray-400">Referral</span>
+                        <span className="text-xs text-gray-400">{t('walletModal.referral')}</span>
                       </div>
                       <span className="text-sm font-bold text-cyan-400">{scores.referralScore}</span>
                     </div>
                     <div className="bg-gray-900/50 rounded p-2">
                       <div className="flex items-center gap-1 mb-1">
                         <TrendingUp className="h-3 w-3 text-green-400" />
-                        <span className="text-xs text-gray-400">Staking</span>
+                        <span className="text-xs text-gray-400">{t('walletModal.staking')}</span>
                       </div>
                       <span className="text-sm font-bold text-green-400">{scores.stakingScore}</span>
                     </div>
                     <div className="bg-gray-900/50 rounded p-2">
                       <div className="flex items-center gap-1 mb-1">
                         <Award className="h-3 w-3 text-pink-400" />
-                        <span className="text-xs text-gray-400">Tiki</span>
+                        <span className="text-xs text-gray-400">{t('walletModal.tiki')}</span>
                       </div>
                       <span className="text-sm font-bold text-pink-400">{scores.tikiScore}</span>
                     </div>
@@ -229,7 +231,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                 )}
                 <div className="mt-2 pt-2 border-t border-gray-700">
                   <div className="flex items-center justify-between">
-                    <span className="text-xs text-gray-400">Total Score</span>
+                    <span className="text-xs text-gray-400">{t('walletModal.totalScore')}</span>
                     <span className="text-lg font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
                       {loadingScores ? '...' : scores.totalScore}
                     </span>
@@ -238,7 +240,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
               </div>
 
               <div>
-                <div className="text-xs text-gray-400 mb-1">Source</div>
+                <div className="text-xs text-gray-400 mb-1">{t('walletModal.source')}</div>
                 <div className="text-sm text-gray-300">
                   {selectedAccount.meta.source || 'pezkuwi'}
                 </div>
@@ -253,7 +255,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                 onClick={() => window.open(`https://pezkuwichain.io/explorer`, '_blank')}
               >
                 <ExternalLink className="mr-2 h-4 w-4" />
-                View on Explorer
+                {t('walletModal.viewOnExplorer')}
               </Button>
               <Button
                 variant="outline"
@@ -261,14 +263,14 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                 className="text-red-400 border-red-400/30 hover:bg-red-400/10"
               >
                 <LogOut className="mr-2 h-4 w-4" />
-                Disconnect
+                {t('walletModal.disconnect')}
               </Button>
             </div>
 
             {/* Switch Account */}
             {accounts.length > 1 && (
               <div className="space-y-2">
-                <div className="text-sm text-gray-400">Switch Account</div>
+                <div className="text-sm text-gray-400">{t('walletModal.switchAccount')}</div>
                 <div className="space-y-2 max-h-48 overflow-y-auto">
                   {accounts.map((account) => (
                     <button
@@ -281,7 +283,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                       }`}
                     >
                       <div className="font-medium text-sm">
-                        {account.meta.name || 'Unnamed'}
+                        {account.meta.name || t('walletModal.unnamed')}
                       </div>
                       <div className="text-xs text-gray-400 font-mono">
                         {formatAddress(account.address)}
@@ -300,7 +302,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
             {accounts.length > 0 ? (
               // Has accounts, show selection
               <div className="space-y-2">
-                <div className="text-sm text-gray-400">Select an account to connect:</div>
+                <div className="text-sm text-gray-400">{t('walletModal.selectAccount')}</div>
                 <div className="space-y-2">
                   {accounts.map((account) => (
                     <button
@@ -309,7 +311,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                       className="w-full p-4 rounded-lg border border-gray-700 bg-gray-800/50 hover:border-purple-500/50 hover:bg-gray-800 transition-all text-left"
                     >
                       <div className="font-medium mb-1">
-                        {account.meta.name || 'Unnamed Account'}
+                        {account.meta.name || t('walletModal.unnamed')}
                       </div>
                       <div className="text-sm text-gray-400 font-mono">
                         {account.address}
@@ -326,18 +328,18 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                   className="w-full bg-gradient-to-r from-purple-600 to-cyan-400 hover:from-purple-700 hover:to-cyan-500"
                 >
                   <Wallet className="mr-2 h-4 w-4" />
-                  Connect Pezkuwi.js
+                  {t('walletModal.connectPezkuwi')}
                 </Button>
 
                 <div className="text-sm text-gray-400 text-center">
-                  Don&apos;t have Pezkuwi Wallet?{' '}
+                  {t('walletModal.noWallet')}{' '}
                   <a
                     href="https://chrome.google.com/webstore/detail/pezkuwi-wallet/fbnboicjjeebjhgnapneaeccpgjcdibn"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="text-purple-400 hover:underline"
                   >
-                    Get it from Chrome Web Store
+                    {t('walletModal.getFromStore')}
                   </a>
                 </div>
               </div>