bug fix: 登录流程

.env.development

@@ -13,3 +13,5 @@ VUE_APP_NFT_URL = '0x59e751c2037B710090035B6ea928e0cce80aC03f'
 VUE_APP_BEB_URL = '0x1304E6AA241eE3C9ea44Db9e593e85Ae76eC41F1'
 
 VUE_APP_CHAIN_ID = '5611'
+
+VUE_APP_APP_NAME = 'CF UAW'

.env.production

@@ -12,3 +12,5 @@ VUE_APP_NFT_URL = '0x59e751c2037B710090035B6ea928e0cce80aC03f'
 VUE_APP_BEB_URL = '0x1304E6AA241eE3C9ea44Db9e593e85Ae76eC41F1'
 
 VUE_APP_CHAIN_ID = '5611'
+
+VUE_APP_APP_NAME = 'CF UAW'

public/index.html

@@ -14,7 +14,6 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <script src="https://www.google.com/recaptcha/api.js?render=6Ld3xoIpAAAAABW7f5ImgAC6GcWLeDCbt5HPXqe2"></script>
     <script th:inline="javascript">
       /**
       * 加载外部js

src/components/walletDialog/index.vue

@@ -9,18 +9,8 @@
       </div>
       <div class="dialog-content">
         <p>Connect your wallet to start your Counter Fire journey</p>
-        <div class="wallet-content" v-if="isWallet != null">
+        
-          <li v-for="(item, index) in walletList" :key="index" @click="getLinkWallet(item.value)">
+        <div class="wallet-content">
-            <div class="disconnect" v-if="index == 2">
-              <span>{{ item.name }}</span>
-            </div>
-            <div v-else>
-              <img :src="item.imgUrl" alt />
-              <span>{{ item.name }}</span>
-            </div>
-          </li>
-        </div>
-        <div class="wallet-content" v-else>
           <li
             v-for="(item, index1) in isWalletList"
             :key="index1"
@@ -31,6 +21,11 @@
               <span>{{ item.name }}</span>
             </div>
           </li>
+          <li @click="disconnect" v-if="isWallet">
+            <div class="disconnect">
+              <span>Disconnect</span>
+            </div>
+          </li>
         </div>
       </div>
     </el-dialog>
@@ -38,12 +33,7 @@
 </template>
 
 <script>
-import Web3 from 'web3';
+import { isWalletConnected, linkWallet, disconnectLink, loginWithEthereum } from './../../wallet/index.js';
-import { loginNonce, hexToBase58, aesEncrypt, loginWithSignature } from './../../utils/webapi.js'
-import { isWalletConnected, linkWallet, disconnectLink, addNetwork } from './../../wallet/index.js';
-import { SiweMessage } from './../../utils/siwe.js'
-import { GlobalData } from './../../utils/GlobalData.js'
-import { parseTokenData } from './../../utils/utils.js'
 import { setToken, getToken } from './../../utils/cookies.js'
 
 export default {
@@ -52,27 +42,6 @@ export default {
   },
   data() {
     return {
-      walletList: [
-        {
-          name: "MetaMask",
-          value: "ethereum",
-          imgUrl: require("./../../assets/home/icon_metaMask.png")
-        },
-        {
-          name: "OKXwallet",
-          value: "okxwallet",
-          imgUrl: require("./../../assets/home/icon_OKXwallet.png")
-        // },
-        // {
-        //   name: "WalletConnect",
-        //   value: "connect",
-        //   imgUrl: require("./../../assets/home/icon_ConnectWallet.png")
-        },
-        {
-          name: "Disconnect",
-          value: "disconnect"
-        }
-      ],
       isWalletList: [
         {
           name: "MetaMask",
@@ -90,7 +59,7 @@ export default {
         //   imgUrl: require("./../../assets/home/icon_ConnectWallet.png")
         }
       ],
-      isWallet: localStorage.getItem('walletName'),
+      isWallet: !!localStorage.getItem('walletName'),
       myAddress: '',
       activity: 'uaw_activity',
     };
@@ -100,97 +69,30 @@ export default {
   methods: {
     // 链接钱包
     async getLinkWallet(val) {
-      // await addNetwork(val)
+      // const currentWalletName = localStorage.getItem('walletName')
-      // return
+      // if(currentWalletName) {
-      if(localStorage.getItem('walletName')) {
+      //   await disconnectLink(currentWalletName)
-        let res = await linkWallet(val)
+      // } 
-        this.myAddress = res
+      
-        localStorage.setItem('walletName',val)
-        localStorage.setItem('myAddress',res)
-        this.handleClose()
-        this.getWalletConnected()
-      } else {
-        disconnectLink(val)
-        if(val == 'connect') {
-          this.handleClose()
-          let res = await linkWallet(val)
-          localStorage.setItem('walletName',val)
-          localStorage.setItem('myAddress',res)
-          this.myAddress = res
-        } else if(val == "disconnect") {
-          this.logOut()
-        } else {
       let res = await linkWallet(val)
       this.handleClose()
       localStorage.setItem('walletName',val)
       localStorage.setItem('myAddress',res)
       this.myAddress = res
       await this.getWalletConnected()
-        }
+    },
-      }
+    async disconnect() {
+      let walletName = localStorage.getItem('walletName')
+      await disconnectLink(walletName)
+      this.logOut()
+      this.isWallet = false
+      location.reload()
     },
 
     // 登录
     async getWalletConnected() {
-      
+      let token = await loginWithEthereum(this.activity)
-      const provider = window.ethereum;
+      await this.getUserState(token)
-      let ethereum = window.ethereum;
-      var web3 = new Web3(provider);
-      
-      if (ethereum) {
-        if(localStorage.getItem("walletName") == 'ethereum') {
-          ethereum.request({ method: "eth_requestAccounts" });
-        } else if(localStorage.getItem("walletName") == 'okxwallet') {
-          okxwallet.request({ method: "eth_requestAccounts" });
-          console.log('这里')
-        }
-        const address = web3.utils.toChecksumAddress(this.myAddress);
-        // return
-        let chainId = await web3.eth.getChainId();
-        chainId = parseInt(chainId);
-        // console.log(chainId, "----");
-        const nonce = await loginNonce(address);
-        // console.log(nonce, "nonce-------------");
-        const nonceStr = `${nonce}|okx`;
-        const nonceEncrypt = hexToBase58(
-          aesEncrypt(nonceStr, "uaw_activity")
-        );
-        const message = new SiweMessage({
-          domain: document.location.host,
-          address: address,
-          chainId,
-          uri: document.location.origin,
-          version: "1",
-          statement: "Tasks test",
-          nonce: nonceEncrypt
-        });
-        let msgSign = message.toMessage();
-        let signature = await provider.request({
-          method: "personal_sign",
-          params: [web3.utils.utf8ToHex(msgSign), address]
-        });
-        let resLogin = await loginWithSignature(
-          message,
-          signature,
-          this.activity
-        );
-        console.log(resLogin.errcode,'61')
-        if (!resLogin.errcode) {
-          new GlobalData().token = resLogin.data.token;
-          this.token = resLogin.data.token;
-          localStorage.setItem("token", resLogin.data.token);
-          localStorage.setItem(
-            `${this.TOKEN_KEY}+ ${address}`,
-            resLogin.data.token
-          );
-          setToken(resLogin.data.token)
-          // console.log(resLogin.data.token);
-          console.log(parseTokenData(resLogin.data.token),'------------------');
-          this.getUserState(resLogin.data.token)
-        }
-      } else {
-        console.log("Please install the MetaMask plugin");
-      }
     },
     // 获取用户状态
     getUserState(token) {

src/views/home/index.vue

@@ -112,7 +112,7 @@
               </li>
             </div>
             <div class="wallet" @click="onWalletLogin">
-              <span v-if="!myAddress">X Connected</span>
+              <span v-if="!token">X Connected</span>
               <div
                 class="wallet-address"
                 v-else
@@ -164,7 +164,7 @@
                   <p>{{ item.desc }}</p>
                 </div>
               </div>
-              <div v-if="token" class="btn">
+              <div v-if="token != null" class="btn">
                 <div class="is-btn" v-if="item.task == 'TwitterConnect'">
                   <div v-if="item.status == 0 || item.status == 1" class="started" @click="toPost(item)">Connect</div>
                   <div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
@@ -181,7 +181,7 @@
                   <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
                 </div>
               </div>
-              <LinkBtn v-else text="Connect Wallet" />
+              <div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
             </li>
           </div>
           <div class="tips">
@@ -488,9 +488,7 @@ import Calen from "./calenView.vue";
 import BoxBtm from './boxBtm.vue'
 // import ImgView from './../../components/imgView.vue'
 import gameView from "./gameView.vue";
-import LinkBtn from "@/components/linkButton/linkBtnView.vue";
 import WalletDialog from "./../../components/walletDialog/index.vue";
-import Web3 from "web3";
 import { getToken } from './../../utils/cookies.js'
 import { getWalletAddress, isWalletConnected, linkWallet } from "./../../wallet/index.js";
 import {
@@ -506,14 +504,12 @@ import {
   checkReCaptcha,
   retweetTwitter,
 } from "./../../utils/webapi.js";
-import { sendDailyCheckIn, sendClaimTask, sendHelp, sendExplore } from "./../../utils/chainapi.js";
+import { sendDailyCheckIn, sendClaimTask, sendHelp } from "./../../utils/chainapi.js";
-import CryptoJS from "crypto-js";
 
 export default {
   components: {
     // Zillionaire,
     Calen,
-    LinkBtn,
     gameView,
     WalletDialog,
     BoxBtm,
@@ -2161,6 +2157,9 @@ export default {
       }
     }
   }
+  .light-btn{
+    cursor: pointer;
+  }
   .Explore-dialog {
 
   }

src/wallet/index.js

@@ -1,6 +1,12 @@
 import Web3 from 'web3'
 
 import { toHexChainId } from '@/utils/utils'
+import { loginNonce, hexToBase58, aesEncrypt, loginWithSignature } from '@/utils/webapi.js'
+
+import { SiweMessage } from '@/utils/siwe.js'
+import { GlobalData } from '@/utils/GlobalData.js'
+import { parseTokenData } from '@/utils/utils.js'
+import { setToken } from '@/utils/cookies.js'
 
 
 // Wallet Connect初始化
@@ -47,18 +53,18 @@ const connectWc = async() => {
   });
   return wc
 }
-let provider = null
+let provider = window.provider || null
 
 export async function getWalletAddress() {
 
-  const web3 = await provider.request({
+  const res = await provider.request({
     method: 'eth_accounts'
   })
-  if (web3 !== 'undefined') {
+  if (res !== 'undefined') {
-    if (web3[0] == '') {
+    if (res[0] == '') {
       return false
     } else {
-      return await web3[0]
+      return await res[0]
     }
   }
 }
@@ -146,7 +152,7 @@ export const changeChain = async() => {
 };
 
 // 链接钱包
-export const linkWallet = async(name) => {
+export async function linkWallet(name){
   if(name == "ethereum") {
     provider = window.ethereum
   } else if(name == "okxwallet") {
@@ -154,10 +160,12 @@ export const linkWallet = async(name) => {
   } else if(name == "connect") {
     provider = await connectWc()
   }
+  window.provider = provider
+  
   let res = await provider.request({ method: "eth_requestAccounts" })
   return res[0]
   // location.reload()
-};
+}
 
 // 断开链接
 export async function disconnectLink(name) {
@@ -197,6 +205,52 @@ export async function isWalletConnected() {
 
 
 // 添加网络
-export async function addNetwork(name) {
+export async function addNetwork() {
   changeChain()
 }
+
+export async function loginWithEthereum(activity) {
+  const web3 = new Web3(provider)
+  let address = await getWalletAddress()
+  address = web3.utils.toChecksumAddress(address);
+  // return
+  let chainId = await web3.eth.getChainId();
+  chainId = parseInt(chainId);
+  // console.log(chainId, "----");
+  const nonce = await loginNonce(address);
+  // console.log(nonce, "nonce-------------");
+  const nonceStr = `${nonce}|okx`;
+  const nonceEncrypt = hexToBase58(
+    aesEncrypt(nonceStr, "uaw_activity")
+  );
+  const message = new SiweMessage({
+    domain: document.location.host,
+    address: address,
+    chainId,
+    uri: document.location.origin,
+    version: "1",
+    statement: process.env.VUE_APP_APP_NAME,
+    nonce: nonceEncrypt
+  });
+  let msgSign = message.toMessage();
+  let signature = await provider.request({
+    method: "personal_sign",
+    params: [web3.utils.utf8ToHex(msgSign), address]
+  });
+  let resLogin = await loginWithSignature(
+    message,
+    signature,
+    activity
+  );
+  console.log(resLogin.errcode,'61')
+  if (!resLogin.errcode) {
+    new GlobalData().token = resLogin.data.token;
+    localStorage.setItem("token", resLogin.data.token);
+    setToken(resLogin.data.token)
+    // console.log(resLogin.data.token);
+    console.log(parseTokenData(resLogin.data.token),'------------------');
+    return resLogin.data.token;
+  } else {
+    throw new Error(resLogin.errmsg);
+  }
+}