30 posts tagged with "smartcontract"

Introduction​

NFTs or Non-Fungible, an application of blockchain is used to represent unique digital assets such as collectibles, arts, etc. Celo is a blockchain platform that is designed to send, receive, and store digital assets securely on a mobile phone. The Celo blockchain is built using the Solidity programming language and is fully compatible with Ethereum. In this tutorial, we will be building an NFT marketplace with Python using the brownie framework and deploying it on Celo Testnet.

Prerequisites​

To understand this tutorial, you must be familiar with the following:

• Building Smart Contracts
• The Python programming language

Requirements​

You should have the following installed on your computer to follow along:

• Python 3.7 or any later version.
• Nodejs
• Celo Testnet account
• Celo Wallet
• Python-dotenv
• Ganache
• Eth-brownie

Setting Up Project​

To get started, we have to create a new directory for our project and install the following dependencies:

mkdir nft-marketplace
cd nft-nft-marketplace

# Create virtual environment
python3.10 -m venv venv
# activate virtual environment
source venv/bin/activate

Note: Brownie works bet with python3.10

# Install ganache
npm install -g ganache
# Install eth-brownie and python-dotenv
pip3 install eth-brownie python-dotenv

After installing dependencies, we need to initialize our project as a brownie project.

brownie int

This command generates some folder which will look like this:

After initializing brownie into our project, in your root directory, create two files called .env and brownie-config.yaml. The .env file is used to store environment variables that should not be exposed to the public such as our private key, mnemonic phrase, etc, while brownie-config.yaml is used to configure brownie in our project.

.env

MNEMONIC="..."
PRIVATE_KEY="0x..."

brownie-config.yaml

reports:
    exclude_contracts:
        - SafeMath
depedencies:
    - OpenZeppelin/openzeppelin-contracts@4.8.0
compiler:
    solc:
        version: 0.8.15
        optimizer:
            enabled: true
            runs: 200
        remappings:
            - "@openzeppelin=OpenZeppelin/openzeppelin-contracts@4.8.0"
networks:
    default: celo-alfajores
console:
    show_colors: true
    color_style: monokai
    auto_suggest: true
    completions: true
    editing_mode: emacs
dotenv: .env
wallets:
    from_mnemonic: ${MNEMONIC}
        from_key: ${PRIVATE_KEY}

The next step is to add Celo Testnet (Alfajores) to our brownie project:

brownie networks add Celo celo-alfajores host=https://alfajores-forno.celo-testnet.org chainid=44787 explorer=https://alfajores-blockscout.celo-testnet.org

You can see the list of networs that have been added to our brownie project:

brownie network list

Implementing the Smart Contract​

Next ,we have to write the smart contraxr for our NFT marketplace. In your contracts directory, create a new file called NFTMarketplace.sol

agma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/IERC721Receiver.sol";
import "@openzeppelin/contracts/utils/math/SafeMath.sol";
contract NFTMarketplace {
    using SafeMath for uint256;
    struct Auction {
        address tokenAddress;
        uint256 tokenId;
        address payable seller;
        uint256 price;
        uint256 endTime;
        bool active;
    }
    address public owner;
    uint256 public feePercentage; // percentage of the sale price taken as fee
    mapping(address => mapping(uint256 => Auction)) public auctions; // map of all active auctions
    event AuctionCreated(
        address indexed tokenAddress,
        uint256 indexed tokenId,
        address indexed seller,
        uint256 price,
        uint256 endTime
    );
    event AuctionEnded(
        address indexed tokenAddress,
        uint256 indexed tokenId,
        address indexed buyer,
        uint256 price
    );
    constructor() {
        owner = msg.sender;
        feePercentage = 1; // 1% fee by default
    }
    function createAuction(address _tokenAddress, uint256 _tokenId, uint256 _price, uint256 _duration) public {
        require(_duration > 0, "Duration must be greater than zero");
        require(_price > 0, "Price must be greater than zero");
        IERC721 tokenContract = IERC721(_tokenAddress);
        require(tokenContract.ownerOf(_tokenId) == msg.sender, "You don't own this NFT");
        uint256 endTime = block.timestamp.add(_duration);
        Auction memory auction = Auction(_tokenAddress, _tokenId, payable(msg.sender), _price, endTime, true);
        auctions[_tokenAddress][_tokenId] = auction;
        emit AuctionCreated(_tokenAddress, _tokenId, msg.sender, _price, endTime);
    }
    function endAuction(address _tokenAddress, uint256 _tokenId) public {
        Auction storage auction = auctions[_tokenAddress][_tokenId];
        require(auction.active, "Auction has already ended");
        require(block.timestamp >= auction.endTime, "Auction hasn't ended yet");
        address payable seller = auction.seller;
        uint256 price = auction.price;
        auction.active = false;
        IERC721 tokenContract = IERC721(_tokenAddress);
        tokenContract.safeTransferFrom(address(this), msg.sender, _tokenId);
        uint256 fee = price.mul(feePercentage).div(100);
        seller.transfer(price.sub(fee));
        emit AuctionEnded(_tokenAddress, _tokenId, msg.sender, price);
    }
    function setFeePercentage(uint256 _feePercentage) public {
        require(msg.sender == owner, "Only the owner can set the fee percentage");
        require(_feePercentage >= 0 && _feePercentage <= 100, "Fee percentage must be between 0 and 100");
        feePercentage = _feePercentage;
    }
    function withdraw() public {
        require(msg.sender == owner, "Only the owner can withdraw funds");
        address payable self = payable(address(this));
        self.transfer(self.balance);
    }
    // fallback function
    receive() external payable {}
}

