Creating a full-stack DeFi app with Polygon

DeFi is now a serious matter of dialogue within the cryptocurrency house. DeFi stands for “Decentralized finance,” which implies that there’s no central authority maintaining a tally of and controlling the switch of funds. This additionally implies that transactions in DeFi are P2P (peer to look), which implies that no central authority is accountable for transferral, and funds are despatched instantly from one entity to a different.

On this article we are going to discover ways to get began with DeFi by making a full-stack DeFi app on the Polygon chain utilizing Subsequent.js because the frontend. This app will promote and buy OKToken (a fictional token) from the person. Nevertheless, each buy transaction reduces one token from the quantity of tokens you may get per MATIC (promoting will increase this quantity by one). This isn’t a great demonstration, however this manner you possibly can perceive methods to use your personal logic in Solidity good contracts and study to create your personal full-stack DeFi app utilizing Polygon.

Contents

Necessities

To get began with this tutorial, be sure to have the next:

Now that you’ve got checked the necessities, let’s proceed with creating our Hardhat venture to work with our Solidity smart contracts.

Making a Hardhat venture

Navigate to a protected listing and run the next command within the terminal to initialize your Hardhat venture:

npx hardhat

When you run the command, you need to see the next Hardhat initialization wizard in your terminal.

From the checklist, select Create a sophisticated pattern venture. Then you may be requested the place you need to initialize the Hardhat venture; don’t change the sphere, simply press Enter in order that the venture will get initialized within the present listing.

Then you may be requested whether or not or not you need to set up dependencies required in your Hardhat venture to run. Press y as a result of we will probably be needing these dependencies, and putting in them proper now could be the most effective concept.

Set up of dependencies will begin, and would possibly take just a few seconds or minutes relying upon the machine you’re working. Now, run the next command within the terminal to put in one other dependency we might want to ease our Solidity contract growth:

npm set up @openzeppelin/contracts

OpenZeppelin supplies good contract requirements that we will use in our personal good contracts to simply create an Ownable, ERC-20 and ERC-721 contracts, and extra.

As soon as the dependencies are efficiently put in, open the listing in a code editor. I’ll be utilizing VS Code for this tutorial.

We will probably be creating two good contracts: the primary one will probably be our ERC-20 token itself and the second will probably be a vendor contract, which can facilitate shopping for and promoting of those tokens.

Creating our good contracts

Now, go to the contracts folder and create a brand new Solidity file named OKToken.sol, which can include our ERC-20 token contract.

Use the next code for this file:

// SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.4;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract OKToken is ERC20 {
    constructor() ERC20("OKT", "OKToken"){
        _mint(msg.sender, 10000 * 10 ** 18);
    }
}

Within the above code, we’re importing the ERC20.sol file from @openzeppelin/contracts which can assist us get began with an ERC-20 token simply. Then, within the constructor, we’re offering the image "OKT" and identify "OKToken" for our token.

That’s all for the token contract! Now, let’s work on the seller contract. Beneath the contracts folder, create a brand new file named OKVendor.sol with the next code:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;
import "./OKToken.sol";
import "@openzeppelin/contracts/entry/Ownable.sol";

