Introduction

Prerequisites

• Basic knowledge of ReactJS.
• Basic knowledge of Avalanche's architecture and smart contracts.
• Basic familiarity with the React context API.
• You will also need an account on DataHub.

Requirements

• NodeJS >= 10.16 and npm >= 5.6 installed.
• Truffle, which can be installed globally with npm install -g truffle.
• The Metamask wallet software must be added to your browser, which should only be obtained from the official Metamask website: https://metamask.io. Do not download Metamask from an unofficial source!

Project setup

mkdir bid
cd bid

Creating the React project

npx create-react-app client

npm install --save dotenv web3 @truffle/contract @truffle/hdwallet-provider @drizzle/store

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { Drizzle } from "@drizzle/store";
import drizzleOptions from "./drizzleOptions";
import { DrizzleProvider } from "./drizzleContext";

const drizzle = new Drizzle(drizzleOptions);

ReactDOM.render(
  <DrizzleProvider drizzle={drizzle}>
    <App />
  </DrizzleProvider>,
  document.getElementById("root")
);

import Auction from "./Auction";
import { useDrizzleContext } from "./drizzleContext";

function App() {
  const { drizzleVariables } = useDrizzleContext();

  if (!drizzleVariables.initialized) {
    return "Loading...";
  } else {
    return <Auction />;
  }
}

export default App;

Setup the Truffle project

truffle init

cp truffle-config.js truffle-config-default.js

require("dotenv").config();
const HDWalletProvider = require("@truffle/hdwallet-provider");

// Account credentials from which our contract will be deployed
const mnemonic = process.env.MNEMONIC;

// API key of your Datahub account for Avalanche Fuji test network
const APIKEY = process.env.APIKEY;

const DATAHUB_RPC_URL = `https://avalanche--fuji--rpc.datahub.figment.io/apikey/${process.env.APIKEY}/ext/bc/C/rpc`;

module.exports = {
  contracts_build_directory: "./client/src/build/contracts/",
  networks: {
    fuji: {
      provider: function () {
        return new HDWalletProvider({
          mnemonic,
          providerOrUrl: DATAHUB_RPC_URL,
          chainId: "0xa869",
        });
      },
      network_id: "*",
      gas: 3000000,
      gasPrice: 470000000000,
      skipDryRun: true,
    },
  },
  compilers: {
    solc: {
      version: "0.8.0",
    },
  },
};

Receive Avalanche Credentials

1. A node connected to the Avalanche network and an account with some AVAX.
2. An Avalanche API key is required to access the DataHub Avalanche node through RPC (Remote Procedure Call). Visit the Avalanche Services Dashboard on DataHub to get an Avalanche specific API key.

Add .env file

DATAHUB_API_KEY=<your-api-key>
MNEMONIC="<avalanche-wallet-mnemonic>"

Create Auction smart contract

// SPDX-License-Identifier: UNLICENSED
pragma solidity >=0.8.0;

contract AuctionManager {
	uint public uId = 0;
	uint public aId = 0;

	// Structure to store user information
	struct User {
		uint userId;
		string name;
		address publicAddress;
	}

	// Structure to store bid information
	struct Bid {
		uint userId;
		uint bidPrice;
	}

	// Structure to store auction information
	struct Auction {
		uint auctionId;
		uint userId;
		string name;
		string description;
		uint msp;
		uint auctionBidId;
	}

	// Structure to store real time analytics of each auction
	struct AuctionAnalytics {
		uint auctionId;
		uint auctionBidId;
		uint latestBid;
		uint lowestBid;
		uint highestBid;
	}

	// List of all auctions
	Auction[] public auctions;

	// Mapping for storing user info, bids and auction analytics
	mapping (uint => User) public users;
	mapping (uint => Bid[]) public bids;
	mapping (uint => AuctionAnalytics) public auctionAnalytics;

	// Public function to check the registration of users (public address)
	function isRegistered(address _publicAddress) public view returns (uint256[2] memory) {
		uint256[2] memory result = [uint256(0), uint256(0)];
		for(uint i = 0; i < uId; i++) {
			if(_publicAddress == users[i].publicAddress) {
				result[0] = 1;
				result[1] = i;
				return result;
			}
		}
		return result;
	}

	// Creating new users
	function createUser(string memory _name) public {
		require((isRegistered(msg.sender))[0] == 0, "User already registered!");
		users[uId] = User(uId, _name, msg.sender);
		uId++;
	}

	// Creating new auctions
	function createAuction(string memory _name, string memory _description, uint _msp) public {
		require((isRegistered(msg.sender))[0] == 1, "User not registered!");
		uint MAX_UINT = 2 ** 256 - 1;
		auctions.push(Auction(aId, isRegistered(msg.sender)[1], _name, _description, _msp, 0));
		auctionAnalytics[aId] = AuctionAnalytics(aId, 0, 0, MAX_UINT, 0);
		aId++;
	}

	// Private function to update auction analytics after the new bids
	function updateAucionAnalytics(uint _aId, uint _latestBid) private {
		auctionAnalytics[_aId].latestBid = _latestBid;
		auctionAnalytics[_aId].auctionBidId = auctions[_aId].auctionBidId;
		if(_latestBid < auctionAnalytics[_aId].lowestBid) {
			auctionAnalytics[_aId].lowestBid = _latestBid;
		}
		if(_latestBid > auctionAnalytics[_aId].highestBid) {
			auctionAnalytics[_aId].highestBid = _latestBid;
		}
	}

	// Creating new bids
	function createBid(uint _aId, uint _bidPrice) public {
		require((isRegistered(msg.sender))[0] == 1, "User not registered!");
		bids[_aId].push(Bid((isRegistered(msg.sender))[1], _bidPrice));
		auctions[_aId].auctionBidId++;
		updateAucionAnalytics(_aId, _bidPrice);
	}

	// Return list of all auctions
	function showAuctions() public view returns (Auction[] memory) {
		return auctions;
	}
}

