mintClaim流程测试完成

.env.development

@@ -1,7 +1,7 @@
 VITE_BASE_API='https://oauth-svr.cebggame.com/mint'
-VUE_APP_GPAL_API='http://192.168.100.83:4000/sns'
-VITE_TOKENID_ID = '0x34a1'
-VITE_ERC_ADDRESS = '0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
-VITE_CFNFT_ADDRESS = '0xaa34B79A0Ab433eaC900fB3CB9f191F5Cd27501D'
-VITE_CLAIM_ADDRESS = '0xf45702180314187a3549FEDac3B78349b47ca6A0'
-VITE_CLAIMWL_ADDRESS = '0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'
+VITE_GPAL_API='http://192.168.100.83:4000/sns'
+VITE_TOKENID_ID='0x34a1'
+VITE_ERC_ADDRESS='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
+VITE_CFNFT_ADDRESS='0xaa34B79A0Ab433eaC900fB3CB9f191F5Cd27501D'
+VITE_CLAIM_ADDRESS='0xf45702180314187a3549FEDac3B78349b47ca6A0'
+VITE_CLAIMWL_ADDRESS='0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'

.env.production

@@ -1,7 +1,7 @@
 VITE_BASE_API='https://oauth-svr.cebggame.com/mint'
 VUE_APP_GPAL_API='http://192.168.100.83:4000/sns'
-VITE_TOKENID_ID = '0x34a1'
-VITE_ERC_ADDRESS = '0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
-VITE_CFNFT_ADDRESS = '0xaa34B79A0Ab433eaC900fB3CB9f191F5Cd27501D'
-VITE_CLAIM_ADDRESS = '0xf45702180314187a3549FEDac3B78349b47ca6A0'
-VITE_CLAIMWL_ADDRESS = '0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'
+VITE_TOKENID_ID='0x34a1'
+VITE_ERC_ADDRESS='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
+VITE_CFNFT_ADDRESS='0xaa34B79A0Ab433eaC900fB3CB9f191F5Cd27501D'
+VITE_CLAIM_ADDRESS='0xf45702180314187a3549FEDac3B78349b47ca6A0'
+VITE_CLAIMWL_ADDRESS='0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'

README.md

@@ -5,3 +5,6 @@ This template should help get you started developing with Vue 3 in Vite. The tem
 ## Recommended IDE Setup
 
 - [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+
+## install 修改
+node_modules\@uniswap\router-sdk\dist\router-sdk.cjs.production.min.js  r.BigInt 替换成 r.default.BigInt

jsconfig.json

@@ -0,0 +1,36 @@
+// {
+//   "compilerOptions": {
+//     "target": "es5",
+//     "module": "esnext",
+//     "baseUrl": "./",
+//     "moduleResolution": "node",
+//     "paths": {
+//       "@/*": [
+//         "src/*"
+//       ]
+//     },
+//     "lib": [
+//       "esnext",
+//       "dom",
+//       "dom.iterable",
+//       "scripthost"
+//     ]
+//   }
+// }
+
+{ 
+    "compilerOptions": { 
+        "target": "esnext", 
+        "module": "esnext", 
+        "moduleResolution": "node", 
+        "strict": true, 
+        "jsx": "preserve", 
+        "sourceMap": true, 
+        "resolveJsonModule": true, 
+        "esModuleInterop": true, 
+        "lib": ["esnext", "dom"], 
+        "baseUrl": "./", 
+        "paths": { "@/*":["src/*"] } 
+    }, 
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": [] 
+}

package.json

@@ -4,28 +4,32 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --host --mode dev",
-    "build": "vite build --mode dev",
-    "build:test": "vite build --mode test",
+    "dev": "vite --host --mode development",
+    "build": "vite build --mode development",
     "build:prod": "vite build --mode production",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vue/compiler-sfc": "^3.4.27",
     "axios": "^1.7.2",
     "buffer": "^6.0.3",
     "element-plus": "^2.7.3",
     "ethers": "5.4",
     "postcss-px-to-viewport": "^1.1.1",
+    "rollup-plugin-polyfill-node": "^0.12.0",
     "sass": "^1.77.2",
     "vue": "^3.4.21",
-    "rollup-plugin-polyfill-node": "^0.12.0",
+    "vue-eslint-parser": "^9.4.3",
     "web3": "^4.9.0"
   },
   "devDependencies": {
-    "@imtbl/sdk": "^1.36.4",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@imtbl/sdk": "^1.29.2",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "@vitejs/plugin-vue": "^5.0.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
+    "typescript": "^4.9.5",
     "vite": "^5.2.0",
     "vite-plugin-node-polyfills": "^0.22.0"
   }

