Peanut wallet

[Hugo0]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
peanut-wallet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 4, 2025 11:27am

[coderabbitai]

Walkthrough

This change introduces new health check API endpoints for multiple backend services, refactors and extends the withdraw flow to support USD-based validation and state, and adds a modal-driven UI for canceling send links. It also removes several unused Bruddle UI components, updates transaction details handling for new transaction types, and makes targeted UI and logic improvements across payment, claim, and home components.

Changes

Cohort / File(s)	Change Summary
Health Check API Endpoints src/app/api/health/route.ts, src/app/api/health/backend/route.ts, src/app/api/health/frontend/route.ts, src/app/api/health/justaname/route.ts, src/app/api/health/mobula/route.ts, src/app/api/health/rpc/route.ts, src/app/api/health/squid/route.ts, src/app/api/health/zerodev/route.ts	Adds comprehensive health check endpoints for backend, frontend, RPC, Mobula, Squid, JustAName, and ZeroDev, including aggregation logic, error handling, and Discord notifications for unhealthy states.
Withdraw Flow Context and USD Validation src/context/WithdrawFlowContext.tsx, src/app/(mobile-ui)/withdraw/page.tsx, src/app/(mobile-ui)/withdraw/crypto/page.tsx, src/app/(mobile-ui)/home/page.tsx, src/components/Withdraw/views/Initial.withdraw.view.tsx	Extends withdraw context with USD amount and showAllWithdrawMethods state; updates withdraw pages and views to use USD-based validation, input handling, and context-driven state resets.
Unified Show All Methods State in Add/Withdraw src/components/AddWithdraw/AddWithdrawRouterView.tsx	Refactors state management for "show all methods" to distinguish between add and withdraw flows, removing default add money methods and updating all UI logic accordingly.
Bank Account/BIC Handling src/components/AddWithdraw/DynamicBankAccountForm.tsx	Moves BIC fetching from IBAN to form submission, removes onBlur BIC fetching, and improves error handling for missing BIC.
Send Link Cancellation Modal Integration src/components/Global/CancelSendLinkModal/index.tsx, src/components/Send/link/views/Success.link.send.view.tsx, src/components/TransactionDetails/TransactionDetailsDrawer.tsx	Introduces a reusable cancel send link modal; refactors cancellation logic to use the modal in send link success and transaction details views, with improved loading and error handling.
Claim and Payment Flow Enhancements src/components/Claim/Claim.tsx, src/app/[...recipient]/client.tsx, src/components/Payment/PaymentForm/index.tsx, src/hooks/usePaymentInitiator.ts	Adds loading state for link cancellation, modularizes charge fetching, refines payment transaction type logic, and improves claim and payment UI refresh behavior.
Transaction Details and History Updates src/components/TransactionDetails/TransactionCard.tsx, src/components/TransactionDetails/TransactionDetailsDrawer.tsx, src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx, src/components/TransactionDetails/transactionTransformer.ts, src/hooks/useTransactionHistory.ts	Adds support for new transaction types (e.g., BRIDGE_GUEST_OFFRAMP, bank_claim), updates display logic for transaction amounts, and enhances transaction details rendering and cancel actions.
Bruddle UI Component Removals src/components/0_Bruddle/Badge.tsx, src/components/0_Bruddle/Field.tsx, src/components/0_Bruddle/icons/ArrowIcon.tsx, src/components/0_Bruddle/icons/Icon.tsx, src/components/0_Bruddle/icons/index.ts, src/components/0_Bruddle/index.ts, src/components/Global/DirectionalActionButtons/index.tsx	Removes unused or deprecated Bruddle UI components and icon exports.
Icons and Utilities src/components/Global/Icons/Icon.tsx, src/components/Global/Icons/link-slash.tsx, src/utils/general.utils.ts	Adds a new 'link-slash' icon, updates icon mapping, and enhances address shortening utility with a configurable character count.
Miscellaneous UI Improvements src/app/(mobile-ui)/layout.tsx, src/components/Home/FloatingReferralButton/index.tsx, src/components/Home/HomeHistory.tsx, src/components/LandingPage/hero.tsx, src/components/Payment/Views/Status.payment.view.tsx, src/components/Global/IframeWrapper/index.tsx, src/hooks/useKycFlow.ts, src/config/routesUnderMaintenance.ts	Adjusts layout spacing, floating button positioning, home history logic, landing page CTA, payment status display, iframe close event handling, KYC flow, and route maintenance config.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Fix/withdraw amt issue #1045: Also adds and uses usdAmount and resetWithdrawFlow in withdraw flow context and related pages.
• Fix: Cancel button not showing for send and request link creator #1039: Also introduces CancelSendLinkModal and refactors send/request link cancellation logic to use modal-driven confirmation and loading state.
• fix: more and more bugssssss #1030: Also refactors show all methods state in Add/WithdrawRouterView and withdraw flow context for unified state management.