Understanding the contract

Users, bids, auctions and analytics

// List of all auctions
Auction[] public auctions;

// Mapping for storing user info, bids and auction analytics
mapping (uint => User) public users;
mapping (uint => Bid[]) public bids;
mapping (uint => AuctionAnalytics) public auctionAnalytics;

Function to check registered user

// Public function to check the registration of users (public address)
function isRegistered(address _publicAddress) public view returns (uint256[2] memory) {
	uint256[2] memory result = [uint256(0), uint256(0)];
	for(uint i = 0; i < uId; i++) {
		if(_publicAddress == users[i].publicAddress) {
			result[0] = 1;
			result[1] = i;
			return result;
		}
	}
	return result;
}

Auction analytics

// Private function to update auction analytics after the new bids
function updateAucionAnalytics(uint _aId, uint _latestBid) private {
	auctionAnalytics[_aId].latestBid = _latestBid;
	auctionAnalytics[_aId].auctionBidId = auctions[_aId].auctionBidId;
	if(_latestBid < auctionAnalytics[_aId].lowestBid) {
		auctionAnalytics[_aId].lowestBid = _latestBid;
	}
	if(_latestBid > auctionAnalytics[_aId].highestBid) {
		auctionAnalytics[_aId].highestBid = _latestBid;
	}
}

Creating Truffle migrations

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract Migrations {
	address public owner = msg.sender;
	uint public last_completed_migration;

	modifier restricted() {
		require(
			msg.sender == owner,
			"This function is restricted to the contract's owner"
		);
		_;
	}

	function setCompleted(uint completed) public restricted {
		last_completed_migration = completed;
	}
}

const AuctionManager = artifacts.require("./Auction.sol");

module.exports = function (deployer) {
  deployer.deploy(AuctionManager);
};

Compiling contracts with Truffle

Compiling your contracts...
===========================
> Compiling ./contracts/Auction.sol
> Compiling ./contracts/Migrations.sol

> Artifacts written to /home/guest/blockchain/client/build/contracts
> Compiled successfully using:
	 - solc: 0.8.0+commit.c7dfd78e.Emscripten.clang

Run migrations on the C-Chain

Fund your account

Run Migrations

truffle migrate --network fuji

truffle migrate --network development

Starting migrations...
======================
> Network name:    'fuji'
> Network id:      1
> Block gas limit: 8000000 (0x7a1200)


1_initial_migration.js
======================

	 Deploying 'Migrations'
	 ----------------------
	 > transaction hash:    0x094a9c0f12ff3158bcb40e266859cb4f34a274ea492707f673b93790af40e9e9
	 > Blocks: 0            Seconds: 0
	 > contract address:    0x0b1f00d0Af6d5c864f86E6b96216e0a2Da111055
	 > block number:        40
	 > block timestamp:     1620393171
	 > account:             0x80599dd7F8c5426096FD189dcC6C40f47e8e3714
	 > balance:             39.71499696
	 > gas used:            173118 (0x2a43e)
	 > gas price:           20 gwei
	 > value sent:          0 ETH
	 > total cost:          0.00346236 ETH


	 > Saving migration to chain.
	 > Saving artifacts
	 -------------------------------------
	 > Total cost:          0.00346236 ETH


