Building and Deploying USDC-based Smart Contract

This workshop is targeted at developers who are transitioning from Web2 to Web3 or have just recently gotten into Web3 and are looking to have a well-rounded foundation.

Step 1

Let's ensure we have Node/NPM installed on our PC. If we don't have it installed, head over here for a guide.

Step 2

Let us Navigate to the Remix site and create a new file called UsdcDemo.sol.

Step 3

Update the UsdcDemo.sol file with the following code snippet.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

// Abstract
interface USDC {
    function balanceOf(address account) external view returns (uint256);
    function allowance(address owner, address spender) external view returns (uint256);
    function transfer(address recipient, uint256 amount) external returns (bool);
    function approve(address spender, uint256 amount) external returns (bool);
    function transferFrom(address sender, address recipient, uint256 amount) external returns (bool);
}

// Contract
contract UsdcDemo{

    USDC public USDc;

    // Contract Owner
    address payable public owner; 

    constructor(address usdcContractAddress) {

        USDc = USDC(usdcContractAddress);

        // User who is calling this function address
        owner = payable(msg.sender);
    }


    function Fund(uint $USDC) public payable {

        // Transfer USDC to this contract from the sender account
        USDc.transferFrom(msg.sender, address(this), $USDC * 10 ** 6);  


        // Transfer to the owner
        USDc.transfer(owner, $USDC * 10 ** 6);  
    }

    // Alternatively
    // receive() payable external {

    // Send the fund to the owner of the contract.
    //    owner.transfer(address(this).balance);
    //}      
}

In the code snippet above, we:

• Created an interface to utilize the function created on the main USDC smart contract
• Created a UsdcDemo contract
• Initialize the USDc variable from the interface created and also the contract owner
• Created the function Fund that accepts a parameter of the amount connected account is willing to fund. Inside this function, we utilized the transferFrom function from the interface to transfer the desired amount from the user to the contract, and then we sent it to the contract's owner using the transfer function.
• Added a receive function which does the automatic transfer of tokens deposited on the smart contract to the contracts' owner.

Step 4

Compile the USDC-based Smart Contract

Step 5

Deploy the USDC-based Smart Contract

Select the contract UsdcDemo we want to deploy, as shown below.

Next, paste the original USDC contract address 0x07865c6E87B9F70255377e024ace6630C1Eaa37F and click the Deploy button, as shown below.

Step 6

Building a Frontend Client with ReactJs

We will clone this project on GitHub to start the project setup and installation.

Next, we will launch the project locally after cloning it using the following command on our terminal.

cd usdcdemo-frontend && npm install && npm run dev

After cloning and installing the project, we should have something similar to what we have below:

Step 7

Update Project Smart Contract Address and Contract ABI

Please navigate to the Remix Site where we wrote and deployed the USDC-based smart. Copy the contract address and ABI as shown below.

Inside the frontend project, navigate to the utils folder and paste the Abi we copied into the contract.json file.

Next, copy the contract address on the Remix site as shown below.

Inside the index.js file under the pages folder, paste the contract address we just copied to replace the existing one, as shown below.

Step 8

Let's head over to our browser to test the application; we should be able to connect our wallet, Approve USDC and donate USDC to the smart contract/owner as shown below.

Kindly Check here for the live demo.

To follow up, you can find the entire code for this project here.

We have successfully wrote, test and deploy our contract. 🥳