Skip to content

Instantly share code, notes, and snippets.

@Olanetsoft
Last active December 9, 2022 00:31
Show Gist options
  • Save Olanetsoft/5058fb382819f293d07076eeda777b1a to your computer and use it in GitHub Desktop.
Save Olanetsoft/5058fb382819f293d07076eeda777b1a to your computer and use it in GitHub Desktop.
Mara Blockchain Masterclass - Web3 developer Roadshow

Building and Deploying USDC-based Smart Contract

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.

Navigate to Remix

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 Compile the USDC-based Smart Contract

Step 5

Deploy the USDC-based Smart Contract Deploy the USDC-based Smart Contract

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

Deploy the USDC-based Smart Contract - Select Injector

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

Deploy the USDC-based Smart Contract - Deploy

Deploy the USDC-based Smart Contract - Result

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:

Cloning and installing a react project

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.

Update Project Smart Contract Address and Contract ABI

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.

Copy the contract address on the Remix site

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

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.

USDC Smart contract demo

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. 🥳

@Brian-afkenya
Copy link

Very useful 👍

@Olanetsoft
Copy link
Author

Very useful 👍

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment