47 | );
48 | }
49 | ```
50 |
51 | Edit `src/App.css` and add the css class `CounterButton`. You can make your customizations as you like.
52 |
53 | ```css
54 | .CounterButton {
55 | background-color: #4CAF50;
56 | border: none;
57 | color: white;
58 | margin-top: 15px;
59 | padding: 15px 32px;
60 | text-align: center;
61 | text-decoration: none;
62 | display: inline-block;
63 | font-size: 16px;
64 | width: 200px;
65 | }
66 | ```
67 |
68 | The webpage will be reloaded after you saved the files.
69 |
70 | Now you can see we're having the basic page layout!
71 |
72 | {% hint style="info" %}
73 | The source code of this chapter could be found at the revision `fdb1b9e5f` in the [`counter-dapp`](https://github.com/clover-network/example-counter-dapp) source repo.
74 | {% endhint %}
75 |
--------------------------------------------------------------------------------
/development-guide/tutorial/setup-truffle.md:
--------------------------------------------------------------------------------
1 | # Setup truffle
2 |
3 | ## :pencil: Truffle config
4 |
5 | create and edit `truffle-config.js`:
6 |
7 | {% code title="truffle-config.js" %}
8 | ```javascript
9 | module.exports = {
10 | contracts_build_directory: "./src/contract_build",
11 | compilers: {
12 | solc: {
13 | version: '0.5.2'
14 | }
15 | },
16 | };
17 | ```
18 | {% endcode %}
19 |
20 | We specified to use `solc` version `0.5.2` as the contract compiler and we set the contract build directory to `./src/contract_build` because the default build directory is `./build` which conflicts with react application build folder. Another reason is later on we'll use react to load the `Counter.json` from the build directory which must be located inside the `src` directory.
21 |
22 | ## :red\_car: Test out
23 |
24 | You can check if it's setup correctly by running `truffle compile`
25 |
26 | ```bash
27 | truffle compile
28 | ```
29 |
30 | The command will success and print something like:
31 |
32 | ```bash
33 | Compiling your contracts...
34 | ===========================
35 | > Everything is up to date, there is nothing to compile.
36 | ```
37 |
38 | {% hint style="info" %}
39 | truffle compile will check the contracts which needs compile to evm byte code. Truffle thinks everything is update to date since we're not having any smart contract in this project.
40 | {% endhint %}
41 |
--------------------------------------------------------------------------------
/development-guide/tutorial/the-counter-contract.md:
--------------------------------------------------------------------------------
1 | # The Counter Contract
2 |
3 | ## :pencil: The Code
4 |
5 | Smart contracts are put at the contracts folder. Create the contract folder using:
6 |
7 | ```bash
8 | mkdir contracts
9 | ```
10 |
11 | {% hint style="info" %}
12 | Placing smart contracts in the contracts folder is a convention of truffle. You can specify a different directory by modifying truffle configuration. Checkout the [conracts\_directory](https://www.trufflesuite.com/docs/truffle/reference/configuration#contracts\_directory) section in truffles document.
13 | {% endhint %}
14 |
15 | Once created the contracts folder , create the `Counter.sol` file with contents below:
16 |
17 | {% code title="Counter.sol" %}
18 | ```bash
19 | pragma solidity >=0.5.0 <0.7.0;
20 |
21 | contract Counter {
22 | uint32 public current_value;
23 |
24 | function inc() public {
25 | require(current_value < 10000, "Counter: max value");
26 | current_value = current_value + 1;
27 | }
28 |
29 | function dec() public {
30 | require(current_value > 0, "Counter: min value");
31 | current_value = current_value - 1;
32 | }
33 | }
34 | ```
35 | {% endcode %}
36 |
37 | ## :star2: Explain
38 |
39 | The contract code is quite self explain:
40 |
41 | * A state variable `current_value` which is an unsigned integer.
42 | * inc() method, which increase the current\_value by one.
43 | * dec() method, which decrease the current\_value by one.
44 | * current\_value has a bound of \[0, 10000] which was checked in inc and dec methods.
45 |
46 | ## :red\_car: Test out
47 |
48 | Run command `truffle compile`, it will find and compiles the Counter contract. you should looks outputs like:
49 |
50 | ```bash
51 | Compiling your contracts...
52 | ===========================
53 | > Compiling ./contracts/Counter.sol
54 | > Artifacts written to ~/counter-dapp/build/contracts
55 | > Compiled successfully using:
56 | - solc: 0.5.2+commit.1df8f40c.Emscripten.clang
57 | ```
58 |
59 | {% hint style="info" %}
60 | Truffle command will download solidity compiler at the first time. There could be some messages related to the compiler setup. It's normal.
61 | {% endhint %}
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/development-guide/using-metamask.md:
--------------------------------------------------------------------------------
1 | ---
2 | description: Interacting with a Clover Node Using MetaMask
3 | ---
4 |
5 | # Using MetaMask
6 |
7 | This guide will show you how to use MetaMask wallet connecting to a self-run Clover standalone node, and sending tokens between accounts. There are two ways to interact with Clover: using Substrate RPC endpoints, or by using Web3-compatible RPC endpoints, which is served from the same Substrate RPC RPC server. In this tutorial, we will use Web3 RPC endpoints.
8 |
9 | ### Installing MetaMask Chrome Extension