feat: add payout confirmation component to batch payouts#189
Merged
aimensahnoun merged 1 commit intomainfrom Jan 13, 2026
Merged
Conversation
Contributor
WalkthroughThis PR integrates a payout confirmation dialog into batch and direct payout components. The batch payout component now prepares data, displays a confirmation dialog, and manages a new "confirming" state. The confirmation dialog component adds cancel callback support and adjusts its lifecycle to track user cancellation. The direct payout component wires the cancel handler to reset payment status. Changes
Sequence DiagramsequenceDiagram
actor User
participant Component as Batch Payout<br/>Component
participant Dialog as Payout<br/>Confirmation<br/>Dialog
participant Handler as Confirmation<br/>Handler
User->>Component: Submit batch payout
Component->>Component: Prepare batch data<br/>(paymentStatus: preparing)
Component->>Dialog: Show dialog
Dialog->>Dialog: Reset confirmed state
Dialog->>User: Display confirmation
alt User Confirms
User->>Dialog: Click Confirm
Dialog->>Dialog: Set confirmed=true
Dialog->>Handler: Call onConfirm
Handler->>Component: Process payment<br/>(paymentStatus: confirming)
Handler->>Component: Update UI on success
else User Cancels
User->>Dialog: Close/Cancel dialog
Dialog->>Handler: Call onCancel
Handler->>Component: Reset status to idle
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🧰 Additional context used📓 Path-based instructions (1)**/*⚙️ CodeRabbit configuration file
Files:
🧠 Learnings (9)📓 Common learnings📚 Learning: 2025-10-28T12:16:58.341ZApplied to files:
📚 Learning: 2025-05-19T13:00:48.790ZApplied to files:
📚 Learning: 2025-06-04T10:08:40.123ZApplied to files:
📚 Learning: 2025-10-28T12:17:14.899ZApplied to files:
📚 Learning: 2025-06-04T12:02:39.411ZApplied to files:
📚 Learning: 2025-05-20T12:59:44.665ZApplied to files:
📚 Learning: 2025-07-11T11:17:32.659ZApplied to files:
📚 Learning: 2025-05-22T18:19:12.366ZApplied to files:
⏰ 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)
Comment |
Member
Author
This stack of pull requests is managed by Graphite. Learn more about stacking. |
Greptile OverviewGreptile SummaryThis PR adds a confirmation dialog to the batch payout flow, showing users a breakdown of fees and totals before executing payments. The implementation follows the same pattern as the direct payout confirmation (base branch), splitting the payment process into two steps: preparation (calling the backend API) and execution (sending blockchain transactions). Key Changes
Critical Issues Found🔴 Race Condition Bug (Lines 300-302): The callback passed to 🟡 Network Switching Issue (Line 223): Only switches to the network of the first payout ( 🟡 Missing Wallet Validation: 🟡 Incorrect Decimal Precision (Line 200): Uses 18 decimals for all currencies when calculating totals, but fiat currencies and various ERC20 tokens have different decimal places, leading to incorrect amounts shown in the confirmation dialog. Other Issues
The race condition bug is critical and will break the feature entirely. The other issues affect UX and edge case handling but won't prevent basic functionality once the race condition is fixed. Confidence Score: 1/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
actor User
participant UI as BatchPayout Component
participant Dialog as PayoutConfirmationDialog
participant Backend as TRPC API
participant Wallet as Web3 Wallet
participant Blockchain
User->>UI: Click "Send Batch Payment"
UI->>UI: Validate form & connection
UI->>UI: setPaymentStatus("processing")
UI->>User: Show toast "Preparing batch payment..."
UI->>Backend: batchPay(payouts, payer)
Backend->>Backend: Create payment requests
Backend-->>UI: Return batchPaymentData (tx data, fees)
UI->>UI: Calculate getTotalsByCurrency()
UI->>Dialog: show({ mode: "batch", currencyTotals, fees, wallet })
UI->>Dialog: onConfirm(callback)
UI->>UI: setPaymentStatus("idle")
Dialog->>User: Display confirmation with fees & totals
alt User Cancels
User->>Dialog: Click "Cancel"
Dialog->>Dialog: setOpen(false)
Note over UI,Dialog: BUG: pendingPaymentData not cleared
else User Confirms
User->>Dialog: Click "Confirm & Send Payment"
Dialog->>Dialog: setOpen(false)
Dialog->>UI: Execute confirmCallback()
UI->>UI: setPendingPaymentData(data, batchPaymentData)
UI->>UI: handleConfirmBatchPayment()
Note over UI: BUG: Race condition - state not updated yet
UI->>UI: Check pendingPaymentData (still null!)
UI-->>UI: Early return (payment fails silently)
end
Note over UI,Blockchain: Intended flow (if race condition fixed):
UI->>UI: switchToPaymentNetwork(first payout's currency)
Note over UI: ISSUE: Assumes all payouts use same network
UI->>UI: setPaymentStatus("processing")
UI->>Wallet: Create ethers provider & signer
loop For each ERC20 approval needed
UI->>Wallet: sendTransaction(approvalTx)
Wallet->>User: Request approval signature
User->>Wallet: Sign approval
Wallet->>Blockchain: Submit approval tx
Blockchain-->>Wallet: Tx receipt
end
UI->>Wallet: sendTransaction(batchPaymentTx)
Wallet->>User: Request payment signature
User->>Wallet: Sign transaction
Wallet->>Blockchain: Submit batch payment
Blockchain-->>Wallet: Tx receipt
Wallet-->>UI: Transaction complete
UI->>UI: setPaymentStatus("success")
UI->>User: Show success toast
UI->>UI: Reset form & clear pendingPaymentData
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Additional Comments (2)
Prompt To Fix With AIThis is a comment left during a code review.
Path: src/app/(dashboard)/payouts/batch/_components/batch-payout.tsx
Line: 130:136
Comment:
Missing cleanup when wallet disconnects. If the wallet disconnects while the confirmation dialog is open with pending payment data, the dialog remains open and `pendingPaymentData` stays set. The user could attempt to confirm a payment without a connected wallet.
```suggestion
useEffect(() => {
if (isConnected) {
setCurrentStep(2);
} else {
setCurrentStep(1);
setPendingPaymentData(null);
dialogRef.current?.close();
}
}, [isConnected]);
```
How can I resolve this? If you propose a fix, please make it concise.
This causes incorrect totals to be displayed in the confirmation dialog. While the actual payment amounts sent to the backend are correct, users see wrong totals when confirming. Consider using a currency-specific decimal lookup or removing this BigNumber conversion and just summing the raw amounts since these are display-only totals. Prompt To Fix With AIThis is a comment left during a code review.
Path: src/app/(dashboard)/payouts/batch/_components/batch-payout.tsx
Line: 200:200
Comment:
Incorrect decimal precision for all currencies. Using 18 decimals for all currencies is incorrect because:
- Fiat currencies like USD, EUR typically use 2 decimals for display
- ERC20 tokens have varying decimals (USDC uses 6, DAI uses 18, etc.)
This causes incorrect totals to be displayed in the confirmation dialog. While the actual payment amounts sent to the backend are correct, users see wrong totals when confirming.
Consider using a currency-specific decimal lookup or removing this BigNumber conversion and just summing the raw amounts since these are display-only totals.
How can I resolve this? If you propose a fix, please make it concise. |
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_batch_payouts
branch
from
c3a6489 to
5d576d2
Compare
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_direct_payout
branch
from
0815703 to
ef1b9e3
Compare
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_batch_payouts
branch
from
5d576d2 to
9b8f29b
Compare
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_direct_payout
branch
from
ff5383f to
a9ec460
Compare
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_batch_payouts
branch
2 times, most recently
from
7850343 to
3def0b4
Compare
rodrigopavezi
approved these changes
Jan 13, 2026
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_direct_payout
branch
2 times, most recently
from
08edb2b to
24ec17b
Compare
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_batch_payouts
branch
from
3def0b4 to
2725851
Compare
aimensahnoun
changed the base branch from
01-12-feat_add_payout_confirmation_component_to_direct_payout
to
graphite-base/189
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_batch_payouts
branch
from
2725851 to
31bfc93
Compare
aimensahnoun
force-pushed
the
graphite-base/189
branch
from
24ec17b to
211cba7
Compare
aimensahnoun
force-pushed
the
01-12-feat_add_payout_confirmation_component_to_batch_payouts
branch
from
31bfc93 to
c734d2e
Compare
Member
Author
Merge activity
|
aimensahnoun
deleted the
01-12-feat_add_payout_confirmation_component_to_batch_payouts
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR
Added a confirmation dialog for batch payouts to improve the payment flow and user experience.
What changed?
PayoutConfirmationDialogcomponent to the batch payout flowHow to test?
Why make this change?
This change enhances user safety by adding an explicit confirmation step before executing batch payments. It gives users a chance to review the total amounts and fees before committing to the transaction, reducing the risk of errors and improving the overall payment experience.
Summary by CodeRabbit
New Features
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.