feat(frontend): creator wallet page + mobile responsive audit#254
Merged
Kaylahray merged 7 commits intoJun 29, 2026
Merged
Conversation
Audit and fix mobile responsiveness across the priority pages (creator layout, mission board, connect-wallet, account-type) per [Quid-proquo#247](https://github.com/3m1n3nc3/Quid/issues/247). - Sidebar: fix broken overlay (bg-opacity-50 is a no-op in Tailwind v4 -> bg-black/50), enlarge hamburger and nav-link tap targets to >=44px, cap drawer width at 80vw, drop dead xs:* class, add aria-label. - Creator layout: add min-w-0 / overflow-x-hidden so wide children can't cause horizontal scroll on mobile. - Connect-wallet: replace fixed w-80/w-72 widths with fluid w-full max-w-sm + page padding (safe below 375px), bump wallet rows to >=44px tap targets with role/tabindex, size the warning icon, remove unused framer-motion import. - Account-type (role-selection): make the Continue button full-width on mobile instead of a fixed px-24 that risked overflow. - Quests header: give the mobile hamburger a >=44px tap target + aria-label. Verified: production build passes, no horizontal scroll at 375px.
Implement /creator/wallet matching the provided design, backed by live Stellar data ([Quid-proquo#226](https://github.com/3m1n3nc3/Quid/issues/226)). - Add useWallet() hook exposing publicKey, balances, real transaction history, and refreshBalances(). Fetches the account from Horizon over REST (no new SDK dependency), parses native XLM + USDC, and derives a normalized transaction list from the account's /payments endpoint (create_account + payment/path_payment ops -> in/out, counterparty, amount, asset, status, date). Flags unfunded accounts (Horizon 404) and exposes fundWithFriendbot(). Network is configurable via NEXT_PUBLIC_HORIZON_URL / NEXT_PUBLIC_FRIENDBOT_URL (defaults: testnet). - Wallet page in the creator dark theme matching the mockup: - Top bar (title, refresh, bell, balance pill, profile). - Balance card: USD earnings (placeholder), live XLM + USDC balances, Withdraw Funds / View Earnings actions, minimum-withdrawal note, and an always-available "Fund with Friendbot" link for funded accounts. - Recent Transactions table driven by real Horizon payments, with loading skeletons and an empty state; counterparties link to stellar.expert. - Withdrawal Method panel showing the connected address with copy-to-clipboard (full key) + "Manage address". - Funding is reachable at any time: a prominent Friendbot banner + Stellar Laboratory link for unfunded accounts, and a persistent fund link otherwise. Friendbot's "account already funded" reply is reported with a clear message (testnet Friendbot only funds new accounts). - Refresh button refreshes balances + transactions without a page reload. Includes not-connected, loading, and error states. Responsive with >=44px tap targets. Verified: production build passes, lint clean, payment parsing and Friendbot behavior checked against a live testnet account.
Resolve conflicts after upstream wallet refactor and onboarding additions: - WalletProvider now exposes connected/publicKey/balances/refreshBalances via useWallet() (useWalletProvider kept as a deprecated alias) and uses @stellar/stellar-sdk. Updated the creator-wallet useWallet() hook to read publicKey/connected from the new context API. - connect-wallet: kept upstream's rewritten Freighter connect flow and re-applied the mobile responsive fixes (fluid widths, >=44px tap targets, overflow-x-hidden). - role-selection: kept upstream's role/router logic and the responsive Continue button (full-width on mobile). The account-type page and onboarding routes now exist upstream.
After the upstream WalletProvider refactor, balances were being fetched twice (provider + creator wallet hook). Make the provider the single source of truth: - Derive XLM/USDC and the balances list from the context's balances instead of a separate /accounts fetch. - Keep transaction history and the unfunded flag from the account's /payments endpoint (404 => unfunded), which the provider doesn't expose. - refreshBalances() now refreshes the provider balances and the payments history together. No change to the wallet page API or behavior.
After the upstream WalletProvider refactor, balances were being fetched twice (provider + creator wallet hook). Make the provider the single source of truth: - Derive XLM/USDC and the balances list from the context's balances instead of a separate /accounts fetch. - Keep transaction history and the unfunded flag from the account's /payments endpoint (404 => unfunded), which the provider doesn't expose. - refreshBalances() now refreshes the provider balances and the payments history together. - Defer the initial fetch to a microtask so no setState runs synchronously inside the effect (satisfies react-hooks/set-state-in-effect). No change to the wallet page API or behavior.
…n3nc3/Quid into frontend/wallet-and-responsive-audit
Kaylahray
approved these changes
Jun 29, 2026
Kaylahray
approved these changes
Jun 29, 2026
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Combines two related frontend pieces:
/creator/walletwith live Stellar data.Creator wallet page (#226)
New
useWallet()hook +/creator/walletpage built to the provided design, backed by live Horizon data (no new SDK dependency — plain REST):/accountsendpoint./paymentsendpoint (create_account+payment/path_paymentops → direction, counterparty, amount, asset, status, date), with loading skeletons and an empty state. Counterparties link to stellar.expert.NEXT_PUBLIC_HORIZON_URL/NEXT_PUBLIC_FRIENDBOT_URL(defaults: testnet).Mobile responsive audit (#247)
Audited the priority pages at 375px:
bg-opacity-50is a no-op in Tailwind v4 →bg-black/50), enlarged hamburger/nav-link tap targets to ≥44px, capped the drawer at80vw, removed a deadxs:*class, added an aria-label.min-w-0/overflow-x-hiddento prevent horizontal scroll from wide children.w-full max-w-smwidths + padding (safe below 375px), ≥44px wallet-row tap targets, removed an unusedframer-motionimport.px-24that risked overflow.Testing
npm run buildpasses;eslintclean on changed files.