feat: in-app invest/fund page with real app.angor.io handoff + explore UX fixes - #42
Open
Zazawowow wants to merge 6 commits into
Open
feat: in-app invest/fund page with real app.angor.io handoff + explore UX fixes#42Zazawowow wants to merge 6 commits into
Zazawowow wants to merge 6 commits into
Conversation
added 6 commits
July 29, 2026 10:40
Adds project/:id/invest page faithfully replicating the prototype's HubInvestPage: amount card with quick amounts, fund installments/ frequency, subscription plans, release/payment schedule, transaction details, app-download interstitial (>= 0.01 BTC), invoice modal with network tabs and simulated payment, seed backup and success modals. Uses real project data from the indexer; payment side is mocked (front-end only). QR codes generated locally via pinned qrcode dep. Invest buttons now route in-app; app.angor.io kept as an option.
Header is transparent at the top and fades in a frosted blur layer after scrolling past its own height (64px), reversing at the top. Also keeps header dropdowns above page-level sticky bars.
The ported invest page simulated payments with hardcoded addresses, fake QR codes, a fake seed backup, and localStorage-only persistence. A user could have paid a real-looking QR with no recoverable funds. Keep the amount/plan selection UX, but hand off submission to the real wallet + signing flow at app.angor.io/test.angor.io investview: - small amounts open investview directly - >= 0.01 BTC shows the Use The App interstitial first - remove mock invoice/import/backup/success modals and qrcode dep
On a fresh visit ngOnInit awaited the Nostr deny-list reload before any project fetch started, so indexer.loading() was still false with zero projects and the 'No Projects Match Your Criteria' empty state flashed before the search had even begun. Gate the empty state behind an initialLoadComplete signal so skeletons render from first paint until the first fetch cycle finishes.
- Validating skeletons were wrapped in a nested grid that occupied a single cell of the parent grid, cramming them into one narrow column at the bottom of the list (the malformed empty cards) - Render skeletons directly as grid children instead - Add compositor-friendly entrance animation (opacity/transform only) with capped stagger for the first rows - Replace transition-all on cards and avatars with targeted box-shadow/transform transitions - content-visibility: auto skips paint for off-screen cards - Respect prefers-reduced-motion
…o-card swap The banner fix (77b2658) revealed images via an opacity fade on load, but profile pictures got [class.hidden] (display:none) until loaded combined with loading=lazy - a hidden lazy image has no box, so the browser may never fetch it: hidden until loaded, never loading because hidden. Apply the same opacity-fade pattern as banners. Also add the missing opacity transition to the project page logo, and start the card entrance animation from partial opacity so cards replacing validation skeletons cross-fade instead of leaving a blank gap.
Zazawowow
changed the title
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
1 participant
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
Ports the invest/fund flow UI from angor-prototype (
HubInvestPage.vue) into Angor Hub as a native page atproject/:id/invest, with submission handing off to the real wallet + signing flow at app.angor.io / test.angor.io. Also includes explore-page loading/rendering fixes found during UAT.Invest flow
https://app.angor.io/investview/{projectId}(test.angor.ioon testnet) where the actual wallet, transaction building, and signing live. Amounts >= 0.01 BTC (sats-based comparison) first show the "Use The App" interstitial (Download Now →/app, Continue with web → investview)qrcodedependency dropped with itdetails.stagesHeader
Explore page fixes (found during UAT)
transition-all,content-visibility: autofor off-screen cards,prefers-reduced-motionrespected (905c2f1)display:none-until-loaded +loading=lazy— a hidden lazy image has no box so the browser never fetches it. Same opacity-fade pattern applied; skeleton→card swap now cross-fades (5582f59)Notes
blossom.angor.io(image CDN) is currently very slow server-side — clients now show shimmer placeholders while waiting, but CDN latency should be raised separatelyTest plan
npm start, open a project, click Invest/Fundapp.angor.io/investview/{id}in a new tab/app/explorecold load: skeletons (not empty state) → cards fade in; no narrow cards while validatingVerified with headless UAT (Playwright, not committed): 14/14 invest-flow checks, explore loader/grid/animation/image checks all passing.