feat: request faucet tokens from app #176
Conversation
WalkthroughAdds a FaucetTokens React component that opens a dialog to select a faucet ERC20 and mint an amount via the connected wallet (including network switch, signer retrieval, tx construction and submission). The component is rendered in the authenticated topbar. Changes
Sequence DiagramsequenceDiagram
participant User
participant FaucetUI as Faucet UI
participant Wallet as Wallet Provider
participant TokenContract as Token Contract
User->>FaucetUI: Open dialog, select token, enter amount, click Mint
FaucetUI->>Wallet: Ensure connected
alt Wallet disconnected
Wallet-->>FaucetUI: Not connected
FaucetUI-->>User: Show error toast / prompt connect
else Wallet connected
FaucetUI->>Wallet: Get current chain
alt Chain mismatch
FaucetUI->>Wallet: Request chain switch
Wallet-->>FaucetUI: Chain switched
end
FaucetUI->>Wallet: Get signer
FaucetUI->>TokenContract: Encode mint(to, amount)
FaucetUI-->>User: Show loading toast
Wallet->>TokenContract: Send transaction (mint)
TokenContract-->>Wallet: Tx mined
FaucetUI-->>User: Show success toast
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/components/faucet.tsx (3)
32-55: Consider removing redundanthashfield.The
hashfield duplicates theaddressfield in both token configurations and doesn't appear to be used anywhere in the component. Removing it would simplify the data structure.const faucetTokens = [ { id: "FAU-sepolia", name: "FAU", symbol: "FAU", decimals: 18, address: "0x370DE27fdb7D1Ff1e1BaA7D11c5820a324Cf623C", network: "sepolia", type: "ERC20", - hash: "0x370DE27fdb7D1Ff1e1BaA7D11c5820a324Cf623C", chainId: 11155111, }, { id: "fUSDT-sepolia", name: "fUSDT", symbol: "fUSDT", decimals: 6, address: "0xF046b3CA5ae2879c6bAcC4D42fAF363eE8379F78", network: "sepolia", type: "ERC20", - hash: "0xF046b3CA5ae2879c6bAcC4D42fAF363eE8379F78", chainId: 11155111, }, ] as const;
115-118:toast.dismiss()clears all toasts.Calling
toast.dismiss()without an ID dismisses all active toasts in the application, which could affect unrelated notifications. Consider tracking the toast ID in component state so it can be dismissed specifically inonError.+ const [toastId, setToastId] = useState<string | number | undefined>(); + const mintHandler = useMutation({ mutationFn: async () => { // ... existing code ... const id = toast.loading("Minting tokens..."); + setToastId(id); // ... rest of mutation ... }, onSuccess: (data) => { toast.success("Tokens minted successfully", { id: data.id }); + setToastId(undefined); }, onError: (error) => { - toast.dismiss(); + if (toastId) toast.dismiss(toastId); + setToastId(undefined); toast.error(error.message); }, });
182-189: Consider usingmutate()instead ofmutateAsync().Since error handling is already done via
onError, usingmutate()avoids the unhandled promise rejection when the mutation fails. Alternatively, wrapmutateAsync()in a try-catch.<Button disabled={!amount || amount <= 0 || mintHandler.isPending} - onClick={async () => { - await mintHandler.mutateAsync(); - }} + onClick={() => mintHandler.mutate()} > Mint Tokens </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/faucet.tsx(1 hunks)src/components/navigation/topbar.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/components/faucet.tsx (5)
src/lib/hooks/use-switch-network.ts (1)
useSwitchNetwork(7-40)src/components/ui/dialog.tsx (5)
Dialog(112-112)DialogTrigger(116-116)DialogContent(117-117)DialogHeader(118-118)DialogTitle(120-120)src/components/ui/button.tsx (1)
Button(56-56)src/components/ui/select.tsx (5)
Select(150-150)SelectTrigger(153-153)SelectValue(152-152)SelectContent(154-154)SelectItem(156-156)src/components/ui/input.tsx (1)
Input(22-22)
src/components/navigation/topbar.tsx (1)
src/components/faucet.tsx (1)
FaucetTokens(57-195)
⏰ 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). (2)
- GitHub Check: Build
- GitHub Check: Lint
🔇 Additional comments (1)
src/components/navigation/topbar.tsx (1)
7-8: LGTM!Clean integration of the FaucetTokens component into the authenticated topbar. The placement before UserMenu and ModeToggle is appropriate for a utility action, and the component is correctly rendered only when the user is authenticated.
Also applies to: 23-23
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/faucet.tsx (1)
103-105: Toast message sequencing is still incorrect.The "Waiting for confirmation..." toast appears after
tx.wait()has already completed, which defeats its purpose. Move it before awaiting the transaction confirmation.const tx = await signer.sendTransaction({ to: selectedToken.address, data: encodeFunctionData({ abi: parseAbi(["function mint(address to, uint256 amount) public"]), functionName: "mint", args: [address as Hex, parsedAmount], }), }); + toast.loading("Waiting for confirmation...", { id }); + await tx.wait(); - toast.loading("Waiting for confirmation...", { id }); - return {
🧹 Nitpick comments (1)
src/components/faucet.tsx (1)
32-55: Consider removing redundanthashfield.The
hashproperty duplicatesaddressexactly for both tokens. If this field isn't used elsewhere, consider removing it to avoid confusion and maintenance burden.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/faucet.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-06-04T10:08:40.123Z
Learnt from: aimensahnoun
Repo: RequestNetwork/easy-invoice PR: 64
File: src/components/batch-payout.tsx:100-106
Timestamp: 2025-06-04T10:08:40.123Z
Learning: In src/components/batch-payout.tsx, the user prefers to keep the simple 2-second timeout for AppKit initialization over more complex polling mechanisms when the current approach is working adequately. They favor simplicity over potentially more robust but complex solutions.
Applied to files:
src/components/faucet.tsx
🧬 Code graph analysis (1)
src/components/faucet.tsx (4)
src/components/ui/dialog.tsx (5)
Dialog(112-112)DialogTrigger(116-116)DialogContent(117-117)DialogHeader(118-118)DialogTitle(120-120)src/components/ui/button.tsx (1)
Button(56-56)src/components/ui/select.tsx (5)
Select(150-150)SelectTrigger(153-153)SelectValue(152-152)SelectContent(154-154)SelectItem(156-156)src/components/ui/input.tsx (1)
Input(22-22)
🔇 Additional comments (2)
src/components/faucet.tsx (2)
171-179: Input validation logic looks correct.The number parsing now properly converts the string value before checking
Number.isNaN(), addressing the previous review feedback.
182-189: Button guard and mutation usage look good.The disabled condition properly prevents invalid submissions, and
mutateAsyncerrors are handled by the mutation'sonErrorcallback.
MantisClone
requested review from
MantisClone,
aimensahnoun,
bassgeta and
rodrigopavezi
bassgeta
left a comment
bassgeta
left a comment
There was a problem hiding this comment.
Nice and simple 👍
The code is clean and straightforward and it works!
Got them in my wallet too 👌
|
2nd Review needed. |
github-project-automation
bot
moved this from 🔖 Sprint Backlog
to ✅ Done
in Request Network Tech Backlog
|
Congratulations, your pull request has been merged! Thank you for your valuable contribution to Request Network. As a reminder, every merged PR is automatically entered into our Best PR Initiative, offering a quarterly prize of $500. Your work significantly supports our project's growth, and we encourage you to continue engaging with our community. Additionally, if you want to build or add crypto payments and invoicing features, explore how our API can reduce deployment time from months to hours while offering advanced features. Book a call with our expert to learn more and fast-track your development. |
4 participants
Fixes: #141
Added a Dialog for getting Faucet Tokens, initial support for
FAU-sepolia,fUSDT-sepoliafaucet.mp4
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.