1660c47db5
- Replace simple form layout with sophisticated card-based design system - Implement bank card-style wallet display with gradient backgrounds and decorative elements - Integrate real user data from UserContext (username, quota, usage stats, user role, group) - Add personalized color schemes using stringToColor for unique user identification - Implement comprehensive responsive design for mobile, tablet, and desktop devices - Add skeleton loading states for all data-dependent components and API calls - Replace basic Input with InputNumber component for amount input with built-in validation (min: 1) - Add official brand icons for payment methods (Alipay, WeChat) using react-icons/si - Integrate Semi UI Banner component for better warning notifications - Implement real-time data synchronization between local state and UserContext - Add sophisticated loading states with proper error handling and user feedback - Clean up all code comments and remove unused imports, functions, and state variables - Enhance visual hierarchy with proper spacing, shadows, and modern typography - Add glass-morphism effects and backdrop filters for premium visual experience - Improve accessibility with proper text truncation and responsive font sizing This update transforms the TopUp page from a basic form into a professional, modern payment interface that provides excellent user experience across all devices while maintaining full functionality and adding comprehensive data validation.
React Template
Basic Usages
# Runs the app in the development mode
npm start
# Builds the app for production to the `build` folder
npm run build
If you want to change the default server, please set REACT_APP_SERVER environment variables before build,
for example: REACT_APP_SERVER=http://your.domain.com.
Before you start editing, make sure your Actions on Save options have Optimize imports & Run Prettier enabled.