gix

[Hugo0]

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 4, 2025 10:14pm

[Hugo0]

@coderabbitai review in depth

[coderabbitai]

Walkthrough

ProgressBar adds a near-goal guard to avoid label overlap; TokenAmountInput gains an optional amountCollected prop and slider snap/clamping logic; PaymentForm forwards amountCollected to TokenAmountInput for the initial request-pot view.

Changes

Cohort / File(s)	Change Summary
ProgressBar label positioning src/components/Global/ProgressBar/index.tsx	Add isTooCloseToGoal when progressPercentage > 90; conditionally adjust label container className and inline left style to keep label at left: 0 near completion to avoid overlap.
TokenAmountInput prop and slider enhancement src/components/Global/TokenAmountInput/index.tsx	Add optional prop amountCollected?: number (default 0); update onSliderValueChange to compute numeric selectedAmount, apply a 33.33% magnetic snap when amountCollected > 0, clamp to remaining amount within ~2%, convert to string for formatting, and expand useCallback dependencies (amountCollected, displayMode, isInputUsd, decimals).
PaymentForm TokenAmountInput integration src/components/Payment/PaymentForm/index.tsx	Pass amountCollected={showRequestPotInitialView ? totalAmountCollected : 0} into TokenAmountInput (data plumbing only).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Inspect the 33.33% snap and ~2% clamping math in TokenAmountInput for off-by-one/precision issues.
• Verify useCallback dependency list includes all values used to avoid stale closures.
• Check responsive/RTL/CSS interactions for ProgressBar label when isTooCloseToGoal toggles.

Possibly related PRs

• [TASK-6611] feat: add max button to token amount input #495 — also modifies src/components/Global/TokenAmountInput/index.tsx by adding maxValue/Max button behavior (overlaps input/slider UI changes).
• [TASK-16321] Fix/pots fixes #1368 — updates TokenAmountInput slider/default value behavior and related props (overlapping slider logic).
• fixes: pesos currency #854 — refactors input state/formatting in TokenAmountInput, which may conflict with the new snapping/formatting changes.

Suggested reviewers

• jjramirezn
• kushagrasarathe

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The pull request title 'gix' does not clearly describe the primary changes in the changeset, which involve fixing progress bar label overlap, adding amountCollected logic, and implementing snap-point behavior.	Replace the title with a clear, concise summary of the main changes, such as 'Fix progress bar label overlap and add amountCollected snap-point logic' or similar.
Description check	⚠️ Warning	No pull request description was provided by the author, making it impossible to assess whether the description relates to the changeset.	Add a pull request description explaining the changes, rationale, and any relevant context for reviewers.

✨ 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/request-pots-fixes3

---

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

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Read the three modified files
echo "=== ProgressBar/index.tsx ==="
cat src/components/Global/ProgressBar/index.tsx

echo -e "\n\n=== TokenAmountInput/index.tsx ==="
cat src/components/Global/TokenAmountInput/index.tsx

echo -e "\n\n=== PaymentForm/index.tsx ==="
cat src/components/Payment/PaymentForm/index.tsx

# Get git diff to see what actually changed
echo -e "\n\n=== Git Diff for all files ==="
git diff HEAD~1 HEAD -- src/components/Global/ProgressBar/index.tsx src/components/Global/TokenAmountInput/index.tsx src/components/Payment/PaymentForm/index.tsx

Length of output: 67043

---

@Hugo0, I've completed an in-depth review of PR #1399. Here's my comprehensive analysis:

🎯 Overview

This PR focuses on fixing request pot payment UI and slider functionality, specifically addressing label overlap issues and implementing smart contribution snapping.

---

📁 File-by-File Analysis

1. ProgressBar/index.tsx - Label Overlap Fix ✅

Changes: Added logic to prevent progress label overlap when >90% of goal

Strengths:

• Simple, effective solution to UI overlap
• Maintains existing behavior for other ranges
• Clear variable naming (isTooCloseToGoal)

Concerns:

