Design User Dashboard Page

[greatest0fallt1me]

Description

Design the main dashboard for API consumers showing their vault balance, recent API calls, usage statistics, and quick actions. This is the primary page users see after logging in.

Requirements and Context

• Must display vault balance prominently (USDC)
• Show recent API calls/activity
• Display usage statistics (calls today, this week, this month)
• Quick actions: Deposit USDC, Browse APIs
• Must be scannable and actionable
• Responsive design required

Detailed Design Specifications

Header Section:

• User wallet address (truncated, copy button)
• Vault balance card:
  • Large USDC amount (e.g., "1,234.56 USDC")
  • "Available Balance" label
  • "Deposit" button (primary CTA)
  • "Withdraw" button (secondary)
• Visual: Card with gradient or accent border

Quick Stats Section:

• Grid of stat cards (3-4 cards):
  • "API Calls Today" (number, trend indicator)
  • "API Calls This Week" (number, chart sparkline)
  • "Total APIs Used" (number)
  • "Total Spent" (USDC amount)
• Each card: Icon, value, label, optional mini chart

Recent Activity Section:

• Table/list of recent API calls:
  • Timestamp
  • API name
  • Endpoint called
  • Cost (USDC)
  • Status (success/error)
• Pagination or "View All" link
• Visual: Clean table with hover states

Quick Actions:

• Button: "Browse APIs"
• Button: "View Billing History"
• Button: "Manage Vault"

Empty State:

• If no API calls yet:
  • Illustration or icon
  • Message: "You haven't made any API calls yet"
  • CTA: "Browse APIs to get started"

User Flow

1. User lands on dashboard after login
2. Sees vault balance
3. Reviews quick stats
4. Checks recent activity
5. Takes action (deposit, browse APIs, etc.)

Design Deliverables

• Desktop mockup (full dashboard)
• Tablet mockup
• Mobile mockup (stacked layout)
• Empty state mockup
• Loading state mockup
• Interactive prototype
• Design specifications

Guidelines

• Data-dense but organized
• Use color coding for status (success = green, error = red)
• Ensure numbers are readable (large fonts for balances)
• Timeframe: 96 hours
• Project details: #

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[tech-adrian]

@Caxton22 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi maintainer,
I have read the issue description and understand this issue.
I will love to work on this
Please assign 🙏

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Caxton22 to this issue.

[ojaraa]

@ojaraa has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’m a frontend engineer with 4+ years of experience working with JavaScript, React, Next.js, and Tailwind, I’ve worked on production applications involving UI design, UI Implementation, API integrations and feature implementation. I have reviewed the issue and i am interested in working on it
i am confident i can resolve this issue in the shortest time possible
ETA: 72 hrs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ojaraa to this issue.

[Johnpii1]

@Johnpii1 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello sir,
I hope you’re having a great day! I saw your project and I’d really love the opportunity to work with you on it. Please let me know how you’d like to proceed. I’m excited about the possibility of collaborating with you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Johnpii1 to this issue.

[legend4tech]

@legend4tech has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi, I’m Legend4Tech, a full-stack developer and a former fellow at OnlyDust. I came across this issue and I’m really interested in working on it. I have experience across both frontend and backend development, and I enjoy digging into problems, understanding the context, and delivering clean, well-structured solutions.

I’d be happy to contribute and collaborate with the maintainers to get this resolved. Please let me know if you’d like me to proceed or if there are any specific guidelines I should follow.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @legend4tech to this issue.

[legend4tech]

@greatest0fallt1me i can also handle this

[Harbduls]

@Harbduls has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

please allow me to work on this project am a frontend developer

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Harbduls to this issue.

[Adeswalla]

@Adeswalla has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello Maintainter,
I would like to apply to this issue and work on it because as a Javascript and Typescript i prioritize functional and production-level code.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Adeswalla to this issue.

[estyemma]

I'd like to work on this! I'm a full-stack/smart contract developer experienced in building scalable, secure Web3 interfaces. I’m ready to contribute a high-quality solution that fits the project’s standards.

[estyemma]

I'd like to work on this! I'm a full-stack/smart contract developer experienced in building scalable, secure Web3 interfaces. I’m ready to contribute a high-quality solution that fits the project’s standards.