Fixed white/light text on white/light backgrounds across multiple pages by adding text-gray-900 classes to ensure proper contrast and readability. This addresses the issue where text was unreadable until hover/click on delegation, proposal, swap, and other pages.
Changes:
- DelegationManager: Added dark text to green-50 TabsList
- DelegateProfile: Fixed text color in blue-50 and green-50 Alert components
- ProposalWizard: Added dark text to green-50 success Alert
- Dashboard: Fixed text color in yellow-50 verification warning
- TokenSwap: Added dark text to all gray-50 and blue-50 containers (6 instances)
- DiscussionThread: Fixed markdown help card with gray-50 background
- FundingProposal: Added dark text to yellow-50 milestone warning
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problem: Translation keys were showing on screen instead of actual text
- "hero.exploreGovernance" instead of "Explore Governance"
- "nav.proposals" instead of "Proposals"
- "common.backToHome" instead of "Back to Home"
Root Cause: en.ts had only 59 lines while en.json had 244 lines
- config.ts imports en.ts (not en.json)
- Missing keys caused i18n to display the key itself
Solution: Converted all keys from en.json to en.ts flat format
- Added all 280+ translation keys
- Includes: nav, hero, governance, identity, proposals, delegation,
profile, common, notifications, websocket, auth, wallet, login
- Now matches the complete en.json structure
Result: All translation keys now display proper English text
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added ArrowLeft navigation button to return to home page on:
- AdminPanel.tsx - Admin panel page
- ProfileSettings.tsx - Profile settings page
- PasswordReset.tsx - Password reset page
- EmailVerification.tsx - Email verification page
- WalletDashboard.tsx - Wallet dashboard page
- Dashboard.tsx - User dashboard page
Each page now includes:
- Import of ArrowLeft icon from lucide-react
- Import of useNavigate from react-router-dom (if not already present)
- Positioned button in top-left (absolute positioning)
- Consistent styling: gray-400 with hover effect
- Navigate to '/' on click
This improves UX by providing consistent navigation across all sub pages.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
New Components:
- AccountBalance: Real-time balance display with free/reserved breakdown
- TransferModal: Token transfer interface with transaction signing
- WalletDashboard: Complete wallet management page
Features:
- Live balance fetching from blockchain
- Balance subscription for real-time updates
- Transfer modal with recipient and amount input
- Transaction signing via Polkadot.js extension
- Transaction status tracking (signing, pending, success, error)
- Account switching support
- Responsive dashboard layout
- Quick action buttons (Send, Receive, History)
Technical:
- Integration with PolkadotContext
- web3FromAddress for transaction signing
- signAndSend for blockchain transactions
- Balance conversion (plancks to tokens)
- Error handling and user feedback
- Toast notifications for transaction status
Navigation:
- Added /wallet route with ProtectedRoute
- Added Wallet link to navigation menu
Major Changes:
- Added @polkadot/api and related dependencies
- Created PolkadotContext for blockchain connection
- Implemented NetworkStats component with live data
- Added PolkadotWalletButton for wallet integration
- Connected to local validator node (ws://127.0.0.1:9944)
Features:
- Live block number and hash display
- Real-time validator count
- Network connection status monitoring
- Polkadot.js extension integration
- Multi-account support
- Account switching capability
Technical:
- RPC endpoint: ws://127.0.0.1:9944
- Auto-reconnect on disconnect
- TypeScript integration
- React hooks for state management
pezkuwichain