feat(dashboard): enhance error handling and logging in simulation run…#37
feat(dashboard): enhance error handling and logging in simulation run…#37nikhilachale wants to merge 1 commit into
Conversation
…ner; add new icons and improve FAQ section interactivity
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe PR introduces two independent change streams: dashboard transaction handling refinements and landing page UI/UX improvements. The dashboard refactors transaction building to send raw Solana transactions directly with enhanced error log extraction; the landing page modernizes the FAQ section into an accessible accordion, extracts defense icons into components, and applies a refreshed design gradient palette. ChangesDashboard Transaction & Error Handling
Landing Page UI Updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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: 5
🧹 Nitpick comments (3)
landingPage/app/components/final-cta-section.tsx (1)
21-21: ⚡ Quick winRemove extra whitespace in className.
There are two spaces between
from-primaryandvia-[#dee5e7]. While this doesn't affect functionality, removing the extra space improves code consistency.✨ Proposed fix
- <span className="bg-gradient-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent"> + <span className="bg-gradient-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent">🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@landingPage/app/components/final-cta-section.tsx` at line 21, The className string in the span inside final-cta-section.tsx contains an extra space between "from-primary" and "via-[`#dee5e7`]"; edit the span's className (the element with className starting "bg-linear-to-r from-primary via[#...") to remove the duplicate space so it becomes a single space between "from-primary" and "via-[`#dee5e7`]".landingPage/app/components/faq-section.tsx (2)
74-78: 💤 Low valueConsider replacing
<article>with<div>for accordion items.
<article>implies independently distributable, self-contained content. An FAQ accordion item is a structural UI element, not standalone content;<div>(or<li>inside a<ul>) better communicates intent to assistive technologies without unexpected document semantics.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@landingPage/app/components/faq-section.tsx` around lines 74 - 78, In the FAQ accordion component replace the semantic <article> element used for each item with a non-semantic container (e.g., a <div> or an <li> inside a wrapping <ul>) so the UI control isn’t exposed as independently distributable content; update the element that currently has key={i} data-faq-item className="border-b border-white/8 last:border-b-0" (in the faq-section component) to a <div> (or <li> if you convert the list) while preserving the key, data-faq-item attribute, and className so styling and identity remain unchanged.
74-78: 💤 Low valueConsider replacing
<article>with<div>for accordion items.
<article>implies independently distributable, self-contained content (e.g., a blog post). FAQ accordion items are structural UI elements rather than standalone documents, so<div>(or an<li>inside a<ul>) better communicates their role to assistive technologies without creating unexpected semantics.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@landingPage/app/components/faq-section.tsx` around lines 74 - 78, The FAQ accordion items use an <article> element (see the element with data-faq-item and className "border-b border-white/8 last:border-b-0"); change that element to a <div> (or an <li> if you move the list into a <ul>) so the markup reflects a structural UI component instead of an independently distributable article, keeping all props/attributes (key, data-faq-item, className) and updating the matching closing tag accordingly to preserve behavior and accessibility.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@dashboard/hooks/use-simulation-runner.ts`:
- Around line 186-190: The hook currently re-extracts a program log from
err.logs and appends it to baseMsg, causing duplication because
browserGuardedSolTransfer already enriches err.message; update the block that
computes err/baseMsg/msg to trust err.message (baseMsg) directly and remove the
logs extraction and programLog append logic (remove use of logs and programLog),
so msg = baseMsg (or err.message) is used when calling pushLog; keep existing
stop-condition checks intact and only change the computation of msg in this
hook.
In `@landingPage/app/components/faq-section.tsx`:
- Around line 110-114: The Tailwind class "duration-250" in the accordion's
className (the JSX that includes transition-[grid-template-rows,opacity] and the
grid-rows[...] toggles) isn't a valid default utility and yields no transition;
replace it with a valid duration utility such as "duration-200" or
"duration-300" or use an arbitrary value like "duration-[250ms]" to get the
intended timing while keeping the existing
transition-[grid-template-rows,opacity] behavior for the openIndex === i grid
expansion.
- Around line 110-114: The Tailwind class duration-250 is not a valid utility so
the accordion animation is not running; update the className expression in the
faq-section component (the template using openIndex === i and the
transition-[grid-template-rows,opacity] utility) to use a valid duration utility
such as duration-[250ms] (or pick an existing scale value like duration-200 or
duration-300) so the grid-template-rows/opacity transition actually animates.
In `@landingPage/app/components/final-cta-section.tsx`:
- Line 21: In the span inside the Final CTA component (final-cta-section.tsx)
replace the invalid Tailwind class name `bg-linear-to-r` with the correct
`bg-gradient-to-r` so the left-to-right gradient works; update the class list on
the span element that currently reads `bg-linear-to-r from-primary
via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent` to use
`bg-gradient-to-r` instead.
In `@landingPage/app/components/hero-section.tsx`:
- Line 20: The span in the HeroSection component uses an invalid Tailwind class
`bg-linear-to-r`; update the className on that span (the element with
className="bg-linear-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text
text-transparent") to use the correct Tailwind gradient utility
`bg-gradient-to-r` so the left-to-right gradient renders properly. Ensure no
other occurrences of `bg-linear-to-r` remain and run Tailwind build to verify
styles.
---
Nitpick comments:
In `@landingPage/app/components/faq-section.tsx`:
- Around line 74-78: In the FAQ accordion component replace the semantic
<article> element used for each item with a non-semantic container (e.g., a
<div> or an <li> inside a wrapping <ul>) so the UI control isn’t exposed as
independently distributable content; update the element that currently has
key={i} data-faq-item className="border-b border-white/8 last:border-b-0" (in
the faq-section component) to a <div> (or <li> if you convert the list) while
preserving the key, data-faq-item attribute, and className so styling and
identity remain unchanged.
- Around line 74-78: The FAQ accordion items use an <article> element (see the
element with data-faq-item and className "border-b border-white/8
last:border-b-0"); change that element to a <div> (or an <li> if you move the
list into a <ul>) so the markup reflects a structural UI component instead of an
independently distributable article, keeping all props/attributes (key,
data-faq-item, className) and updating the matching closing tag accordingly to
preserve behavior and accessibility.
In `@landingPage/app/components/final-cta-section.tsx`:
- Line 21: The className string in the span inside final-cta-section.tsx
contains an extra space between "from-primary" and "via-[`#dee5e7`]"; edit the
span's className (the element with className starting "bg-linear-to-r
from-primary via[#...") to remove the duplicate space so it becomes a single
space between "from-primary" and "via-[`#dee5e7`]".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f1872522-f2bd-45f9-8063-9bc1ffa663b3
📒 Files selected for processing (7)
dashboard/hooks/use-simulation-runner.tsdashboard/lib/simulation/build-transfer-ix-data.tslandingPage/app/components/defense-bento-section.tsxlandingPage/app/components/faq-section.tsxlandingPage/app/components/final-cta-section.tsxlandingPage/app/components/hero-section.tsxlandingPage/app/components/social-proof-bar.tsx
| const err = e as { message?: string; logs?: string[] }; | ||
| const baseMsg = err?.message ?? String(e); | ||
| const logs = Array.isArray(err?.logs) ? err.logs : []; | ||
| const programLog = logs.find((l) => /custom program error|Error Code|Error Number|AnchorError/i.test(l)); | ||
| const msg = programLog ? `${baseMsg} — ${programLog}` : baseMsg; |
There was a problem hiding this comment.
Redundant log re-extraction produces a duplicated program-log in the displayed error.
browserGuardedSolTransfer now throws errors whose .message already contains the matched program log line (e.g., "SendTransactionError: … — Program log: Error Code: PolicyPaused…"). The hook then reads the same log entry from err.logs and appends it again, producing:
"SendTransactionError: … — Program log: Error Code: PolicyPaused… — Program log: Error Code: PolicyPaused…"
The stop-condition checks on lines 193/198 still work correctly, but pushLog writes the duplicated string to the UI simulation log.
Since browserGuardedSolTransfer is the only call site in the try block and it now owns the enrichment, the hook can trust err.message directly:
🐛 Proposed fix
} catch (e: unknown) {
store.getState().incrementFailed();
- const err = e as { message?: string; logs?: string[] };
- const baseMsg = err?.message ?? String(e);
- const logs = Array.isArray(err?.logs) ? err.logs : [];
- const programLog = logs.find((l) => /custom program error|Error Code|Error Number|AnchorError/i.test(l));
- const msg = programLog ? `${baseMsg} — ${programLog}` : baseMsg;
+ const msg = e instanceof Error ? e.message : String(e);
store.getState().pushLog({ ...entryBase, signature: null, status: "failed", error: msg });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const err = e as { message?: string; logs?: string[] }; | |
| const baseMsg = err?.message ?? String(e); | |
| const logs = Array.isArray(err?.logs) ? err.logs : []; | |
| const programLog = logs.find((l) => /custom program error|Error Code|Error Number|AnchorError/i.test(l)); | |
| const msg = programLog ? `${baseMsg} — ${programLog}` : baseMsg; | |
| const msg = e instanceof Error ? e.message : String(e); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@dashboard/hooks/use-simulation-runner.ts` around lines 186 - 190, The hook
currently re-extracts a program log from err.logs and appends it to baseMsg,
causing duplication because browserGuardedSolTransfer already enriches
err.message; update the block that computes err/baseMsg/msg to trust err.message
(baseMsg) directly and remove the logs extraction and programLog append logic
(remove use of logs and programLog), so msg = baseMsg (or err.message) is used
when calling pushLog; keep existing stop-condition checks intact and only change
the computation of msg in this hook.
| className={`grid transition-[grid-template-rows,opacity] duration-250 ease-out ${ | ||
| openIndex === i | ||
| ? 'grid-rows-[1fr] opacity-100' | ||
| : 'grid-rows-[0fr] opacity-0' | ||
| }`} |
There was a problem hiding this comment.
duration-250 is not a default Tailwind utility — accordion transition will render instantly.
Out of the box, Tailwind provides eight duration values (75 ms → 1 s): duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, and duration-1000. duration-250 produces no CSS output unless added to the Tailwind config, so transition-[grid-template-rows,opacity] will collapse/expand with 0 ms duration. For a custom value, use the arbitrary-value syntax like duration-[250ms].
🐛 Proposed fix
- className={`grid transition-[grid-template-rows,opacity] duration-250 ease-out ${
+ className={`grid transition-[grid-template-rows,opacity] duration-[250ms] ease-out ${📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={`grid transition-[grid-template-rows,opacity] duration-250 ease-out ${ | |
| openIndex === i | |
| ? 'grid-rows-[1fr] opacity-100' | |
| : 'grid-rows-[0fr] opacity-0' | |
| }`} | |
| className={`grid transition-[grid-template-rows,opacity] duration-[250ms] ease-out ${ | |
| openIndex === i | |
| ? 'grid-rows-[1fr] opacity-100' | |
| : 'grid-rows-[0fr] opacity-0' | |
| }`} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@landingPage/app/components/faq-section.tsx` around lines 110 - 114, The
Tailwind class "duration-250" in the accordion's className (the JSX that
includes transition-[grid-template-rows,opacity] and the grid-rows[...] toggles)
isn't a valid default utility and yields no transition; replace it with a valid
duration utility such as "duration-200" or "duration-300" or use an arbitrary
value like "duration-[250ms]" to get the intended timing while keeping the
existing transition-[grid-template-rows,opacity] behavior for the openIndex ===
i grid expansion.
🧩 Analysis chain
🌐 Web query:
Tailwind CSS default transitionDuration theme scale - is duration-250 included?
💡 Result:
No, duration-250 is not included in Tailwind CSS's default transitionDuration theme values. The official documentation and multiple sources confirm the default transition duration utilities are: duration-0 (0s), duration-75 (75ms), duration-100 (100ms), duration-150 (150ms), duration-200 (200ms), duration-300 (300ms), duration-500 (500ms), duration-700 (700ms), and duration-1000 (1000ms) [1][2][3]. There is no duration-250 (250ms) in this list [4][1][5]. The default theme can be viewed by running npx tailwindcss init --full, which generates a config with these exact values [6]. In Tailwind CSS v4, themes use CSS variables like --default-transition-duration: 150ms, but the discrete duration utilities remain the same set [7][8]. To use 250ms, extend the theme in tailwind.config.js or use arbitrary values like duration-[250ms] [4][1].
Citations:
- 1: https://v3.tailwindcss.com/docs/transition-duration
- 2: https://v2.tailwindcss.com/docs/transition-duration
- 3: https://kombai.com/tailwind/transition-duration
- 4: https://tailwindcss.com/docs/transition-duration
- 5: https://stackoverflow.com/questions/67063939/tailwind-override-default-transition-duration
- 6: https://stackoverflow.com/questions/67063939/tailwind-override-default-transition-duration/67064193
- 7: https://tailwindcss.com/docs/transition-property
- 8: https://tailwindcss.com/blog/tailwindcss-v4
duration-250 is not a Tailwind CSS default utility — accordion transition will not animate.
Tailwind's default duration scale is 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 ms. The class duration-250 will generate no CSS output, leaving transition-[grid-template-rows,opacity] with an instant (0 ms) transition on open/close. Use the arbitrary-value syntax instead:
Proposed fix
- className={`grid transition-[grid-template-rows,opacity] duration-250 ease-out ${
+ className={`grid transition-[grid-template-rows,opacity] duration-[250ms] ease-out ${📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={`grid transition-[grid-template-rows,opacity] duration-250 ease-out ${ | |
| openIndex === i | |
| ? 'grid-rows-[1fr] opacity-100' | |
| : 'grid-rows-[0fr] opacity-0' | |
| }`} | |
| className={`grid transition-[grid-template-rows,opacity] duration-[250ms] ease-out ${ | |
| openIndex === i | |
| ? 'grid-rows-[1fr] opacity-100' | |
| : 'grid-rows-[0fr] opacity-0' | |
| }`} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@landingPage/app/components/faq-section.tsx` around lines 110 - 114, The
Tailwind class duration-250 is not a valid utility so the accordion animation is
not running; update the className expression in the faq-section component (the
template using openIndex === i and the transition-[grid-template-rows,opacity]
utility) to use a valid duration utility such as duration-[250ms] (or pick an
existing scale value like duration-200 or duration-300) so the
grid-template-rows/opacity transition actually animates.
| Protect your agents. | ||
| <br /> | ||
| <span className="bg-linear-to-r from-primary to-[#00b8ff] bg-clip-text text-transparent"> | ||
| <span className="bg-linear-to-r from-primary via-[#dee5e7] to-[#bead68] bg-clip-text text-transparent"> |
There was a problem hiding this comment.
Fix invalid Tailwind CSS gradient class name.
The class bg-linear-to-r is not valid Tailwind CSS syntax. The correct class for a left-to-right gradient is bg-gradient-to-r. This typo will cause the gradient styling to fail entirely, and the text may appear unstyled or with incorrect styling.
🎨 Proposed fix
- <span className="bg-linear-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent">
+ <span className="bg-gradient-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span className="bg-linear-to-r from-primary via-[#dee5e7] to-[#bead68] bg-clip-text text-transparent"> | |
| <span className="bg-gradient-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@landingPage/app/components/final-cta-section.tsx` at line 21, In the span
inside the Final CTA component (final-cta-section.tsx) replace the invalid
Tailwind class name `bg-linear-to-r` with the correct `bg-gradient-to-r` so the
left-to-right gradient works; update the class list on the span element that
currently reads `bg-linear-to-r from-primary via-[`#dee5e7`] to-[`#bead68`]
bg-clip-text text-transparent` to use `bg-gradient-to-r` instead.
| Stop rogue agents. | ||
| <br /> | ||
| <span className="bg-linear-to-r from-primary via-[#00b8ff] to-[#8b5cf6] bg-clip-text text-transparent"> | ||
| <span className="bg-linear-to-r from-primary via-[#dee5e7] to-[#bead68] bg-clip-text text-transparent"> |
There was a problem hiding this comment.
Fix invalid Tailwind CSS gradient class name.
The class bg-linear-to-r is not valid Tailwind CSS syntax. The correct class for a left-to-right gradient is bg-gradient-to-r. This typo will cause the gradient styling to fail entirely, and the text may appear unstyled or with incorrect styling.
🎨 Proposed fix
- <span className="bg-linear-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent">
+ <span className="bg-gradient-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span className="bg-linear-to-r from-primary via-[#dee5e7] to-[#bead68] bg-clip-text text-transparent"> | |
| <span className="bg-gradient-to-r from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@landingPage/app/components/hero-section.tsx` at line 20, The span in the
HeroSection component uses an invalid Tailwind class `bg-linear-to-r`; update
the className on that span (the element with className="bg-linear-to-r
from-primary via-[`#dee5e7`] to-[`#bead68`] bg-clip-text text-transparent") to use
the correct Tailwind gradient utility `bg-gradient-to-r` so the left-to-right
gradient renders properly. Ensure no other occurrences of `bg-linear-to-r`
remain and run Tailwind build to verify styles.
1 participant
…ner; add new icons and improve FAQ section interactivity
Summary by CodeRabbit
Bug Fixes
New Features
Style