Token Rewards System

[
  {
    "inputs": [],
    "name": "name",
    "outputs": [{"type": "string"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "symbol",
    "outputs": [{"type": "string"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "lpTokenId",
    "outputs": [{"type": "uint256"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "feeReceiver",
    "outputs": [{"type": "address"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "factoryCreator",
    "outputs": [{"type": "address"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "get_rewards",
    "outputs": [
      {"type": "uint256", "name": "tokensToFeeReceiver"},
      {"type": "uint256", "name": "ethToFactoryCreator"}
    ],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [{"type": "address", "name": "account"}],
    "name": "balanceOf",
    "outputs": [{"type": "uint256"}],
    "stateMutability": "view",
    "type": "function"
  }
]

npm install ethers

import { ethers } from 'ethers';
 
const TOKEN_ADDRESS = '0x937f6Af292875cC2a3b64bFC31B09d5A50B1cF1a';
const BASE_RPC = 'https://mainnet.base.org';
 
const TOKEN_ABI = [
  'function name() view returns (string)',
  'function symbol() view returns (string)',
  'function lpTokenId() view returns (uint256)',
  'function feeReceiver() view returns (address)',
  'function factoryCreator() view returns (address)',
  'function get_rewards() returns (uint256 tokensToFeeReceiver, uint256 ethToFactoryCreator)',
  'function balanceOf(address) view returns (uint256)'
];
 
async function getTokenInfo(tokenAddress) {
  const provider = new ethers.JsonRpcProvider(BASE_RPC);
  const token = new ethers.Contract(tokenAddress, TOKEN_ABI, provider);
  
  const [name, symbol, lpTokenId, feeReceiver, factoryCreator] = await Promise.all([
    token.name(),
    token.symbol(),
    token.lpTokenId(),
    token.feeReceiver(),
    token.factoryCreator()
  ]);
  
  return { 
    name, 
    symbol, 
    lpTokenId: lpTokenId.toString(), 
    feeReceiver, 
    factoryCreator 
  };
}

async function checkPendingRewards(tokenAddress) {
  const provider = new ethers.JsonRpcProvider(BASE_RPC);
  const token = new ethers.Contract(tokenAddress, TOKEN_ABI, provider);
  
  try {
    const [tokensToReceiver, ethToCreator] = await token.get_rewards.staticCall();
    
    return {
      tokenRewards: ethers.formatEther(tokensToReceiver),
      ethRewards: ethers.formatEther(ethToCreator),
      tokenRewardsRaw: tokensToReceiver.toString(),
      ethRewardsRaw: ethToCreator.toString()
    };
  } catch (error) {
    console.error('Error checking rewards:', error);
    return { tokenRewards: '0', ethRewards: '0' };
  }
}

async function claimRewards(tokenAddress) {
  if (!window.ethereum) {
    throw new Error('No wallet found. Please install MetaMask.');
  }
  
  const provider = new ethers.BrowserProvider(window.ethereum);
  await provider.send('eth_requestAccounts', []);
  const signer = await provider.getSigner();
  
  const token = new ethers.Contract(tokenAddress, TOKEN_ABI, signer);
  
  try {
    const tx = await token.get_rewards();
    console.log('Transaction sent:', tx.hash);
    
    const receipt = await tx.wait();
    console.log('Transaction confirmed:', receipt);
    
    return { success: true, txHash: receipt.hash };
  } catch (error) {
    console.error('Error claiming rewards:', error);
    return { success: false, error: error.message };
  }
}

import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';
 
export default function RewardsPanel({ tokenAddress }) {
  const [tokenInfo, setTokenInfo] = useState(null);
  const [pendingRewards, setPendingRewards] = useState(null);
  const [isClaiming, setIsClaiming] = useState(false);
  
  useEffect(() => {
    // Fetch token info once
    getTokenInfo(tokenAddress).then(setTokenInfo);
    
    // Poll rewards every 30 seconds
    const interval = setInterval(() => {
      checkPendingRewards(tokenAddress).then(setPendingRewards);
    }, 30000);
    
    // Initial fetch
    checkPendingRewards(tokenAddress).then(setPendingRewards);
    
    return () => clearInterval(interval);
  }, [tokenAddress]);
  
  const handleClaim = async () => {
    setIsClaiming(true);
    try {
      const result = await claimRewards(tokenAddress);
      if (result.success) {
        alert(\`Rewards claimed! TX: \${result.txHash}\`);
        // Refresh rewards after claiming
        checkPendingRewards(tokenAddress).then(setPendingRewards);
      } else {
        alert(\`Error: \${result.error}\`);
      }
    } finally {
      setIsClaiming(false);
    }
  };
  
  return (
    <div className="rewards-panel">
      <h2>{tokenInfo?.name} ({tokenInfo?.symbol})</h2>
      
      <div className="pending-rewards">
        <h3>Pending Rewards</h3>
        <p>Token Fees: {pendingRewards?.tokenRewards || '0'} tokens</p>
        <p>ETH Fees: {pendingRewards?.ethRewards || '0'} ETH</p>
      </div>
      
      <button 
        onClick={handleClaim} 
        disabled={isClaiming}
        className="claim-button"
      >
        {isClaiming ? 'Claiming...' : 'Claim Rewards'}
      </button>
      
      <div className="fee-info">
        <small>Token fees → {tokenInfo?.feeReceiver}</small><br/>
        <small>ETH fees → {tokenInfo?.factoryCreator}</small>
      </div>
    </div>
  );
}

{
  "dependencies": {
    "ethers": "^6.0.0"
  }
}

# wagmi + RainbowKit (React)
npm install wagmi @rainbow-me/rainbowkit
 
# web3modal (Multi-framework)
npm install @web3modal/wagmi
 
# ConnectKit (React)
npm install connectkit