[TASK-13463] Feat: Add go to profile button and update create account button#1216
[TASK-13463] Feat: Add go to profile button and update create account button#1216Zishan-7 merged 5 commits intopeanut-wallet-devfrom
Conversation
Zishan-7
commented
Sep 15, 2025
Zishan-7
commented
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@Zishan-7 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 32 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughReplaces plain "Create Account" buttons with a new CreateAccountButton component in two views and adds a conditionally-rendered "Go to {userName} profile" navigation button to TransactionDetailsReceipt; the profile button is inserted in two locations (duplicated). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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)
src/components/Payment/Views/Status.payment.view.tsx (1)
235-241: Make the “Create account” CTA accessible; hide decorative logos from SR.Add an aria-label to the Button, and mark the logos as decorative (empty alt, aria-hidden). Optionally set explicit sizes if these aren’t SVGs to avoid CLS.
-<Button onClick={() => router.push('/setup')} shadowSize="4"> +<Button onClick={() => router.push('/setup')} shadowSize="4" aria-label="Create account"> <div>Create a</div> <div className="flex items-center gap-1"> - <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" /> - <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" /> + <Image src={PEANUTMAN_LOGO} alt="" aria-hidden className="size-5" /> + <Image src={PEANUT_LOGO_BLACK} alt="" aria-hidden /> </div> <div>account</div> </Button>src/components/Claim/Link/Onchain/Success.view.tsx (1)
135-142: Same a11y fix for the Create account CTA.Hide decorative logos from assistive tech and add aria-label on the button.
-<Button onClick={() => router.push('/setup')} shadowSize="4"> +<Button onClick={() => router.push('/setup')} shadowSize="4" aria-label="Create account"> <div>Create a</div> <div className="flex items-center gap-1"> - <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" /> - <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" /> + <Image src={PEANUTMAN_LOGO} alt="" aria-hidden className="size-5" /> + <Image src={PEANUT_LOGO_BLACK} alt="" aria-hidden /> </div> <div>account</div> </Button>src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1)
926-941: Encode username in route to handle special chars; minor safety.Use encodeURIComponent to avoid malformed URLs (e.g., names with +, @, or spaces).
- onClick={() => router.push(`/${transaction.userName}`)} + onClick={() => router.push(`/${encodeURIComponent(transaction.userName)}`)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Claim/Link/Onchain/Success.view.tsx(2 hunks)src/components/Payment/Views/Status.payment.view.tsx(3 hunks)src/components/TransactionDetails/TransactionDetailsReceipt.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-07-24T13:26:10.290Z
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#1014
File: src/components/Claim/Link/Initial.view.tsx:413-413
Timestamp: 2025-07-24T13:26:10.290Z
Learning: In the peanut-ui repository, the change from `${SQUID_API_URL}/route` to `${SQUID_API_URL}/v2/route` in src/components/Claim/Link/Initial.view.tsx was a typo fix, not an API migration, as the codebase was already using Squid API v2.
Applied to files:
src/components/Claim/Link/Onchain/Success.view.tsx
📚 Learning: 2025-09-05T07:31:11.396Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1185
File: src/components/Claim/useClaimLink.tsx:14-0
Timestamp: 2025-09-05T07:31:11.396Z
Learning: In the peanut-ui codebase, `window.history.replaceState` is preferred over `router.replace` when immediate/synchronous URL parameter updates are required, as `router.replace` is asynchronous and doesn't guarantee instant URL changes that subsequent code can rely on. This pattern is used consistently across usePaymentInitiator.ts, Confirm.payment.view.tsx, and useClaimLink.tsx.
Applied to files:
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
📚 Learning: 2024-10-03T09:57:43.885Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#404
File: src/context/tokenSelector.context.tsx:121-121
Timestamp: 2024-10-03T09:57:43.885Z
Learning: In `TokenContextProvider` within `tokenSelector.context.tsx`, when token data is loaded from preferences, it's acceptable to set `isTokenPriceFetchingComplete` to `true` because the token data is already available.
Applied to files:
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
🧬 Code graph analysis (3)
src/components/Claim/Link/Onchain/Success.view.tsx (1)
src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
src/components/Payment/Views/Status.payment.view.tsx (1)
src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1)
src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
🪛 Biome (2.1.2)
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
[error] 283-283: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
Hooks should not be called after an early return.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (5)
src/components/Payment/Views/Status.payment.view.tsx (2)
2-2: LGTM on asset import.
22-22: LGTM on Next/Image usage import.src/components/Claim/Link/Onchain/Success.view.tsx (1)
17-18: LGTM on imports.src/components/TransactionDetails/TransactionDetailsReceipt.tsx (2)
31-31: LGTM on router import.
63-63: LGTM on router usage (consistent with codebase patterns).
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
Outdated
Show resolved
Hide resolved
kushagrasarathe
left a comment
kushagrasarathe
left a comment
There was a problem hiding this comment.
@Zishan-7 left a comment also check the coderrabbit comment, seems valid
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/components/Global/CreateAccountButton/index.tsx (4)
14-14: Prevent accidental form submission; add type and fix prop type.Set type="button" to avoid unintended form submits; also prefer numeric for shadowSize to match typical prop typing.
Apply:
- <Button onClick={onClick} shadowSize="4"> + <Button onClick={onClick} type="button" shadowSize={4}>
16-19: Decorative images should be hidden from AT; fix a11y name.Logos are decorative; they currently pollute the accessible name and yield “Create a … account.” Hide them and provide a clear aria-label on the button.
Apply:
- <div className="flex items-center gap-1"> - <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" /> - <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" /> - </div> + <div className="flex items-center gap-1" aria-hidden="true"> + <Image src={PEANUTMAN_LOGO} alt="" className="size-5" /> + <Image src={PEANUT_LOGO_BLACK} alt="" className="h-5 w-auto" /> + </div>And on Line 14 add an accessible label:
- <Button onClick={onClick} type="button" shadowSize={4}> + <Button onClick={onClick} type="button" shadowSize={4} aria-label="Create an account">
8-13: Allow pass-through Button props for flexibility.Expose Button props (className, disabled, data-attrs) without widening the surface area.
Apply:
-interface CreateAccountButtonProps { - onClick: () => void -} +type CreateAccountButtonProps = Omit<React.ComponentProps<typeof Button>, 'children'> & { + onClick: () => void +} -const CreateAccountButton = ({ onClick }: CreateAccountButtonProps) => { +const CreateAccountButton = ({ onClick, ...buttonProps }: CreateAccountButtonProps) => { return ( - <Button onClick={onClick} type="button" shadowSize={4} aria-label="Create an account"> + <Button onClick={onClick} type="button" shadowSize={4} aria-label="Create an account" {...buttonProps}>Also applies to: 14-14, 25-25
6-6: Drop unused React import (new JSX transform).If the repo uses the automatic JSX runtime (Next 13+ default), this import is unnecessary.
Apply:
-import React from 'react'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/Claim/Link/Onchain/Success.view.tsx(2 hunks)src/components/Global/CreateAccountButton/index.tsx(1 hunks)src/components/Payment/Views/Status.payment.view.tsx(3 hunks)src/components/TransactionDetails/TransactionDetailsReceipt.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/TransactionDetails/TransactionDetailsReceipt.tsx
- src/components/Claim/Link/Onchain/Success.view.tsx
- src/components/Payment/Views/Status.payment.view.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/Global/CreateAccountButton/index.tsx (1)
src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (2)
src/components/Global/CreateAccountButton/index.tsx (2)
1-2: LGTM on structure and intent.Clean, focused component; “use client” correctly placed and Button integration is consistent with Bruddle.
Also applies to: 12-23
3-5: Verified — PEANUTMAN_LOGO and PEANUT_LOGO_BLACK are static image imports (no next/image warnings expected).They are exported from src/assets (src/assets/peanut/index.ts and src/assets/illustrations/index.ts) as default SVG imports and are used as StaticImageData (PEANUTMAN_LOGO is accessed via .src in src/components/Global/PeanutLoading/index.tsx), so next/image can use them without explicit width/height. If you convert these SVGs to React components (SVGR) later, then update uses of
to provide width/height or use fill.
kushagrasarathe
left a comment
kushagrasarathe
left a comment
There was a problem hiding this comment.
lgtm, left a nit comment
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/TransactionDetails/TransactionDetailsReceipt.tsx (2)
283-292: Trim redundant check and simplify type guard.After the early return,
transactionis non-null. Remove!!transaction &&and use an includes guard for clarity.Apply:
-const showUserProfileButton = - !!transaction && - transaction.status === 'completed' && - !!transaction.userName && - !isAddress(transaction.userName) && - (transaction.extraDataForDrawer?.transactionCardType === 'send' || - transaction.extraDataForDrawer?.transactionCardType === 'request' || - transaction.extraDataForDrawer?.transactionCardType === 'receive') +const showUserProfileButton = + transaction.status === 'completed' && + !!transaction.userName && + !isAddress(transaction.userName) && + ['send', 'request', 'receive'].includes( + transaction.extraDataForDrawer?.transactionCardType ?? '' + )
926-941: Encode username in route to avoid broken navigation on special characters.If
userNamecontains spaces,?,#, or unicode,router.push(\/${userName}`)` can misroute. Encode the path segment.Apply:
- onClick={() => router.push(`/${transaction.userName}`)} + onClick={() => router.push(`/${encodeURIComponent(transaction.userName!)}`)}Optional: prefer
<Link href={\/${encodeURIComponent(transaction.userName!)}`}>` for prefetch if styling allows.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/TransactionDetails/TransactionDetailsReceipt.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-09-05T07:31:11.396Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1185
File: src/components/Claim/useClaimLink.tsx:14-0
Timestamp: 2025-09-05T07:31:11.396Z
Learning: In the peanut-ui codebase, `window.history.replaceState` is preferred over `router.replace` when immediate/synchronous URL parameter updates are required, as `router.replace` is asynchronous and doesn't guarantee instant URL changes that subsequent code can rely on. This pattern is used consistently across usePaymentInitiator.ts, Confirm.payment.view.tsx, and useClaimLink.tsx.
Applied to files:
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.
Applied to files:
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
📚 Learning: 2024-10-04T13:10:49.199Z
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-04T13:10:49.199Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, it's acceptable to use the `!` operator in TypeScript to assert that `selectedTokenData` is not `null` or `undefined`, and potential runtime errors from accessing its properties without checks can be disregarded.
Applied to files:
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
📚 Learning: 2024-10-03T09:57:43.885Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#404
File: src/context/tokenSelector.context.tsx:121-121
Timestamp: 2024-10-03T09:57:43.885Z
Learning: In `TokenContextProvider` within `tokenSelector.context.tsx`, when token data is loaded from preferences, it's acceptable to set `isTokenPriceFetchingComplete` to `true` because the token data is already available.
Applied to files:
src/components/TransactionDetails/TransactionDetailsReceipt.tsx
🧬 Code graph analysis (1)
src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1)
src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (1)
src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1)
283-292: Hook-order fix LGTM.You replaced the conditional hook with a derived boolean after the early return. This resolves the rule-of-hooks violation.
2 participants