2_deploy_contracts.js
=====================

	 Deploying 'AuctionManager'
	 ------------------------
	 > transaction hash:    0xbeb13fc6bbee250eea9151faf02bfe247ec497294acc84c9b8319ed609ced086
	 > Blocks: 0            Seconds: 0
	 > contract address:    0xf30D372A6911CCF6BBa1e84c3CEd51cC0F3D7769
	 > block number:        42
	 > block timestamp:     1620393172
	 > account:             0x80599dd7F8c5426096FD189dcC6C40f47e8e3714
	 > balance:             39.69235442
	 > gas used:            1090212 (0x10a2a4)
	 > gas price:           20 gwei
	 > value sent:          0 ETH
	 > total cost:          0.02180424 ETH


	 > Saving migration to chain.
	 > Saving artifacts
	 -------------------------------------
	 > Total cost:          0.02180424 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0.0252666 ETH

Error: Expected parameter 'from' not passed to function.

Error:  *** Deployment Unsuccessful***

"Migrations" could not deploy due to insufficient funds
	 * Account:  0x090172CD36e9f4906Af17B2C36D662E69f162282
	 * Balance:  0 wei
	 * Message:  sender doesn't have enough funds to send tx. The upfront cost is: 1410000000000000000 and the sender's account only has: 0
	 * Try:
			+ Using an adequately funded account

Building the user interface

Drizzle Option component

import AuctionManager from "./build/contracts/AuctionManager.json";

const drizzleOptions = {
  contracts: [AuctionManager],
};

export default drizzleOptions;

Index component

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { Drizzle } from "@drizzle/store";
import drizzleOptions from "./drizzleOptions";
import { DrizzleProvider } from "./drizzleContext";

const drizzle = new Drizzle(drizzleOptions);

ReactDOM.render(
  <DrizzleProvider drizzle={drizzle}>
    <App />
  </DrizzleProvider>,
  document.getElementById("root")
);

const drizzle = new Drizzle(drizzleOptions);

Drizzle Context

import React, { createContext, useContext, useState } from "react";

const Context = createContext();

export function DrizzleProvider({ drizzle, children }) {
  const [drizzleVariables, setDrizzleVariables] = useState({
    initialized: false,
    state: null,
    web3: null,
    accounts: null,
    AuctionManager: null,
    subscriber: null,
  });
  const unsubscribe = drizzle.store.subscribe(() => {
    const drizzleState = drizzle.store.getState();
    if (drizzleState.drizzleStatus.initialized) {
      const { web3, accounts } = drizzleState;
      const AuctionManager = drizzle.contracts.AuctionManager.methods;
      const subscriber = drizzleState.contracts.AuctionManager;
      setDrizzleVariables({
        state: drizzleState,
        web3,
        accounts,
        AuctionManager,
        subscriber,
        initialized: true,
      });
    }
  });
  drizzleVariables.initialized && unsubscribe();

  return (
    <Context.Provider value={{ drizzle, drizzleVariables }}>
      {children}
    </Context.Provider>
  );
}

export function useDrizzleContext() {
  const context = useContext(Context);
  return context;
}

Drizzle state

const drizzleState = drizzle.store.getState();

AuctionManager

const AuctionManager = drizzle.contracts.AuctionManager.methods;

App component

import Auction from "./Auction";
import { useDrizzleContext } from "./drizzleContext";

function App() {
  const { drizzleVariables } = useDrizzleContext();

  if (!drizzleVariables.initialized) {
    return "Loading...";
  } else {
    return <Auction />;
  }
}

export default App;

Auction Component

import React, { useState, useEffect } from "react";
import { useDrizzleContext } from "./drizzleContext";
import FetchAuctions from "./AuctionList";
import CreateAuction from "./CreateAuction";

