# Garrick信仲 | C0051202 第七週作業
## 執行環境
| OS | VS Code | Node.js | vite | react | axios | thirdweb |
| -------- | -------- | -------- | -------- | -------- | -------- | -------- |
| Ubuntu 22.04 LTS | 1.76.2 | 18.16.0 | 4.3.0 | 18.2.0 | 1.3.5 | 0.10.12 |

---

# 作業說明

- 作業一：Buy Me A Coffee
* 提供你的 github 連結：
* Demo網址(部署至Vercel)：
- 作業二：KryptoCamp NFT
* 提供你的 github 連結：
* Demo網址(部署至Vercel)：

## 作業一：Buy Me A Coffee
## Table of contents
1. 設計流程
2. 開發步驟
3. 佈署Vercel

### 1.設計流程

### 2.開發執行步驟

sudo npm i -g @thirdweb-dev/cli
git clone https://github.com/Krypto-Camp/buycoffee.git
npx thirdweb create contract

利用thirdweb建立Contract

依序選擇Contract、solidity-buycoffee、Hardhat、Empty Contract

建立BuyMeCoffee.sol合約並確認solidity的版本要高於合約版本

執行以下命令, 發現了錯誤換成直接執行deploy也不行

npx thirdweb build


後來發現thirdweb的影片中有提到合約做好後使用yarn build, 跑完之後發現thirdweb的版本從v0.6.15變成了v0.10.12
[https://www.youtube.com/watch?v=fzsz-b2JV9U](https://www.youtube.com/watch?v=fzsz-b2JV9U)

yarn build


然後佈署

因為Sepolia幣比較好領，所以選佈署到Sepolia上

Metamask錢包出現Confirm需要按下並支付Gas fee

接著需要提供Signer

佈署完成

建立BuyCoffee的APP

npx thirdweb create app


先確認package.json裡的dependencies後跑yarn

再確認main.jsx裡的標籤APP是包在thirdweb和chakra的標籤中，接著再把activeChain變數改為sepolia，因為sepolia現在的測試幣比較好領所以使用這個測試鏈測試

使用不同的鏈時要再查一下thirdweb的設定，以下是Sepolia測試鏈的設定方式
[https://thirdweb.com/sepolia](https://thirdweb.com/sepolia)

先下指令
npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@5

main.jsx改成如下圖

將上方的NavBar做好

測試可取得合約的資料

完成左半邊卡片

完成右半邊卡片

完成測試

## 3.佈署Vercel
GitLab連結 ： [https://gitlab.com/mouseslayer1/buycoffeetest](https://gitlab.com/mouseslayer1/buycoffeetest)
Demo網址 ： [https://buycoffeetest.vercel.app/](https://buycoffeetest.vercel.app/)

---

## 作業二：KryptoCamp NFT
## Table of contents
1. 開發步驟
2. 佈署Vercel

### 開發步驟
執行`git clone [e-mail]:Krypto-Camp/kryptocamp-nft.git`時似乎沒有權限所以使用HTTPS方式Clone

執行`yarn && yarn dev`後可以看到下圖，

確認一、在main.jsx裡可以看到已經設定測試鏈goerli, 而且App這個component被包在Thirdweb和Chakra裡，表示可以支援這二個lib的語法

確認二、在contractAddress.js裡已經寫上合約地址

確認三、在App.jsx裡有MainMint和Navbar二個components

確認四、在Navbar中沒有看到連接錢包的lib寫法，有看到TODO: 連接錢包 Connect需要增加功能

確認五、在MainMint裡有看到TODO: Mint和TODO: 取得合約目前販售數量 TotalSupply二項需要新增功能

開始進行修改，先在Navbar裡加上連接錢包的功能

import { ConnectWallet } from "@thirdweb-dev/react";


TODO: 連接錢包 Connect的Box裡改成
<ConnectWallet 
btnTitle='連接錢包'
 />


再修改MainMint加上

加上import的程式
import { useContractRead, Web3Button } from "@thirdweb-dev/react";
import { ethers } from 'ethers'

取得totalSupply的數字
const { data: totalMintedNFT, isLoading: loadingTotalMintedNFT } = useContractRead( contract, 'totalSupply')

把TODO: Mint的Button改成Web3Button
<Center>
        <Web3Button
            theme="light"
            contractAddress={NFT_ADDRESS}
            action={async () => {
                await contract.call('mint', [mintAmount],{
                        value: ethers.utils.parseEther('0.001')
                })
            }}
            onSuccess={() => {
                setMintAmount(1)
                alert('Mint NFT is successful!')
            }}
            onError={(error) => {
                alert(error)
            }}
        >
            Mint Now with 0.01ETH
        </Web3Button>
</Center>



目前已賣出
<Flex>
    <Text>Total Minted NFT:</Text>
    <Skeleton
        isLoaded={!loadingTotalMintedNFT}
        w={'24px'}
    >
        {totalMintedNFT?.toString()}
    </Skeleton>
                      
                    
</Flex>

開發結果畫面

### 佈署Vercel
GitLab連結 ： [https://gitlab.com/mouseslayer1/kryptocampnfttest](https://gitlab.com/mouseslayer1/kryptocampnfttest)
Demo網址 ： [https://kryptocampnfttest.vercel.app/](https://kryptocampnfttest.vercel.app/)
再Mint一次可以看到Total Minted NFT由18變成19