Index
b'# RSK Next JS Box\n\nThis box comes with everything you need to start using smart contracts from a react app and [Next JS](https://nextjs.org/) on [RSK Blockchain](https://developers.rsk.co/rsk/).\nIt includes network configurations for Mainnet, Testnet and the SimpleStorage contract as an example to deploy.\n\n## Requirements\n\n1. [NPM (Node Package Manager)](https://nodejs.org/en/)\nNode.js and NPM are needed, though both are usually installed at once.\n\nGo to [Node.js](https://nodejs.org/en/) if you need to install it.\n\n2. Truffle\n\nInstall Truffle globally:\n\n```shell\nnpm install -g truffle\n```\n\n## Installation\n\n1. Create a new folder.\nFor example, create the folder `rsk-next`.\nNavigate to the folder in the terminal.\n\n```shell\nmkdir rsk-next\ncd rsk-next\n```\n\n2. Run the unbox command. It can take some time, as this will install all necessary dependencies.\n\n```shell\ntruffle unbox rsksmart/rsk-next-box\n```\n\nA Create-React-Next-App is generated in the `app` directory.\n\nThis is the result using Windows OS:\n\n\n\n## Development console\n\nTruffle has an interactive console that also spawns a development blockchain. This is very useful for compiling, deploying and testing locally.\n\n3. Run the development console. This command is successful if you see a list of 10 accounts, a mnemonic and the command prompt is now `truffle(develop)>`\n\n```shell\ntruffle develop\n```\n\nYou will now be in the truffle develop REPL with seeded accounts and their associated private keys listed.\n\n```txt\nC:\\RSK\\rsk-next>truffle develop\n\nTruffle Develop started at http://127.0.0.1:8545/\n\nAccounts:\n(0) 0x1056f747cf4bc7710e178b2aeed4eb8c8506c728\n(1) 0x45a71c00382c2898b5d6fae69a6f7bfe6edab80c\n(2) 0x1596384706dc9ac4cca7f50279a4abe591d6c3fe\n(3) 0x9576d0a496b645baa64f22aceb2328e7468d4113\n(4) 0xd431572eef7d77584d944c1809398a155e89f830\n(5) 0x92c111839718fe0800fadccc67068b40b8524a0f\n(6) 0x6da22b5a027146619bfe6704957f7f36ff029c48\n(7) 0x2c3a82d8c3993f8c80dcaf91025437bd057df867\n(8) 0xc43ae7a44f7deb759177b7093f06512a0a9ff5d7\n(9) 0xe61bf00cd7dce248449cfe58f23a4ef7d542bc0b\n\nPrivate Keys:\n(0) f32f32839fe27ad906b63eafb326f26fed95c231e3c5e33c7cdd08f62db63167\n(1) ebef990088f27f6ef13b5e52a77d5dcc5a76862a701908c586d01b6fe93562b3\n(2) 598ccae5e4436fedeb0e798c0d254789c55a63401ebfc3ae8ddde29634ddfcde\n(3) 09934b80f391e0024b8cb00cd73790fdf64c4d0509e144766414fee317cd3f4e\n(4) ac745b84b6574b5738d364b43e0d471c9d5107504acc709c90f6f091b78c751b\n(5) 449654cde095f2349113ef12a93e139b4302bc95adb3619d08adf53dde9b8847\n(6) c217f12a89c352fc70b5f1bd5742314b4fb1bb1e35cb779fdb3c2390106355db\n(7) 1d4c74dfa4e99e161130c18cc63938bb120a128cefbf1b9188efc678bf5722cb\n(8) 0f44e0becf2e090db498a1b747d2a758fcc81fb0241f350d61117a9c6b1fa82e\n(9) 85218c5eec657470dafeb09e6f7101f91d21bfe822fbeeecfc9275f798662a63\n\nMnemonic: virtual valve razor retreat either turn possible student grief engage attract fiber\n\n\xe2\x9a\xa0\xef\xb8\x8f Important \xe2\x9a\xa0\xef\xb8\x8f : This mnemonic was created for you by Truffle. It is not secure.\nEnsure you do not use it on production blockchains, or else you risk losing funds.\n\ntruffle(develop)>\n```\n\n4. Take a look at the smart contract `SimpleStorage.sol`. You can check it out in folder `contracts`.\n\nThis smart contract has:\n\n* A variable `storedData` to store a number\n* A function `get()` to return the number stored at variable `storedData`\n* A function `set()` to change the number stored at variable `storedData`\n\n5. Compile and migrate the smart contract. Note inside the development console we don\'t preface commands with truffle.\n\n> To make sure you\'re in the development console, the command prompt must be `truffle(develop)>`\n\n```shell\ncompile\n```\nThe `compile output` should be similar to:\n\n\n\n```shell\nmigrate\n```\n\nAnd the `migrate output` should be similar to:\n\n\n\n6. Running contract tests.\n\nOur box also comes with the file `TestSimpleStorage.js` for testing the smart contract. You can check it out in the `test` folder.\n\nRun this command in the development console:\n\n```shell\ntest\n```\n\nThis `test output` should be similar to:\n\n\n\nNote the command varies slightly if you\'re in or outside of the development console.\n\n```javascript\n// inside the development console.\ntest\n\n// outside the development console.\ntruffle test\n```\n\n## Client side application\n\nOur box has done a front end to interact with the smart contract, built using React app and Next JS.\n\n7. In another terminal (i.e. not in the truffle develop prompt), go to the `app` directory and run the React app.\n\n> Do not close the other terminal, which is running the Truffle development console, because it is our Blockchain simulator.\n> \n> If you close it and then open it again, you need to deploy / migrate the smart contract again too!\n\n```shell\ncd app\nnpm run dev\n```\n\n\n\nThen go to your browser at [http://localhost:3000/](http://localhost:3000/)\n\n\n\n> Smart contract changes must be manually recompiled and migrated!\n\n**NOTE**: This box is the starting point for the RSK tutorial [Using rsk-next-box](https://developers.rsk.co/tutorials/truffle-boxes/rsk-next-box/).\n\n## Using RSK networks\n\n### Setup an account & get R-BTC\n\n- Get an address, learning how works the [account based RSK addresses](https://developers.rsk.co/rsk/architecture/account-based/ "Account based RSK addresses - RSK Developers Portal").\n- For the RSK Testnet, get tR-BTC from [our faucet](https://faucet.testnet.rsk.co/).\n- For the RSK Mainnet, get R-BTC from [an exchange](https://developers.rsk.co/rsk/rbtc/).\n\n### Setup the gas price\n\n**Gas** is the internal pricing for running a transaction or contract. When you send tokens, interact with a contract, send R-BTC, 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**.\nThe **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.\n\nTo update the **minimumGasPrice** in our project run this query using cURL:\n\n**Testnet**\n\n```shell\ncurl https://public-node.testnet.rsk.co/ -X POST -H "Content-Type: application/json" \\\n --data \'{"jsonrpc":"2.0","method":"eth_getBlockByNumber","params":["latest",false],"id":1}\' \\\n > .minimum-gas-price-testnet.json\n```\n\n**Mainnet**\n\n```shell\ncurl https://public-node.rsk.co/ -X POST -H "Content-Type: application/json" \\\n --data \'{"jsonrpc":"2.0","method":"eth_getBlockByNumber","params":["latest",false],"id":1}\' \\\n > .minimum-gas-price-mainnet.json\n```\n\nThis query saved the details of latest block to \nfile .minimum-gas-price-testnet.json \nor .minimum-gas-price-mainnet.json, respectively.\n\nIn the `truffle-config.js`, we are reading the parameter `minimumGasPrice` in each json file.\n\nFor more information about the **Gas** and **minimumGasPrice** please go to [gas page](https://developers.rsk.co/rsk/rbtc/gas/ "Gas - RSK Developers Portal").\n\n### Connect to RSK\n\n1. Copy your mnemonic to `truffle-config.js`\n\n```javascript\n//Put your mnemonic here, be careful not to deploy your mnemonic into production!\nconst mnemonic = \'A_MNEMONIC\';\n```\n\nPlease be aware that we are using `HDWalletProvider` with RSK Networks derivations path:\n- RSK Mainnet dpath: `m/44\xe2\x80\x99/137\xe2\x80\x99/0\xe2\x80\x99/0`\n- RSK Testnet dpath: `m/44\xe2\x80\x99/37310\xe2\x80\x99/0\xe2\x80\x99/0`\n\nFor more information check [RSKIP57](https://github.com/rsksmart/RSKIPs/blob/master/IPs/RSKIP57.md).\n\n2. Run the development console for any RSK network.\n\n```shell\n# Console for Testnet\ntruffle console --network testnet\n\n# Console for Mainnet\ntruffle console --network mainnet\n```\n\n3. Migrate the smart contracts. We will do it running the below commands directly in the terminal, without using the truffle console now to show to you this alternative.\n\n```shell\ntruffle migrate\n```\n\n4. Update Express JS component. \n\nThe component located in the file `web3-util.js` uses the [web3.js](https://web3js.readthedocs.io/) library to interact with the blockchain - writing code that reads and writes data from the blockchain with smart contracts.\n\nChoose which network you would like to connect the server to RSK Network \nand update line 15 of the file `app/utils/web3-util.js`\n\n**Testnet**\n```js \nconst provider = new Web3.providers.HttpProvider("https://public-node.testnet.rsk.co"); \n```\n\n**Mainnet**\n```js \nconst provider = new Web3.providers.HttpProvider("https://public-node.rsk.co");\n```\n\n5. In a terminal, go to the `app` directory and run the React app.\n\n```shell\ncd app\nnpm run dev\n```\n\nGo to your browser at [http://localhost:3000/](http://localhost:3000/)\n\n> Note that when you are connected to an RSK network, you do not need to leave open the Truffle console, because the app is connected via a public node, directly to the network.\n\n## Next steps\n\n- **Go to tutorial**\n\nGo to the tutorial [using rsk-next-box](https://developers.rsk.co/tutorials/truffle-boxes/rsk-next-box/) to learn more about this project. We covered all the steps with more details, explanations, and images.\n\n- **Find more documentation**\n\nCheck out the [RSK developers portal](https://developers.rsk.co/).\n\n- **Do you have questions?**\n\nAsk in [RSK chat](https://gitter.im/rsksmart/getting-started).\n'