Truffle and Ganache on wsl

## Originally

I have copied the code from the following book.
[Hands-On Smart Contract Development with Solidity and Ethereum](https://www.oreilly.com/library/view/hands-on-smart-contract/9781492045250/)

## Environment

- Windows 11
- wsl2
- Ubuntu 18.04
- nvm : 0.39.0
- node : 16.13.2
- npm : 8.1.2
- Truffle v5.4.30 (core: 5.4.30)
- Solidity - 0.8.11 (solc-js)
- Node v16.13.2
- Web3.js v1.5.3

## Prerequisite articles

[Truffle on wsl](https://qiita.com/daei/items/f523e838a633f5ad3e45)

## Copy UI Source Code

```bash:command
# you are in root dir of greeter project
cd ..
git clone https://github.com/RedSquirrelTech/hoscdev
cp -r hoscdev/chapter-5/greeter/client/ greeter/client
```

## Change truffle-config.js

```js:truffle-config.js
module.exports = {
  contracts_build_directory: "./client/src/contracts",
  networks: {},
  mocha: {},
  compilers: {
    solc: {
      version: "0.8.11", // Fetch exact version from solc-bin (default: truffle's version)
    },
  },
};
```

## Start UI

```bash:command
# you are in root dir of greeter project
truffle compile
cd client
npm i
npm run start
```
I think your browser will give you an error, but that is not a problem at this time.

## Setup Ganache

Install Windows client from [Ganache](https://trufflesuite.com/ganache/).
Launch Ganache.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55938/2899529f-6eb8-699e-235c-926360d17388.png)

**Choose vEthernet(WSL)** and note the IP address. Then click `SAVE WORKSPACE`.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55938/80730f7c-2e55-1115-baad-5ffa5bcd9cce.png)

## Setup MetaMask

Install [MetaMask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=ja).

If you are logged in MetaMask, please log out once.
You click the `import using Secret Recovery Phrase`.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55938/2ac2b3f6-90d9-5d14-5352-14077700a608.png)

Copy the mnemonic from Gahache.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55938/4c07f526-c1e7-be17-4f3f-7e56d21df896.png)

Paste the mnemonic into the recovery phrase and input password.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55938/d0474ae6-7618-9b14-4df1-436b448d723a.png)

And create new network.
You can check the RPC URL on Ganache and Chain ID is `1337`.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55938/68e3b788-2817-9b0f-b69c-6ab7c4d7ea32.png)

## Add Development Network

host is same as Ganache RPC server.

```js:truffle-config.js
module.exports = {
  contracts_build_directory: "./client/src/contracts",
  networks: {
    development: {
      host: "172.22.112.1",
      port: 7545,
      network_id: "*",
    },
  },
  mocha: {},
  compilers: {
    solc: {
      version: "0.8.11", // Fetch exact version from solc-bin (default: truffle's version)
    },
  },
};

```

## Deploy to Dev Network

```bash:command
# in project root folder
truffle migrate --network development
# Compiling your contracts...
# ===========================
# ...
# Summary
# =======
# > Total deployments:   2
# > Final cost:          0.01683276 ETH
```

Launch web server.

```bash:command
# in project root folder
cd client
npm run start
```

If you log in to the development network with MetaMask, you should see a screen similar to the following

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55938/34d96903-932f-ffd5-01ab-45f6f7784e2a.png)