How To Build Your First DeFi DApp

This article is the second part in a series of articles creating DApps that have awesome user experiences. It is recommended to read the first part of this series before diving into DeFi DApp development

Part 1: How to build a DApp

- build your first DApp on Ethereum

Part 3 : How to integrate meta transactions in a DeFi DApp

-integrate gasless transactions in your DApp or DeFi DApp

What’s DeFi?

Decentralized Finance (DeFi) aims to provide a suite of globally accessible financial tools and services like savings, loans, insurance and more to anyone in the world.

In a nutshell, DeFi, also known as Open Finance, deals with new forms of money and value built on public blockchains.

For the sake of simplicity, this DApp deposits ether into compound finance and gets cEth tokens in return, deployed on Kovan Network.

What’s Compound Finance Protocol?

Compound is an algorithmic, autonomous interest rate protocol built for developers, to unlock a universe of open financial applications. By allowing the creation of money markets on Ethereum, Individuals are able to earn interest on digital assets that they supply to the protocol.

Prerequisites

• Javascript
• Basic Solidity

Smart Contract

It is recommended to use Remix to create and deploy smart contracts quickly

Note : To learn more about Remix and how to use it, refer to the first article of this series

Declare compiler version

pragma solidity ^0.5.0;

Declare contract statement

contract Zap {}

Declare your interface

Interface lets a smart contract call other smart contracts

interface CtokenInterface {
  function mint() external payable;
  function transfer(address, uint256) external returns (bool);
  function balanceOf(address owner) external view returns (uint256);
}

Declare an instance of cEth

address cEthAddress = 0xf92FbE0D3C0dcDAE407923b2Ac17eC223b1084E4;
CtokenInterface cEth = CtokenInterface(cEthAddress);

Deposit Function

mints cEth and stores it in the contract

function deposit() external payable {
  cEth.mint.value(msg.value)();
}

Complete Code Snippet For Smart Contract

Deploy the contract on kovan network and copy the contract address and ABI.

Client Side

Install web3

npm install web3
const Web3 =  require("web3");

Declare Contract Address

const contractAddress = "0x722870Eca028c681994c4d82DA3b82f1263Ca07e";

Declare Contract Abi

const contractAbi = [{"constant":true,"inputs":[{"internalType":"address","name":"owner","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"internalType":"address","name":"","type":"address"},{"internalType":"uint256","name":"","type":"uint256"}],"name":"transfer","outputs":[{"internalType":"bool","name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"}]

Form a Contract

const myContract = new web3.eth.Contract(contractAbi, contractAddress);

Send Transaction to Smart Contract

depositing 1 ether into compound

(function deposit(){await myContract.methods.deposit().send({
  from : window.ethereum.selectedAddress,
  value : 1000000000000000000})
})();

Complete Code Snippet For Front End

After making the changes, on reload, a metamask transaction would pop up to send the transaction

after confirming the metamask popup,the transaction should look like this

Final Transaction on Etherscan

What’s Next?

The requisite for the users to pay for gas fees on each transaction to the blockchain hampers the user experience of a DApp. Head over to our next article to integrate gasless or meta transactions and offer a smoother UX for your DApp

Article 3 : How to Integrate Native Meta Transactions in your DeFi Dapp

External Links

Remix IDE

Solidity

web3