Fix: Verification Modal not working

[Zishan-7]

No description provided.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Nov 8, 2025 5:18pm

[coderabbitai]

Walkthrough

Two files updated to optimize bridge country handling. IdentityVerification.view.tsx introduces a memoized bridgeCountryObject as a canonical fallback and updates selectedCountryParams to use it. useIdentityVerification.tsx wraps the isBridgeSupportedCountry function in useCallback to memoize the callback definition.

Changes

Cohort / File(s)	Summary
Bridge Country Logic Memoization src/components/Profile/views/IdentityVerification.view.tsx, src/hooks/useIdentityVerification.tsx	Introduces bridgeCountryObject via useMemo as a canonical fallback in country lookup logic; updates selectedCountryParams dependency array to include the memoized object. Wraps isBridgeSupportedCountry function in useCallback with an empty dependency array to memoize the callback.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the dependency array additions in selectedCountryParams are complete and correct
• Confirm that the empty dependency array for isBridgeSupportedCountry callback is intentional and doesn't cause stale closure issues

Possibly related PRs

• [TASK-15044] feat: remember manteca methods #1252: Modifies bridge-related identity verification logic and bridge country handling in the same component and hook files.

Suggested labels

enhancement

Suggested reviewers

• kushagrasarathe
• Hugo0

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	No description was provided by the author, making it impossible to assess whether it relates to the changeset.	Add a pull request description explaining the problem (infinite rendering in verification modal) and how the memoization changes fix it.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main fix: addressing a verification modal issue, which aligns with the code changes addressing rendering problems through memoization optimizations.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 fix/start-verif-modal-infinite-rendering

---

📜 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 40d5d81 and 7cff5a9.

📒 Files selected for processing (2)

• src/components/Profile/views/IdentityVerification.view.tsx (1 hunks)
• src/hooks/useIdentityVerification.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (10)

📓 Common learnings

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.

Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 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".

Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 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".

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 424
File: src/components/Global/TokenSelector/TokenSelector.tsx:197-211
Timestamp: 2024-10-11T01:14:15.489Z
Learning: In `src/components/Global/TokenSelector/TokenSelector.tsx`, when the calculation within functions like `byChainAndText` is not computationally expensive, it's acceptable to avoid using `useCallback` for memoization.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.

📚 Learning: 2024-10-29T16:06:38.812Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.

Applied to files:

• src/hooks/useIdentityVerification.tsx

📚 Learning: 2024-10-11T01:14:15.489Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 424
File: src/components/Global/TokenSelector/TokenSelector.tsx:197-211
Timestamp: 2024-10-11T01:14:15.489Z
Learning: In `src/components/Global/TokenSelector/TokenSelector.tsx`, when the calculation within functions like `byChainAndText` is not computationally expensive, it's acceptable to avoid using `useCallback` for memoization.

Applied to files:

• src/hooks/useIdentityVerification.tsx

📚 Learning: 2024-10-24T12:40:15.006Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 478
File: src/components/Request/Create/Views/Initial.view.tsx:48-128
Timestamp: 2024-10-24T12:40:15.006Z
Learning: When `handleOnNext` is deliberately refactored to avoid dependencies that change, it's acceptable to have an empty dependency array in `useCallback`.

Applied to files:

• src/hooks/useIdentityVerification.tsx

📚 Learning: 2025-09-18T09:30:42.901Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1230
File: src/app/(mobile-ui)/withdraw/page.tsx:92-97
Timestamp: 2025-09-18T09:30:42.901Z
Learning: In src/app/(mobile-ui)/withdraw/page.tsx, the useEffect that calls setShowAllWithdrawMethods(true) when amountFromContext exists is intentionally designed to run only on component mount (empty dependency array), not when amountFromContext changes. This is the correct behavior for the withdraw flow where showing all methods should only happen on initial load when an amount is already present.

Applied to files:

• src/hooks/useIdentityVerification.tsx
• src/components/Profile/views/IdentityVerification.view.tsx

📚 Learning: 2025-08-14T14:42:54.411Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.

Applied to files:

• src/hooks/useIdentityVerification.tsx
• src/components/Profile/views/IdentityVerification.view.tsx

📚 Learning: 2025-08-14T14:36:18.758Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:0-0
Timestamp: 2025-08-14T14:36:18.758Z
Learning: Bridge API requires ISO3 country codes (3-letter codes like "USA", "GBR") while flag display components need ISO2 codes (2-letter codes like "US", "GB").

Applied to files:

• src/hooks/useIdentityVerification.tsx

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

Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 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/Profile/views/IdentityVerification.view.tsx

📚 Learning: 2025-10-02T15:23:01.513Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.

Applied to files:

• src/components/Profile/views/IdentityVerification.view.tsx

📚 Learning: 2025-08-13T18:22:01.941Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.941Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.

Applied to files:

• src/components/Profile/views/IdentityVerification.view.tsx

🧬 Code graph analysis (2)

src/hooks/useIdentityVerification.tsx (1)

src/components/AddMoney/consts/index.ts (1)

• BRIDGE_ALPHA3_TO_ALPHA2 (2731-2773)

src/components/Profile/views/IdentityVerification.view.tsx (1)

src/components/AddMoney/consts/index.ts (1)

• countryData (292-2700)

🔇 Additional comments (4)

src/hooks/useIdentityVerification.tsx (1)

252-260: LGTM! Appropriate memoization to prevent infinite renders.

Wrapping isBridgeSupportedCountry in useCallback is correct here since this function is used in dependency arrays (e.g., line 136 in IdentityVerification.view.tsx). The empty dependency array is appropriate because the function has no external dependencies—it only uses its parameter and the imported constant BRIDGE_ALPHA3_TO_ALPHA2.

This change prevents the useEffect in the consumer component from re-running unnecessarily, which was likely contributing to the infinite render loop mentioned in the PR title.

src/components/Profile/views/IdentityVerification.view.tsx (3)

111-115: LGTM! Essential fix for infinite render loop.

Creating a memoized bridgeCountryObject with an empty dependency array provides a stable reference that persists across renders. This is crucial because the previous code was creating a new object literal in the fallback case on line 124, which caused selectedCountryParams to change on every render and triggered the useEffect at lines 131-136 repeatedly.

---

124-124: Good use of memoized object reference.

Using the stable bridgeCountryObject instead of an inline object literal prevents unnecessary re-computations of selectedCountryParams and breaks the infinite render cycle.

---

128-128: Dependency array follows best practices.

Including bridgeCountryObject in the dependency array follows React's exhaustive-deps rule. While technically unnecessary (since bridgeCountryObject has an empty dependency array and never changes), this is acceptable and maintains consistency with linting expectations.

---

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.}