Cross-Chain Rewards Hub

Welcome to the Cross-Chain Rewards Hub, a decentralized application (dApp) built for the MetaMask Card Dev Cook-Off. This project enables users to unlock value from idle NFTs and tokens across Ethereum Sepolia and Polygon Amoy testnets, stake them to earn rewards, convert those rewards to USDC, and deposit them into a MetaMask wallet, simulating MetaMask Card spending. By integrating MetaMask SDK/DTK, Circle Wallets, and LI.FI SDK (CCTP V2), the project qualifies for all three $2,000 bonuses and aligns with the competition’s judging criteria: Real-World Relevance (25), Creativity & Originality (20), Functionality (20), User Experience (15), and Potential Impact/Scalability (20).

Project Overview

The Cross-Chain Rewards Hub addresses the challenge of idle digital assets scattered across blockchains. It aggregates NFTs and tokens, stakes them in a smart contract to generate rewards, converts rewards to USDC, and deposits them for real-world spending. The dApp features a gamified experience, awarding bonus USDC for staking multiple assets, making it engaging for Web3 users and accessible for mainstream adoption.
My Track is :Composable Cross-Chain Applications

Key Features

• Wallet Connection: Connect MetaMask wallet using MetaMask SDK for secure authentication.

• Asset Aggregation: Use LI.FI SDK to aggregate NFTs (ERC721) and tokens (ERC20) from Sepolia and Amoy testnets.

• Staking: Stake assets in a smart contract on Polygon Amoy, with gasless transactions via MetaMask DTK (ERC-4337).

• Reward Conversion: Convert mock MATIC rewards to USDC on Sepolia using LI.FI SDK’s cross-chain swap.

• USDC Deposit: Transfer USDC to a developer-controlled Circle Wallet, then to the user’s MetaMask wallet, simulating MetaMask Card integration.

• Gamification: Award bonus USDC for staking ≥2 assets, displayed via a UI notification.

Demo Video

Watch our 2-minute demo video (link to be added) to see the user flow: connecting a wallet, staking assets, claiming rewards, converting to USDC, and unlocking gamified bonuses.

Tech Stack

• Frontend: React with Tailwind CSS for a responsive, modern UI.

• Smart Contracts: Solidity (v0.8.0+) deployed on Polygon Amoy using Hardhat.

• Blockchain:

  • Ethereum Sepolia (chain ID: 11155111) for USDC deposits.

  • Polygon Amoy (chain ID: 80002) for staking and rewards.

• Integrations:

  • MetaMask SDK: Wallet connectivity and transaction signing.

  • MetaMask DTK: Gasless transactions via ERC-4337 account abstraction.

  • Circle Wallets: Secure USDC storage and transfer with MPC-based key management.

  • LI.FI SDK (CCTP V2): Cross-chain asset aggregation and reward conversion to USDC.

• Libraries: Ethers.js for blockchain interactions, OpenZeppelin for ERC721/ERC20 standards.

• Hosting: Frontend on Vercel; smart contracts on Polygon Amoy.

• APIs: Circle Wallets API, LI.FI API, Infura for RPC (Sepolia/Amoy).

Judging Criteria Alignment

Bonus Tool Usage

The project qualifies for all three $2,000 bonuses:

• MetaMask SDK/DTK ($2,000): Used for wallet connectivity (MetaMaskSDK) and gasless staking/claiming via ERC-4337 delegation. Example: Gasless stake transaction in RewardsHub.sol.

• Circle Wallets ($2,000): Used for secure USDC storage and transfer to MetaMask wallet with MPC-based key management and PIN authentication. Example: Developer-controlled wallet creation for USDC deposits.

• LI.FI SDK (CCTP V2) ($2,000): Used for cross-chain asset aggregation (Sepolia/Amoy) and MATIC-to-USDC conversion. Example: lifi.getWalletAssets and lifi.getQuote for swaps.

Prerequisites

To run the project locally, ensure you have:

• Node.js (v16+): Download.

• MetaMask: Browser extension or mobile app for wallet connectivity.

• Hardhat: For smart contract development and deployment.

