Skip to content

README.md

Latest commit

 

History

History
154 lines (112 loc) · 7.27 KB

README.md

File metadata and controls

154 lines (112 loc) · 7.27 KB
Raw

BNB React-Dapp step-by-step Tutorial

Start Tutorial

  1. Recieve tBNB from the test-net faucet

  2. Write your smart contract, and deploy using Remix IDE

    • Save your contract's deployment contract address.
    • Same for the ABI code.

  3. Create a folder in your workspace directory.

    • Run $npm install create-react-app bnb-react-dapp-tutorial
    • Run $npm install --save ethers
    • Run $npm start

  4. Import ethers library into app.js at the top of your application's script.

import {ethers} from 'ethers';

  1. Import your ABI from Remix into a json file under you src directory and save

    • ("ContractNameABI.json") ABI

  2. Import your Contract's ABI into App.js

import contractABI from './ContractName.json';
  1. Import the deployed contract's address into App.js
const contractAddress = '0x....3837837';
  1. We will use a wallet to connect to the RPC BNB Test Network. Then, we'll create a smart contract and use it to receive a greeting message back to our function. Additionally, we'll add a test case for further confirmation
  • Import following code into App.js
const loadData = async () => { 
  const provider = new ethers.providers.JsonRpcProvider('https://data-seed-prebsc-1-s1.binance.org:8545');
  const contract = new ethers.Contract(contractAddress, contractABI, provider);
  const greeting = await contract.hello(); // name of function in solidity contract
  alert(greeting);
}

Open Local Host to see the End Result

display

Time to Fix bugs

  1. You should be able to run the dApp, but you may have already encountered some issues.
  • Make sure you have Yarn installed using :
    • yarn install
  • If the ethers library is not working, it's most likely because the version of the ethers library you are attempting to use is out of date, to fix this, try this:
    • Run $yarn remove ethers
    • Run $yarn add ethers@5.6.9 -- or another version

This is a temporary solution to complete the tutorial. However, it's important to note that you can choose different ethers dependencies depending on your specific build. Keep in mind that installing necessary dependencies carries some risks. To determine which version of the ethers library you should install, check the node package manager and yarn.

App.js Full Example Code

code-example

BNB React dApp Challenge

The objective of this tutorial is to create an application using React or any other framework of your choice using the provided contract ABI and deployed contract addresses.

The BNB 'Give Forever' Challenge 💝

Your challenge is to design an application that performs the following operations:

  1. Swap tBNB testnet tokens for WrappedBNB (WBNB).
  2. Swap BNB for CAKE2 tokens using the PancakeSwap routing contract.
  3. Enable CAKE2-BUSD token pairing, stake both tokens, and harvest Cake2 token.
  4. Allow the contract to automatically harvest Cake2 tokens and swap them for tBNB in a unique and interesting way.
  5. The contract should automatically send tBNB to the BNB CHAIN Charity Wallet.

BNB Charity Wallet Address : 0x8B99F3660622e21f2910ECCA7fBe51d654a1517D

Summary: Staked CAKE2-BUSD tokens will be converted to CAKE2, which will then be swapped for BNB and sent to charity.

Your application should be able to execute all of these tasks smoothly and efficiently.

Good luck Hackers!

  • Be Sure to Fork 🍴 and leave a Star ⭐
  • Create a pull-request & submit your app to show off your hacking skills !

Charity

Testing Smart Contracts 💯

In this tutorial we recommend using pancake purely as an example scenario. You are welcome to use any set of contracts you'd like.

TEST-NET 'ENABLE' TOKEN CONTRACTS (OPTIONAL)

Enable BUSD

contract : 0xaB1a4d4f1D656d2450692D237fdD6C7f9146e814

Enable PANCAKESWAP CAKE

contract : 0xFa60D973F7642B748046464e165A65B7323b0DEE

Enable CAKE2

contract : 0x8d008B313C1d6C7fE2982F62d32Da7507cF43551

Enable CAKE2 and BUSD Contract for deposit into farm

contract : 0x427bf5b37357632377ecbec9de3626c71a5396c1

3 TEST-NET SWAPS

  1. Swap BNB to CAKE2
  2. Wrap BNB to WBNB
  3. Swap WBNB to BUSD

TEST-NET POSITION

  1. 'ADD' CAKE2-BUSD with LP Contract (2 tx's) ' Add ' contract : 0x427bf5b37357632377ecbec9de3626c71a5396c1

  2. 'Stake' CAKE2-BUSD with v3 Router Contract (1 tx) ' Stake ' contract : 0x427bF5b37357632377eCbEC9de3626C71A5396c1

  3. Harvest CAKE2 from CAKE2-BUSD stake ^ (1 tx) ' Harvest ' contract : 0x4c650fb471fe4e0f476fd3437c3411b1122c4e3b

  4. Swapping CAKE2 to BNB PancakeSwap Contracts + txHash's

  5. GOAL : Send BNB Charity Contract Wallet Address Charity Wallet Address : 0x8B99F3660622e21f2910ECCA7fBe51d654a1517D

liquidity-pool