项目初始化

新建文件夹client和smart_contract.

cd client
pnpm create vite ./ --template react-ts 
pnpm i

安装tailwindcss

pnpm add -D tailwindcss postcss autoprefixer

初始化tailwindcss

npx tailwindcss init -p

修改config文件

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加tailwindcss到css文件

/** index.css */ 
@tailwind base;
@tailwind components;
@tailwind utilities;

复制logo和css

从[email protected]:adrianhajdin/project_web3.0.git复制images和index.css文件.

安装react-icons和ethers

添加更多的tailwindcss配置

从github上复制tailwindcss.config.cjs.

智能合约部分

进入smart_contract文件夹.

pnpm add @nomiclabs/hardhat-ethers @nomiclabs/hardhat-waffle chai ethereum-waffle ethers hardhat ethers -D

hardhat

安全帽,一个可以在本地测试智能合约的工具.

npx hardhat

选js模板,ts不一定有什么幺蛾子.

新建contracts/Transcations.sol文件

内部的写法有不少静态类型,类似ts. 功能主要是区块链的增加记录,转移记录,发起转移.

修改部署文件scripts/deploy.js

寻找测试币水龙头

由于Ropsten已经弃用,目前主要使用Goerli

注册alchemy

方便快速部署智能合约.在创建test Apps这里有get Test ETH.(也就是测试币).

配置hardhat.config.js

在alchemy上获取key.在view key那一项.

获取私钥

在mask上,账户详情.

防盗指南

注意,上面的两个key建议用env设置,上传到github很容易就被盗号了(我的就是被盗了).

执行部署

npx hardhat run scripts/deploy.js --network goerli

得到一个部署成功的链.(部署成功会扣除一点gas手续费).

将链地址复制,在client中创建src/utils/constant.ts. 将链地址保存导出.

这里编译出错,因为ethers的版本太高不兼容hardhat,需要移除ethers当前版本,安装5开头的.

pnpm add [email protected] -D

文件复制

将部署生成的文件artifacts/contracts/Transactions.json复制到client文件夹的utils下.并且在constant文件中引入导出.

import abi from './Transactions.json';

export const contractABI = abi.abi;

client部分

新建src/context文件夹. 新建TransactionContext.tsx.

虚拟变量

复制utils/dummyData.js文件.

注册giphy开发者

网址developers.giphy.com.

Transactions.tsx

在这里添加git相关

新增useFetch

创建hooks文件夹,新建useFetch文件.然后在Transactions.tsx中引入.

Footer

最后

尽量将私密性比较高的字符串,比如合约地址,私钥等使用env的方法引入,防止被盗.