function Auction() {
  // Importing drizzle variables from drizzle context
  const { drizzleVariables } = useDrizzleContext();
  const { AuctionManager, subscriber, accounts } = drizzleVariables;

  // Setting up cache keys corresponding to cache calls
  const [cacheKeys, setCacheKey] = useState({
    uId: null,
    aId: null,
    showAuctions: null,
    isRegistered: null,
    auctionAnalytics: [null],
  });
  const [auctionAnalyticsCacheKey, setAuctionAnalyticsCacheKey] =
    useState(null);

  // Setting up cache calls for required functions
  const cacheCalls = {
    isRegistered: subscriber?.isRegistered[cacheKeys?.isRegistered]?.value,
    user: subscriber?.users[cacheKeys?.uId]?.value,
    aId: subscriber?.aId[cacheKeys?.aId]?.value,
    showAuctions: subscriber?.showAuctions[cacheKeys?.showAuctions]?.value,
    auctionAnalytics: [],
  };

  for (var i = 0; i < cacheCalls.aId; i++) {
    cacheCalls.auctionAnalytics.push(
      subscriber?.auctionAnalytics[auctionAnalyticsCacheKey[i]]?.value
    );
  }

  const [isRegistered, setIsRegistered] = useState(false);
  const [userInfo, setUserInfo] = useState({
    id: null,
    name: null,
  });

  // Initializing cache keys
  useEffect(() => {
    const _auctionCacheKey = AuctionManager?.showAuctions?.cacheCall();
    const _aIdCacheKey = AuctionManager?.aId?.cacheCall();
    const _isRegistered = AuctionManager?.isRegistered?.cacheCall(accounts[0]);
    setCacheKey({
      ...cacheKeys,
      showAuctions: _auctionCacheKey,
      aId: _aIdCacheKey,
      isRegistered: _isRegistered,
    });
  }, []);

  useEffect(() => {
    var _auctionAnalyticsCacheKey = [];
    for (var i = 0; i < cacheCalls.aId; i++) {
      _auctionAnalyticsCacheKey.push(
        AuctionManager?.auctionAnalytics?.cacheCall(i)
      );
    }
    setAuctionAnalyticsCacheKey(_auctionAnalyticsCacheKey);
  }, [cacheCalls.aId]);

  useEffect(() => {
    if (
      cacheCalls.isRegistered !== undefined &&
      cacheCalls.isRegistered[0] == 1
    ) {
      setIsRegistered(true);
      (async () => {
        const userInfo = await AuctionManager.users(
          cacheCalls.isRegistered[1]
        ).call();
        setUserInfo({
          id: userInfo.userId,
          name: userInfo.name,
        });
      })();
    } else {
      setIsRegistered(false);
    }
  }, [cacheCalls.isRegistered]);

  const createUser = async (name) => {
    await AuctionManager?.createUser(name)?.send({ from: accounts[0] });
  };

  const [userName, setUserName] = useState("");

  const handleUserNameChange = (event) => {
    setUserName(event.target.value);
  };

  const submitLogin = (event) => {
    event.preventDefault();
    createUser(userName);
  };

  const UserInfo = () => {
    return (
      <div>
        <label style={{ color: "red" }}>ID: </label> {userInfo.id}
        <label style={{ marginLeft: "50px", color: "green" }}>
          Name:{" "}
        </label> {userInfo.name} <br />
        <br />
      </div>
    );
  };

  return (
    <div>
      <h1>Auctions</h1>
      {isRegistered ? (
        <>
          <UserInfo />
          <FetchAuctions cacheCalls={cacheCalls} userInfo={userInfo} /> <br />
          <br />
          <CreateAuction />
        </>
      ) : (
        <form onSubmit={submitLogin}>
          <font color="red" font="2">
            This address is not yet registered!
          </font>
          <br />
          <br />
          <label>Address: </label>
          <input disabled value={accounts[0]} />
          <br />
          <br />
          <label>Name: </label>
          <input
            key="1"
            value={userName}
            required
            onChange={handleUserNameChange}
            placeholder="Enter your name"
          />
          <br />
          <br />
          <input type="submit" value="Register" />
        </form>
      )}
    </div>
  );
}

export default Auction;

const [cacheKeys, setCacheKey] = useState({
  uId: null,
  aId: null,
  showAuctions: null,
  isRegistered: null,
  auctionAnalytics: [null],
});

const _isRegistered = AuctionManager?.isRegistered?.cacheCall(accounts[0]);
setCacheKey({
  isRegistered: _isRegistered,
});

const realTimeIsRegistered =
  subscriber?.isRegistered[cacheKeys?.isRegistered]?.value;

Auction List

import React, { useState } from "react";
import { useDrizzleContext } from "./drizzleContext";

