Rsk react-express box

RSK React + Express JS Box

This box comes with everything you need to start using smart contracts from a react app and express JS on RSK Network.

Installation

First ensure you are in a new and empty directory.

  1. Run the unbox command via npx and skip to step 3. This will install all necessary dependencies. A Create-React-Express-App is generated in the app directory.
    npx truffle unbox rsksmart/rsk-react-express-box
    
  2. Alternatively, you can install Truffle globally and run the unbox command.
     npm install -g truffle
     truffle unbox rsksmart/rsk-react-express-box
    
  3. Run the development console.
     truffle develop
    
  4. Compile and migrate the smart contracts. Note inside the development console we don’t preface commands with truffle.
     compile
     migrate
    
  5. In the app directory, we run the React app. Smart contract changes must be manually recompiled and migrated.
     // in another terminal (i.e. not in the truffle develop prompt)
     cd app
     npm run start
    
  6. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you’re in or outside of the development console.
     // inside the development console.
     test
    
     // outside the development console..
     truffle test
    
  7. To build the application for production, use the build script. A production build will be in the app/dist folder. ```javascript // ensure you are inside the client directory when running this npm run build

RSK

Setup an account & get R-BTC

Setup the gas price

Gas is the internal pricing for running a transaction or contract. When you send tokens, interact with a contract, send RBTC, or do anything else on the blockchain, you must pay for that computation. That payment is calculated as gas. In RSK, this is paid in R-BTC. The minimumGasPrice is written in the block header by miners and establishes the minimum gas price that a transaction should have in order to be included in that block.

To get the minimumGasPrice do the following steps:

  1. Run this query using cURL:

    Mainnet

     curl https://public-node.rsk.co/ \
         -X POST -H "Content-Type: application/json" \
         --data '{"jsonrpc":"2.0","method":"eth_getBlockByNumber","params":["latest",false],"id":1}'
    

    Testnet

     curl https://public-node.testnet.rsk.co/ \
         -X POST -H "Content-Type: application/json" \
         --data '{"jsonrpc":"2.0","method":"eth_getBlockByNumber","params":["latest",false],"id":1}'
    
  2. Find in the result the field minimumGasPrice

For more information about the Gas and minimumGasPrice please go here.

Connect to RSK

  1. Copy your mnemonic to truffle-config.js

     // truffle-config.json
    
     const HDWalletProvider = require('@truffle/hdwallet-provider');
    
     //Put your mnemonic here, be careful not to deploy your mnemonic into production!
     const mnemonic = 'A_MNEMONIC';
    

    Please be aware that we are using HDWalletProvider with RSK Networks derivations path:

    • RSK Mainnet dpath: m/44’/137’/0’/0
    • RSK Testnet dpath: m/44’/37310’/0’/0

    For more information check RSKIP57.

  2. Check the gas price of the network, and update truffle-config.js if necessary.

  3. Check Express JS component. If you want to connect the server to RSK Network, update line 11 of app/src/server/index.js Mainnet
     const provider = new Web3.providers.HttpProvider("https://public-node.rsk.co");
    

    Testnet

     const provider = new Web3.providers.HttpProvider("https://public-node.testnet.rsk.co");    
    
  4. Run the development console for any RSK network.

     # Console for Mainnet
     truffle console --network mainnet
    
     # Console forn Testnet
     truffle console --network testnet
    
  5. Compile and migrate the smart contracts. Note that inside the development console, we don’t preface commands with truffle.

     compile
     migrate
    

Then continue from step 5 of installation steps