• Magic number 90 could be extracted to a constant
• The logic chain is getting complex: progressPercentage < 10 ? 'left-0' : isTooCloseToGoal ? 'left-0' : '-translate-x-1/2'

Suggestions:

// Consider extracting magic numbers
const PROGRESS_LABEL_LOWER_THRESHOLD = 10
const PROGRESS_LABEL_UPPER_THRESHOLD = 90

// Simplify conditional logic
const shouldAlignLeft = progressPercentage < PROGRESS_LABEL_LOWER_THRESHOLD || progressPercentage > PROGRESS_LABEL_UPPER_THRESHOLD
className={twMerge('absolute text-sm', shouldAlignLeft ? 'left-0' : '-translate-x-1/2')}
style={shouldAlignLeft ? {} : { left: `${progressPercentage}%` }}

---

2. TokenAmountInput/index.tsx - Smart Slider Logic ⚠️

Changes:

• Added amountCollected prop
• Implemented 33.33% snap point logic for equal pot splits
• Fixed CSS class ordering

Critical Issues:

🐛 Potential Precision Bug in Snap Logic

const isAt33SnapPoint = Math.abs(selectedPercentage - 100 / 3) < 0.5

Problem: 100 / 3 = 33.333... but the slider might not return exact floating-point values. The tolerance of 0.5 seems arbitrary.

Suggestion: Document why 0.5 was chosen or make it a named constant:

const SNAP_POINT_TOLERANCE = 0.5 // percentage points
const EQUAL_SPLIT_PERCENTAGE = 100 / 3
const isAt33SnapPoint = Math.abs(selectedPercentage - EQUAL_SPLIT_PERCENTAGE) < SNAP_POINT_TOLERANCE

🤔 Complex Nested Logic

The snap logic has multiple conditions:

if (isAt33SnapPoint && amountCollected > 0) {
    const remainingAmount = maxAmount - amountCollected
    if (selectedAmount >= remainingAmount * 0.98) {
        selectedAmount = remainingAmount
    }
}

Questions:

1. Why only snap when amountCollected > 0? What if it's the first contribution?
2. Why 0.98 (98%)? This is another magic number
3. What happens if remainingAmount is negative (over-contributed)?

Edge Cases to Test:

// Case 1: First contribution (amountCollected = 0)
// Case 2: Pot exactly at 66.67% (remainingAmount = 33.33%)
// Case 3: Pot over-contributed (amountCollected > maxAmount)
// Case 4: Very small remaining amounts (< $0.01)

✅ CSS Class Ordering Fix

Good catch moving animate-blink before pointer-events-none - Tailwind class order matters for some utilities.

📊 Dependency Array Update

[maxAmount, amountCollected, onChange, displayMode, isInputUsd, decimals]

This is correct - all dependencies used in the callback are listed. Good adherence to React hooks rules.

---

3. PaymentForm/index.tsx - Default Slider Value Logic 🎲

Changes: Added defaultSliderValue calculation based on average contributions

Strengths:

• Smart UX: suggests average contribution
• Handles empty state (no charges) by suggesting 100%
• Safe NaN checks

Concerns:

🐛 Division by Zero Protection

const suggestedAmount = contributionAmounts.reduce((sum, amt) => sum + amt, 0) / contributionAmounts.length

This is safe because you check contributionAmounts.length === 0 before, but it's nested in complex logic.

🤔 Logic Flow Issues

if (!charges || charges.length === 0) {
    return { percentage: 100, suggestedAmount: totalAmount }
}

Question: Should we suggest 100% when there are no contributions? This might be too aggressive for large pots.

Alternative Approach:

// Suggest 25% for first contributor, average for subsequent
if (!charges || charges.length === 0) {
    const firstContributionPercentage = 25 // or 33.33 for equal thirds
    return { 
        percentage: firstContributionPercentage, 
        suggestedAmount: totalAmount * (firstContributionPercentage / 100) 
    }
}

⚠️ Filter Logic May Hide Bugs