function FetchAuctions({ cacheCalls, userInfo }) {
  const { drizzleVariables } = useDrizzleContext();
  const { AuctionManager, accounts } = drizzleVariables;

  const [bidPrices, setBidPrices] = useState(new Map([]));

  const createBid = async (id, bidPrice) => {
    await AuctionManager?.createBid(id, bidPrice).send({ from: accounts[0] });
    clearBidPriceInput(id);
  };

  const submitNewBid = (event, id) => {
    event.preventDefault();
    createBid(id, bidPrices.get(id));
  };

  const handleBidPriceChange = (event, id) => {
    let _bidPrices = bidPrices;
    _bidPrices.set(id, event.target.value);
    setBidPrices(_bidPrices);
  };

  const clearBidPriceInput = (id) => {
    let _bidPrices = bidPrices;
    _bidPrices[id] = "";
    setBidPrices(_bidPrices);
  };

  const getAuctionAnalytics = () => {
    var auctionAnalytics = [];
    for (var i = 0; i < cacheCalls.aId; i++) {
      auctionAnalytics.push(cacheCalls.auctionAnalytics[i]);
    }
    return auctionAnalytics;
  };

  const allAuctions = cacheCalls.showAuctions;
  const auctionAnalytics = getAuctionAnalytics();
  return (
    <table border="1" style={{ maxWidth: "800px", width: "90%" }}>
      <tr>
        <td>Auction ID</td>
        <td>Auction Details</td>
        <td>Minimum Price</td>
        <td>Bid</td>
      </tr>
      {allAuctions !== undefined &&
        allAuctions.map((auction, index) => (
          <tr>
            <td>{auction.auctionId}</td>
            <td>
              <b>
                {auction.name}{" "}
                <font size="2" color="green">
                  {auction.userId == userInfo.id && "(created by you)"}
                </font>
              </b>
              <br />
              <font size="2">{auction.description}</font>
              <br />
              <tr>
                <td>Total Bids</td>
                <td>Latest Bid</td>
                <td>Highest Bid</td>
                <td>Lowest Bid</td>
              </tr>
              <tr>
                <td>{auctionAnalytics[index]?.auctionBidId}</td>
                <td>₹{auctionAnalytics[index]?.latestBid}</td>
                <td>₹{auctionAnalytics[index]?.highestBid}</td>
                <td>
                  ₹
                  {auctionAnalytics[index]?.auctionBidId == 0
                    ? 0
                    : auctionAnalytics[index]?.lowestBid}
                </td>
              </tr>
            </td>
            <td>₹{auction.msp}</td>
            <td>
              <form
                onSubmit={(event) => submitNewBid(event, auction.auctionId)}
                style={{ margin: "10px" }}
              >
                <input
                  required
                  type="number"
                  min={auction.msp}
                  onChange={(event) =>
                    handleBidPriceChange(event, auction.auctionId)
                  }
                  placeholder="Enter your bid price"
                />
                <br />
                <br />
                <input type="submit" value="Make Bid" />
                <br />
                <br />
              </form>
            </td>
          </tr>
        ))}
    </table>
  );
}

export default FetchAuctions;

Creating new Auctions

import React, { useState } from "react";
import { useDrizzleContext } from "./drizzleContext";

function CreateAuction() {
  // Importing drizzle variables from drizzle context
  const { drizzleVariables } = useDrizzleContext();
  const { AuctionManager, accounts } = drizzleVariables;

  const createAuction = async ({ title, description, msp }) => {
    await AuctionManager?.createAuction(title, description, msp)?.send({
      from: accounts[0],
    });
    setAuctionDetails({
      title: "",
      description: "",
      msp: "",
    });
  };

  const [auctionDetails, setAuctionDetails] = useState({
    title: "",
    description: "",
    msp: "",
  });

  const handleAuctionTitleChange = (event) => {
    setAuctionDetails({
      ...auctionDetails,
      title: event.target.value,
    });
  };

  const handleAuctionDescriptionChange = (event) => {
    setAuctionDetails({
      ...auctionDetails,
      description: event.target.value,
    });
  };

  const handleAuctionMspChange = (event) => {
    setAuctionDetails({
      ...auctionDetails,
      msp: event.target.value,
    });
  };

  const submitNewAuction = (event) => {
    event.preventDefault();
    createAuction(auctionDetails);
  };

  return (
    <form
      onSubmit={submitNewAuction}
      style={{ border: "1px black solid", maxWidth: "400px", padding: "10px" }}
    >
      <label>Title: </label>
      <br />
      <input value={auctionDetails.title} onChange={handleAuctionTitleChange} />
      <br />
      <br />
      <label>Description: </label>
      <br />
      <textarea
        rows="4"
        value={auctionDetails.description}
        onChange={handleAuctionDescriptionChange}
      />
      <br />
      <br />
      <label>MSP: </label>
      <br />
      <input value={auctionDetails.msp} onChange={handleAuctionMspChange} />
      <br />
      <br />
      <input type="submit" value="Create Auction" />
    </form>
  );
}

export default CreateAuction;

Conclusion

Next Steps

About the authors