添加web3登录

package.json

@@ -72,7 +72,11 @@
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
     "umi": "^3.5.0",
-    "umi-serve": "^1.9.10"
+    "umi-serve": "^1.9.10",
+    "web3": "^1.7.0",
+    "@metamask/detect-provider": "^1.2.0",
+    "@walletconnect/client": "^1.7.1",
+    "@walletconnect/qrcode-modal": "^1.7.1"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.0.2",
@@ -94,7 +98,7 @@
     "@umijs/yorkie": "^2.0.3",
     "babel-plugin-import": "^1.13.3",
     "carlo": "^0.9.46",
-    "cross-env": "^7.0.0",
+    "cross-env": "^7.0.3",
     "cross-port-killer": "^1.1.1",
     "detect-installer": "^1.0.1",
     "enzyme": "^3.11.0",

src/pages/Login/index.tsx

@@ -1,4 +1,4 @@
-import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { LeftSquareFilled, LockOutlined, UserOutlined } from '@ant-design/icons';
 import React, { useState } from 'react';
 import { ProFormText, LoginForm } from '@ant-design/pro-form';
 import { useIntl, history, FormattedMessage, useModel } from 'umi';
@@ -7,13 +7,18 @@ import defaultSettings from '../../../config/defaultSettings';
 import styles from './index.less';
 import { CACHE_TOKEN } from '@/constants/cacheKey';
 
+import { initWeb3, walletSign } from '../../utils/web3';
+
 const Login: React.FC = () => {
   const intl = useIntl();
-
   const handleSubmit = async (values: API.LoginParams) => {
     // 登录
-    const res: any = await login({ ...values });
+    await initWeb3();
+    const signInfo = await walletSign();
+    const res: any = await login({ data: signInfo.raw, sign: signInfo.sign });
     localStorage.setItem(CACHE_TOKEN, res.token);
+    // const res: any = await login({ ...values });
+    // localStorage.setItem(CACHE_TOKEN, res.token);
     /** 此方法会跳转到 redirect 参数所在的位置 */
     if (!history) return;
     const { query } = history.location;

src/routes/index.ts

@@ -10,6 +10,50 @@ export default [
     layout: false,
     component: './Login',
   },
+  {
+    name: 'ETH',
+    path: RoutePath.ETH,
+    routes: [
+      {
+        path: RoutePath.ETH,
+        redirect: RoutePath.ADDRESS.LIST,
+        hideInMenu: true,
+      },
+      {
+        name: 'ETH地址管理',
+        path: RoutePath.ADDRESS.LIST,
+        component: './Work/List',
+      },
+      {
+        name: 'ETH地址详情',
+        path: RoutePath.ADDRESS.EDIT,
+        hideInMenu: true,
+        component: './Work/Edit',
+      },
+      {
+        name: 'ETH充值记录',
+        path: RoutePath.RECORD.LIST,
+        component: './Work/List',
+      },
+      {
+        name: 'ETH充值详情',
+        path: RoutePath.RECORD.EDIT,
+        hideInMenu: true,
+        component: './Work/Edit',
+      },
+      {
+        name: 'ETH币种管理',
+        path: RoutePath.CURRENCY.LIST,
+        component: './Work/List',
+      },
+      {
+        name: 'ETH币种详情',
+        path: RoutePath.CURRENCY.EDIT,
+        hideInMenu: true,
+        component: './Work/Edit',
+      },
+    ],
+  },
   {
     name: '设置',
     path: RoutePath.SETTING,

src/routes/routePath.ts

@@ -1,6 +1,20 @@
 const SETTING = '/setting';
+const ETH = '/eth';
 const RoutePath = {
   LOGIN: '/login',
+  ETH: ETH,
+  ADDRESS: {
+    LIST: `${ETH}/address`,
+    EDIT: `${ETH}/address/edit`,
+  },
+  RECORD: {
+    LIST: `${ETH}/record`,
+    EDIT: `${ETH}/record/edit`,
+  },
+  CURRENCY: {
+    LIST: `${ETH}/currency`,
+    EDIT: `${ETH}/currency/edit`,
+  },
   SETTING: SETTING,
   WORK: {
     LIST: `${SETTING}/work`,

src/services/login.ts

@@ -1,8 +1,24 @@
 import request from '@/utils/request';
 
+// export const login = (data) => {
+//   return request.request({
+//     url: '/admin/login',
+//     method: 'post',
+//     data,
+//   });
+// };
+
+export const getData = (params) => {
+  return request.request({
+    url: '/admin/api/v1/sign',
+    method: 'get',
+    params,
+  });
+};
+
 export const login = (data) => {
   return request.request({
-    url: '/admin/login',
+    url: '/admin/api/v1/login',
     method: 'post',
     data,
   });

src/utils/request.ts

@@ -6,7 +6,7 @@ import { CACHE_TOKEN } from '@/constants/cacheKey';
 
 // create an axios instance
 const request = axios.create({
-  baseURL: '', //
+  baseURL: 'http://192.168.31.249:8888', //
   timeout: 10000, // request timeout
 });
 // request interceptor

src/utils/web3.ts

@@ -0,0 +1,57 @@
+import Web3 from 'web3';
+import detectEthereumProvider from '@metamask/detect-provider';
+import { getData } from '@/services/login';
+
+let provider: any;
+
+export const web3 = new Web3();
+if (typeof window.ethereum !== 'undefined') {
+  web3.eth.defaultAccount = window.ethereum.selectedAddress;
+}
+
+export async function initWeb3() {
+  provider = await detectEthereumProvider();
+
+  if (!provider) {
+    console.log('请安装MetaMask');
+    return false;
+  }
+
+  try {
+    web3.setProvider(provider);
+    const accounts = await provider.request({
+      method: 'eth_requestAccounts',
+    });
+    //如果用户同意了登录请求，你就可以拿到用户的账号
+    web3.eth.defaultAccount = accounts[0];
+    return true;
+  } catch (reason) {
+    switch (reason) {
+      case 'Already processing eth_requestAccounts. Please wait.': // 已有请求存在
+        console.log('请打开MetaMask完成授权');
+        break;
+      case 'User rejected provider access': //如果用户拒绝了登录请求
+        console.log('请同意登录请求');
+        break;
+      default:
+        // 本不该执行到这里，但是真到这里了，说明发生了意外
+        console.log('登录出错！err:' + reason);
+        break;
+    }
+  }
+  return false;
+}
+
+export async function walletSign() {
+  const res: any = await getData({});
+  // const data = '1234';
+  const rawData: any = web3.utils.fromUtf8(res);
+  const { result } = await provider.send('personal_sign', [
+    rawData,
+    web3.eth.defaultAccount!.toLowerCase(),
+  ]);
+  return {
+    raw: res,
+    sign: result,
+  };
+}