contract OKVendor is Ownable {
  OKToken yourToken;
  uint256 public tokensPerNativeCurrency = 100;
  occasion BuyTokens(deal with purchaser, uint256 amountOfNativeCurrency, uint256 amountOfTokens);
  constructor(deal with tokenAddress) {
    yourToken = OKToken(tokenAddress);
  }

  perform buyTokens() public payable returns (uint256 tokenAmount) {
    require(msg.worth > 0, "You could ship some NativeCurrency to proceed");
    uint256 amountToBuy = msg.worth * tokensPerNativeCurrency;

    uint256 vendorBalance = yourToken.balanceOf(deal with(this));
    require(vendorBalance >= amountToBuy, "Vendor contract has not sufficient tokens to carry out transaction");

    (bool despatched) = yourToken.switch(msg.sender, amountToBuy);
    require(despatched, "Didn't switch token to person");
    tokensPerNativeCurrency = tokensPerNativeCurrency - 1;

    emit BuyTokens(msg.sender, msg.worth, amountToBuy);
    return amountToBuy;
  }
  perform sellTokens(uint256 tokenAmountToSell) public {

    require(tokenAmountToSell > 0, "Specify an quantity of token higher than zero");

    uint256 userBalance = yourToken.balanceOf(msg.sender);
    require(userBalance >= tokenAmountToSell, "You may have inadequate tokens");

    uint256 amountOfNativeCurrencyToTransfer = tokenAmountToSell / tokensPerNativeCurrency;
    uint256 ownerNativeCurrencyBalance = deal with(this).stability;
    require(ownerNativeCurrencyBalance >= amountOfNativeCurrencyToTransfer, "Vendor has inadequate funds");
    (bool despatched) = yourToken.transferFrom(msg.sender, deal with(this), tokenAmountToSell);
    require(despatched, "Didn't switch tokens from person to vendor");

    (despatched,) = msg.sender.name{worth: amountOfNativeCurrencyToTransfer}("");
    tokensPerNativeCurrency = tokensPerNativeCurrency + 1;
    require(despatched, "Didn't ship NativeCurrency to the person");
  }
  perform getNumberOfTokensInNativeCurrency() public view returns(uint256) {
    return tokensPerNativeCurrency;
  }

  perform withdraw() public onlyOwner {
    uint256 ownerBalance = deal with(this).stability;
    require(ownerBalance > 0, "No NativeCurrency current in Vendor");
    (bool despatched,) = msg.sender.name{worth: deal with(this).stability}("");
    require(despatched, "Didn't withdraw");
  }
}

This can assist us facilitate the shopping for and promoting of tokens.

Within the above contract, first we’re importing our token contract, which we want in an effort to work together with our token contract utilizing the seller contract and name features.

We’re additionally importing Ownable.sol from @openzeppelin/contracts. Because of this the proprietor of the good contract can switch its possession and have entry to owners-only features.

After initializing the good contract, we outline the variable tokensPerNativeCurrency which states the variety of tokens which might be bought utilizing 1 MATIC. We will probably be altering this quantity based mostly on the transactions made.

We then have a constructor which can take OKToken’s contract deal with in order that we will talk with the deployed contract and carry out features on them.

Within the buyTokens() perform, we’re performing checks to make sure the correct quantity of MATIC is shipped to the good contract, and that the seller contract has the required quantity of tokens. Then we name the perform switch() from the OKToken occasion we beforehand created to switch the tokens to the request sender.

Within the sellTokens() perform, we’re performing checks to make sure that the request sender has sufficient tokens and if the seller contract has sufficient MATIC to ship again to the request sender. Then, we use the transferFrom() perform from the OKToken occasion we beforehand created to switch the tokens from the request sender’s pockets to the good contract. Nevertheless, the sender must approve this transaction; we carry out this approval on the consumer aspect earlier than making the request. We are going to cowl this half after we make the entrance finish of this software.

Lastly, now we have the withdraw() perform, which is barely accessible by the proprietor of the contracts. It permits them to withdraw all of the MATIC current on the contract.

Now that now we have the good contracts prepared, let’s deploy them to Polygon Mumbai testnet!

Deploying our good contracts

We will probably be making a script to deploy our contract to Polygon Mumbai. As soon as the contracts are deployed, we are going to programmatically ship all of the tokens saved on the deployer’s pockets to the seller contract.

First go to hardhat.config.js and underneath module.exports, add the next object in order that Hardhat is aware of which community to connect with:

networks: {
  mumbai: {
    url: "https://matic-mumbai.chainstacklabs.com",
    accounts: ["PRIVATE KEY HERE"],
  }
}

We’re offering the community a reputation (mumbai on this case) and offering an RPC URL. The talked about RPC URL is for Polygon Mumbai. If you wish to use Polygon Mainnet you possibly can choose your RPC URL. Keep in mind to enter your personal pockets non-public key with some take a look at MATIC to pay for fuel charges concerned within the good contract deployment course of.

Now, underneath the scripts folder, create a brand new file referred to as deploy.js. Paste within the following:

