合并链上交互，添加弹窗

src/App.vue

@@ -26,6 +26,7 @@ html,
 
 body {
   background-color: #0f1013;
+  margin: 0px;
 }
 
 div,

src/views/home/gameView.vue

@@ -2,7 +2,6 @@
   <div>
     <!-- <iframe :src="src" ref="iframe" id="iframe" style="border: 0px" width="500" height="480"></iframe> -->
     <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" ref="iframe"></canvas>
-    <div @click="sendOneAction(1)">hhhhhhhhhhhhhhhhhhhhhhh</div>
     <!-- <div @click="stepBtn">方法</div> -->
   </div>
 </template>
@@ -73,7 +72,7 @@ export default {
         cc.mainAnim.setCurrPos(this.getTotalUsed),
         4000)
     },
-    async sendOneAction(step) {
+    async sendOneAction(getTotalUsed, step) {
       let address = this.$store.state.user.address;
       if (!this.$store.state.wallet.connected || !address) {
         console.log('====')
@@ -101,10 +100,11 @@ export default {
               clearInterval(serTimeId)
             } 
           } else {
-            alert(`领取成功, 播放动画, 并显示奖励: ${JSON.stringify(data)}`)
+            console.log(JSON.stringify(data))
-            // cc.mainAnim.setCurrPos(getTotalUsed)
+            // alert(`领取成功, 播放动画, 并显示奖励: ${JSON.stringify(data)}`)
-            // cc.mainAnim.setData(step)
+            cc.mainAnim.setCurrPos(getTotalUsed)
-            // this.$emit('awardDialog', JSON.stringify(data))
+            cc.mainAnim.setData(step)
+            this.$emit('awardDialog', data)
             localStorage.removeItem(storeageKey)
             clearInterval(serTimeId)
           }

src/views/home/helpDialog.vue

@@ -17,7 +17,7 @@
             <div class="user-info-name">{{ boxData.nickname }}: <span>Thank you for your support! </span></div>
           </div>
           <div class="con">
-            <!-- <img :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt=""> -->
+            <img :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
           </div>
           <div class="btn" v-if="!token" @click="linkWallet">Wallet Connect</div>
           <div class="btn" v-else>
@@ -154,37 +154,38 @@ export default {
           // 3、是否已经助力此宝箱
           if(this.boxState.enhanced == 0) {
             // 4、开始助力
-            try{
+            this.sendEnhanceReq(this.boxCode)
-              // 5、链上请求交互
+            // try{
-              let helpRes = await sendHelp(address, this.boxCode)
+            //   // 5、链上请求交互
-              if(helpRes) {
+            //   let helpRes = await sendHelp(address, this.boxCode)
-                // 6、轮询是否助力成功
+            //   if(helpRes) {
-                let serTimeId = setInterval(async () => {
+            //     // 6、轮询是否助力成功
-                  let res = await this.$axios.post(
+            //     let serTimeId = setInterval(async () => {
-                      "/api/chest/enhance",
+            //       let res = await this.$axios.post(
-                      { code: this.boxCode },
+            //           "/api/chest/enhance",
-                      { headers: { Authorization: `Bearer ${this.token}` } }
+            //           { code: this.boxCode },
-                    );
+            //           { headers: { Authorization: `Bearer ${this.token}` } }
-                    if (res.data.errcode == 0) {
+            //         );
-                      // 7、判断是否是新用户
+            //         if (res.data.errcode == 0) {
-                      if(this.isNewUser == 0) {
+            //           // 7、判断是否是新用户
-                        // 8、关闭助力弹窗
+            //           if(this.isNewUser == 0) {
-                        this.awardData = {...res.data.data, isNewUser: this.isNewUser}
+            //             // 8、关闭助力弹窗
-                        this.$emit('awardDialog', this.awardData)
+            //             this.awardData = {...res.data.data, isNewUser: this.isNewUser}
-                        this.$emit('handleClose')
+            //             this.$emit('awardDialog', this.awardData)
-                      } else {
+            //             this.$emit('handleClose')
-                        // 8、关闭助力弹窗
+            //           } else {
-                        this.awardData = {...res.data.data, isNewUser: this.isNewUser}
+            //             // 8、关闭助力弹窗
-                        this.$emit('awardDialog', this.awardData)
+            //             this.awardData = {...res.data.data, isNewUser: this.isNewUser}
-                        this.$emit('handleClose')
+            //             this.$emit('awardDialog', this.awardData)
-                      }
+            //             this.$emit('handleClose')
-                      clearInterval(serTimeId)
+            //           }
-                    }
+            //           clearInterval(serTimeId)
-                }, 2000)
+            //         }
-              }
+            //     }, 2000)
-            } catch(e) {
+            //   }
-              this.$message.error(e.message)
+            // } catch(e) {
-            }
+            //   this.$message.error(e.message)
+            // }
           } else {
             this.$emit('handleClose')
             this.$message.error('Already helped this treasure chest')
@@ -200,6 +201,49 @@ export default {
       
     },
 
+    // 发送宝箱助力上链请求并领取奖励
+    async sendEnhanceReq(boxCode) {
+      let address = this.$store.state.user.address;
+      if (!this.$store.state.wallet.connected || !address) {
+        this.walletDialogVisible = true
+        return
+      }
+      let storeageKey
+      try {
+        storeageKey = await sendToChain('chest_enhance', address, boxCode)
+      } catch (err) {
+        this.$message.error(`error send chain request`)
+        return 
+      }
+      let serTimeId = setInterval(async () => {
+        try {
+          let { errcode, errmsg, data } = await apiEnhanceBox(boxCode)
+          if (!errcode) {
+            alert(`助力成功, 获得积分: ${data.score}`)
+            if(this.isNewUser == 0) {
+              // 8、关闭助力弹窗
+              this.awardData = {data, isNewUser: this.isNewUser}
+              this.$emit('awardDialog', this.awardData)
+              this.$emit('handleClose')
+            } else {
+              // 8、关闭助力弹窗
+              this.awardData = {data, isNewUser: this.isNewUser}
+              this.$emit('awardDialog', this.awardData)
+              this.$emit('handleClose')
+            }
+            localStorage.removeItem(storeageKey)
+            clearInterval(serTimeId)
+          } else if (errcode !== 14) {
+            // 状态不是等待链上确认的, 都提示错误
+            this.$message.error(errmsg)
+            clearInterval(serTimeId)
+          }
+        } catch (err) {
+          this.$message.error(`claim task reward error: ${err}`)
+        }
+      }, 3000)
+    },
+
     // 助力状态查询
     async initBoxState(code,chestId) {
       let res = await this.$axios.post('/api/chest/enhance/state',{code: code, chestId: chestId, },{headers: { Authorization: `Bearer ${this.token}` }})

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="zillionaire">
-    <div class="content" v-show="navIndex == 0 || navIndex == 1">
+    <div class="content" v-show="navIndex == 0 || navIndex == 1 || navIndex == 2">
       <div class="left">
         <div class="left-top">
           <div class="left-top-logo">
@@ -44,7 +44,7 @@
           </div>
         </div>
         <div class="left-title">
-          <div class="left-title-left" v-if="navIndex == 0">
+          <div class="left-title-left" v-if="navIndex == 0 || navIndex == 2">
             <div>LOOMING FOG OF THE <img src="./../../assets/home/Icon_star.png" alt=""> UNKNOWN</div>
             <p>Phase 1 Quest Log</p>
           </div>
@@ -67,7 +67,7 @@
           <div class="explore-zill">
             <gameView ref="stepId" :stepAmount="stepAmount" :getTotalUsed="getTotalUsed" @awardDialog="awardDialog1" />
           </div>
-          <div class="explore-desc" v-if="navIndex == 0">
+          <div class="explore-desc" v-if="navIndex == 0 || navIndex == 2">
             <div class="explore-desc-logo">
               <img src="./../../assets/home/Icon_smile.png" alt="">
             </div>
@@ -89,7 +89,7 @@
                 <span>{{ stepTicket }} <img src="./../../assets/common/Icon_Explore1.png" alt=""></span>
                 <span @click="increase">+</span>
               </div>
-              <div class="max">
+              <div class="max" @click="exploreMax">
                 MAX
               </div>
             </li>
@@ -150,33 +150,45 @@
         <div class="content-right" v-if="navIndex == 0">
           <div class="title">
             <div class="title-left">
-              <div>My Quest Logbook</div>
+              <div>Quest</div>
             </div>
           </div>
           <div class="quest">
-            <li v-for="(item, index) in activeList" :key="index">
+            <div class="bar">
-              <div class="content-right-left">
+              <div class="bar-top">
-                <!-- <div class="img-logo">
+                <div class="bar-top-left">12</div>
-                  <img src="./../../assets/home/twitter.png" alt />
+                <div class="bar-top-right">34</div>
-                </div>
-                <div class="score">
-                  <span>{{ item.score }} Pts</span>
-                </div>-->
-                <div class="desc">
-                  <h3>{{ item.title }}</h3>
-                  <p>{{ item.desc }}</p>
-                </div>
               </div>
-              <div v-if="token != null" class="btn">
+              <div class="bar-btm">
-                <div class="is-btn">
+                <p>*Complete tasks to win three exploration</p>
-                  <div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
+                <p>attempts.</p>
-                  <CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
-                  <div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
-                  <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
-                </div>
               </div>
-              <div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
+            </div>
-            </li>
+            <div class="quest-list">
+              <li v-for="(item, index) in activeList" :key="index">
+                <div class="content-right-left">
+                  <!-- <div class="img-logo">
+                    <img src="./../../assets/home/twitter.png" alt />
+                  </div>
+                  <div class="score">
+                    <span>{{ item.score }} Pts</span>
+                  </div>-->
+                  <div class="desc">
+                    <h3>{{ item.title }}</h3>
+                    <p>{{ item.desc }}</p>
+                  </div>
+                </div>
+                <div v-if="token != null" class="btn">
+                  <div class="is-btn">
+                    <div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
+                    <CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
+                    <div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
+                    <div v-if="item.status == 3" class="success">+{{ item.score }} <img src="./../../assets/home/Checkmark.png" alt=""></div>
+                  </div>
+                </div>
+                <div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
+              </li>
+            </div>
           </div>
           <div class="tips">
             *Claim will consume a small amount of gas.
@@ -284,9 +296,12 @@
             </div>
           </div>
         </div>
+        <div v-if="navIndex == 2">
+          其他钱包链合作
+        </div>
       </div>
     </div>
-    <div class="content-box" v-show="navIndex == 2">
+    <div class="content-box" v-show="navIndex == 3">
       <div class="box">
         <div class="box-top">
           <div class="left">
@@ -470,17 +485,23 @@ export default {
         {
           id: 3,
           name: 3,
-          imgSrc: require("./../../assets/common/P3-up.png"),
+          imgSrc: require("./../../assets/common/P5-up.png"),
-          imgSrc1: require("./../../assets/common/P3.png"),
+          imgSrc1: require("./../../assets/common/P5.png"),
         },
         {
           id: 4,
           name: 4,
+          imgSrc: require("./../../assets/common/P3-up.png"),
+          imgSrc1: require("./../../assets/common/P3.png"),
+        },
+        {
+          id: 5,
+          name: 5,
           imgSrc: require("./../../assets/common/P4-up.png"),
           imgSrc1: require("./../../assets/common/P4.png"),
         }
       ],
-      navIndex: 1,
+      navIndex: 0,
       walletDialogVisible: false,
       gameStateData: [],
       activityName: "",
@@ -531,9 +552,7 @@ export default {
     this.$nextTick(() => {
       if (this.$route.params.box) {
         this.helpDialogVisible = true
-        console.log('this.$route.params.box+++++++++++++++++++++++++++++++++', this.$route.params.box)
       }
-      console.log('this.$route.params.box----------------------------------', this.$route.params.box)
     });
   },
   mounted() {
@@ -667,7 +686,7 @@ export default {
     },
     // 领取任务奖励
     async getTaskClaim(id) {
-      debugger
+      // debugger
       let address = this.$store.state.user.address;
       if (!this.$store.state.wallet.connected || !address) {
         this.walletDialogVisible = true
@@ -696,7 +715,8 @@ export default {
             }
           } else {
             if(data?.status == 3) {
-              alert(`领取成功, 获得积分: ${data.score}`)
+              // alert(`领取成功, 获得积分: ${data.score}`)
+              this.activityDialog(data)
               this.getActivitrStatue(id)
               localStorage.removeItem(storeageKey)
               clearInterval(serTimeId)
@@ -720,9 +740,14 @@ export default {
       }
     },
 
+    // 最大探索次数
+    exploreMax() {
+      this.stepTicket = this.todayStepTicket
+    },
+
     // 探索
     async exploreCli(amount) {
-      this.$refs.stepId.sendOneAction11(this.getTotalUsed, amount)
+      this.$refs.stepId.sendOneAction(this.getTotalUsed, amount)
     },
 
     // 探索奖励
@@ -759,6 +784,15 @@ export default {
       this.eventName = 'help_event'
       this.dialogTitle = 'Got lucky and success full Boosting'
       this.ExploreDialogVisible = true
+      this.getGameStat();
+    },
+
+    // 社媒任务奖励
+    activityDialog(val) {
+      this.awardData = val
+      this.eventName = 'help_event'
+      this.dialogTitle = 'Congratulations'
+      this.ExploreDialogVisible = true
     },
 
     // 关闭奖励弹窗
@@ -899,8 +933,8 @@ export default {
 
     // nav 导航
     navBtn(index) {
-      if(index == 3) {
+      if(index == 4) {
-        this.navIndex = 2
+        this.navIndex = 3
       } else {
         this.navIndex = index;
       }
@@ -1213,12 +1247,10 @@ export default {
                 display: inline-block;
               }
               span:nth-child(1) {
-                font-size: 30px;
+                font-size: 28px;
                 cursor: pointer;
               }
               span:nth-child(2) {
-                // font-size: 30px;
-                // cursor: pointer;
                 display: flex;
                 align-items: center;
                 img {
@@ -1228,14 +1260,17 @@ export default {
                 }
               }
               span:nth-child(3) {
-                font-size: 30px;
+                font-size: 28px;
                 cursor: pointer;
               }
             }
             .max {
               padding: 5px 20px;
-              font-size: 14px;
+              font-size: 12px;
-              border: 1px solid #a97e4b;
+              color: #F2B95B;
+              border: 2px solid #F2B95B;
+              border-radius: 20px;
+              cursor: pointer;
             }
           }
           .explore-btn {
@@ -1300,98 +1335,132 @@ export default {
           width: 100%;
           box-sizing: border-box;
           border-radius: 20px;
-          li {
+          .bar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            min-height: 60px;
-            padding: 10px;
-            border-radius: 10px;
-            font-size: 14px;
             margin-bottom: 10px;
-            box-sizing: border-box;
+            .bar-top {
-            color: #fff;
+
-            .content-right-left {
+            }
-              display: flex;
+            .bar-btm {
-              align-items: center;
+              font-size: 10px;
-              .img-logo {
+              color: #9950FD;
-                width: 40px;
+              p {
-                height: 40px;
+                text-align: left;
-                img {
-                  width: 100%;
-                  height: 100%;
-                }
-              }
-              .score {
-                margin-left: 10px;
-              }
-              .desc {
-                max-width: 260px;
-                margin: 0 5px;
-                h3 {
-                  text-align: left;
-                  font-size: 14px;
-                  font-family: 'Poppins-SemiBold';
-                }
-                p {
-                  font-family: 'Poppins-Light';
-                  font-size: 12px;
-                  text-align: left;
-                }
               }
             }
-            .btn {
+          }
-              border-radius: 15px;
+          .quest-list {
-              color: #000;
+            width: 100%;
-              cursor: pointer;
+            height: 380px;
-              position: relative;
+            overflow-y: scroll;
-              .is-btn {
+            overflow-x: hidden;
-                width: 80px;
+            li {
-                height: 35px;
+              display: flex;
-                font-size: 12px;
+              justify-content: space-between;
-                .started {
+              align-items: center;
-                  width: 90px;
+              min-height: 60px;
-                  height: 30px;
+              padding: 10px;
-                  line-height: 30px;
+              border-radius: 10px;
-                  position: absolute;
+              font-size: 14px;
-                  top: 50%;
+              margin-bottom: 10px;
-                  left: 50%;
+              box-sizing: border-box;
-                  transform: translate(-50% , -50%);
+              color: #fff;
-                  background: #fec25d;
+              .content-right-left {
-                  background: url('./../../assets/home/ButtonFollow.png') no-repeat;
+                display: flex;
-                  background-size: 100% 100%;
+                align-items: center;
-                }
+                .img-logo {
-                .claim {
+                  width: 40px;
-                  width: 90px;
+                  height: 40px;
-                  height: 30px;
-                  line-height: 30px;
-                  position: absolute;
-                  top: 50%;
-                  left: 50%;
-                  transform: translate(-50% , -50%);
-                  background: url('./../../assets/home/Buttonclaim.png') no-repeat;
-                  background-size: 100% 100%;
-                }
-                .success {
-                  width: 125px;
-                  height: 65px;
-                  line-height: 65px;
-                  position: absolute;
-                  top: 50%;
-                  left: 50%;
-                  transform: translate(-50% , -50%);
-                  color: #fff;
-                  background: #9950fd;
-                  background: url('./../../assets/home/Button.png') no-repeat;
-                  background-size: 100% 100%;
                   img {
-                    width: 12px;
+                    width: 100%;
-                    height: 8px;
+                    height: 100%;
+                  }
+                }
+                .score {
+                  margin-left: 10px;
+                }
+                .desc {
+                  max-width: 240px;
+                  margin: 0 5px;
+                  h3 {
+                    text-align: left;
+                    font-size: 14px;
+                    font-family: 'Poppins-SemiBold';
+                  }
+                  p {
+                    font-family: 'Poppins-Light';
+                    font-size: 12px;
+                    text-align: left;
+                  }
+                }
+              }
+              .btn {
+                border-radius: 15px;
+                color: #000;
+                cursor: pointer;
+                position: relative;
+                .is-btn {
+                  width: 80px;
+                  height: 35px;
+                  font-size: 12px;
+                  .started {
+                    width: 90px;
+                    height: 30px;
+                    line-height: 30px;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50% , -50%);
+                    background: #fec25d;
+                    background: url('./../../assets/home/ButtonFollow.png') no-repeat;
+                    background-size: 100% 100%;
+                  }
+                  .claim {
+                    width: 90px;
+                    height: 30px;
+                    line-height: 30px;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50% , -50%);
+                    background: url('./../../assets/home/Buttonclaim.png') no-repeat;
+                    background-size: 100% 100%;
+                  }
+                  .success {
+                    width: 125px;
+                    height: 65px;
+                    line-height: 65px;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50% , -50%);
+                    color: #fff;
+                    background: #9950fd;
+                    background: url('./../../assets/home/Button.png') no-repeat;
+                    background-size: 100% 100%;
+                    img {
+                      width: 12px;
+                      height: 8px;
+                    }
                   }
                 }
               }
             }
           }
+          ::v-deep .quest-list::-webkit-scrollbar {
+          width: 5px;
+        }
+      ::v-deep .quest-list::-webkit-scrollbar-track{
+          background: #171220;
+          border-radius:2px;
+        }
+      ::v-deep .quest-list::-webkit-scrollbar-corner{
+          display: block;
+        }
+      ::v-deep .quest-list::-webkit-scrollbar-thumb{
+        height: 15px;
+          background: #9950fd;
+          border-radius:10px;
+        }
         }
         .tips {
           margin-top: 10px;

src/wallet/index.js

@@ -78,7 +78,11 @@ export class Wallet {
     } else if (this.walletName == 'connect') {
       this.provider = await connectWc();
     }
-    this.chainId = process.env.chainData.id
+    let res = await this.provider.request({ method: 'eth_chainId' });
+    if (res) {
+      this.chainId = parseInt(res);
+      store.commit('wallet/updateChain', this.chainId)
+    }
     this.subscribeToEvents();
   }
 
@@ -132,6 +136,9 @@ export class Wallet {
 
   async changeChain(){
     const chainId = chainData.id
+    if (store.state.wallet.chainId === chainId) {
+      return
+    }
     const hexChainId = toHexChainId(chainId)
     if (this.chainId == chainId) {
       return
@@ -255,7 +262,7 @@ export class Wallet {
 
   async sendScription(address, dataStr){
     const data = Web3.utils.utf8ToHex(dataStr)
-    const provider = new Web3(window.ethereum);
+    const provider = new Web3(this.provider);
     let gasPrice = await provider.eth.getGasPrice()
     gasPrice = gasPrice * 2n
     // const gasPrice = 100000000n;
@@ -263,7 +270,7 @@ export class Wallet {
     // return
     let sendObj = { 
       from: address,
-      to: targetAddress,
+      to: process.env.VUE_APP_SCRIPTION_ADDRESS,
       value: '0x0',
       data
     }