const contributionAmounts = charges
    .map((charge) => parseFloat(charge.tokenAmount))
    .filter((amount) => !isNaN(amount) && amount > 0)

Issue: Silently filters out invalid charges. If charge.tokenAmount is malformed, this hides the problem.

Suggestion: Add logging or error handling:

const contributionAmounts = charges
    .map((charge) => {
        const amount = parseFloat(charge.tokenAmount)
        if (isNaN(amount) || amount <= 0) {
            console.warn('Invalid charge amount:', charge)
        }
        return amount
    })
    .filter((amount) => !isNaN(amount) && amount > 0)

---

🎯 Integration Testing Recommendations

Test these scenarios end-to-end:

1. Empty Pot: First contribution should work smoothly
2. 33.33% Snap Point:
   • Three equal contributors should fill pot exactly to 100%
   • Verify no rounding errors accumulate
3. Near-Complete Pot:
   • Pot at 98% with slider at 33% should snap to remaining 2%
   • Verify UI shows correct amount
4. Progress Bar Edge Cases:
   • Progress at exactly 0%, 10%, 90%, 100%
   • Goal exceeded scenarios
5. Over-Contribution: What happens if total > goal?

---

🔍 Type Safety Check

Good news: TypeScript types look solid throughout. The new amountCollected prop is properly typed as optional with default value.

---

⚡ Performance Notes

No significant performance concerns. The useMemo hooks are appropriately used, and the calculations are lightweight.

---

📝 Documentation Suggestions

Add JSDoc comments for complex logic:

/**
 * Calculates default slider position based on contribution history.
 * - No contributions: Suggests 100% (full pot)
 * - Existing contributions: Suggests average contribution amount
 * @returns {percentage, suggestedAmount} Slider position and USD amount
 */
const defaultSliderValue = useMemo(() => {
    // ... implementation
}, [dependencies])

---

✨ Summary

Overall Quality: Good, but needs attention to edge cases

Risk Level: Medium - The snap logic has potential precision issues

Recommended Actions:

1. ✅ Extract magic numbers to named constants
2. ⚠️ Add comprehensive tests for snap point logic
3. ⚠️ Handle over-contribution scenario
4. 💡 Consider adding error boundaries for invalid charge amounts
5. 📝 Document the 33.33% snap behavior for future maintainers

The core functionality looks solid, but the smart snapping feature would benefit from more defensive programming and clearer documentation of expected behavior.

---

🧠 Learnings used

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 852
File: src/hooks/useTransactionHistory.ts:177-239
Timestamp: 2025-05-14T21:16:06.369Z
Learning: When reviewing code, pay attention to and resolve CodeRabbit comments as they can contain useful refactoring suggestions and insights.

---

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 594
File: src/components/Request/Pay/Views/Initial.view.tsx:188-213
Timestamp: 2024-12-31T15:08:15.640Z
Learning: Always resolve coderabbit comments when reviewing code, since they can contain useful suggestions.

---

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

---

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 458
File: src/components/Offramp/Confirm.view.tsx:96-96
Timestamp: 2024-10-18T08:54:22.142Z
Learning: In the `src/components/Offramp/Confirm.view.tsx` file, it's acceptable to include crass or informal language in code comments.

---

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/Global/TokenAmountInput/index.tsx (1)

171-173: Consider simplifying the string conversion.

The conversion parseFloat(selectedAmount.toFixed(4)).toString() works but is convoluted. Since formatTokenAmount accepts both numbers and strings, you could pass the number directly or simplify to selectedAmount.toFixed(4).

-const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString()
+const selectedAmountStr = selectedAmount.toFixed(4)
 const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals
 const formattedAmount = formatTokenAmount(selectedAmountStr, maxDecimals, true)

Or pass the number directly:

-const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString()
-const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals
-const formattedAmount = formatTokenAmount(selectedAmountStr, maxDecimals, true)
+const maxDecimals = displayMode === 'FIAT' || displayMode === 'STABLE' || isInputUsd ? 2 : decimals
+const formattedAmount = formatTokenAmount(selectedAmount, maxDecimals, true)

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between efaa823 and 5f1105f.