Now let's go through the code step by step

pragma solidity ^0.8.0;
import "./IERC721.sol";
import "./IERC721Receiver.sol";
import "./SafeMath.sol";

The above code specifies our solidity version and imports the IERC721, IERC721Receiver, and SafeMath (for blockchain math operations) interfaces.

using SafeMath for uint256;
 struct Auction {
     address tokenAddress;
      uint256 tokenId;
      address payable seller;
      uint256 price;
      uint256 endTime;
      bool active;
  }

Enables us to use the SafeMath foe uint256 tyoe operations and the Auction struct defines the structure of the Auction.

mapping(address => mapping(uint256 => Auction)) public auctions;

This maps each token address and token ID to an active auction.

event AuctionCreated(
        address indexed tokenAddress,
        uint256 indexed tokenId,
        address indexed seller,
        uint256 price,
        uint256 endTime
    );
    event AuctionEnded(
        address indexed tokenAddress,
        uint256 indexed tokenId,
        address indexed buyer,
        uint256 price
    );

These are the eents that are emitted when an auction is creares and ended.

constructor() {
        owner = msg.sender;
        feePercentage = 1; // 1% fee by default
    }

This sets the owner of the contract and the default fee (in percentage).

function createAuction(address _tokenAddress, uint256 _tokenId, uint256 _price, uint256 _duration) public {
        require(_duration > 0, "Duration must be greater than zero");
        require(_price > 0, "Price must be greater than zero");
        IERC721 tokenContract = IERC721(_tokenAddress);
        require(tokenContract.ownerOf(_tokenId) == msg.sender, "You don't own this NFT");
        uint256 endTime = block.timestamp.add(_duration);
        Auction memory auction = Auction(_tokenAddress, _tokenId, payable(msg.sender), _price, endTime, true);
        auctions[_tokenAddress][_tokenId] = auction;
        emit AuctionCreated(_tokenAddress, _tokenId, msg.sender, _price, endTime);
    }
    function endAuction(address _tokenAddress, uint256 _tokenId) public {
        Auction storage auction = auctions[_tokenAddress][_tokenId];
        require(auction.active, "Auction has already ended");
        require(block.timestamp >= auction.endTime, "Auction hasn't ended yet");
        address payable seller = auction.seller;
        uint256 price = auction.price;
        auction.active = false;
        IERC721 tokenContract = IERC721(_tokenAddress);
        tokenContract.safeTransferFrom(address(this), msg.sender, _tokenId);
        uint256 fee = price.mul(feePercentage).div(100);
        seller.transfer(price.sub(fee));
        emit AuctionEnded(_tokenAddress, _tokenId, msg.sender, price);
    }

The createAuction function creates a new auction and the endAuction ends an active auction.

