使用third-web构造dapp

最近了解到third-web这个库，里面有钱包链接和操作功能的丰富集成，之前在做Dapp的时候需要手动处理多个钱包的链接，感觉很不容易，用这个库应该能方便一点。

尝试使用third-web来构造 dapp。

安装third-web：

1	npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers

在使用之前，我们需要知道我们的合约地址以及合约部署在哪个网络。

然后在App.tsx中：

import React from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import { HomePage } from "./pages/home/home.page";
import { ThirdwebProvider } from "@thirdweb-dev/react";
import {ConnectWallet} from "@thirdweb-dev/react";

function App() {
  return (
    <div className="App">
      <ThirdwebProvider desiredChainId={AppConfig.ChainId}>
        <ConnectWallet>
      </ThirdwebProvider>
    </div>
  );
}

export default App;

运行项目，回看到在页面上有Connect Wallet的按钮，点击有个下拉，有默认的三个钱包链接的选项：

MetaMask
Coinbase Wallet
WalletConnect

这样已经是可以链接钱包的。

但是在项目中我们无法直接使用，因为ui设计肯定不是这样的。

那看一下如何去自定义Connect Wallet。

我们创建一个component：customer-wallet-connect.tsx文件：

import {useMetamask, useWalletConnect} from "@thirdweb-dev/react";

export default function CustomerConnectWallet() {
    const connectMetamask = useMetamask();
    const walletConnect = useWalletConnect();
    return (
        <div>
            <button onClick={connectMetamask}>Connect Metamask</button>
            <button onClick={walletConnect}>Wallet Connect</button>
        </div>
    )
}

可以看到，通过使用Hooks的方法，我们可以随便控制该连接哪个钱包。

链接了钱包，我们需要去和合约交互，比如claim NFT.

创建cliam.tsx文件：

import {useAddress, Web3Button} from "@thirdweb-dev/react";

export default function Claim() {
    const address = useAddress();
    const onSuccess = () => {
       // claim success 
    }
    const onError = () => {
       // claim error 
    }
    if (!address) {
       return (
           <div>
               please connect wallet first!
           </div>
       ) 
    }
    return (
        <Web3Button
            contractAddress={'0xB4C41f17F2fA3a8101aC0928e9298a6BcAC76Ba9'}
            action={(contract) => contract.erc721.claim(1)}
            onSuccess={onSuccess}
            onError={onError}
        >
            Claim NFT
        </Web3Button>
    )
}

使用useAddress()可以获得当前链接钱包的钱包地址。使用Web3Button可以直接构造Claim的按钮。

这个按钮内部会自动判断连接状态的，我们需要为了特定的业务，需要手动判断连接状态，当判断已经连接钱包的时候才会出现这个按钮。

这个按钮也自带样式，我们可以传递className来覆盖样式。

third-web也提供了丰富的自定义内容，虽然集成度很高，但在项目中还是需要手动去处理一些事情。以后遇到再积累吧。