📒 Files selected for processing (3)

• src/components/Global/ProgressBar/index.tsx (1 hunks)
• src/components/Global/TokenAmountInput/index.tsx (4 hunks)
• src/components/Payment/PaymentForm/index.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (12)

📓 Common learnings

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.

📚 Learning: 2024-10-29T12:20:47.207Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-29T12:19:41.968Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:50:29.173Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-10-24T13:44:39.473Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:25:45.170Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:28:25.280Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.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/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-08T20:13:42.967Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.

Applied to files:

• src/components/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-12-11T10:13:22.806Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Payment/PaymentForm/index.tsx
• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-08-22T07:25:59.304Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-10-29T11:27:59.248Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

🧬 Code graph analysis (1)

src/components/Global/TokenAmountInput/index.tsx (1)

src/utils/general.utils.ts (1)

• formatTokenAmount (345-391)

🪛 GitHub Actions: Tests

src/components/Global/TokenAmountInput/index.tsx

[warning] 1-1: Code style issues found in the file. Run 'pnpm prettier --write' to fix.

⏰ 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/PaymentForm/index.tsx (1)

788-788: LGTM! Clean integration of the new prop.

The conditional logic correctly passes totalAmountCollected for request pot payments while defaulting to 0 for other flows.

src/components/Global/ProgressBar/index.tsx (1)

97-107: LGTM! Effective solution for label overlap prevention.

The guard for progress > 90% mirrors the existing logic for progress < 10%, ensuring labels don't overlap at either extreme.

src/components/Global/TokenAmountInput/index.tsx (3)

34-34: LGTM! Clean API extension.

The optional amountCollected prop with a default of 0 is well-designed and integrates cleanly with the slider logic.

Also applies to: 57-57

---

179-179: LGTM! Dependency array correctly updated.

The addition of amountCollected to the useCallback dependencies is correct and necessary.

---

1-388: Run Prettier to resolve formatting issues.

The pipeline detected code style issues. Please run pnpm prettier --write src/components/Global/TokenAmountInput/index.tsx to fix them before merging.

[coderabbitai]

Actionable comments posted: 0

♻️ Duplicate comments (1)

src/components/Global/TokenAmountInput/index.tsx (1)

163-169: Guard against over-collected pots to prevent negative amounts.

The snap-point logic doesn't account for scenarios where amountCollected >= maxAmount. When the pot is already full or over-contributed, remainingAmount becomes ≤ 0, which could cause selectedAmount to be set to a negative value.

