feat: add section for claiming staking rewards in v2, tested in arb sepolia #1913
Conversation
WalkthroughThis pull request introduces a new React component, Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant M as ClaimModal
participant IP as IPFS
participant C as Contract
U->>+M: Open Claim Modal
M->>+IP: Fetch claim data based on snapshots
IP-->>-M: Return claim details (month, balance, Merkle proof)
M->>+C: Invoke writeContractAsync to process claim
C-->>-M: Confirm transaction / return error
M-->>U: Update UI with claim success or error message
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for kleros-v2-university ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-testnet-devtools ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Code Climate has analyzed commit 0500272 and detected 2 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
web/src/pages/Profile/StakingRewardsClaimModal.tsx (3)
70-70: Consider dynamic gas limit for different chainsThe hardcoded gas limit of 500000 may not be appropriate for all chains or transaction conditions.
- gasLimit: 500000, + gasLimit: chainId === 421614 ? 500000 : 300000, // Adjust values based on specific chain requirementsEven better, you could define these values in your chain configuration object:
const chainIdToParams = { contractAddress: "0x9DdAeD4e2Ba34d59025c1A549311F621a8ff9b7b", snapshots: ["QmQBupnUD9zt2dzZcB6tNAENiWtmwfWeKDuZbWEWoKs7s2/arbSepolia-snapshot-2025-02.json"], startMonth: 2, + gasLimit: 500000, }, // ... + gasLimit: 300000, }, }; // Then in your code: gasLimit: chainParams.gasLimit,
84-98: Enhance UI with proper styling and feedbackThe current UI is very minimalistic without proper styling or integration with the app's design system. Consider enhancing it to match the application's styling pattern.
The current implementation lacks:
- Proper styling consistent with the application
- Loading indicators that match the app's design
- Error messages for failed transactions
- Empty state when no claims are available
Consider wrapping your component in a styled container and adding more comprehensive UI elements to match the rest of the application.
102-102: Component name in export doesn't match filenameThe file is named
StakingRewardsClaimModal.tsxbut the exported component isClaimModal. This could lead to confusion and potential issues with imports.- export default ClaimModal; + export default StakingRewardsClaimModal;And update the component name:
- const ClaimModal = () => { + const StakingRewardsClaimModal = () => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/pages/Profile/StakingRewardsClaimModal.tsx(1 hunks)web/src/pages/Profile/index.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (16)
- GitHub Check: Redirect rules - kleros-v2-testnet-devtools
- GitHub Check: Header rules - kleros-v2-testnet-devtools
- GitHub Check: Pages changed - kleros-v2-testnet-devtools
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: SonarCloud
- GitHub Check: contracts-testing
- GitHub Check: Analyze (javascript)
- GitHub Check: Mend Security Check
🔇 Additional comments (2)
web/src/pages/Profile/index.tsx (2)
22-22: Import naming matches export in fileThe import name
StakingRewardsClaimModalmatches the export in the related file, which is good for code organization.
98-98: Properly implemented StakingRewardsClaimModalThe modal is correctly conditionally rendered within the connected user view and positioned appropriately in the component hierarchy. No props are being passed, which is consistent with the component's self-contained implementation.
| const handleClaim = async () => { | ||
| if (!claims.length || !account) return; | ||
| setLoading(true); | ||
|
|
||
| try { | ||
| await writeContractAsync({ | ||
| abi: claimMonthsAbi, | ||
| address: chainParams.contractAddress, | ||
| functionName: "claimMonths", | ||
| args: [account, claims], | ||
| gasLimit: 500000, | ||
| }); | ||
|
|
||
| setClaimed(true); | ||
| } catch (error) { | ||
| console.error("Transaction failed:", error); | ||
| setClaimed(false); | ||
| } | ||
|
|
||
| setLoading(false); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve error handling and user feedback for transactions
The current implementation logs errors to the console but doesn't provide meaningful feedback to the user when a transaction fails.
const handleClaim = async () => {
if (!claims.length || !account) return;
setLoading(true);
+ setError(null); // Add error state
try {
await writeContractAsync({
abi: claimMonthsAbi,
address: chainParams.contractAddress,
functionName: "claimMonths",
args: [account, claims],
gasLimit: 500000,
});
setClaimed(true);
} catch (error) {
console.error("Transaction failed:", error);
+ // Provide a user-friendly error message
+ setError(error.message || "Transaction failed. Please try again.");
setClaimed(false);
}
setLoading(false);
};Also, don't forget to add the error state to your component:
const [error, setError] = useState(null);And display it in your UI:
{error && <div className="error-message">{error}</div>}| const chainIdToParams = { | ||
| 421614: { | ||
| contractAddress: "0x9DdAeD4e2Ba34d59025c1A549311F621a8ff9b7b", | ||
| snapshots: ["QmQBupnUD9zt2dzZcB6tNAENiWtmwfWeKDuZbWEWoKs7s2/arbSepolia-snapshot-2025-02.json"], | ||
| startMonth: 2, | ||
| }, | ||
| 42161: { | ||
| contractAddress: "", | ||
| snapshots: [], | ||
| startMonth: 2, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Missing contract configuration for production chain
The Arbitrum One (42161) configuration has empty values for contractAddress and snapshots. This will prevent the feature from working in production.
- contractAddress: "",
- snapshots: [],
+ contractAddress: "0xActualProductionAddress",
+ snapshots: ["actual/production/snapshot/path.json"],
startMonth: 2,
},📝 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.
| const chainIdToParams = { | |
| 421614: { | |
| contractAddress: "0x9DdAeD4e2Ba34d59025c1A549311F621a8ff9b7b", | |
| snapshots: ["QmQBupnUD9zt2dzZcB6tNAENiWtmwfWeKDuZbWEWoKs7s2/arbSepolia-snapshot-2025-02.json"], | |
| startMonth: 2, | |
| }, | |
| 42161: { | |
| contractAddress: "", | |
| snapshots: [], | |
| startMonth: 2, | |
| }, | |
| }; | |
| const chainIdToParams = { | |
| 421614: { | |
| contractAddress: "0x9DdAeD4e2Ba34d59025c1A549311F621a8ff9b7b", | |
| snapshots: ["QmQBupnUD9zt2dzZcB6tNAENiWtmwfWeKDuZbWEWoKs7s2/arbSepolia-snapshot-2025-02.json"], | |
| startMonth: 2, | |
| }, | |
| 42161: { | |
| contractAddress: "0xActualProductionAddress", | |
| snapshots: ["actual/production/snapshot/path.json"], | |
| startMonth: 2, | |
| }, | |
| }; |
| useEffect(() => { | ||
| const fetchClaims = async () => { | ||
| if (!account || !chainParams) return; | ||
|
|
||
| const userClaims = []; | ||
| for (let index = 0; index < chainParams.snapshots.length; index++) { | ||
| const response = await fetch(`${ipfsEndpoint}/ipfs/${chainParams.snapshots[index]}`); | ||
| const snapshot = await response.json(); | ||
| const claim = snapshot.merkleTree.claims[account]; | ||
|
|
||
| if (claim) { | ||
| userClaims.push({ | ||
| month: chainParams.startMonth + index, | ||
| balance: BigInt(claim.value.hex), | ||
| merkleProof: claim.proof, | ||
| }); | ||
| } | ||
| } | ||
| setClaims(userClaims); | ||
| }; | ||
|
|
||
| fetchClaims(); | ||
| }, [account, chainParams]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for IPFS fetch operations
The function fetches data from IPFS without proper error handling, which could lead to unhandled promise rejections if the network request fails.
const fetchClaims = async () => {
if (!account || !chainParams) return;
const userClaims = [];
for (let index = 0; index < chainParams.snapshots.length; index++) {
try {
const response = await fetch(`${ipfsEndpoint}/ipfs/${chainParams.snapshots[index]}`);
+ if (!response.ok) {
+ console.error(`Failed to fetch snapshot: ${response.status} ${response.statusText}`);
+ continue;
+ }
const snapshot = await response.json();
const claim = snapshot.merkleTree.claims[account];
if (claim) {
userClaims.push({
month: chainParams.startMonth + index,
balance: BigInt(claim.value.hex),
merkleProof: claim.proof,
});
}
+ } catch (error) {
+ console.error(`Error fetching snapshot ${index}:`, error);
+ }
}
setClaims(userClaims);
};📝 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.
| useEffect(() => { | |
| const fetchClaims = async () => { | |
| if (!account || !chainParams) return; | |
| const userClaims = []; | |
| for (let index = 0; index < chainParams.snapshots.length; index++) { | |
| const response = await fetch(`${ipfsEndpoint}/ipfs/${chainParams.snapshots[index]}`); | |
| const snapshot = await response.json(); | |
| const claim = snapshot.merkleTree.claims[account]; | |
| if (claim) { | |
| userClaims.push({ | |
| month: chainParams.startMonth + index, | |
| balance: BigInt(claim.value.hex), | |
| merkleProof: claim.proof, | |
| }); | |
| } | |
| } | |
| setClaims(userClaims); | |
| }; | |
| fetchClaims(); | |
| }, [account, chainParams]); | |
| useEffect(() => { | |
| const fetchClaims = async () => { | |
| if (!account || !chainParams) return; | |
| const userClaims = []; | |
| for (let index = 0; index < chainParams.snapshots.length; index++) { | |
| try { | |
| const response = await fetch(`${ipfsEndpoint}/ipfs/${chainParams.snapshots[index]}`); | |
| if (!response.ok) { | |
| console.error(`Failed to fetch snapshot: ${response.status} ${response.statusText}`); | |
| continue; | |
| } | |
| const snapshot = await response.json(); | |
| const claim = snapshot.merkleTree.claims[account]; | |
| if (claim) { | |
| userClaims.push({ | |
| month: chainParams.startMonth + index, | |
| balance: BigInt(claim.value.hex), | |
| merkleProof: claim.proof, | |
| }); | |
| } | |
| } catch (error) { | |
| console.error(`Error fetching snapshot ${index}:`, error); | |
| } | |
| } | |
| setClaims(userClaims); | |
| }; | |
| fetchClaims(); | |
| }, [account, chainParams]); |
| const chainId = DEFAULT_CHAIN; | ||
| const chainParams = chainIdToParams[chainId] ?? chainIdToParams[DEFAULT_CHAIN]; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Hardcoded chain ID needs to be dynamic
The component uses a hardcoded DEFAULT_CHAIN rather than the user's connected chain, which could lead to incorrect contract interactions if the user is connected to a different network.
- const chainId = DEFAULT_CHAIN;
+ const { chain } = useNetwork();
+ const chainId = chain?.id || DEFAULT_CHAIN;Make sure to add useNetwork to your wagmi imports.
📝 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.
| const chainId = DEFAULT_CHAIN; | |
| const chainParams = chainIdToParams[chainId] ?? chainIdToParams[DEFAULT_CHAIN]; | |
| const { chain } = useNetwork(); | |
| const chainId = chain?.id || DEFAULT_CHAIN; | |
| const chainParams = chainIdToParams[chainId] ?? chainIdToParams[DEFAULT_CHAIN]; |
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
first iteration to claim. it claimed correctly. i tested deploying a contract to arb sepolia, sending airdrop to staked jurors in devnet, and claiming with my own wallet.
TODO: implement the design from Plinio
and this PR cannot be merged until we actually release the Staking Rewards for V2
PR-Codex overview
This PR introduces the
StakingRewardsClaimModalcomponent to theProfilepage, allowing users to claim staking rewards. It fetches claims from IPFS and enables users to execute a claim transaction on the blockchain.Detailed summary
StakingRewardsClaimModalinindex.tsx.StakingRewardsClaimModalcomponent inStakingRewardsClaimModal.tsx.Summary by CodeRabbit