本篇教學是給有 React 基礎的前端工程師參考的，React 如何使用不在本篇教學範圍

直接進入主題，以前要開發一個 DAPP 非常麻煩，雖然已有 Ethers.js 或是 web3.js 這類函式庫，但是光一個錢包的處理就非常繁瑣，直到最近看到 Thirdweb 的教學才發現寫個 DAPP 這麼容易，除了有各種 Hook 外，還有連結錢包跟調用智能合約的元件可供使用，大大縮短了 DAPP 的開發時程

至於為什麼我採用 React 框架？因為 Vue 開發的 DAPP 很容易被當成對岸的項目（容易跑路😂），廢話不多說，下面就開始寫程式吧

建立API Key

跟其他函式庫不同，Thirdweb 需要在平台註冊並取得 api key 才能正常使用，這部分有點類似ChatGPT，使用時需要將 id 寫在 Provider 裡才能正常連線到 web3，這部分要特別注意

部屬智能合約

想開發通用的智能合約可以透過平台提供的範本部署，若智能合約已經部屬在鏈上，我們只需要將智能合約的地址匯入 Thirdweb 即可使用 api 調用，匯入方式在下圖點選 Import Contract 再輸入合約地址即可，不管是部署還是匯入合約，完成後都能在 Thirdweb 提供的介面直接調用或查看內容，這部分比在區塊鏈瀏覽器還好用

程式範本

點選智能合約函式在按下Code Snippets會出現使用範例，這部分對第一次使用的工程師非常友好

安裝Thirdweb及引用

完成部署後就是在 VS Code 安裝及引用Thirdweb，安裝跟其他函式庫一樣在終端機輸入安裝指令即可，我是用yarn的方式安裝，執行內容如下

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers@^5

安裝完成就能Import，我們先完成第一個步驟-在App 中將 ThirdwebProvider 放在最外層，這是React很常見的用法，記得要將 申請的 api id 填入設定中，之後就能能正常使用 thirdweb 元件

import { ThirdwebProvider, useContract } from "@thirdweb-dev/react";

function App() {
  return (
    <ThirdwebProvider 
      activeChain="binance" 
      clientId="YOUR_CLIENT_ID" // You can get a client id from dashboard settings
    >
      <Component />
    </ThirdwebProvider>
  )
}

錢包連線

與web3 連線的第一步就是使用小狐狸錢包登入，這部分 Thirdweb 封裝了一個 ConnectWallet，點選按鈕會直接跳出錢包選擇、區塊鏈選擇跟帳號切換等功能，錢包在連線狀態下還能自動連線，連線後也能顯示錢包地址，這些完全不用自己動手，此外還提供客制功能，能顯示自訂圖片或說明，這麼複雜的功能只需要一個標籤即可完成，是不是覺得特別幸福啊，而且在手機版也能正常開啟小狐狸錢包連線，並且會使用小狐狸錢包內建瀏覽器來開啟 DAPP 網頁，這樣的相容性是最好的