add wallet creator documentation with responsive design and component…

[SaintSammi]

Quest Participant Wallet Page

Closes #248

Figma Design

Figma layout: [Wallet UI]

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.