[TASK-15759] Add I did it button on deposit USDC screen

[Zishan-7]

Contributes to TASK-15699 as well

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Oct 13, 2025 6:08pm

[notion-workspace]

Improve ADD CRYPTO last screen

[notion-workspace]

Change Claim Countries Copy

[coderabbitai]

Walkthrough

Replaced inline copy logic in CryptoDepositQR.view with a CopyToClipboard control and changed the primary button to route to /home with static label "I did it!". Updated BankFlowManager.view UI text for the country input title. No public API changes.

Changes

Cohort / File(s)	Change summary
Crypto deposit QR view src/components/AddMoney/views/CryptoDepositQR.view.tsx	Removed local copy state and handler; imported and rendered CopyToClipboard alongside the deposit address inside a Card; primary button now navigates to /home and label changed to "I did it!".
Bank flow manager view src/components/Claim/Link/views/BankFlowManager.view.tsx	Updated inputTitle passed to CountryListRouter to "Select your bank account's country" (text change only).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Add logout button, logos and info text #1301 — Edits CryptoDepositQR.view.tsx (UI/props adjustments) and likely overlaps with the component changes here.

Suggested reviewers

• kushagrasarathe
• jjramirezn

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly and concisely summarizes the primary change, indicating the addition of an “I did it” button on the deposit USDC screen and referencing the related ticket.
Description Check	✅ Passed	The pull request description refers to the relevant task and includes illustrative images of the UI change, demonstrating that it is related to the added “I did it” button on the deposit screen.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add-button-deposit-usdc-screen

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 734650a and 60dbc73.

📒 Files selected for processing (1)

• src/components/AddMoney/views/CryptoDepositQR.view.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/AddMoney/views/CryptoDepositQR.view.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 (3)

src/components/AddMoney/views/CryptoDepositQR.view.tsx (3)

4-4: LGTM: Clean integration of required dependencies.

The addition of CopyToClipboard and useRouter imports, along with the router initialization, properly supports the new functionality.

Also applies to: 9-9, 28-28

---

60-64: Improved address display with copy functionality.

The refactored Card layout cleanly separates the address display from the copy action using the CopyToClipboard component. The responsive text sizing (text-xs md:text-sm md:font-semibold) addresses the previous review feedback about font weight and readability on desktop.

---

65-72: Button behavior updated as intended.

The button now navigates to /home with the clear label "I did it!", which aligns with the PR objective. Note that this is an optimistic UI pattern that trusts the user's action without verifying the deposit completion—this appears intentional for a smoother user experience.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/AddMoney/views/CryptoDepositQR.view.tsx (1)

65-72: Verify the user flow and consider confirmation.

The button navigates to /home immediately without verifying whether the user actually completed the deposit. This could lead to users clicking prematurely and losing their place in the deposit flow.

Consider:

• Adding a confirmation dialog: "Are you sure you've completed the deposit?"
• Tracking pending deposits in state so users can return to this screen if needed
• Providing a warning message if users might not have completed the deposit yet

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 87de14f and 734650a.

📒 Files selected for processing (2)

• src/components/AddMoney/views/CryptoDepositQR.view.tsx (3 hunks)
• src/components/Claim/Link/views/BankFlowManager.view.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-05-22T15:38:48.586Z

Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".

Applied to files:

• src/components/Claim/Link/views/BankFlowManager.view.tsx

🧬 Code graph analysis (1)

src/components/AddMoney/views/CryptoDepositQR.view.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 (4)

src/components/Claim/Link/views/BankFlowManager.view.tsx (1)

451-451: LGTM! Clearer user prompt.

The updated text is more direct and easier to understand for users.

src/components/AddMoney/views/CryptoDepositQR.view.tsx (3)

4-4: LGTM!

The added imports are correctly used in the component.

Also applies to: 9-9

---

28-28: LGTM!

Standard Next.js router initialization.

---

60-64: LGTM! Improved component structure.

The Card with CopyToClipboard component provides better code reusability and clearer UX.

[kushagrasarathe]

approved, left a comment