function setFeePercentage(uint256 _feePercentage) public {
        require(msg.sender == owner, "Only the owner can set the fee percentage");
        require(_feePercentage >= 0 && _feePercentage <= 100, "Fee percentage must be between 0 and 100");
        feePercentage = _feePercentage;
    }
    function withdraw() public {
        require(msg.sender == owner, "Only the owner can withdraw funds");
        address payable self = payable(address(this));
        self.transfer(self.balance);
    }

The setFeePercentage functino sets the percentage fee for the contract and the withdraw function enables the creator of the contract to withdraw the fund from it.

// fallback function
  receive() external payable {}

A callback functnion that is called when ether is sent to the contract

Deploying the Contract​

Next, we need to compile and deploy the contract on the Celo Testnet, Run the following command to compile the contract.

brownie compile

To deploy the smart contract on Celo create a new file called deploy.py in the scripts directory of your project.

from brownie import NFTMarketplace, accounts, config, network
def deploy_marketplace():
    # Load the account to deploy from
    dev = accounts.add(config["wallets"]["from_key"])
    print(f"Deploying from {dev.address}")
    # Deploy the contract
    marketplace = NFTMarketplace.deploy({"from": dev})
    print(f"NFTMarketplace contract deployed to {marketplace.address}")
def main():
    # Set the network to deploy to
    network_name = network.show_active()
    print(f"Deploying to {network_name} network")
    # Call the deploy function
    deploy_marketplace()

The deploy_marketplace functino get the account we would use to deploy the contract.

Deploy the Contract

 Deploy the contract to the Celo Alfajores testnet
brownie run scripts/deploy.py --network celo-alfajores

Conclusion​

In this tutorial we implemented an NFT smart contract that allows users to create and participate in ERC721 token auctions. The contract charges a fee for each sale, which is determined by the contract's owner. When an auction concludes, the winning bidder receives the NFT, while the seller receives the sale price less the fee. The contract also gives the owner the option to withdraw funds from the contract.

We have learned how to implement an NFT exchange on Celo using brownie in Python. We explored topics such as the basics of setting up a development environment, creating a smart contract and finally compiling and deploying the contract on Celo Testnet or Afrajores.

Next Step​

We can explore more functionalities that we can add to this contract, such as the ability for bidders to increase the current bid by a minimum increment, the ability to see auction history, time extension on bid time, etc.

References​

1. Celo Developer Documentation
2. Solidity Documentation
3. Brownie Documentation
4. Github Repository

About the Author​

Israel Okunaya is an ace writer with a flair for simplifying complexities and a knack for storytelling. He leverages over four years of experience to meet the most demanding writing needs in different niches, especially food and travel, blockchain, and marketing. He sees blockchain as a fascinating yet tricky affair. So, he's given to simplifying its complexities with text and video tutorials.

Introduction​

In this tutorial, I will take you through setting up a wallet connection in your Dapp using Rainbowkit-celo. RainbowKit is a React library that makes it easy to add a wallet connection to your dapp. It's intuitive, responsive, and customizable. Rainbowkit-celo is a plugin to help rainbowkit developers support the CELO protocol faster. It includes the chain information and the main CELO wallets (Valora, Celo Wallet, Celo Terminal, etc.).

Prerequisites​

For this tutorial, you will need to have some level of knowledge of Javascript, React, tailwindcss, and Solidity.

Requirements​

For this article, you will need:

• A code editor. VScode is preferable.
• A chrome browser.
• A crypto wallet: Valora, Celo wallet, MetaMask
• Nodejs installed on your computer. If not, download from here

The Smart Contract​

For this tutorial, we will be building a Will/Inheritance smart contract. To build the smart contract and deploy it to the Celo blockchain, we will be using hardhat blockchain. Hardhat is a development environment for Ethereum software. With hardhat, you can write your smart contract, deploy them, run tests, and debug your code.

Building the Will/Inheritance Smart Contract​

First, create a folder where the hardhat project and your Dapp will go. In your terminal, execute these commands.

mkdir inheritance-smartContract
cd inheritance-smartContract

Then in the inheritance-smartContract folder, we will set up a Hardhat project.

mkdir will-contract
cd will-contract
yarn init --yes
yarn add --dev hardhat

If you are using Windows, you must add one more dependency with the code below:

yarn add --dev @nomiclabs/hardhat-waffle hardhat-deploy

In the same directory where you installed the Hardhat project, run:

npx hardhat

