feat: interactive bounty lifecycle flow diagram (Bounty #851)#944
Open
liufang88789-ui wants to merge 3 commits intoSolFoundry:mainfrom
Open
feat: interactive bounty lifecycle flow diagram (Bounty #851)#944liufang88789-ui wants to merge 3 commits intoSolFoundry:mainfrom
liufang88789-ui wants to merge 3 commits intoSolFoundry:mainfrom
Conversation
- 5 unique templates in 2 sizes: 1080x1080 feed + 1200x675 card - Dark theme with SolFoundry brand colors (emerald/magenta) - SVG source files (fully editable in Figma/Canva/Inkscape) - PNG preview renders for each template - Python generator script (gen_templates.py) for regenerating - Full design system documentation (README.md) Closes SolFoundry#829
- add responsive SVG lifecycle diagram for post → claim → work → submit → review → payment - add stage detail panel with hover/click interactions - integrate diagram into How It Works page - add focused diagram tests - fix motion typing compatibility required for clean frontend build Closes SolFoundry#851
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
Adds a new interactive bounty lifecycle flow diagram to the How It Works experience, covering the full path from bounty creation to payout:
post → claim → work → submit → review → payment
This delivers the requested React component with interactive state changes, SVG rendering, tooltips/detail panel behavior, and responsive layout.
What was added
New component
frontend/src/components/how-it-works/BountyFlowDiagram.tsxFeatures:
Page integration
frontend/src/pages/HowItWorksPage.tsxTests
frontend/src/__tests__/bounty-flow-diagram.test.tsxCoverage includes:
Additional compatibility fix
To ensure this page builds correctly under the current framer-motion version, I also updated motion animation typing usage in shared animation code / related hero usage so the frontend build now succeeds cleanly in this repo state.
Acceptance Criteria Mapping
Validation
npm test -- --run bounty-flow-diagram.test.tsx✅npm run build✅Wallet for payout
7UqBdYyy9LG59Un6yzjAW8HPcTC4J63B9cZxBHWhhBHPXK7YCloses #851