Suggested labels

enhancement

Suggested reviewers

• jjramirezn

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch peanut-wallet

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 10

🧹 Nitpick comments (9)

src/components/LandingPage/hero.tsx (1)

151-152: Hard-coded copy bypasses localisation pipeline

Every new user-facing string should go through the existing i18n mechanism (e.g. t('landing.cta.timeHint')) so the landing page remains translatable. Consider replacing the literal text with a translation key and adding the corresponding entry to the locale files.

- <p className="font-roboto-flex-bold mt-2 text-xs italic text-n-1 md:text-sm">Takes 10 seconds</p>
+ <p className="font-roboto-flex-bold mt-2 text-xs italic text-n-1 md:text-sm">
+   {t('landing.cta.timeHint', { defaultValue: 'Takes 10 seconds' })}
+ </p>

src/components/Global/Icons/Icon.tsx (1)

53-53: Fix typo in component name.

The component name LinkShashIcon appears to have a typo - it should likely be LinkSlashIcon to match the conventional naming pattern and the file path link-slash.tsx.

Apply this diff to fix the naming:

-import { LinkShashIcon } from './link-slash'
+import { LinkSlashIcon } from './link-slash'

And update the mapping:

-    'link-slash': LinkShashIcon,
+    'link-slash': LinkSlashIcon,

Note: This would also require updating the component name in src/components/Global/Icons/link-slash.tsx.

Also applies to: 143-143

src/components/Global/Icons/link-slash.tsx (1)

3-3: Fix component name typo.

The component name LinkShashIcon contains a typo - it should be LinkSlashIcon to match conventional naming patterns and the file name.

Apply this diff:

-export const LinkShashIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+export const LinkSlashIcon: FC<SVGProps<SVGSVGElement>> = (props) => {

Note: This change should be coordinated with the import in src/components/Global/Icons/Icon.tsx.

src/app/[...recipient]/client.tsx (1)

58-93: Great refactoring!

Extracting the charge fetching logic into fetchChargeDetails improves code organization and reusability. The function properly handles USD amount calculation from either currency data or token price.

Consider adding loading state management to provide better UX during charge fetching:

 const fetchChargeDetails = async () => {
     if (!chargeId) return
+    // Consider setting a loading state here
     chargesApi
         .get(chargeId)
         .then(async (charge) => {

src/app/(mobile-ui)/withdraw/page.tsx (1)

69-74: Potential redundant flow reset

The effect resets the withdraw flow whenever amountFromContext is falsy. This could cause unintended resets if the amount temporarily becomes falsy during updates.

Consider adding a more specific condition to avoid unnecessary resets:

 useEffect(() => {
-    if (!amountFromContext) {
+    if (!amountFromContext && step === 'inputAmount') {
         resetWithdrawFlow()
     }
-}, [amountFromContext, resetWithdrawFlow])
+}, [amountFromContext, resetWithdrawFlow, step])

src/components/Send/link/views/Success.link.send.view.tsx (1)

89-91: Inconsistent prop naming

The prop setshowCancelLinkModal doesn't follow camelCase convention.

-    setshowCancelLinkModal={setshowCancelLinkModal}
+    setShowCancelLinkModal={setShowCancelLinkModal}

Also update the state declaration:

-const [showCancelLinkModal, setshowCancelLinkModal] = useState(false)
+const [showCancelLinkModal, setShowCancelLinkModal] = useState(false)

src/components/TransactionDetails/TransactionDetailsDrawer.tsx (1)

126-126: Inconsistent prop naming pattern

Similar to the previous file, setshowCancelLinkModal doesn't follow camelCase convention.

-const [showCancelLinkModal, setshowCancelLinkModal] = useState(false)
+const [showCancelLinkModal, setShowCancelLinkModal] = useState(false)

And update all usages:

-    setshowCancelLinkModal={setshowCancelLinkModal}
+    setShowCancelLinkModal={setShowCancelLinkModal}

Also applies to: 883-883

src/app/api/health/mobula/route.ts (1)

31-31: Consider making test parameters configurable

The USDC contract address and blockchain ID are hardcoded. Consider extracting these as constants with documentation explaining why these specific values were chosen for health checks.

Add constants at the top of the file:

// Test parameters - using USDC on Ethereum as a reliable test case
const TEST_ASSET_ADDRESS = '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' // USDC on Ethereum
const TEST_BLOCKCHAIN_ID = 1 // Ethereum mainnet
const TEST_WALLET_ADDRESS = '0x9647BB6a598c2675310c512e0566B60a5aEE6261' // Known address with balance

src/app/api/health/rpc/route.ts (1)

48-54: Improve provider name detection logic

The nested ternary operators reduce readability. Consider extracting this logic into a helper function.

+const getProviderName = (rpcUrl: string, index: number): string => {
+    if (rpcUrl.includes('infura')) return 'infura'
+    if (rpcUrl.includes('alchemy')) return 'alchemy'
+    if (rpcUrl.includes('bnbchain')) return 'binance'
+    return `provider_${index}`
+}
+
 for (let i = 0; i < chainRpcs.length; i++) {
     const rpcUrl = chainRpcs[i]
-    const providerName = rpcUrl.includes('infura')
-        ? 'infura'
-        : rpcUrl.includes('alchemy')
-          ? 'alchemy'
-          : rpcUrl.includes('bnbchain')
-            ? 'binance'
-            : `provider_${i}`
+    const providerName = getProviderName(rpcUrl, i)

[coderabbitai]

⚠️ Potential issue

Replace any type with proper type definition

Using any type reduces type safety. Define a proper type for the lookup health status.

-let lookupHealth: any = { status: 'not_tested', message: 'Lookup endpoint not tested' }
+interface HealthStatus {
+    status: 'healthy' | 'degraded' | 'not_tested'
+    responseTime?: number
+    httpStatus?: number
+    message?: string
+    error?: string
+}
+
+let lookupHealth: HealthStatus = { status: 'not_tested', message: 'Lookup endpoint not tested' }

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

Suggested change

	let lookupHealth: any = { status: 'not_tested', message: 'Lookup endpoint not tested' }
	interface HealthStatus {
	status: 'healthy' | 'degraded' | 'not_tested'
	responseTime?: number
	httpStatus?: number
	message?: string
	error?: string
	}
	let lookupHealth: HealthStatus = { status: 'not_tested', message: 'Lookup endpoint not tested' }

🤖 Prompt for AI Agents

In src/app/api/health/justaname/route.ts at line 43, replace the use of the
`any` type for the variable `lookupHealth` with a proper type definition that
accurately reflects the structure of the object, such as an interface or type
alias with `status` and `message` properties as strings. Define this type above
or import it if already defined, then annotate `lookupHealth` with this type to
improve type safety.

[coderabbitai]

🛠️ Refactor suggestion

Add response validation for portfolio endpoint

The portfolio endpoint response is not validated for data structure, unlike the price endpoint. Consider adding validation to ensure the API returns expected data format.

 const portfolioResponseTime = Date.now() - portfolioTestStart

-const portfolioHealthy = portfolioResponse.ok
+if (!portfolioResponse.ok) {
+    throw new Error(`Portfolio API returned ${portfolioResponse.status}`)
+}

-// If portfolio API is down, throw error to return HTTP 500
-if (!portfolioHealthy) {
-    throw new Error(`Portfolio API returned ${portfolioResponse.status}`)
+const portfolioData = await portfolioResponse.json()
+// Validate expected structure (adjust based on actual API response)
+if (!portfolioData || typeof portfolioData !== 'object') {
+    throw new Error('Invalid portfolio data structure')
 }

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

Suggested change

	// Test 2: Portfolio endpoint (using a known address with likely balance)
	const portfolioTestStart = Date.now()
	const portfolioResponse = await fetchWithSentry(
	`${MOBULA_API_URL}/api/1/wallet/portfolio?wallet=0x9647BB6a598c2675310c512e0566B60a5aEE6261`,
	{
	headers: {
	'Content-Type': 'application/json',
	authorization: MOBULA_API_KEY,
	},
	}
	)
	const portfolioResponseTime = Date.now() - portfolioTestStart
	const portfolioHealthy = portfolioResponse.ok
	// If portfolio API is down, throw error to return HTTP 500
	if (!portfolioHealthy) {
	throw new Error(`Portfolio API returned ${portfolioResponse.status}`)
	}
	const portfolioResponseTime = Date.now() - portfolioTestStart
	if (!portfolioResponse.ok) {
	throw new Error(`Portfolio API returned ${portfolioResponse.status}`)
	}
	const portfolioData = await portfolioResponse.json()
	// Validate expected structure (adjust based on actual API response)
	if (!portfolioData || typeof portfolioData !== 'object') {
	throw new Error('Invalid portfolio data structure')
	}

🤖 Prompt for AI Agents

In src/app/api/health/mobula/route.ts between lines 50 and 69, the portfolio
endpoint response is not validated for its data structure. To fix this, add a
validation step after receiving the portfolioResponse to check that the response
JSON matches the expected format (e.g., required fields and types). If the
validation fails, throw an error to handle unexpected or malformed data, similar
to how the price endpoint response is validated.

[coderabbitai]

⚠️ Potential issue

Add type safety for service entries

Replace any type annotations with proper types for better type safety.

-const failedServices = Object.entries(healthData.services)
-    .filter(([_, service]: [string, any]) => service.status === 'unhealthy')
-    .map(([name, service]: [string, any]) => `• ${name}: ${service.error || 'unhealthy'}`)
+interface ServiceHealth {
+    status: 'healthy' | 'degraded' | 'unhealthy'
+    error?: string
+    responseTime?: number
+    timestamp?: string
+    details?: Record<string, unknown>
+}
+
+const failedServices = Object.entries(healthData.services as Record<string, ServiceHealth>)
+    .filter(([_, service]) => service.status === 'unhealthy')
+    .map(([name, service]) => `• ${name}: ${service.error || 'unhealthy'}`)

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

Suggested change

	const failedServices = Object.entries(healthData.services)
	.filter(([_, service]: [string, any]) => service.status === 'unhealthy')
	.map(([name, service]: [string, any]) => `• ${name}: ${service.error || 'unhealthy'}`)
	interface ServiceHealth {
	status: 'healthy' | 'degraded' | 'unhealthy'
	error?: string
	responseTime?: number
	timestamp?: string
	details?: Record<string, unknown>
	}
	const failedServices = Object.entries(healthData.services as Record<string, ServiceHealth>)
	.filter(([_, service]) => service.status === 'unhealthy')
	.map(([name, service]) => `• ${name}: ${service.error || 'unhealthy'}`)

🤖 Prompt for AI Agents

In src/app/api/health/route.ts around lines 22 to 24, the code uses 'any' type
annotations for service entries, which reduces type safety. Define a proper
interface or type for the service object that includes at least 'status' and
'error' properties, then replace the 'any' annotations with this specific type
in the Object.entries callback to ensure better type safety and clearer code.

[coderabbitai]

⚠️ Potential issue

Potential architectural issue with self-referential health checks

The aggregated health endpoint makes HTTP calls to its own service's health endpoints through the public URL in production. This could lead to cascading failures or add unnecessary network overhead.

Consider these alternatives:

1. Import and call the health check functions directly instead of HTTP calls
2. Use a service mesh or internal service discovery
3. Use internal URLs that bypass the public internet

Example of direct function calls:

import { GET as getMobulaHealth } from './mobula/route'
import { GET as getSquidHealth } from './squid/route'
// ... other imports

// Then call directly:
const mobulaHealth = await getMobulaHealth()
const mobulaData = await mobulaHealth.json()

🤖 Prompt for AI Agents

In src/app/api/health/route.ts around lines 75 to 88, the current implementation
makes HTTP requests to the service's own health endpoints via public URLs, which
can cause cascading failures and unnecessary network overhead. To fix this,
replace these HTTP calls by directly importing and invoking the health check
functions from the respective route files. This avoids network calls by calling
the health check logic internally, improving reliability and performance.

[coderabbitai]

🛠️ Refactor suggestion

Replace magic number with named constant

The threshold value of 3 for determining system unhealthiness should be a named constant for better maintainability.

Add at the top of the file:

// System is considered unhealthy if critical services are down OR this many services fail
const UNHEALTHY_SERVICE_THRESHOLD = 3

Then update the condition:

-if (criticalServicesDown || results.summary.unhealthy >= 3) {
+if (criticalServicesDown || results.summary.unhealthy >= UNHEALTHY_SERVICE_THRESHOLD) {

🤖 Prompt for AI Agents

In src/app/api/health/route.ts around lines 156 to 157, replace the magic number
3 used in the condition checking if the system is unhealthy with a named
constant. Define a constant UNHEALTHY_SERVICE_THRESHOLD with the value 3 at the
top of the file, then update the condition to compare results.summary.unhealthy
against this constant for better code clarity and maintainability.

[coderabbitai]

⚠️ Potential issue

Define proper type instead of using any

Replace any type with a proper interface for better type safety and code maintainability.

-const chainResults: any = {}
+interface ChainResult {
+    chainId: number
+    providers: Record<string, {
+        status: 'healthy' | 'degraded' | 'unhealthy'
+        responseTime: number
+        blockNumber?: number | null
+        httpStatus?: number
+        error?: string
+        url: string
+    }>
+    overallStatus: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+    summary?: {
+        total: number
+        healthy: number
+        degraded: number
+        unhealthy: number
+    }
+}
+
+const chainResults: Record<string, ChainResult> = {}

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

Suggested change

	const chainResults: any = {}
	interface ChainResult {
	chainId: number
	providers: Record<string, {
	status: 'healthy' | 'degraded' | 'unhealthy'
	responseTime: number
	blockNumber?: number | null
	httpStatus?: number
	error?: string
	url: string
	}>
	overallStatus: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
	summary?: {
	total: number
	healthy: number
	degraded: number
	unhealthy: number
	}
	}
	const chainResults: Record<string, ChainResult> = {}

🤖 Prompt for AI Agents

In src/app/api/health/rpc/route.ts at line 29, replace the use of the `any` type
for the `chainResults` variable with a properly defined interface that
accurately represents the expected structure of the data stored in
`chainResults`. Define this interface above or import it if already defined,
then use it to type `chainResults` to improve type safety and maintainability.

[coderabbitai]

⚠️ Potential issue

Fix prop naming inconsistency

The setter prop setshowCancelLinkModal doesn't follow camelCase convention. It should be setShowCancelLinkModal to maintain consistency with React naming conventions and the getter prop showCancelLinkModal.

 interface CancelSendLinkModalProps {
     showCancelLinkModal: boolean
-    setshowCancelLinkModal: (showCancelLinkModal: boolean) => void
+    setShowCancelLinkModal: (showCancelLinkModal: boolean) => void
     amount: string
     onClick: () => void
 }

 const CancelSendLinkModal = ({
     showCancelLinkModal,
-    setshowCancelLinkModal,
+    setShowCancelLinkModal,
     amount,
     onClick,
 }: CancelSendLinkModalProps) => {

Also update line 19:

-            onClose={() => setshowCancelLinkModal(false)}
+            onClose={() => setShowCancelLinkModal(false)}

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

Suggested change

	interface CancelSendLinkModalProps {
	showCancelLinkModal: boolean
	setshowCancelLinkModal: (showCancelLinkModal: boolean) => void
	amount: string
	onClick: () => void
	}
	const CancelSendLinkModal = ({
	showCancelLinkModal,
	setshowCancelLinkModal,
	amount,
	onClick,
	}: CancelSendLinkModalProps) => {
	interface CancelSendLinkModalProps {
	showCancelLinkModal: boolean
	setShowCancelLinkModal: (showCancelLinkModal: boolean) => void
	amount: string
	onClick: () => void
	}
	const CancelSendLinkModal = ({
	showCancelLinkModal,
	setShowCancelLinkModal,
	amount,
	onClick,
	}: CancelSendLinkModalProps) => {
	return (
	<ActionModal
	open={showCancelLinkModal}
	onClose={() => setShowCancelLinkModal(false)}
	// other props...
	>
	{/* Modal content */}
	</ActionModal>
	)
	}

🤖 Prompt for AI Agents

In src/components/Global/CancelSendLinkModal/index.tsx lines 3 to 15, rename the
prop setter from setshowCancelLinkModal to setShowCancelLinkModal to follow
camelCase naming conventions consistent with React standards and the getter prop
showCancelLinkModal. Also update all references to this prop, including the one
on line 19, to use the corrected camelCase name.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

Verify the UI text change is intentional

The text was changed from "Select token and chain to pay with" to "Select token and chain to receive". This seems semantically incorrect for a payment flow where the user is selecting which token/chain to use for payment. The user pays with a token, not receives it during payment.

Was this change intentional? If so, could you explain the reasoning? Otherwise, consider reverting to the original text:

-                            <div className="text-sm font-bold">Select token and chain to receive</div>
+                            <div className="text-sm font-bold">Select token and chain to pay with</div>

---

🏁 Script executed:

#!/bin/bash
rg -n -C3 "Select token and chain to receive" src/components/Payment/PaymentForm/index.tsx

Length of output: 639

---

Fix the UI text in PaymentForm
The label “Select token and chain to receive” is misleading in the request-payment flow—users are choosing the token/chain they will pay with. Please revert to the original wording.

• File: src/components/Payment/PaymentForm/index.tsx:658

- <div className="text-sm font-bold">Select token and chain to receive</div>
+ <div className="text-sm font-bold">Select token and chain to pay with</div>

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

Suggested change

	<div className="text-sm font-bold">Select token and chain to receive</div>
	<div className="text-sm font-bold">Select token and chain to pay with</div>

🤖 Prompt for AI Agents

In src/components/Payment/PaymentForm/index.tsx at line 658, the label text
"Select token and chain to receive" is misleading for the request-payment flow
because users are actually selecting the token and chain they will pay with.
Change the text back to the original wording that correctly reflects this
action, ensuring the label clearly indicates the token and chain used for
payment.

[coderabbitai]

🛠️ Refactor suggestion

Add user feedback for cancellation errors

The error is captured and logged but users receive no feedback when cancellation fails.

Consider showing an error notification or alert to inform users:

 .catch((error) => {
     captureException(error)
     console.error('Error claiming link:', error)
     setIsLoading(false)
+    // Add user notification here, e.g.:
+    // showErrorNotification('Failed to cancel link. Please try again.')
 })

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

Suggested change

	.catch((error) => {
	captureException(error)
	console.error('Error claiming link:', error)
	setIsLoading(false)
	})
	}}
	.catch((error) => {
	captureException(error)
	console.error('Error claiming link:', error)
	setIsLoading(false)
	// Add user notification here, e.g.:
	// showErrorNotification('Failed to cancel link. Please try again.')
	})

🤖 Prompt for AI Agents

In src/components/Send/link/views/Success.link.send.view.tsx around lines 112 to
117, the catch block logs cancellation errors but does not provide any user
feedback. Modify the catch block to display an error notification or alert to
inform users when the cancellation fails, ensuring they are aware of the issue.
Use the existing UI notification system or a simple alert to show the error
message alongside capturing and logging the error.

[coderabbitai]

⚠️ Potential issue

Avoid non-null assertions for safer code

Multiple non-null assertions could cause runtime errors if data is unexpectedly missing.

Add proper null checks:

-    .claim(user!.user.username!, transaction.extraDataForDrawer!.link!)
+    .claim(
+        user?.user.username || '',
+        transaction.extraDataForDrawer?.link || ''
+    )

Or validate before calling:

if (!user?.user.username || !transaction.extraDataForDrawer?.link) {
    console.error('Missing required data for claim')
    setIsLoading(false)
    return
}

🤖 Prompt for AI Agents

In src/components/TransactionDetails/TransactionDetailsDrawer.tsx at line 890,
avoid using non-null assertions on user!.user.username! and
transaction.extraDataForDrawer!.link! as they can cause runtime errors if the
data is missing. Instead, add a null check before this line to verify that
user?.user.username and transaction.extraDataForDrawer?.link exist. If either is
missing, log an error, set loading state to false, and return early to prevent
execution with invalid data.