src/App.vue

@@ -1,22 +1,16 @@
-<script setup>
-import HelloWorld from './view/mintIndex.vue'
-import FooterView from './components/footerView.vue'
-</script>
-
 <template>
-  <!-- <div>
-    <div @click="immuTableLogin">immuTableLogin</div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div> -->
-  <HelloWorld />
-  <FooterView />
+  <div>
+    <HelloWorld />
+    <FooterView />
+</div>
 </template>
 
+<script setup>
+import {ref} from 'vue'
+import HelloWorld from "./view/mintIndex.vue";
+import FooterView from "./components/footerView.vue";
+</script>
+
 <style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -112,5 +106,4 @@ video {
   list-style: none;
   text-align: center;
 }
-
 </style>

src/components/errorDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-dialog
+    :model-value="errDialogVisible"
+    :show-close="false"
+    :modal="false"
+    :before-close="errHandleClose"
+    :close-on-click-modal="false"
+    class="errDialog"
+  >
+    <div class="top">
+      <div class="top-title"></div>
+      <div class="top-close" @click="errHandleClose">
+        <img src="./../assets/home/Close counter.png" alt />
+      </div>
+    </div>
+    <div class="content">
+        <div >
+          {{ dialogText }}
+        </div>
+      </div>
+  </el-dialog>
+</template>
+  
+  <script>
+import { ElDialog } from "element-plus";
+export default {
+  name: "Loading",
+  props: {
+    errDialogVisible: Boolean,
+    dialogText: String
+  },
+  data() {
+    return {
+      // Loading:
+    };
+  },
+  methods: {
+    errHandleClose() {
+      this.$emit('errHandleClose')
+    }
+  }
+};
+</script>
+  
+  <style lang="scss" scoped>
+</style>

src/components/footerView.vue

@@ -13,7 +13,7 @@
         </a>
       </li>
       <li>
-        <a href="https://youtube.com/@_CounterFire" target="_blank">
+        <a href="https://www.youtube.com/@playCounterFire" target="_blank">
           <img src="./../assets/home/com_Youtube_icon.png" alt="">
         </a>
       </li>

