Staking Elixir Web3 with Referral System – React & Solidity

Introduction

Staking Elixir is a decentralized finance (DeFi) application that allows users to participate in the validation process of a blockchain network in exchange for rewards. The Elixir Web3 library is a JavaScript library that enables developers to interact with the Elixir blockchain and deploy smart contracts using Solidity. In this tutorial, we will learn how to use the Staking Elixir Web3 library with a referral system, integrated with a React frontend.

Prerequisites

Before we begin, make sure you have the following:

• Node.js installed on your machine
• A code editor or IDE (such as Visual Studio Code or IntelliJ IDEA)
• Familiarity with React and JavaScript
• A basic understanding of blockchain technology and smart contracts
• The Staking Elixir Web3 library installed in your project

Step 1: Set up your project

Create a new React project using the following command:

npx create-react-app staking-elixir

This will create a new React project with a basic directory structure. Rename the App.js file to index.js, as we will be using this file as the main entry point for our application.

Step 2: Install the Staking Elixir Web3 library

Install the Staking Elixir Web3 library using the following command:

npm install @staking-elixir/web3

Step 3: Set up your blockchain connection

Create a new file called web3.config.js in the root of your project and add the following code:

export default {
  provider: {
    type: 'http',
    url: 'https://mainnet.infura.io/v3/YOUR_PROJECT_ID'
  }
};

Replace YOUR_PROJECT_ID with your actual Infura project ID. This file sets up the Web3 provider, which connects to the Elixir blockchain.

Step 4: Deploy your smart contract

Create a new file called contracts/StakingContract.sol and add the following code:

pragma solidity ^0.8.0;

contract StakingContract {
    address public owner;
    mapping (address => uint256) public stakes;
    uint256 public totalStakes;

    constructor() public {
        owner = msg.sender;
    }

    function stake(uint256 amount) public {
        require(amount > 0, "Amount must be greater than 0");
        stakes[msg.sender] += amount;
        totalStakes += amount;
    }

    function getStake(address user) public view returns (uint256) {
        return stakes[user];
    }
}

This is a simple smart contract that allows users to stake Elixir tokens and returns the total stake amount. Compile and deploy this contract to the Elixir blockchain using the following command:

npx truffle compile
npx truffle migrate

Step 5: Set up your referral system

Create a new file called referral.js and add the following code:

import { Web3 } from '@staking-elixir/web3';
import { StakingContract } from './contracts/StakingContract';

const web3 = new Web3(window.ethereum);
const stakingContract = new web3.eth.Contract(StakingContract.abi, StakingContract.address);

const getReferralCode = async (address) => {
  const referralCode = await stakingContract.methods.getReferralCode(address).call();
  return referralCode;
};

const getReferralStakes = async (address, referralCode) => {
  const referralStakes = await stakingContract.methods.getReferralStakes(address, referralCode).call();
  return referralStakes;
};

export { getReferralCode, getReferralStakes };

This file sets up a Web3 provider and uses it to interact with the StakingContract. The getReferralCode function returns the referral code for a given user, and the getReferralStakes function returns the total stake amount for a given user and referral code.

Step 6: Implement the referral system in your React application

Create a new file called components/Referral.js and add the following code:

import React, { useState, useEffect } from 'react';
import { getReferralCode, getReferralStakes } from '../referral';

const Referral = () => {
  const [address, setAddress] = useState('');
  const [referralCode, setReferralCode] = useState('');
  const [referralStakes, setReferralStakes] = useState(0);

  useEffect(() => {
    const getAddress = async () => {
      const account = await web3.eth.getAccounts();
      setAddress(account[0]);
    };
    getAddress();
  }, []);

  useEffect(() => {
    const getReferralCodeAndStakes = async () => {
      if (address) {
        const referralCode = await getReferralCode(address);
        setReferralCode(referralCode);
        const referralStakes = await getReferralStakes(address, referralCode);
        setReferralStakes(referralStakes);
      }
    };
    getReferralCodeAndStakes();
  }, [address]);

  return (
    <div>
      <h1>Referral System</h1>
      <p>Address: {address}</p>
      <p>Referral Code: {referralCode}</p>
      <p>Referral Stakes: {referralStakes}</p>
    </div>
  );
};

export default Referral;

This file uses the useState and useEffect hooks to retrieve the user's address and referral code, and display them on the page. It also uses the getReferralCode and getReferralStakes functions to retrieve the referral stakes for the given user and referral code.

Step 7: Implement the staking functionality

Create a new file called components/Staking.js and add the following code:

import React, { useState } from 'react';
import { Web3 } from '@staking-elixir/web3';
import { StakingContract } from '../contracts/StakingContract';

const Staking = () => {
  const [amount, setAmount] = useState(0);
  const [error, setError] = useState(null);

  const handleStake = async () => {
    try {
      const txCount = await web3.eth.getTransactionCount();
      const gasPrice = await web3.eth.getGasPrice();
      const gasLimit = 20000;
      const tx = {
        from: web3.eth.accounts[0],
        to: StakingContract.address,
        value: '0x' + web3.utils.toHex(web3.utils.toWei(amount.toString(), 'ether')),
        gas: gasLimit,
        gasPrice: gasPrice,
        nonce: txCount
      };
      const signedTx = web3.eth.accounts.signTransaction(tx, web3.eth.accounts[0]);
      const txHash = await web3.eth.sendSignedTransaction(signedTx.rawTransaction);
      console.log(txHash);
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <h1>Staking</h1>
      <p>Amount: <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} /></p>
      <button onClick={handleStake}>Stake</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

export default Staking;

This file uses the useState hook to store the staking amount and error message, and the handleStake function to execute the staking transaction.

Step 8: Integrate the staking and referral systems

Add the Staking and Referral components to your App.js file:

import React from 'react';
import Staking from './components/Staking';
import Referral from './components/Referral';

function App() {
  return (
    <div>
      <h1>Staking Elixir</h1>
      <Staking />
      <Referral />
    </div>
  );
}

export default App;

This concludes the tutorial on how to use the Staking Elixir Web3 library with a referral system, integrated with a React frontend. You can now run your application using the following command:

npm start

This will start your React application in development mode, and you can interact with the staking and referral systems on the page.