---
# System prepended metadata

title: Garrick信仲 | C0051202 第七週作業

---

# 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.設計流程
![](https://i.imgur.com/Nd1pmIl.png)


### 2.開發執行步驟

```
sudo npm i -g @thirdweb-dev/cli
git clone https://github.com/Krypto-Camp/buycoffee.git
npx thirdweb create contract
```
利用thirdweb建立Contract
![](https://i.imgur.com/75Lyya6.png)

依序選擇Contract、solidity-buycoffee、Hardhat、Empty Contract
![](https://i.imgur.com/1t6IlUP.png)

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


執行以下命令, 發現了錯誤換成直接執行deploy也不行
```
npx thirdweb build
```
![](https://i.imgur.com/HXMeCqQ.png)


後來發現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
```
![](https://i.imgur.com/AERfXhc.png)

然後佈署
![](https://i.imgur.com/Zh1pgH3.png)


因為Sepolia幣比較好領，所以選佈署到Sepolia上
![](https://i.imgur.com/qdHCVyY.png)

Metamask錢包出現Confirm需要按下並支付Gas fee
![](https://i.imgur.com/aRswcxx.png)

接著需要提供Signer
![](https://i.imgur.com/vab6FZZ.png)

佈署完成
![](https://i.imgur.com/tbVjO6L.png)


建立BuyCoffee的APP
```
npx thirdweb create app
```
![](https://i.imgur.com/aODdTuS.png)

先確認package.json裡的dependencies後跑yarn
![](https://i.imgur.com/apMO9z4.png)

再確認main.jsx裡的標籤APP是包在thirdweb和chakra的標籤中，接著再把activeChain變數改為sepolia，因為sepolia現在的測試幣比較好領所以使用這個測試鏈測試
![](https://i.imgur.com/enepZd6.png)


使用不同的鏈時要再查一下thirdweb的設定，以下是Sepolia測試鏈的設定方式
[https://thirdweb.com/sepolia](https://thirdweb.com/sepolia)
```
先下指令
npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@5
```
main.jsx改成如下圖
![](https://i.imgur.com/xh4aO2c.png)


將上方的NavBar做好
![](https://i.imgur.com/af22zzB.png)

測試可取得合約的資料
![](https://i.imgur.com/ADnzIII.png)

完成左半邊卡片
![](https://i.imgur.com/PQ7yMm5.png)

完成右半邊卡片
![](https://i.imgur.com/qVfUHU0.png)

完成測試
![](https://i.imgur.com/tgOXfhh.png)

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



---

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

### 開發步驟
執行`git clone git@github.com:Krypto-Camp/kryptocamp-nft.git`時似乎沒有權限所以使用HTTPS方式Clone
![](https://i.imgur.com/xaj1Id4.png)

執行`yarn && yarn dev`後可以看到下圖，
![](https://i.imgur.com/OpbgqEZ.jpg)


確認一、在main.jsx裡可以看到已經設定測試鏈goerli, 而且App這個component被包在Thirdweb和Chakra裡，表示可以支援這二個lib的語法
![](https://i.imgur.com/8w2Q1Mp.png)

確認二、在contractAddress.js裡已經寫上合約地址
![](https://i.imgur.com/7DbGoXL.png)

確認三、在App.jsx裡有MainMint和Navbar二個components
![](https://i.imgur.com/krhEDLm.png)

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

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

開始進行修改，先在Navbar裡加上連接錢包的功能
```
import { ConnectWallet } from "@thirdweb-dev/react";


TODO: 連接錢包 Connect的Box裡改成
<ConnectWallet 
btnTitle='連接錢包'
 />
```
![](https://i.imgur.com/6EVtfkb.png)

再修改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>
```

開發結果畫面
![](https://i.imgur.com/gjQEPVj.jpg)



### 佈署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
![](https://i.imgur.com/Qui3hxx.jpg)