const { BigNumber, utils } = require("ethers");
const hardhat = require("hardhat");
async perform major() {
  const OKToken = await hardhat.ethers.getContractFactory("OKToken");
  const oktoken = await OKToken.deploy();
  await oktoken.deployed();
  console.log("[📥] OKToken deployed to handle: " + oktoken.deal with);
  const OKVendor = await hardhat.ethers.getContractFactory("OKVendor");
  const okvendor = await OKVendor.deploy(oktoken.deal with);
  console.log("[📥] OKVendor deployed to handle: " + okvendor.deal with);
  await oktoken.deployed();
  // Switch oktokens to vendor
  await oktoken.features.switch(okvendor.deal with, utils.parseEther("10000"));
  console.log("[🚀] Tokens transferred to OKVendor");
}
major()
  .then(() => course of.exit(0))
  .catch((error) => {
    console.error(error);
    course of.exit(1);
});

Within the above file, we’re instructing Hardhat methods to deploy our contract. The major() perform is the entry level right here. First, we get the OKToken contract and deploy it. Then, we get the OKVendor contract, present OKToken contract deal with within the constructor, and deploy the contract. Then, we switch all of the funds from OKToken contract to OKVendor contract.

Run the next command within the terminal to run the script and deploy our contracts to the Polygon Mumbai community:

npx hardhat run --network mumbai scripts/deploy.js --show-stack-traces

Notice that the community identify should match the one talked about in hardhat.config.js. After working the script, the contracts must be deployed and you need to see the next in your terminal:

For those who see an output just like this, your good contracts have been deployed and configured efficiently. Now, let’s proceed with creating our Subsequent.js software.

Making a Subsequent.js DeFi app

Beneath the identical listing, run the next command within the terminal to create your Subsequent.js app:

npx create-next-app frontend

The above command will create a brand new app and routinely set up vital dependencies.

Navigate to the frontend folder and use the next command within the terminal to put in further dependencies, which can assist us work together with our good contracts:

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers web3

We’re putting in @thirdweb-dev/react and @thirdweb-dev/sdk in order that we will simply authenticate the person and join their wallets to our app utilizing MetaMask. ethers is a required dependency for thirdweb so we have to set up that as nicely. Lastly, we’re putting in web3 in order that we will work together with our good contract.

Including the thirdweb supplier

To get began, we have to wrap our app inside a thirdwebProvider in order that thirdweb can perform correctly.

Go to your _app.js file underneath pages folder and add within the following:

import { thirdwebProvider, ChainId } from "@thirdweb-dev/react";
import "../kinds/globals.css";
perform MyApp({ Element, pageProps }) {
  return (
    <thirdwebProvider desiredChainId={ChainId.Mumbai}>
      <Element {...pageProps} />
    </thirdwebProvider>
  );
}
export default MyApp;

Within the above code, we’re importing thirdwebProvider and enclosing our app inside it. We’re additionally offering a desiredChainId of the chain ID of Polygon Mumbai. You can even use the chain ID for Polygon Mainnet if you want to take action.

Create a brand new file in your Subsequent.js app root referred to as contracts.js and add the next content material:

export const oktoken = {
  contractAddress: "0xE83DD81890C76BB8c4b8Bc6365Ad95E5e71495E5",
  abi: [
    {
      inputs: [],
      stateMutability: "nonpayable",
      kind: "constructor",
    },
    {
      nameless: false,
      inputs: [
        {
          indexed: true,
          internalType: "address",
          name: "owner",
          type: "address",
        },
        {
          indexed: true,
          internalType: "address",
          name: "spender",
          type: "address",
        },
        {
          indexed: false,
          internalType: "uint256",
          name: "value",
          type: "uint256",
        },
      ],
      identify: "Approval",
      kind: "occasion",
    },
    {
      nameless: false,
      inputs: [
        {
          indexed: true,
          internalType: "address",
          name: "from",
          type: "address",
        },
        {
          indexed: true,
          internalType: "address",
          name: "to",
          type: "address",
        },
        {
          indexed: false,
          internalType: "uint256",
          name: "value",
          type: "uint256",
        },
      ],
      identify: "Switch",
      kind: "occasion",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "owner",
          type: "address",
        },
        {
          internalType: "address",
          name: "spender",
          type: "address",
        },
      ],
      identify: "allowance",
      outputs: [
        {
          internalType: "uint256",
          name: "",
          type: "uint256",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "spender",
          type: "address",
        },
        {
          internalType: "uint256",
          name: "amount",
          type: "uint256",
        },
      ],
      identify: "approve",
      outputs: [
        {
          internalType: "bool",
          name: "",
          type: "bool",
        },
      ],
      stateMutability: "nonpayable",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "account",
          type: "address",
        },
      ],
      identify: "balanceOf",
      outputs: [
        {
          internalType: "uint256",
          name: "",
          type: "uint256",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "decimals",
      outputs: [
        {
          internalType: "uint8",
          name: "",
          type: "uint8",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "spender",
          type: "address",
        },
        {
          internalType: "uint256",
          name: "subtractedValue",
          type: "uint256",
        },
      ],
      identify: "decreaseAllowance",
      outputs: [
        {
          internalType: "bool",
          name: "",
          type: "bool",
        },
      ],
      stateMutability: "nonpayable",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "spender",
          type: "address",
        },
        {
          internalType: "uint256",
          name: "addedValue",
          type: "uint256",
        },
      ],
      identify: "increaseAllowance",
      outputs: [
        {
          internalType: "bool",
          name: "",
          type: "bool",
        },
      ],
      stateMutability: "nonpayable",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "identify",
      outputs: [
        {
          internalType: "string",
          name: "",
          type: "string",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "image",
      outputs: [
        {
          internalType: "string",
          name: "",
          type: "string",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "totalSupply",
      outputs: [
        {
          internalType: "uint256",
          name: "",
          type: "uint256",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "to",
          type: "address",
        },
        {
          internalType: "uint256",
          name: "amount",
          type: "uint256",
        },
      ],
      identify: "switch",
      outputs: [
        {
          internalType: "bool",
          name: "",
          type: "bool",
        },
      ],
      stateMutability: "nonpayable",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "from",
          type: "address",
        },
        {
          internalType: "address",
          name: "to",
          type: "address",
        },
        {
          internalType: "uint256",
          name: "amount",
          type: "uint256",
        },
      ],
      identify: "transferFrom",
      outputs: [
        {
          internalType: "bool",
          name: "",
          type: "bool",
        },
      ],
      stateMutability: "nonpayable",
      kind: "perform",
    },
  ],
};
export const okvendor = {
  contractAddress: "0xAa3b8cbB24aF3EF68a0B1760704C969E57c53D7A",
  abi: [
    {
      inputs: [
        {
          internalType: "address",
          name: "tokenAddress",
          type: "address",
        },
      ],
      stateMutability: "nonpayable",
      kind: "constructor",
    },
    {
      nameless: false,
      inputs: [
        {
          indexed: false,
          internalType: "address",
          name: "buyer",
          type: "address",
        },
        {
          indexed: false,
          internalType: "uint256",
          name: "amountOfNativeCurrency",
          type: "uint256",
        },
        {
          indexed: false,
          internalType: "uint256",
          name: "amountOfTokens",
          type: "uint256",
        },
      ],
      identify: "BuyTokens",
      kind: "occasion",
    },
    {
      nameless: false,
      inputs: [
        {
          indexed: true,
          internalType: "address",
          name: "previousOwner",
          type: "address",
        },
        {
          indexed: true,
          internalType: "address",
          name: "newOwner",
          type: "address",
        },
      ],
      identify: "OwnershipTransferred",
      kind: "occasion",
    },
    {
      inputs: [],
      identify: "buyTokens",
      outputs: [
        {
          internalType: "uint256",
          name: "tokenAmount",
          type: "uint256",
        },
      ],
      stateMutability: "payable",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "getNumberOfTokensInNativeCurrency",
      outputs: [
        {
          internalType: "uint256",
          name: "",
          type: "uint256",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "proprietor",
      outputs: [
        {
          internalType: "address",
          name: "",
          type: "address",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "renounceOwnership",
      outputs: [],
      stateMutability: "nonpayable",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "uint256",
          name: "tokenAmountToSell",
          type: "uint256",
        },
      ],
      identify: "sellTokens",
      outputs: [],
      stateMutability: "nonpayable",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "tokensPerNativeCurrency",
      outputs: [
        {
          internalType: "uint256",
          name: "",
          type: "uint256",
        },
      ],
      stateMutability: "view",
      kind: "perform",
    },
    {
      inputs: [
        {
          internalType: "address",
          name: "newOwner",
          type: "address",
        },
      ],
      identify: "transferOwnership",
      outputs: [],
      stateMutability: "nonpayable",
      kind: "perform",
    },
    {
      inputs: [],
      identify: "withdraw",
      outputs: [],
      stateMutability: "nonpayable",
      kind: "perform",
    },
  ],
};

Keep in mind to exchange the contract addresses with your personal in order that the Subsequent.js app tries to connect with the proper good contract.

Now let’s begin coding up our app. Open index.js file underneath pages folder and add the next:

import { useAddress, useContract, useMetamask } from "@thirdweb-dev/react";
import Head from "subsequent/head";
import Picture from "subsequent/picture";
import { oktoken, okvendor } from "../contracts";
import kinds from "../kinds/Residence.module.css";
import { useEffect, useState } from "react";
import Web3 from "web3";
const web3 = new Web3(Web3.givenProvider);
export default perform Residence() {
  const [tokensPerCurrency, setTokensPerCurrency] = useState(0);
  const [tokens, setTokens] = useState(0);
  const deal with = useAddress();
  const connectUsingMetamask = useMetamask();
  const account = web3.defaultAccount;
  const buy = async () => {
    const contract = new web3.eth.Contract(
      okvendor.abi,
      okvendor.contractAddress
    );
    const ethToSend = tokens / tokensPerCurrency;
    const buy = await contract.strategies.buyTokens().ship({
      from: deal with,
      worth: web3.utils.toWei(ethToSend.toString(), "ether"),
    });
    console.log(buy);
    await fetchPrice();
  };
  const promote = async () => {
    const vendorContract = new web3.eth.Contract(
      okvendor.abi,
      okvendor.contractAddress
    );
    const tokenContract = new web3.eth.Contract(
      oktoken.abi,
      oktoken.contractAddress
    );
    const approve = await tokenContract.strategies
      .approve(
        okvendor.contractAddress,
        web3.utils.toWei(tokens.toString(), "ether")
      )
      .ship({
        from: deal with,
      });
    const sellTokens = await vendorContract.strategies.sellTokens(tokens).ship({
      from: deal with,
    });
    await fetchPrice();
  };
  const fetchPrice = async () => {
    const contract = new web3.eth.Contract(
      okvendor.abi,
      okvendor.contractAddress
    );
    const priceFromContract = await contract.strategies
      .getNumberOfTokensInNativeCurrency()
      .name();
    setTokensPerCurrency(priceFromContract);
  };
  useEffect(() => {
    fetchPrice();
  }, []);
  return (
    <div>
      <Head>
        <title>Trade OKTokens</title>
      </Head>
      {deal with ? (
        <div>
          <p>Tokens per foreign money: {tokensPerCurrency}</p>
          <div>
            <enter
              kind="quantity"
              worth={tokens}
              onChange={(e) => setTokens(e.goal.worth)}
            />
          </div>
          <button onClick={buy}>Buy</button>
          <button onClick={promote}>Promote</button>
        </div>
      ) : (
        <div>
          <button onClick={connectUsingMetamask}>Join utilizing MetaMask</button>
        </div>
      )}
    </div>
  );
}

This can be a lengthy code block, so let’s see what the code is doing step-by-step:

• Initializing the web3 bundle utilizing a supplier arrange by thirdweb
• Utilizing thirdweb hooks useMetamask() to authenticate and useAddress() to examine authentication state, then rendering the login button if the person doesn’t have pockets related utilizing MetaMask
• Setting varied states to map textual content bins in our app
• Making a fetchPrice() perform to work together with our good contract and examine what number of tokens one MATIC can get, whereas additionally creating an useEffect to examine this value each time the web page masses
• Making a buy() perform, which initializes our vendor contract and calls the buyTokens() perform from the contract, then sending some MATIC together with this transaction. Then, we name fetchPrice() in order that the most recent value is proven

Lastly, we’re making a promote() perform, which initializes each token and vendor contract. First we work together with token contract’s approve() perform and permit the seller contract to switch funds on our behalf. We then are calling sellTokens() perform from the seller contract to lastly promote the tokens and obtain MATIC. We’re additionally calling fetchPrice() to get the most recent value after transaction.

Our easy DeFi app is full! You’ll be able to view this app in your browser by working the next command:

yarn dev

Now when you go to http://localhost:3000, you need to see the next display, and you need to have the ability to make transactions.

Conclusion

This was a easy tutorial on methods to create your personal full-stack DeFi app based mostly on Polygon. You’ll be able to implement your personal logic on the good contracts to make it even higher relying in your group. I counsel tinkering round with the code so as to study in the easiest way potential.