diff --git a/.editorconfig b/.editorconfig
new file mode 100755
index 0000000..7e3649a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bee1cf6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..0d4222f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,8 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..94beb14
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}
diff --git a/.umirc.ts b/.umirc.ts
new file mode 100644
index 0000000..88df4da
--- /dev/null
+++ b/.umirc.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'umi';
+
+export default defineConfig({
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  routes: [
+    { path: '/', component: '@/pages/eth/index' },
+    { path: '/bsc', component: '@/pages/bsc/index' },
+    { path: '/tron', component: '@/pages/tron/index' },
+  ],
+  fastRefresh: {},
+  mfsu: {},
+});
diff --git a/README.md b/README.md
index 24a2383..07afeb7 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,15 @@
-# frontend-web3-demo
+# umi project
 
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ yarn
+```
+
+Start the dev server,
+
+```bash
+$ yarn start
+```
diff --git a/mock/.gitkeep b/mock/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..473a82f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi generate tmp",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/pro-layout": "^6.5.0",
+    "antd": "^4.20.7",
+    "bignumber.js": "^9.0.2",
+    "react": "17.x",
+    "react-dom": "17.x",
+    "umi": "^3.5.24",
+    "web3": "^1.7.3"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@umijs/preset-react": "1.x",
+    "@umijs/test": "^3.5.24",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.0",
+    "typescript": "^4.1.2",
+    "yorkie": "^2.0.0"
+  }
+}
diff --git a/src/config/abi/erc20.json b/src/config/abi/erc20.json
new file mode 100644
index 0000000..405d6b3
--- /dev/null
+++ b/src/config/abi/erc20.json
@@ -0,0 +1,222 @@
+[
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "fallback"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  }
+]
diff --git a/src/config/constants/index.ts b/src/config/constants/index.ts
new file mode 100644
index 0000000..4b80f33
--- /dev/null
+++ b/src/config/constants/index.ts
@@ -0,0 +1,2 @@
+export const ACCOUNT = '0x6555e1cc97d3cba6eaddebbcd7ca51d75771e0b8';
+export const ETH_CONTRACT = '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f';
diff --git a/src/global.less b/src/global.less
new file mode 100644
index 0000000..9425351
--- /dev/null
+++ b/src/global.less
@@ -0,0 +1,11 @@
+body {
+  padding: 20px;
+}
+.title {
+  text-align: center;
+  font-size: 30px;
+  font-weight: bold;
+}
+.part-title {
+  margin-top: 20px;
+}
diff --git a/src/pages/bsc/index.md b/src/pages/bsc/index.md
new file mode 100644
index 0000000..5954476
--- /dev/null
+++ b/src/pages/bsc/index.md
@@ -0,0 +1,3 @@
+### 文档
+
+1. 参考资料
\ No newline at end of file
diff --git a/src/pages/bsc/index.tsx b/src/pages/bsc/index.tsx
new file mode 100644
index 0000000..52b19cd
--- /dev/null
+++ b/src/pages/bsc/index.tsx
@@ -0,0 +1,11 @@
+import { Button, Space } from 'antd';
+
+const IndexPage = () => {
+  return (
+    <div>
+      <h2 className="title">BSC</h2>
+      <h3 className="part-title">常用</h3>
+    </div>
+  );
+};
+export default IndexPage;
diff --git a/src/pages/eth/index.md b/src/pages/eth/index.md
new file mode 100644
index 0000000..d1943f3
--- /dev/null
+++ b/src/pages/eth/index.md
@@ -0,0 +1,5 @@
+### 文档
+
+1. 参考资料
+https://learnblockchain.cn/docs/web3.js/web3-eth.html
+https://web3.tryblockchain.org/Web3.js-api-refrence.html
\ No newline at end of file
diff --git a/src/pages/eth/index.tsx b/src/pages/eth/index.tsx
new file mode 100644
index 0000000..039006c
--- /dev/null
+++ b/src/pages/eth/index.tsx
@@ -0,0 +1,35 @@
+import Web3 from 'web3';
+import { Button, Space } from 'antd';
+import ercAbi from '@/config/abi/erc20.json';
+import { ACCOUNT, ETH_CONTRACT } from '@/config/constants';
+
+const IndexPage = () => {
+  const web3 = new Web3(Web3.givenProvider);
+  const myContract = new web3.eth.Contract(ercAbi, ETH_CONTRACT);
+  const getBalance = async () => {
+    const res = await web3.eth.getBalance(ACCOUNT);
+    console.log('getBalance', res);
+  };
+
+  const contractCall = async () => {
+    const res = await myContract.methods.name().call();
+    console.log('contractCall', res);
+  };
+
+  return (
+    <div>
+      <h2 className="title">ETH</h2>
+      <h3 className="part-title">常用</h3>
+      <Space>
+        <Button type="primary" onClick={getBalance}>
+          获取余额
+        </Button>
+        <Button type="primary" onClick={contractCall}>
+          调用三方合约
+        </Button>
+      </Space>
+      <h3 className="part-title">其他</h3>
+    </div>
+  );
+};
+export default IndexPage;
diff --git a/src/pages/tron/index.md b/src/pages/tron/index.md
new file mode 100644
index 0000000..5954476
--- /dev/null
+++ b/src/pages/tron/index.md
@@ -0,0 +1,3 @@
+### 文档
+
+1. 参考资料
\ No newline at end of file
diff --git a/src/pages/tron/index.tsx b/src/pages/tron/index.tsx
new file mode 100644
index 0000000..e9e5303
--- /dev/null
+++ b/src/pages/tron/index.tsx
@@ -0,0 +1,12 @@
+import { Button, Space } from 'antd';
+
+const IndexPage = () => {
+  return (
+    <div>
+      <h2 className="title">TRON</h2>
+      <h3 className="part-title">常用</h3>
+      <h3 className="part-title">其他</h3>
+    </div>
+  );
+};
+export default IndexPage;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..6d42f8c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"]
+    },
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "mock/**/*",
+    "src/**/*",
+    "config/**/*",
+    ".umirc.ts",
+    "typings.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib",
+    "es",
+    "dist",
+    "typings",
+    "**/__test__",
+    "test",
+    "docs",
+    "tests"
+  ]
+}
diff --git a/typings.d.ts b/typings.d.ts
new file mode 100644
index 0000000..06c8a5b
--- /dev/null
+++ b/typings.d.ts
@@ -0,0 +1,10 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>,
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}