Select Create a Javascript Project and follow the steps in the terminal to complete your Hardhat setup.

Once your project is set up, create a new file in the contract folder and name it will.sol.

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.2 <0.9.0;
contract Will {
    address private owner;
    address private _heir;
    bool private isAlive;
    event OwnerChanged(address newOwner);
    event ChangeHeir(address newHeir);
    event IsAliveChanged(bool isAlive);
    event FundsTransferred(address recipient, uint256 amount);
    constructor() {
        owner = msg.sender;
        isAlive = true;
    }
    function changeOwner(address newOwner) public {
        require(msg.sender == owner, "Only owners can change owner");
        owner = newOwner;
        emit OwnerChanged(newOwner);
    }
    function setHeir(address heir) public {
        require(msg.sender == owner, "Only owners can set heir");
        _heir = heir;
    }
    function changeHeir(address newHeir) public {
        require(msg.sender == owner, "Only owners can remove a heir");
        _heir = newHeir;
        emit ChangeHeir(newHeir);
    }
    function changeIsAlive(bool _isAlive) public {
        require(msg.sender == owner, "Only the owner can change the status");
        isAlive = _isAlive;
        emit IsAliveChanged(_isAlive);
    }
    function transferFunds(address payable recipient, uint256 amount) public {
        require(msg.sender == owner || (msg.sender == _heir && !isAlive), "Only the owner or heir can transfer funds");
        require(amount <= address(this).balance, "Insufficient funds");
        recipient.transfer(amount);
        emit FundsTransferred(recipient, amount);
    }

    function getOwner() public view returns (address) {
        return owner;
    }

    function getHeir() public view returns (address) {
        return _heir;
    }

    function getIsAlive() public view returns (bool) {
        return isAlive;
    }

    receive() external payable {}
}

In the smart contract code above, the Will contract has an owner, a designated heir, and a status that determines whether the owner is alive. The contract also has four functions:

• changeOwner() allows the current owner to transfer ownership to a new address.
• setHeir() allows the current owner to set a designated heir.
• changeHeir() allows the current owner to change the designated heir.
• changeIsAlive() allows the current owner to change their status to alive or deceased.
• transferFunds() allows the owner or the heir (if the owner is deceased) to transfer the funds to a designated recipient.

The contract also has three functions to allow anyone to view the current owner, heir, and status.

The contract also includes several events that get emitted whenever the owner, heir, status, or funds are changed, to allow for easy monitoring of changes to the contract.

Note: This is just a simple smart contract example, and a real-world will would likely have more complex logic to handle edge cases and to ensure that the contract is secure and reliable.

Configure Deployment​

We will deploy the smart contract to the Alfajores network on the Celo blockchain. To do this, we will need to connect to the Alfajores testnet through forno by writing a deployment script. Replace the content of the deploy.js file with the code below to deploy the smart contract.

const { ethers } = require("hardhat");
async function main() {
  const willContract = await ethers.getContractFactory("MyWill");
  const deployedWillContract = await willContract.deploy();
  await deployedWillContract.deployed();
  console.log("Will Contract Address:", deployedWillContract.address);
}
// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.log(error);
    process.exit(1);
  });

Now create a .env in the will-contract folder and add your MNEMONIC key in the .env file like this

MNEMONIC=//add your wallet seed phrase here

Now we will install dotenv package to be able to import the env file and use it in our config.

In your terminal pointing to the will-contract folder, enter this command

yarn add dotenv

Next, open the hardhat.config.js file and replace the content of the file provided to us by Hardhat with the configuration code for deployment made available by Celo.

require("@nomiclabs/hardhat-waffle");
require("dotenv").config({ path: ".env" });
require("hardhat-deploy");
// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more
// Prints the Celo accounts associated with the mnemonic in .env
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();
  for (const account of accounts) {
    console.log(account.address);
  }
});
/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  defaultNetwork: "alfajores",
  networks: {
    localhost: {
      url: "http://127.0.0.1:7545",
    },
    alfajores: {
      url: "https://alfajores-forno.celo-testnet.org",
      accounts: {
        mnemonic: process.env.MNEMONIC,
        path: "m/44'/52752'/0'/0",
      },
      //chainId: 44787
    },
    celo: {
      url: "https://forno.celo.org",
      accounts: {
        mnemonic: process.env.MNEMONIC,
        path: "m/44'/52752'/0'/0",
      },
      chainId: 42220,
    },
  },
  solidity: "0.8.4",
};