• API Keys:

  • Circle Wallets API Key: From Circle Developer Console.

  • LI.FI API Key: Optional, from [LI.FI Developer Portal](https://docs LiFi) (default rate limits apply without key).

  • Infura API Key: For Sepolia/Amoy RPC, from Infura Dashboard.

• Testnet Funds: USDC and NFTs on Sepolia/Amoy from faucets:

  • Sepolia Faucet.

  • Polygon Amoy Faucet.

• Git: For cloning the repository.

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/cross-chain-rewards-hub.git
   cd cross-chain-rewards-hub
   

2. Install Frontend Dependencies:

   npm install
   

   Installs React, Ethers.js, MetaMask SDK, LI.FI SDK, Tailwind CSS, and others.

3. Install Hardhat Dependencies:

   cd contracts
   npm install
   

   Installs Hardhat, OpenZeppelin, and related tools.

4. Configure API Keys:

   • Create frontend/src/config.js to store API keys and contract addresses:

     export const CIRCLE_API_KEY = "your_circle_api_key";
     export const LIFI_API_KEY = "your_lifi_api_key"; // Optionalexport const INFURA_API_KEY = "your_infura_api_key";
     export const PRIVATE_KEY = "your_wallet_private_key";
     export const STAKING_CONTRACT_ADDRESS = "0xYourDeployedContractAddress";
     export const USDC_TOKEN_ADDRESS = "0xYourTestUSDCTokenAddress";
     

   • Warning: Hardcoding keys is for hackathon simplicity. In production, use environment variables or a secrets manager to secure keys.

   • Obtain API keys:

     • Circle Wallets: Sign up at developers.circle.com, navigate to Web3 Services Console, and create a key with Programmable Wallets permissions.

     • LI.FI: Request via LI.FI Developer Portal or use default rate limits.

     • Infura: Create a project at infura.io and copy the Project ID.

     • Private Key: Use a testnet wallet private key for contract deployment (never use mainnet keys).

5. Configure Hardhat:
   Update hardhat.config.js for Amoy deployment:

   module.exports = {
     solidity: "0.8.0",
     networks: {
       amoy: {
         url: `https://polygon-amoy.infura.io/v3/your_infura_api_key`, // Replace with your Infura API key
         accounts: ["your_wallet_private_key"] // Replace with your testnet private key
       }
     }
   };
   

Smart Contract Deployment

1. Compile Contracts:

   cd contracts
   npx hardhat compile
   

2. Deploy to Polygon Amoy:
   Deploy RewardsHub.sol:

   npx hardhat run scripts/deploy.js --network amoy
   

   Update frontend/src/config.js with the deployed contract address and test USDC address.

3. Contract Details:

   • File: contracts/RewardsHub.sol

   • Functions:

     • stake(address token, uint256 tokenId): Stakes an NFT or token.

     • claimRewards(): Claims mock MATIC rewards.

     • getStakedAssets(address user): Retrieves staked assets.

   • Standards: Uses OpenZeppelin ERC721/ERC20 for secure token interactions.

   • Reward Logic: Mocks 1 reward unit (e.g., MATIC) per staked asset for simplicity.

Running the Frontend

1. Start the React App:

   cd frontend
   npm start
   

   Opens the dApp at http://localhost:3000.

2. Connect MetaMask:

   • Switch to Sepolia or Amoy in MetaMask.

   • Fund your wallet with test USDC and NFTs from faucets.

   • Click “Connect MetaMask” to authenticate.

3. Test the Flow:

   • View aggregated assets (NFTs on Sepolia, tokens on Amoy).

   • Stake an asset (gasless via MetaMask DTK).

   • Claim and convert rewards to USDC (LI.FI SDK).

   • Deposit USDC to MetaMask wallet (Circle Wallets).

   • Check gamified bonus for staking ≥2 assets.

API Key Integration

• Circle Wallets:

  • Insert API key in frontend/src/config.js as CIRCLE_API_KEY.

  • Example usage:

    import { CIRCLE_API_KEY } from './config';
    const { initiateDeveloperControlledWalletsClient } = require('@circle-fin/developer-controlled-wallets');
    const client = initiateDeveloperControlledWalletsClient({ apiKey: CIRCLE_API_KEY });
    

  • Create a wallet and transfer USDC:

    const walletSetResponse = await client.createWalletSet({ name: 'RewardsHubWalletSet' });
    const walletResponse = await client.createWallets({
      blockchains: ['ETH-SEPOLIA'],
      count: 1,
      walletSetId: walletSetResponse.data?.walletSet?.id
    });
    

• LI.FI SDK:

  • Insert API key in frontend/src/config.js as LIFI_API_KEY (optional).

  • Example usage:

    import { LIFI_API_KEY } from './config';
    const LiFi = require('@lifi/sdk').default;
    const lifi = new LiFi({ integrator: 'rewards-hub', apiKey: LIFI_API_KEY || '' });
    const assets = await lifi.getWalletAssets({ address: '0xUserAddress', chainId: 11155111 });
    

• Infura:

  • Insert API key in frontend/src/config.js as INFURA_API_KEY.

  • Example usage:

    import { INFURA_API_KEY } from './config';
    const ethers = require('ethers');
    const provider = new ethers.providers.JsonRpcProvider(
      `https://sepolia.infura.io/v3/${INFURA_API_KEY}`
    );
    

• Security Warning:

  • Hardcoding API keys in config.js is for hackathon prototyping only. For production, use environment variables or a secrets manager to prevent key exposure.

  • Ensure config.js is not committed to public repositories (add to .gitignore).

Testing

• Testnets: Sepolia for USDC deposits, Amoy for staking/rewards.

• Test Cases:

  • Connect wallet and verify asset aggregation (LI.FI SDK).

  • Stake an NFT/token and confirm gasless transaction (MetaMask DTK).

  • Claim rewards, convert to USDC, and deposit to MetaMask wallet (LI.FI SDK, Circle Wallets).

  • Trigger gamified bonus for staking ≥2 assets.

• Tools:

  • Hardhat for contract testing: npx hardhat test.

  • Jest for frontend unit tests: npm test.

• Faucets:

  • Sepolia: Sepolia Faucet.

  • Amoy: Polygon Amoy Faucet.

Project Structure

cross-chain-rewards-hub/
├── contracts/
│   ├── RewardsHub.sol        # Staking and reward contract
│   ├── scripts/
│   │   └── deploy.js         # Deployment script
│   └── hardhat.config.js     # Hardhat configuration
├── frontend/
│   ├── src/
│   │   ├── App.js            # Main React component
│   │   ├── config.js         # API keys and contract addresses
│   │   └── index.js          # Entry point
│   ├── public/
│   │   └── index.html        # HTML template
│   └── package.json          # Frontend dependencies
├── README.md                 # Project documentation
└── package.json              # Root dependencies

Limitations and Future Enhancements

• Limitations:

  • MetaMask Card is simulated by depositing USDC to a MetaMask wallet on Sepolia due to Linea testnet constraints.

  • Circle Wallets integration may be partially mocked due to sandbox API setup time; full implementation requires API key configuration.

  • Hardcoded API keys are used for simplicity; not suitable for production.

• Future Enhancements:

  • Deploy to Linea mainnet for real MetaMask Card integration.

  • Support additional chains (e.g., Arbitrum, Optimism).

  • Enhance gamification with leaderboards or tiered rewards.

  • Add wallet analytics and transaction history.

Submission Details

• Repository: github.com/your-username/cross-chain-rewards-hub (update with actual URL).

• Demo Video: Link to YouTube/Vimeo (update with actual link).

• Team: [Your Name/Team Name].

• Contact: [Your Email or Discord Handle].

Acknowledgments

• MetaMask: For SDK and DTK enabling seamless wallet interactions.

• Circle: For Web3 Services powering secure USDC management.

• LI.FI: For cross-chain infrastructure simplifying asset transfers.

• OpenZeppelin: For secure ERC721/ERC20 contract standards.

Thank you for reviewing the Cross-Chain Rewards Hub! We’re excited to showcase how cross-chain technology can drive real-world crypto adoption with MetaMask Card.