diff --git a/frontend/src/wallet-creator.md b/frontend/src/wallet-creator.md new file mode 100644 index 0000000..cf41846 --- /dev/null +++ b/frontend/src/wallet-creator.md @@ -0,0 +1,68 @@ +## Quest Participant Wallet Page + +### Figma Design + +Figma layout: [[Wallet UI](https://www.figma.com/design/0pGK686ZLE68HmI3Wu2EvF/Survexa?node-id=647-2951&t=7mOUCjB6dSAYh8Xb-1)] + +### Responsive Screens + +The wallet page includes desktop and tablet responsive layouts. + +Included views: + +* Desktop Wallet Page +* Tablet Wallet Page +* Wallet Balance Section +* Earnings Summary Section +* Transaction History Table +* Withdrawal Method Section +* Wallet Management Options +* Loading States +* Empty States + +### Asset Exports + +Optimized wallet assets are available in the project assets folder. + +Formats used: + +* `.svg` for icons, status indicators, wallet graphics, and interface elements +* `.webp` for optimized image or avatar assets where applicable + +### Reusable Components + +The following reusable wallet and transaction components were created: + +* Wallet Balance Card +* Earnings Summary Card +* Withdraw Funds Button +* View Earnings Button +* Transaction History Table +* Transaction Row +* Transaction Status Badge +* Withdrawal Method Card +* Connected Wallet Address Display +* Manage Address Button +* Wallet Management Menu +* Empty Transaction State +* Transaction Loading State +* Balance Loading State + +### Loading and Empty States + +The wallet page includes appropriate states for financial actions and data display. + +Covered states: + +* Wallet balance loading state +* Transaction history loading state +* Empty transaction history state +* Withdrawal method not connected state +* Withdrawal action loading state +* Failed transaction state +* Pending transaction state +* Successful transaction state + +### Notes + +The wallet interface follows the platform’s dark-themed visual identity and keeps financial data readable, accessible, and easy to scan. Reward balances, transaction statuses, and withdrawal actions are visually prioritized to help users manage earnings with confidence.