Add the gas price and gas to the Alfajores object.

alfajores: {
   gasPrice: 200000000000,
   gas: 41000000000,
   url: "https://alfajores-forno.celo-testnet.org",
   accounts: {
     mnemonic: process.env.MNEMONIC,
     path: "m/44'/52752'/0'/0
 }

Check out the Celo doc for more details on what each part of the configuration code does.

The content of the hardhat.config.js file should now look like this.

require("@nomiclabs/hardhat-waffle");
require("dotenv").config({ path: ".env" });
require("hardhat-deploy");
// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more
// Prints the Celo accounts associated with the mnemonic in .env
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();
  for (const account of accounts) {
    console.log(account.address);
  }
});
/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  defaultNetwork: "alfajores",
  networks: {
    localhost: {
      url: "http://127.0.0.1:7545",
    },
    alfajores: {
      gasPrice: 200000000000,
      gas: 41000000000,
      url: "https://alfajores-forno.celo-testnet.org",
      accounts: {
        mnemonic: process.env.MNEMONIC,
        path: "m/44'/52752'/0'/0",
      },
      //chainId: 44787
    },
    celo: {
      url: "https://forno.celo.org",
      accounts: {
        mnemonic: process.env.MNEMONIC,
        path: "m/44'/52752'/0'/0",
      },
      chainId: 42220,
    },
  },
  solidity: "0.8.4",
};

Compiling the Contract​

To compile the contract, in your terminal, point to the will-contract folder and run this command.

npx hardhat compile

After the compilation is successful, run the following command in your terminal.

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

Save the Whitelist Contract Address that was printed on your terminal somewhere, because you would need it further down in the tutorial.

The Dapp​

To develop the Dapp, we will be using Reactjs. React is a free and open-source front-end JavaScript library for building user interfaces based on components.

To create a new react-app, in your terminal, point to the inheritance-smartContract folder and type.

mkdir dapp
cd dapp
yarn create react-app

Press enter and allow the react-app to initialize.

You should have a folder structure that should look like this:

Now to run the app, execute this command in the terminal

yarn start

Go to http://localhost:3000 to view your running app.

Now we will install tailwindcss for the styling of the Dapp. To install tailwindcss, in your terminal, still pointing to the dapp folder, run.

yarn add --dev tailwindcss

After installation has been completed, run

npx tailwindcss init

npx tailwindcss init creates a tailwind.config.js file in your dapp folder.

in the tailwind.config.js file, copy and paste this code.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Then replace the content of the index.css file with the @tailwind directives for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now we will install Rainbowkit-celo. To install Rainbowkit-celo, open up your terminal pointing to the dapp folder and run

yarn add @celo-rainbowkit-celo

The @celo-rainbowkit-celo package has @rainbow-me/rainbowkit as a peer dependency and expects it to be installed too. To install it, run the command in your terminal

yarn add @rainbow-me/rainbowkit wagmi

Next we will install webjs and @celo/contractkit. We will be using the contract kit to interact with the Celo blockchain.

yarn add web3 @celo/contractkit

We will have to make further configurations to our project folder to enable us use web and @celo/contractkit without errors or bugs. These configurations involve installing webpack and other dependencies. To install webpack, type these commands in your terminal. Make sure your terminal still points to the dapp folder you created earlier.

yarn add --dev webpack

After successfully installing webpack, create a webpack.config.js file in the dapp folder and paste the code.

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "build"),
  },
  node: {
    net: "empty",
  },
};

For the other dependencies, paste this in your terminal.

yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Create config-overrides.js in the dapp folder with the content:

const webpack = require("webpack");
module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

In the package.json file, change the scripts field for start, build, and test. Replace react-scripts with react-app-rewired:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

Now go to your index.js file in the dapp folder and copy and import the follow dependencies.

