Replaced hardcoded stats with a new 'How Orb Oracle works?' section #18
Conversation
WalkthroughReplaced the Stats section in Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant UI as Landing Page (app/page.tsx)
participant Aggregator as Multi-Source Aggregation
participant Validator as Validation & Signing
participant Chain as On-Chain Publishing
Note over UI: User views three-step walkthrough
User->>UI: Clicks "Get Started" / "Learn More"
UI->>Aggregator: Present aggregation overview (step 1)
Aggregator-->>UI: Aggregation description shown
UI->>Validator: Present validation & signing overview (step 2)
Validator-->>UI: Validation description shown
UI->>Chain: Present on-chain publishing overview (step 3)
Chain-->>UI: Publishing description shown
UI->>User: CTA triggers navigation (Get Started / Learn More)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
app/page.tsx (3)
138-138: Use theme color variable instead of hardcoded RGB value.The arrow stroke color
rgb(147,197,253)is hardcoded, which makes it difficult to maintain consistency with the theme and doesn't adapt to theme changes.Replace the hardcoded color with a CSS variable or Tailwind theme color:
- stroke="rgb(147,197,253)" + stroke="currentColor"And apply a text color class to the parent div:
- <div className="hidden md:block absolute right-[-80px] top-[34px]"> + <div className="hidden md:block absolute right-[-80px] top-[34px] text-blue-300">Alternatively, use a CSS variable like
stroke="hsl(var(--primary))"to match your theme system.Also applies to: 164-164
120-185: Consider semantic HTML and extracting steps into a reusable component.The current implementation could be improved for maintainability and accessibility:
- Semantic HTML: Consider using an ordered list (
<ol>) with list items (<li>) instead of generic divs, as this represents a sequential process.- Component extraction: The three steps are highly repetitive and could be mapped from a data array.
- Decorative SVGs: Add
aria-hidden="true"to the arrow SVGs since they're purely decorative.Example refactor:
const steps = [ { number: 1, title: "Multi-Source Aggregation", description: "Orb Oracle pulls live prices from top exchanges, filters out bad data, and delivers a clean, reliable market value.", showArrow: true }, { number: 2, title: "Validation & Signing", description: "Independent nodes verify each update and sign it with cryptography to ensure accuracy and security.", showArrow: true }, { number: 3, title: "On-Chain Publishing", description: "The verified data is posted on-chain so smart contracts can access it instantly — no middlemen needed.", showArrow: false } ]; // Then map over the steps array to render each stepThis improves maintainability and makes it easier to add or modify steps in the future.
189-189: Remove extra blank line.There's an unnecessary extra blank line between sections. While this doesn't affect functionality, removing it would maintain consistent spacing throughout the file.
- - {/* CTA Section */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/page.tsx(3 hunks)
🔇 Additional comments (2)
app/page.tsx (2)
15-27: LGTM!The inline style adjustments for the Orb container are syntactically correct and improve the consistency of the layout.
43-43: LGTM!The heading text update is clear and properly formatted.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
app/page.tsx (2)
132-176: Consider accessibility improvements for the workflow section.The numbered circles and decorative arrows lack semantic markup and ARIA attributes, which could impact screen reader users.
Consider these improvements:
- Add
aria-hidden="true"to the decorative SVG in StepArrow component- Add descriptive
aria-labelattributes to the numbered circles- Consider using semantic
<ol>markup for the step sequenceExample for Step 1:
- <div className="flex-1 flex flex-col items-center px-6 relative"> - <div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center text-black font-semibold text-lg shadow-md mb-6"> + <div className="flex-1 flex flex-col items-center px-6 relative" role="listitem"> + <div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center text-black font-semibold text-lg shadow-md mb-6" aria-label="Step 1"> 1 </div>And in StepArrow:
- <svg width="150" height="24" viewBox="0 0 150 24" fill="none"> + <svg width="150" height="24" viewBox="0 0 150 24" fill="none" aria-hidden="true">
8-21: Consider parameterizing StepArrow positioning for future flexibility.The hardcoded
right-[-80px] top-[34px]positioning works for the current layout but may require changes if step content heights vary.If you anticipate layout variations, consider accepting positioning props:
const StepArrow = ({ rightOffset = -80, topOffset = 34 }: { rightOffset?: number; topOffset?: number }) => ( <div className="hidden md:block absolute" style={{ right: `${rightOffset}px`, top: `${topOffset}px` }}> <svg width="150" height="24" viewBox="0 0 150 24" fill="none"> <path d="M0 12 H140 L130 4 M140 12 L130 20" stroke="rgb(147,197,253)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /> </svg> </div> );This allows future adjustments without modifying the component.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/page.tsx(5 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
app/page.tsx (2)
components/navigation.tsx (1)
Navigation(7-40)components/Orb.tsx (1)
Orb(13-288)
🔇 Additional comments (3)
app/page.tsx (3)
8-21: Well done extracting the StepArrow component!This successfully addresses the previous review feedback about DRY violation. The component is clean and appropriately used in the workflow section.
31-53: Clean style normalization.The inline style formatting has been normalized to use double quotes consistently. The Orb component integration remains correct.
67-74: Proper button composition.The explicit
asChildpattern with Link is the correct approach for shadcn/ui Button components.
|
Please attach some photos for reference. |
@DengreSarthak I have attached screenshots showing the newly added “How Orb Oracle Works?” section that replaces the previous hardcoded stats. 
Please let me know if you’d like any additional views or adjustments. |
2 participants
Summary by CodeRabbit