Apply this diff to add a guard:

 const isAt33SnapPoint = Math.abs(selectedPercentage - 100 / 3) < 0.5
 if (isAt33SnapPoint && amountCollected > 0) {
     const remainingAmount = maxAmount - amountCollected
-    // If the 33.33% would nearly complete the pot (within 2%), use exact remaining
-    if (selectedAmount >= remainingAmount * 0.98) {
+    // If the 33.33% would nearly complete the pot (within 2%), use exact remaining
+    // Only snap if there's actually remaining amount to collect
+    if (remainingAmount > 0 && selectedAmount >= remainingAmount * 0.98) {
         selectedAmount = remainingAmount
     }
 }

🧹 Nitpick comments (1)

src/components/Global/TokenAmountInput/index.tsx (1)

162-162: Consider extracting magic numbers for maintainability.

The snap-point tolerance (0.5) and completion threshold (0.98) could be extracted as named constants to improve readability and make future adjustments easier.

For example:

const SNAP_POINT_33_PERCENT = 100 / 3
const SNAP_TOLERANCE_PERCENT = 0.5
const COMPLETION_THRESHOLD = 0.98

const isAt33SnapPoint = Math.abs(selectedPercentage - SNAP_POINT_33_PERCENT) < SNAP_TOLERANCE_PERCENT
if (isAt33SnapPoint && amountCollected > 0) {
    const remainingAmount = maxAmount - amountCollected
    if (selectedAmount >= remainingAmount * COMPLETION_THRESHOLD) {
        selectedAmount = remainingAmount
    }
}

Also applies to: 166-166

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5f1105f and 4c1aa15.

📒 Files selected for processing (1)

• src/components/Global/TokenAmountInput/index.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (13)

📓 Common learnings

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.

📚 Learning: 2025-10-24T13:44:39.473Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-29T12:19:41.968Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-29T12:20:47.207Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-08-22T07:25:59.304Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-08T20:13:42.967Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:28:25.280Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:25:45.170Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-12-11T10:13:22.806Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-10-29T11:27:59.248Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:50:29.173Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-04T13:10:49.199Z

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/Global/TokenAmountInput/index.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/components/Global/TokenAmountInput/index.tsx

🧬 Code graph analysis (1)

src/components/Global/TokenAmountInput/index.tsx (1)

src/utils/general.utils.ts (1)

• formatTokenAmount (345-391)

⏰ 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/TokenAmountInput/index.tsx (2)

34-34: LGTM! New prop properly typed and defaulted.

The amountCollected prop is correctly typed as optional with a sensible default of 0, maintaining backward compatibility.

Also applies to: 57-57

---

179-179: LGTM! Dependency array correctly updated.

All dependencies used within onSliderValueChange are properly included: amountCollected, displayMode, isInputUsd, and decimals have been added to reflect the new logic.

Based on learnings

[notion-workspace]

🪲 Bug: 33% and text overlap 

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/Global/TokenAmountInput/index.tsx (1)

158-183: Well-implemented snap logic with clear constants.

The 33.33% magnetic snap-point implementation is well-structured:

• ✅ Previous review concern addressed: remainingAmount > 0 check is present on line 170
• ✅ Magic numbers replaced with clearly named constants
• ✅ Dependencies array correctly updated to include amountCollected

The logic correctly handles the equal 3-way split use case where the third contributor should complete the pot exactly to 100%.

Consider adding a brief inline comment above line 160 documenting the use case:

 let selectedAmount = (selectedPercentage / 100) * maxAmount
 
+// Snap to exact remaining amount for equal 3-way pot splits
+// Example: if pot is at 67% and user selects 33%, snap to complete at 100%
 const SNAP_POINT_TOLERANCE = 0.5

This would help future maintainers quickly understand the business logic.

Based on learnings

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4c1aa15 and 831abc0.

📒 Files selected for processing (1)

• src/components/Global/TokenAmountInput/index.tsx (4 hunks)

🧰 Additional context used

🧠 Learnings (14)

📓 Common learnings

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

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.

📚 Learning: 2025-10-24T13:44:39.473Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-29T12:19:41.968Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-29T12:20:47.207Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-08T20:13:42.967Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-08-22T07:25:59.304Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-12-11T10:13:22.806Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:28:25.280Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:25:45.170Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-10-29T11:27:59.248Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:50:29.173Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-04T13:10:49.199Z

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/Global/TokenAmountInput/index.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/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-12-02T17:21:45.515Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 551
File: src/context/walletContext/walletContext.tsx:87-88
Timestamp: 2024-12-02T17:21:45.515Z
Learning: When converting `totalBalance` (in USD) to a `BigInt` balance in `src/context/walletContext/walletContext.tsx`, multiplying by `1e6` is intentional to maintain compatibility with USDC's 6 decimal places. The application displays only 2 decimal places, so this level of precision is sufficient.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

🧬 Code graph analysis (1)

src/components/Global/TokenAmountInput/index.tsx (1)

src/utils/general.utils.ts (1)

• formatTokenAmount (345-391)

🪛 GitHub Actions: Tests

src/components/Global/TokenAmountInput/index.tsx

[warning] 1-1: Code style issues found in the file. Run 'prettier --write' to fix.

⏰ 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/Global/TokenAmountInput/index.tsx (1)

34-34: LGTM: Clean prop addition with sensible default.

The amountCollected prop is properly typed as optional and defaults to 0, which correctly handles cases where the feature isn't needed (non-pot scenarios).

Also applies to: 57-57

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/Global/TokenAmountInput/index.tsx (1)

175-177: Consider simplifying the number-to-string conversion.

The current approach uses parseFloat(selectedAmount.toFixed(4)).toString() to strip trailing zeros before formatting. While functional, you could consider:

-const selectedAmountStr = parseFloat(selectedAmount.toFixed(4)).toString()
+const selectedAmountStr = selectedAmount.toString()

The formatTokenAmount utility likely handles precision internally. If trailing-zero removal is required, the current approach is fine.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 831abc0 and b9fa710.

📒 Files selected for processing (1)

• src/components/Global/TokenAmountInput/index.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (17)

📓 Common learnings

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.

📚 Learning: 2025-10-24T13:44:39.473Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-29T12:19:41.968Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-29T12:20:47.207Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-08T20:13:42.967Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-08-22T07:25:59.304Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-12-11T10:13:22.806Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:28:25.280Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:25:45.170Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-10-29T11:27:59.248Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-07T15:50:29.173Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-10-04T13:10:49.199Z

Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/Global/TokenAmountInput/index.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/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2025-07-07T20:22:11.092Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 958
File: src/app/actions/tokens.ts:266-266
Timestamp: 2025-07-07T20:22:11.092Z
Learning: In `src/app/actions/tokens.ts`, within the `fetchWalletBalances` function, using the non-null assertion operator `!` on `process.env.MOBULA_API_KEY!` is intentional and correct, and should not be flagged for replacement with explicit validation.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-11-18T21:36:11.486Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 535
File: src/components/Claim/Claim.tsx:142-146
Timestamp: 2024-11-18T21:36:11.486Z
Learning: In `src/components/Claim/Claim.tsx`, external calls like token price fetching and cross-chain details retrieval are already encapsulated within existing `try...catch` blocks, so additional error handling may be unnecessary.

Applied to files:

• src/components/Global/TokenAmountInput/index.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/components/Global/TokenAmountInput/index.tsx

📚 Learning: 2024-12-02T17:21:45.515Z

Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 551
File: src/context/walletContext/walletContext.tsx:87-88
Timestamp: 2024-12-02T17:21:45.515Z
Learning: When converting `totalBalance` (in USD) to a `BigInt` balance in `src/context/walletContext/walletContext.tsx`, multiplying by `1e6` is intentional to maintain compatibility with USDC's 6 decimal places. The application displays only 2 decimal places, so this level of precision is sufficient.

Applied to files:

• src/components/Global/TokenAmountInput/index.tsx

🧬 Code graph analysis (1)

src/components/Global/TokenAmountInput/index.tsx (1)

src/utils/general.utils.ts (1)

• formatTokenAmount (345-391)

⏰ 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/Global/TokenAmountInput/index.tsx (4)

34-34: LGTM: New prop with sensible default.

The amountCollected prop is well-typed and defaults to 0, maintaining backward compatibility.

Also applies to: 57-57

---

158-173: Question the amountCollected > 0 gate for snap behavior.

The snap logic only activates when amountCollected > 0, which excludes the first contributor. If the first user slides to 33.33%, no snapping occurs. Is this intentional?

For consistency, consider allowing snap behavior for all contributors:

-if (isAt33SnapPoint && amountCollected > 0) {
+if (isAt33SnapPoint && maxAmount > 0) {
     const remainingAmount = maxAmount - amountCollected
     // Only snap if there's remaining amount and 33.33% would nearly complete the pot
     if (remainingAmount > 0 && selectedAmount >= remainingAmount * COMPLETION_THRESHOLD) {
         selectedAmount = remainingAmount
     }
 }

This way, the first contributor sliding to 33.33% would snap to exactly ⅓ of the goal, maintaining equal-split semantics.

---

183-183: LGTM: Dependency array correctly updated.

The callback dependencies now include amountCollected, displayMode, isInputUsd, and decimals, all of which are used within onSliderValueChange. This adheres to React hooks rules.

---

326-326: LGTM: CSS class reordering has no functional impact.

Moving animate-blink before pointer-events-none doesn't affect behavior, as these are independent CSS properties.