import {
  RainbowKitProvider,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import {
  metaMaskWallet,
  omniWallet,
  walletConnectWallet,
} from "@rainbow-me/rainbowkit/wallets";
import { Valora, CeloWallet, CeloDance } from "@celo/rainbowkit-celo/wallets";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";
import "@rainbow-me/rainbowkit/styles.css";

Below the imports, add the following code.

const { chains, provider } = configureChains(
  [Alfajores, Celo],
  [
    jsonRpcProvider({
      rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }),
    }),
  ]
);
const connectors = connectorsForWallets([
  {
    groupName: "Recommended with CELO",
    wallets: [
      Valora({ chains }),
      CeloWallet({ chains }),
      CeloDance({ chains }),
      metaMaskWallet({ chains }),
      omniWallet({ chains }),
      walletConnectWallet({ chains }),
    ],
  },
]);
const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

Now wrap the <App/> component with the RainbowkitProvider and WagmiConfig

<WagmiConfig client={wagmiClient}>
  <RainbowKitProvider chains={chains}>
    <App />
  </RainbowKitProvider>
</WagmiConfig>

Your index.js file should look like this.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import {
  RainbowKitProvider,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import {
  metaMaskWallet,
  omniWallet,
  walletConnectWallet,
} from "@rainbow-me/rainbowkit/wallets";
import { Valora, CeloWallet, CeloDance } from "@celo/rainbowkit-celo/wallets";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
import celoGroups from "@celo/rainbowkit-celo/lists";
import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";
import "@rainbow-me/rainbowkit/styles.css";
const { chains, provider } = configureChains(
  [Alfajores, Celo],
  [
    jsonRpcProvider({
      rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }),
    }),
  ]
);
const connectors = connectorsForWallets([
  {
    groupName: "Recommended with CELO",
    wallets: [
      Valora({ chains }),
      CeloWallet({ chains }),
      CeloDance({ chains }),
      metaMaskWallet({ chains }),
      omniWallet({ chains }),
      walletConnectWallet({ chains }),
    ],
  },
]);
const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <App />
      </RainbowKitProvider>
    </WagmiConfig>
  </React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

In your App.js file, copy and paste this code

