Join our Webinars! Now you can watch and learn more about Blockchain!

Truffle Box (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.

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
```

Alternatively, you can install Truffle globally and run the unbox command.

 npm install -g truffle
 truffle unbox rsksmart/rsk-react-express-box

Run the development console.
```
 truffle develop
```
Compile and migrate the smart contracts. Note inside the development console we don’t preface commands with truffle.
```
 compile
 migrate
```
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
```
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
```
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

Get an address using these instructions.
For the RSK Testnet, get tR-BTC from our faucet.
For the RSK Mainnet, get R-BTC from an exchange.

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:

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}'

Find in the result the field minimumGasPrice

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

Connect to RSK

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.
Check the gas price of the network, and update truffle-config.js if necessary.

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");