Giter Club home page Giter Club logo

rsk-react-box's Introduction

RSK React Truffle Box

This box comes with everything you need to start using smart contracts from a react app on RSK Network. This box was ported and adapted from React Truffle Box to RSK.

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-App is generated in the client directory.

    npx truffle unbox rsksmart/react
  2. Alternatively, you can install Truffle globally and run the unbox command.

    npm install -g truffle
    truffle unbox rsksmart/react
  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 client 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 client
    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. Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.

    // ensure you are inside the client directory when running this
    npm run test
  8. To build the application for production, use the build script. A production build will be in the client/build folder.

    // ensure you are inside the client directory when running this
    npm run build

RSK

Setup an account & get RBTC

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 RBTC. 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. Run the development console for any RSK network.

    # Console for Mainnet
    truffle console --network mainnet
    
    # Console forn Testnet
    truffle console --network testnet
  4. 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

rsk-react-box's People

Contributors

adrianmcli avatar benjamincburns avatar bmmpxf avatar cgcardona avatar cruzmolina avatar eggplantzzz avatar gnidan avatar jonathansmirnoff avatar joshma91 avatar onlyonejmjq avatar zoyescreative avatar

Watchers

 avatar

Forkers

rsksmart

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.