vite+reacr 实现 web3 的 DAPP项目(1)-项目初始化

安装 React 及 Hardhat

mkdir ArtistStudio 
cd ArtistStudio
 
pnpm create vite artist-studio --template react
cd artist-studio
 
npx hardhat
# 剩下的默认回车

使用 React 及 Hardhat

npx hardhat node # 启动本地 hardhat 网络
# 另开命令行页面执行
npx hardhat compile # 编译
npx hardhat test --network localhost # 执行测试，在本地网络
npx hardhat run ./scripts/deploy.js  --network localhost # 部署合约，在本地网络
# 运行 react 项目
npm run dev 

连接钱包

/src/App.jsx

import { BrowserProvider } from 'ethers'
import './App.css'
 
function App() {
  const connectWallet = async () => {
    if (!window.ethereum) {``
      alert('Please install MetaMask')
      return
    }
 
    const provider = new BrowserProvider(window.ethereum)
 
    const signer = await provider.getSigner()
 
    const address = await signer.getAddress()
 
    console.log(address)
  }
  return (
    <>
      <button onClick={connectWallet}>Connect Wallet</button>
    </>
  )
}
 
export default App

点击 Connect Wallet 后，选择账号连接