import "./App.css";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useSigner } from "wagmi";
import { useState, useEffect } from "react";
import Web3 from "web3";
import { newKitFromWeb3 } from "@celo/contractkit";
import { abi } from "./will.abi";
function App() {
  const { data: signer } = useSigner();
  const [address, setAddress] = useState("");
  const [displayValue, setDisplayValue] = useState();
  const willContractAddress = "0x24B1525F0061CA0c91bE9f966c41C652A9a8D383"; //The address of your own smart contract;
  useEffect(() => {
    const getAddress = async () => {
      if (signer) {
        const address = await signer.getAddress();
        setAddress(address);
      }
    };
    getAddress();
  }, [signer]);
  if (address) {
    console.log(address);
  }
  console.log(abi);
  const getContractKit = () => {
    if (signer) {
      const web3 = new Web3(window.celo);
      const kit = newKitFromWeb3(web3);
      return kit;
    }
  };
  const kit = getContractKit();
  console.log(kit);
  const getOwner = async () => {
    const kit = getContractKit();
    const contract = new kit.web3.eth.Contract(abi, willContractAddress);
    try {
      const owner = await contract.methods.getOwner().call();
      setDisplayValue(owner);
    } catch (error) {
      console.log(error);
    }
  };
  const getHeir = async () => {
    const kit = getContractKit();
    const contract = new kit.web3.eth.Contract(abi, willContractAddress);
    try {
      const heir = await contract.methods.getHeir().call();
      setDisplayValue(heir);
    } catch (error) {
      console.log(error);
    }
  };
  const getStatus = async () => {
    const kit = getContractKit();
    const contract = new kit.web3.eth.Contract(abi, willContractAddress);
    try {
      const status = await contract.methods.getIsAlive().call();
      console.log(status);
      setDisplayValue(status);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="mb-4 font-semibold text-2xl">
        Simple Will Smart Contract
      </h1>
      <ConnectButton />
      <div className="mt-8">
        <div className="bg-white border border-green-500 border-solid p-4 rounded-lg text-center">
          {displayValue ? displayValue : ""}
        </div>
        <div className="mt-4 grid grid-cols-3 gap-8">
          <button className="bg-red-400 py-2 px-4 text-white rounded-lg">
            Change Owner
          </button>
          <button className="bg-red-400 py-2 px-4 text-white rounded-lg">
            Set Heir
          </button>
          <button className="bg-red-400 py-2 px-4 text-white rounded-lg">
            Change Heir
          </button>
          <button className="bg-red-400 py-2 px-4 text-white rounded-lg">
            Change Deceased Status
          </button>
          <button
            onClick={getOwner}
            className="bg-green-400 py-2 px-4 text-white rounded-lg"
          >
            Owner
          </button>
          <button
            onClick={getHeir}
            className="bg-green-400 py-2 px-4 text-white rounded-lg"
          >
            Heir
          </button>
          <button
            onClick={getStatus}
            className="bg-green-400 py-2 px-4 text-white rounded-lg"
          >
            Status
          </button>
          <button className="bg-red-600 py-2 px-4 text-white rounded-lg">
            Transfer Inheritance
          </button>
        </div>
      </div>
    </div>
  );
}
export default App;

In the code above we have a UI that has the ConnectButton provided by @rainbow-me/rainbowkit rendered. This custom button allows us to connect to default crypto wallets provided by Celo and other crypto wallets .that support Celo.

The getOwner(), getHeir() and getStatus() are functions that are called when a user clicks a particular button. These functions connect with the smart contract we created and deployed to call the various methods we created in the smart contract.

Start up the React app by running this command in your terminal to view the Dapp

yarn start

Make sure the terminal points to the dapp folder before running the command.

This is how the Dapp should look when the application opens

Conclusion​

So far, we have been able to create a smart contract Dapp using React. We created the UI enabling a user to connect their wallet to the Dapp using Rainbowkit-celo. We also connected with the smart contract we deployed from the Dapp and called some of the methods we created in the smart contract.

Next Step​

If you wish to read more on rainbowkit and Rainbowkit-celo, check out these docs links:

• The Official Github Page of Rainbow-kit Celo
• Rainbow-kit Docs
• Github Repo

About the Author​

Israel Okunaya is an ace writer with a flair for simplifying complexities and a knack for storytelling. He leverages over four years of experience to meet the most demanding writing needs in different niches, especially food and travel, blockchain, and marketing. He sees blockchain as a fascinating yet tricky affair. So, he's given to simplifying its complexities with text and video tutorials.

Introduction​

Smart Contract Upgradability is a state whereby changes or upgrades to a smart contract do not affect its state and functionality. This functionality allows smart contracts to be easily managed and improved upon over time.

Just like the normal software development lifecycle, where the software needs to be maintained, scaled, and optimized even after building its underlying infrastructure, smart contracts should undergo such a process too because bugs and vulnerabilities can be discovered even after a contract has been deployed, need for improvements maybe as a result of changes from the underlying blockchain protocol. But keep in mind that the process of upgrading a smart contract should be done with adequate planning so as to avoid bringing vulnerability attacks to your contract.

In this tutorial, we will explore different methods of upgrading a smart contract and how to implement one of them in Solidity.

Prerequisites​

To understand this tutorial, you must be familiar with:

• Building Smart contracts
• Solidity
• Remix or Truffle

Requirements​

• Celo Testnet account
• Celo Wallet

Smart Contract Upgradability Approaches​

Smart contract upgradability has several approaches but we will explore 3 common approaches and highlight their pros and cons.

1. Proxy Contracts: Using the proxy contract approach, a new contract is created that acts as an intermediary between the client and the actual contract. The proxy contract refers to the current implementation contract and delegated all method calls to it. When an upgrade is required, a new implementation contract is deployed and the proxy contract is updated to point to the newly deployed implementation contract. This method allows for smooth upgrades without interfering with the contract's state or functionality.
2. Upgradeable Libraries: The approach of an upgradeable library entails creating a library contract with reusable functions and deploying it separately from the contract that uses it. The library contract contains only the necessary state variables and delegated all function calls to it. When an upgrade is required, a new library contract is deployed, and the contract that makes use of it is updated to point to the new library contract. This method encourages code reuse and reduces the amount of code that must be redeployed during upgrades.
3. Eternal Storage: The eternal storage method involves decoupling the state of the contract from its logic. The logic is stored in a contract that delegated all state-related operations to the storage contract. When an upgrade is required, a new logic contract is deployed and the storage contract is updated to point to the newly deployed logic contract. This method ensures that the state of the contract is preserved during upgrades.

Implementing an Upgradable Smart Contract on Celo​

The proxy contract approach will be used to demonstrate how to implement an upgradable contract on the Celo blockchain. We'll write a simple contract that keeps track of a counter and allows users to increment it. The contract will then be upgraded by adding a new function that resets the counter to zero.

Step1: Create a Proxy Contract​

The first step is to draft the proxy contract, which will serve as an intermediary between the client and the implementation contract. The proxy contract should keep a reference to the current implementation contract and delegate all method calls to it.

Create a new directory and put all the code examples in this tutorial in it.

mkdir upgrading-smart-contracts
cd upgrading-smart-contracts

Here is an example code:

Create a file called CounterProxy.sol and put the following example code in it:

CounterProxy.sol

pragma solidity ^0.8.0;

contract CounterProxy {
    address public implementation;

    constructor(address _implementation) {
        implementation = _implementation;
    }

    fallback() external payable {
        address _impl = implementation;
        assembly {
            let ptr := mload(0x40)
            calldatacopy(ptr, 0, calldatasize())
            let result := delegatecall(gas(), _impl, ptr, calldatasize(), 0, 0)
            let size := returndatasize()
            returndatacopy(ptr, 0, size)

            switch result
            case 0 { revert(ptr, size) }
            default { return(ptr, size) }
        }
    }
        receive() external  payable {

    }
}

In the code above, the constructor takes in the address of the implementation contract as argument. All method calls are delegated to the implementation contract via the fallback function. It accomplishes this by copying the method call data from the client's transaction and forwarding it to the implementation contract via a delegatecall function. The result of the call is returned to the client if it is successful. If the call fails, an exception is thrown, and the client's transaction is rolled back.

Step2: Create the Actual Implementation Contract​

The next step is to create the implementation contract which contains the actual logic of incrementing the counter by one.

Counter.sol

pragma solidity ^0.8.0;

contract Counter {
    uint256 public count;

    function increment() public {
        count++;
    }
}

The count variable is public and stores the current value of the counter and the increment function increases the counter by one.

Step3: Deploy the Proxy and Implementation Contract​

Next, deploy the proxy and implementation contract on the Celo blockchain. You can follow this tutorial on how to deploy a smart contract on Celo using Python.

After you have deployed the implementation contract, get its address and pass it to the constructor of the proxy contract.

The updated Proxy contract code to deploy:

CounterProxy.sol

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "./Counter.sol";

contract CounterProxy {
    address public implementation;

    constructor(address _implementation) {
        implementation = _implementation;
    }

    fallback() external payable {
        address _impl = implementation;
        assembly {
            let ptr := mload(0x40)
            calldatacopy(ptr, 0, calldatasize())
            let result := delegatecall(gas(), _impl, ptr, calldatasize(), 0, 0)
            let size := returndatasize()
            returndatacopy(ptr, 0, size)

            switch result
            case 0 { revert(ptr, size) }
            default { return(ptr, size) }
        }
    }

    function setImplementation(address _newImplementation) external {
        require(msg.sender == address(this), "Only the contract itself can call this function");
        implementation = _newImplementation;
    }



    receive() external  payable {

    }
}

In the code above, the "CounterFactory" contract includes a function called "createCounter," which generates a new instance of the "Counter" contract as well as a new instance of the "CounterProxy" contract. The "Counter" contract's address is passed to the "CounterProxy" contract's constructor. The function returns the address of the proxy contract. The “setImplementation” function sets the contract to implement the new contract address.

Step4: Upgrade the Implementation Contract​

The next step is to upgrade the implementation contract to include a new function that resets the counter to zero.

Counter.sol

pragma solidity ^0.8.0;

contract Counter {
    uint256 public count;

    function increment() public {
        count++;
    }

    function reset() public {
        count = 0;
    }
}

Step5: Upgrade the Proxy Contract​

The final step is to modify the proxy contract so that it points to the new implementation contract. We have to deploy a new instance of the implementation contract and update the proxy contract's "implementation" variable to point to the new contract address.

contract CounterFactory {
    function createCounter() public returns (address) {
        Counter counter = new Counter();
        CounterProxy proxy = new CounterProxy(address(counter));
        return address(proxy);
    }

    function upgradeCounter(address payable _proxy) public {
        Counter counter = new Counter();
        CounterProxy proxy = CounterProxy(_proxy);
        proxy.setImplementation(address(counter));
    }
}