# Z 前端開發班 - Remix, React 與 Dapp 開發基礎環境設置 (9/29)
第四週，我們將運用上一堂課所學的 Solidity 帶領大家撰寫客製化的智能合約,並使用現成的前端範例模板展示前端如何呼叫與串接智能合約。

Figma Link: https://www.figma.com/file/j7CkoX1VTlf2QITmPLgzp2/Z---FrontEnd-Course?node-id=1%3A2

## Rundown
* 介紹課程作業 Project
* 前端與區塊鏈串接 Workflow
* 前期準備 - Contract, ABI, 設定測試網路
* 常見的 React 模板與套件介紹
* 純 TypeScript https://create-react-app.dev/docs/adding-typescript/
* 純 Next.js https://nextjs.org/docs/basic-features/typescript
* Next.js + Ethers.js https://github.com/AsaoluElijah/next-ethers
* React + Rainbow Kit https://github.com/rainbow-me/rainbowkit
* Scaffold-eth https://github.com/scaffold-eth/scaffold-eth-typescript
* 前端專案結構範例
* Mango Market UI https://github.com/blockworks-foundation/mango-ui-v3 (按.觸發 vscode 檢視模式)

* 結構
* 前端串接套件
* web3.js
* ethers.js
* wagmi https://wagmi.sh/
* Vscode的常用開發套件
* Git Lens
* Prettier Code Formatter
* Github Copilot
* JavaScript Debugger (內建)
* JavaScript (ES6) Code Snippets
* Better Comments
* Live Preview
* Indent-rainbow
* // format on save 設定
* Solidity
* 一些可以嘗試的線上編輯器服務
* GitPod - 可以直接串接 Git Repo 並建立共用虛擬機
* Codesandbox https://codesandbox.io/
* 實作
* 留言板 - 智能合約撰寫
* 前端專案初始化
* React 相關語法講解
* 前端快速切版 - Charkra
* 狀態管理與 React Hook
* 連結web3 - 連結錢包
* 連結web3 - 取得資料
* 連結web3 - 呼叫函數
* Code
- 連結錢包 (ethers)

    import "./styles.css";
    import { ethers } from "ethers";
    import { useEffect, useState } from "react";


    export default function App() {
      let [provider, setProvider] = useState(null);
      let [signer, setSigner] = useState(null);
      let [address, setAddress] = useState(null);
      let [balance, setBalance] = useState("");

      useEffect(() => {
        const fetchBalance = async () => {
          const _balance = await provider.getBalance(address);
          setBalance(ethers.utils.formatUnits(_balance, 18));
        };
        if (address) fetchBalance();
      }, [address, provider]);

      async function connectWallet() {
        const _provider = new ethers.providers.Web3Provider(window.ethereum, "any");
        // Prompt user for account connections
        await _provider.send("eth_requestAccounts", []);

        const _signer = _provider.getSigner();
        const _address = await _signer.getAddress();

        console.log("Account:", _address);

        setProvider(_provider);
        setSigner(_signer);
        setAddress(_address);
      }

      return (
        <div className="App">
          <h1>Connect Wallet</h1>
          <h3>{address}</h3>
          <h3>Balance: {balance}</h3>
          <button onClick={() => connectWallet()}> Connect Wallet </button>
        </div>
      );
    }

- 連結錢包 (web3modal)

    const Web3Modal = window.Web3Modal.default;
    const providerOptions = {
      walletconnect: {
        package: WalletConnectProvider, // required
        options: {
          infuraId: INFURA_KEY, // required
        },
      }
    };
    web3Modal = new Web3Modal({
      network: 'rinkeby',
      cacheProvider: false, // optional
      providerOptions, // required
      disableInjectedProvider: false, // optional. For MetaMask / Brave / Opera.
    });
  provider = await web3Modal.connect();
  ethersProvider = new ethers.providers.Web3Provider(provider);

- 呼叫合約
* Netlify / Github page 部署測試網站
* 其他前端相關框架介紹
* Thirdweb

## 課堂範例

- WAGMI 專案(上圖完整版) https://codesandbox.io/s/rainbowkit-nextjs-forked-9fjm1t?file=/pages/index.js
- Solidity 合約：https://gist.github.com/tina1998612/e98e96b7a11f0b28159c032556be17a8
- 部署在 Goerli 的測試合約地址： 0x46708Db9eee8735991CC5F6EA0d610161D59D77E
- Ethers.js 連結錢包範例
https://codesandbox.io/s/upbeat-tree-7wqeqk

## Ref
常用 VSCode 套件
https://www.it145.com/9/79042.html

Connect Wallet
https://medium.com/@kaishinaw/connect-metamask-with-ethers-js-fc9c7163fd4d

Meta Mask docs
https://docs.metamask.io/guide/rpc-api.html#unrestricted-methods

Netlify 教學
https://ithelp.ithome.com.tw/articles/10257115

Wagmi + nextjs + rainbow kit 參考流程
https://learnblockchain.cn/article/4624

Chain ID
https://docs.family.co/connectkit/chains#custom-chains-chains-networks