src/components/starTimer.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
 const props = defineProps({
   getAddress: {
     type: String,
@@ -18,11 +18,12 @@ const hour = ref(0);
 const min = ref(0);
 const sec = ref(0);
 let intervalId = null
+const emit = defineEmits(['stopTime'])
 const starTimer = () => {
   let nowTime = new Date().getTime();
   // let str = localStorage.getItem(`openTime${props.getAddress}`)
-  let strTime = (nowTime+86400000 - nowTime) / 1000
-
+  // let strTime = (1718098200000 - nowTime) / 1000
+  let strTime = (1718098200000 - nowTime) / 1000
   intervalId = setInterval(() => {
     if (strTime >= 1) {
       // remainingTime.value -= 1;
@@ -45,6 +46,7 @@ const starTimer = () => {
         min.value = m;
         sec.value = s;
     } else {
+      emit('stopTime')
       localStorage.removeItem(`openTime${props.getAddress}`)
       clearInterval(intervalId);
       intervalId = null
@@ -54,11 +56,11 @@ const starTimer = () => {
 // 判断是否登录 判断是否显示mint成功倒计时
 const isOpenTime = () => {
       let openTime = localStorage.getItem(`openTime${props.getAddress}`)
-      // if(props.getAddress) {
-      //   if(props.getAddress == openTime.split('-')[0]) {
+      if(props.getAddress) {
+        // if(props.getAddress == openTime.split('-')[0]) {
           starTimer()
-      //   }
-      // }
+        // }
+      }
     }
 
 onMounted(() => {

src/main.js

@@ -5,9 +5,10 @@ import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import passportInit from './wallet/initPassport.js'
+// import showErr from './components/errorDialog/index.js'
 
 const app = createApp(App)
-
+// app.config.globalProperties.$showErr = showErr
 
 app.use(ElementPlus)
 app.use(passportInit)

src/view/mintIndex.vue

@@ -45,13 +45,13 @@
             <p class="activity-time">Event date: 2024.6.4~2024.6.22</p>
             <div class="home-content-left-time-btm">
               <p>Mint100% will get a blind box</p>
-              <div v-if="activityState == 0 || activityState == 1" class="mint-time">
+              <div v-if="activityState == 0" class="mint-time">
                 <span>{{ days1 }}D</span>
                 <span>{{ hours1 }}H</span>
                 <span>{{ minutes1 }}M</span>
                 <span>{{ senconds1 }}S</span>
               </div>
-              <div v-if="activityState == 2 || activityState == 3" class="mint-time">
+              <div v-if="activityState == 2 || activityState == 1 || activityState == 3" class="mint-time">
                 <span>OPENING</span>
               </div>
               <div v-if="activityState == 4" class="mint-time">
@@ -173,7 +173,7 @@
                   </div>
                 </div>
               </div>
-              <div class="join-btm-right">
+              <div class="join-btm-right" @click="hasNot">
                 <div
                   class="mint"
                 >
@@ -202,7 +202,7 @@
               </div>
               <div class="join-list-btm">
                 <div v-if="isOpenClaim < 3" class="claim-total">
-                  <h1 v-if="totalLimit > 0">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
+                  <h1 v-if="totalLimit > 0 || getMintConfig">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
                   <!-- <h1 v-else>{{getMintConfig.maxSupply}}</h1> -->
                   <div>Supply</div>
                 </div>
@@ -261,7 +261,7 @@
                   </div>
                 </div>
                 <div
-                  v-if="isOpenClaim == 1"
+                  v-if="isOpenClaim == 0 || isOpenClaim == 1"
                   class="noWhite"
                 >
                   <span>Mint</span>
@@ -389,7 +389,7 @@
               </div>
               <div class="join-list-btm">
                 <div class="claim-total">
-                  <h1 v-if="totalLimit > 0">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
+                  <h1 v-if="totalLimit > 0 || getMintConfig">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
                   <div>Supply</div>
                 </div>
                 <div class="claim-price">
@@ -481,72 +481,6 @@
           </div>
         </div>
       </div>
-      <!-- <div v-else class="mint-content-right">
-        <div class="home-content-right-top">
-          <div class="wallet" @click="walletDialogVisible = true">
-            <span v-if="getAddress == null || getAddress == ''">Connect Wallet</span>
-            <div v-if="getAddress == null || getAddress == ''" class="wallet-arrow">
-              <img class="hover-show" src="./../assets/home/arrow1.png" alt />
-              <img class="hover-none" src="./../assets/home/arrow1.png" alt />
-            </div>
-            <div
-              class="wallet-address"
-              v-else
-            >{{ getAddress.substr(0,4) }}…{{ getAddress.substr(-4) }}</div>
-            <div class="wallet-btn">
-              <img class="hover-show" src="./../assets/home/Connect Menu1.png" alt />
-              <img class="hover-none" src="./../assets/home/Connect Menu2.png" alt />
-            </div>
-          </div>
-        </div>
-        <div class="home-content-right-join">
-          <div class="home-content-right-join-top">
-            <img src="./../assets/home/Picture01.png" alt />
-          </div>
-          <div class="home-content-right-join-btm">
-            <div class="join-list">
-              <li>
-                <div>
-                  <h1 v-if="totalLimit > 0">{{ totalLimit }}/500</h1>
-                  <h1 v-else>500</h1>
-                </div>
-                <div>Supply</div>
-              </li>
-              <li>
-                <div>
-                  <h1>MINT DETAILS</h1>
-                </div>
-                <div @click="tipsDialogVisible = true">
-                  <img src="./../assets/home/Icon_!.png" alt />
-                </div>
-              </li>
-            </div>
-            <div class="join-btm">
-              <div class="join-btm-left">
-                <p>
-                  Mint quantity:
-                  <br />
-                  <span>{{ whiteCount == 0 ? whiteCount+1 : whiteCount }}</span>
-                </p>
-                <div class @click="addTest">Add Whitelist</div>
-              </div>
-              <div class="join-btm-right">
-                <div
-                  class="mint"
-                  @click="walletDialogVisible = true"
-                >
-                  <span>Mint</span>
-                  &nbsp;
-                  <div>
-                    <img class="hover-show" src="./../assets/home/Arrow2.png" alt />
-                    <img class="hover-none" src="./../assets/home/Arrow3.png" alt />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>-->
     </div>
     <el-dialog
       class="dialog-wallet"
@@ -627,16 +561,34 @@
           </div>
         </div>
         <li v-else v-for="(item, index) in nftList" :key="index">
-          <div class="nft-top">
-            <img src="./../assets/home/Picture01.png" alt="">
-          </div>
-          <div class="nft-btm">
-            <div class="time-tips">
-              <img src="./../assets/home/Opening.png" alt="">
-              <span>Opening</span>
+          <div v-if="!stopTimes" class="nft-content-no">
+            <div class="nft-top">
+              <img src="./../assets/home/blind box img02.png" alt="">
             </div>
-            <div class="time">
-              <StarTimer :getAddress="getAddress" />
+            <div class="nft-btm">
+              <div class="time-tips">
+                <img src="./../assets/home/Opening.png" alt="">
+                <span>Opening</span>
+              </div>
+              <div class="time">
+                <StarTimer @stopTime="stopTimeChange" :getAddress="getAddress" />
+              </div>
+            </div>
+          </div>
+          <div v-else class="nft-content-yes">
+            <div class="heroes">
+              <div class="heroes-video-bg">
+                <video playsinline autoplay muted loop src="./../assets/home/video/GenesisHeroes_Aoi1.mp4"></video>
+              </div>
+              <div class="heroes-top">
+                10D
+                <!-- <div><img src="" alt=""></div> -->
+                <!-- <div></div> -->
+              </div>
+              <div class="heroes-btm">
+                <div>999</div>
+                <div>999</div>
+              </div>
             </div>
           </div>
         </li>
@@ -661,7 +613,7 @@
           </div>
           <div class="title" :style="`${titleColor}`">MINT SUCCESSFULL</div>
           <div class="name">
-            <span>Blind Box * {{ mintTotal }}</span>
+            <span>Blind Box * {{ thisMintTotal }}</span>
           </div>
           <div class="mint-bottom">
             <div>
@@ -707,6 +659,7 @@
       </div>
     </el-dialog>
     <Loading :Loading="openLoading" />
+    <ErrDialog :errDialogVisible="errDialogVisible" :dialogText="dialogText" @errHandleClose="errHandleClose" />
   </div>
 </template>
 
@@ -722,6 +675,7 @@ import {
 import Web3 from "web3";
 import Loading from "./../components/loading.vue";
 import StarTimer from "./../components/starTimer.vue";
+import ErrDialog from "./../components/errorDialog.vue";
 const { proxy } = getCurrentInstance();
 const passportProvider = proxy.$passportInit.connectEvm();
 import { ElButton, ElDialog } from "element-plus";
@@ -888,16 +842,16 @@ let timer = null;
 // 倒计时
 const starTimer = () => {
   let now = new Date().getTime();
-  let str = 1717662600000; // 开始前 （前24）
-  let bar = 1717662840000; // 开始后 （一期倒计时4小时）
-  let end = 1717663200000; // 结束前 （）
+  let str = 1718088300000; // 开始前 （前24）
+  let bar = 1718088600000; // 开始后 （一期倒计时4小时）
+  let end = 1718089080000; // 结束前 （）
   let strTime = (str - now) / 1000; // 开始前毫秒数 - 现在毫秒数
   let begTime = (bar - now) / 1000; // 开始后毫秒数 - 现在毫秒数
   let leftTime = (end - now) / 1000; // 结束前毫秒数 - 现在毫秒数
 
-  let towStr = 1717662840000; // 开始前 （前24）
-  let towBar = 1717663200000; // 开始后 （一期倒计时4小时）
-  let towEnd = 1717663500000; // 结束前 （）
+  let towStr = 1718088600000; // 开始前 （前24）
+  let towBar = 1718088900000; // 开始后 （一期倒计时4小时）
+  let towEnd = 1718089080000; // 结束前 （）
   let towStrTime = (towStr - now) / 1000; // 开始前毫秒数 - 现在毫秒数
   let towBarTime = (towBar - now) / 1000; // 开始后毫秒数 - 现在毫秒数
   let towEndTime = (towEnd - now) / 1000; // 结束前毫秒数 - 现在毫秒数
@@ -1021,17 +975,26 @@ const starTimer = () => {
 4 都结束
 */
 
+const dialogText = ref()
+// 活动未开启
+const hasNot = () => {
+  dialogText.value = 'Event not started';
+  errDialogVisible.value = true;
+}
+const errHandleClose = () => {
+  errDialogVisible.value = false;
+}
 // 查询是否在白名单
 const whiteStatus = ref(0);
 const whiteCount = ref(0);
 // mint数量
 const mintTotal = ref(1);
+const thisMintTotal = ref(0);
 // 是否在白名单和是否已经打开
 const isOpenClaim = ref(0);
 const getIsWhite = async () => {
   if (getAddress.value) {
     let whiteAmount = await fetchWLCount("ethereum", getAddress.value)
-    console.log('fetchWLCount', whiteAmount)
     if(whiteAmount > 0) {
       whiteCount.value = whiteAmount;
       mintTotal.value = whiteAmount;
@@ -1064,6 +1027,7 @@ const mintClaim = async () => {
   //           return
   // 1、判断是否有mint次数
   if (mintTotal.value > 0) {
+    thisMintTotal.value = mintTotal.value
     openLoading.value = true;
     // 2、添加TIMX代币
     try {
@@ -1098,20 +1062,23 @@ const mintClaim = async () => {
           mintTotal.value,
           web3
         );
+        // console.log(claimNft)
+        // return
         if (claimNft) {
           isOpenClaim.value = 3;
           openStatus.value = 2;
-          openLoading.value = false;
-          successDialogVisible.value = true;
           mintInit()
           let interval_id = setInterval(() => {
             clearInterval(interval_id);
+            openLoading.value = false;
             openStatus.value = 0;
+            successDialogVisible.value = true;
           }, 2000);
+          
           // mint成功倒计时
           // let times = new Date().getTime();
-        } else {
-          openLoading.value = false;
+        // } else {
+        //   openLoading.value = false;
         }
       } catch (e) {
         openStatus.value = 3;
@@ -1127,12 +1094,12 @@ const mintClaim = async () => {
 };
 
 const totalLimit = ref(0);
-const getMintConfig = ref();
+const getMintConfig = ref({});
 // mint配置
 const getNftAmount = async () => {
   try {
-    totalLimit.value = await balanceOfAmount("ethereum", getAddress.value);
-    getMintConfig.value = await mintConfig("ethereum", getAddress.value);
+    totalLimit.value = await balanceOfAmount("ethereum", import.meta.env.VITE_CLAIMWL_ADDRESS);
+    getMintConfig.value = await mintConfig("ethereum", import.meta.env.VITE_CLAIMWL_ADDRESS);
   } catch (e) {
     console.info(e);
   }
@@ -1141,35 +1108,27 @@ const getNftAmount = async () => {
 // 我拥有的nftList
 const nftList = ref([])
 const getMyNftList = async () => {
-  let res = await fetchMintedCount("ethereum", getAddress.value)
-  let arr = []
-  for(let i = 0; i < res.length; i++) {
-    arr.push(parseInt(res[i]))
+  if(getAddress.value) {
+    let res = await fetchMintedCount("ethereum", getAddress.value)
+    let arr = []
+    for(let i = 0; i < res.length; i++) {
+      arr.push(parseInt(res[i]))
+    }
+    nftList.value = arr
   }
-  nftList.value = arr
 }
 
-// 打开24小时倒计时间到
-const showMyNft = async () => {
-  // debugger
-  console.log(getAddress.value)
-  if (getAddress.value) {
-    let nftListConfig = []
-    let res = await fetchMintedCount("ethereum", getAddress.value)
-    for(let i = 0; i < res.length; i++) {
-      res.length--
-      let nftItem = await axios.get(`https://nft-test.kingsome.cn/hero/meta/${parseInt(import.meta.env.VITE_TOKENID_ID)}/${parseInt(res[0])}`)
-      if(i <= res.length) {
-        nftListConfig.push(nftItem.data)
-      }
-    }
-    console.log(nftListConfig)
-  }
-};
+// nft开放时间
+const stopTimes = ref(false)
+const stopTimeChange = (e) => {
+  stopTimes.value = true
+}
+
+// 报错弹窗提示
+const errDialogVisible = ref(false)
 
 const mintInit = async () => {
   await getIsWhite();
-  await showMyNft();
   await getNftAmount();
   await getMyNftList()
 }
@@ -1181,8 +1140,9 @@ const mintInit = async () => {
     */
 
 onMounted(() => {
-  starTimer();
+  // starTimer();
   mintInit()
+
 });
 </script>
 
@@ -1546,11 +1506,12 @@ onMounted(() => {
       }
       .mint-table {
         display: flex;
-        margin: 30px 0 10px 140px;
+        margin: 15px 0 10px 140px;
         height: 30px;
         div {
           width: 80px;
           margin-right: 10px;
+          font-size: 18px;
           text-align: center;
           border-bottom: 4px solid #fff;
           cursor: pointer;
@@ -1950,7 +1911,7 @@ onMounted(() => {
         }
       }
       .join-pending {
-        margin-top: 30px;
+        margin-top: 5px;
         > div {
           width: 380px;
           height: 40px;
@@ -2094,10 +2055,10 @@ onMounted(() => {
         height: 0;
       }
       .el-dialog__body {
-        position: relative;
         .top {
           display: flex;
           justify-content: center;
+          position: relative;
           .top-title {
             margin-top: 20px;
             color: #fff;
@@ -2127,49 +2088,119 @@ onMounted(() => {
           color: #fff;
           text-align: left;
           display: flex;
+          // justify-content: space-between;
           flex-wrap: wrap;
-          justify-content: space-between;
+          clear: both;
           li {
-            width: 280px;
+            width: 32%;
             height: 420px;
-            background: url('./../assets/home/blind boxbg02.png') no-repeat;
-            background-size: 100% 100%;
-            .nft-top {
-              width: 280px;
-              height: 252px;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
-            .nft-btm {
-              height: 168px;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-evenly;
-              text-align: center;
-              font-size: 16px;
-              .time-tips {
-                display: flex;
-                align-items: center;
-                justify-content: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 10px;
+            margin-left: 0;
+            .nft-content-no {
+              background: url('./../assets/home/blind boxbg02.png') no-repeat;
+              background-size: 100% 100%;
+              margin-bottom: 10px;
+              .nft-top {
+                width: 270px;
+                height: 250px;
                 img {
-                  width: 27px;
-                  height: 33px;
-                  margin-right: 10px;
+                  width: 100%;
+                  height: 100%;
                 }
-                span {
+              }
+              .nft-btm {
+                height: 150px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-evenly;
+                text-align: center;
+                font-size: 16px;
+                .time-tips {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  img {
+                    width: 27px;
+                    height: 33px;
+                    margin-right: 10px;
+                  }
+                  span {
+                    font-family: 'Poppins';
+                    font-weight: bold;
+                    font-size: 24px;
+                    color: #9950FD;
+                  }
+                }
+                .time {
                   font-family: 'Poppins';
                   font-weight: bold;
-                  font-size: 24px;
-                  color: #9950FD;
+                  font-size: 30px;
+                  color: #FFFFFF;
                 }
               }
-              .time {
-                font-family: 'Poppins';
-                font-weight: bold;
-                font-size: 30px;
-                color: #FFFFFF;
+            }
+            .nft-content-yes {
+              width: 280px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              .heroes {
+                width: 250px;
+                height: 375px;
+                position: relative;
+                .heroes-video-bg {
+                  position: absolute;
+                  z-index: 1;
+                  video {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+                .heroes-top {
+                  width: 140px;
+                  height: 40px;
+                  line-height: 40px;
+                  position: absolute;
+                  z-index: 9;
+                  color: #000;
+                  font-size: 18px;
+                  background: url('./../assets/home/icon_coinTime.png') no-repeat;
+                  background-size: 100% 100%;
+                  padding-left: 50px;
+                  box-sizing: border-box;
+                }
+                .heroes-btm {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 15px;
+                  display: flex;
+                  z-index: 9;
+                  color: #fff;
+                  font-size: 12px;
+                  div:nth-child(1) {
+                    width: 75px;
+                    height: 25px;
+                    line-height: 25px;
+                    margin-right: 10px;
+                    margin-left: 35px;
+                    background: url('./../assets/home/icon_wealth.png') no-repeat;
+                    background-size: 100% 100%;
+                    padding-left: 40px;
+                    box-sizing: border-box;
+                  }
+                  div:nth-child(2) {
+                    width: 75px;
+                    height: 25px;
+                    line-height: 25px;
+                    background: url('./../assets/home/icon_luck .png') no-repeat;
+                    background-size: 100% 100%;
+                    padding-left: 40px;
+                    box-sizing: border-box;
+                  }
+                }
               }
             }
           }
@@ -2450,6 +2481,48 @@ onMounted(() => {
         }
       }
     }
+    .errDialog {
+      background: #1a1821;
+      border-radius: 80px;
+      padding: 0px 50px;
+      .el-dialog__header {
+        padding: 0;
+        height: 0;
+      }
+      .el-dialog__body {
+        position: relative;
+        .top {
+          display: flex;
+          justify-content: center;
+          .top-title {
+            color: #fff;
+            font-size: 48px;
+            text-align: center;
+            font-family: "Anton";
+          }
+          .top-close {
+            position: absolute;
+            top: -25%;
+            right: -13%;
+            width: 154px;
+            height: 154px;
+            cursor: pointer;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+        .content {
+          height: 280px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 22px;
+          color: #fff;
+        }
+      }
+    }
   }
 }
 </style>

src/wallet/index.js

@@ -18,7 +18,6 @@ var claimAddress = import.meta.env.VITE_CLAIM_ADDRESS
 var claimWlAddress = import.meta.env.VITE_CLAIMWL_ADDRESS
 var chainId = import.meta.env.VITE_TOKENID_ID
 // var connectUrl = process.env.VUE_APP_CONFIG_URL
-console.log(CFNFTAddress,claimAddress,chainId)
 
 // 公用方法
 const MINT_CONTRACT_ADDRESS='0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'
@@ -108,9 +107,15 @@ let res
   if(val == 'ethereum') {
     const web3js = window.ethereum
     if (typeof web3js !== "undefined") {
+      // let res1 = await isSepoliNetwork(val)
+      // console.log(res1)
+      // return
       res = await ethereum.request({ method: "eth_requestAccounts" })
     }
   } else if(val == 'okxwallet') {
+    // let res1 = await isSepoliNetwork(val)
+    // console.log(res1)
+    // return
     res  = await okxwallet.request({ method: "eth_requestAccounts" });
   }
   return res[0]
@@ -190,7 +195,7 @@ export async function isWalletConnected() {
 }
 
 // 检查是否有arbitrum-sepolia网络
-export async function isSepoliNetwork(name,web3) {
+export async function isSepoliNetwork(name) {
   let res
   if(name == 'ethereum') {
     res = await window.ethereum.request({
@@ -201,6 +206,7 @@ export async function isSepoliNetwork(name,web3) {
         }
       ]
     });
+    console.log(res,'-----')
     return false
   } else if(name == 'okxwallet') {
     res = 
@@ -225,7 +231,7 @@ export async function addNetwork(name) {
       let res = await window.ethereum.request({
         method: 'wallet_addEthereumChain',
         params: [{
-          chainId: chainId,
+          chainId: 13473,
           chainName: 'Sepolia Testnet Explorer',
           rpcUrls: ['https://rpc.testnet.immutable.com'],
           iconUrls: ['https://xdaichain.com/fake/example/url/xdai.png'],
@@ -246,7 +252,7 @@ export async function addNetwork(name) {
       let res = await okxwallet.request({
         method: 'wallet_addEthereumChain',
         params: [{
-          chainId: chainId,
+          chainId: parseInt(chainId),
           chainName: 'Sepolia Testnet Explorer',
           rpcUrls: ['https://rpc.testnet.immutable.com'],
           iconUrls: ['https://xdaichain.com/fake/example/url/xdai.png'],
@@ -297,51 +303,32 @@ export const claimStage2Nft = async(name, myAddress, params, web3) => {
     const signer = web3Provider.getSigner();
     const [ userAddress ] = await web3.request({ method: "eth_requestAccounts"});
     const contractFT = new ethers.Contract(ERCAddress, abis['ERC'].abi, signer);
-    // let gasApprove = await contractFT.estimateGas.approve(claimWlAddress, window.BigInt(price))
-    let gasApprove = await contractFT.estimateGas.approve(claimWlAddress, price)
+    let gasApprove = await contractFT.estimateGas.approve(claimWlAddress, BigInt(price))
+    // let gasApprove = await contractFT.estimateGas.approve(claimWlAddress, price)
     gasApprove = (parseInt(gasApprove) * GAS_BOOST) | 0;
-    // await contractFT.approve(claimWlAddress, window.BigInt(price))
-    await contractFT.approve(claimWlAddress, price)
-    
+    await contractFT.approve(claimWlAddress, BigInt(price))
+    // await contractFT.approve(claimWlAddress, price)
     //------
     const contract = new ethers.Contract(claimWlAddress, abis['CLAIMWL'].abi, signer);
-    // console.log(params, '--------------',contract);
-    // return
     let gas = await contract.estimateGas.claim(params)
-    // console.log(gas)
-    // return
+    // console.log(await contract.claim(params))
     return await contract.claim(params)
     
-    let res = await web3.request({ method: 'eth_gasPrice' })
-    console.log(params[1], res)
-    let abc = await web3.request({ method: 'eth_requestAccounts'})
-    // let contractFT = await web3.request({ method: 'eth_call',
-    //   params: [
-    //     {
-    //       to: myAddress,
-    //       data: claimAddress
-    //     },
-    //     'latest'
-    //   ]
-    // })
   } else {
     // const account = await web3.eth.getAccounts()
-    let res = await isSepoliNetwork(name,web3)
-    if(!res) {
-      let addRes = await addNetwork(name,web3)
-    }
+    // let res = await isSepoliNetwork(name)
+    // if(!res) {
+    //   await addNetwork(name)
+    // }
     const gasPrice = await web3.eth.getGasPrice()
     const contractFT = new web3.eth.Contract(abis['ERC'].abi, ERCAddress, {
       from: myAddress
     });
     const allowance = await contractFT.methods.allowance(myAddress, claimWlAddress).call()
     console.log('allowance', allowance)
-    // if (parseInt(allowance) < params) {
       let gasApprove = await contractFT.methods.approve(claimWlAddress, price).estimateGas();
       gasApprove = (parseInt(gasApprove) * GAS_BOOST) | 0;
       await contractFT.methods.approve(claimWlAddress, price).send({ gas: gasApprove, gasPrice });
-    // }
-    // return
     const contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, {
       from: myAddress
     });
@@ -415,7 +402,6 @@ export const fetchMintedCount = async (name, myAddress) => {
   }
   let contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, { from: myAddress})
   const tokenId = await contract.methods.mintedNft(myAddress).call();
-  console.log(tokenId)
   return tokenId
 
   const data = '0xe65ee803'

vite.config.js

@@ -1,16 +1,16 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import {nodePolyfills} from 'vite-plugin-node-polyfills'
+// import {nodePolyfills} from 'vite-plugin-node-polyfills'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
-    nodePolyfills({
-      globals: {
-        Buffer: false
-      }
-    }),
+    // nodePolyfills({
+    //   globals: {
+    //     Buffer: false
+    //   }
+    // }),
   ],
   base: './',
   // build: {