diff --git a/.env.development b/.env.development
index bd42091..7cec666 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,9 @@
 VITE_BASE_API='https://oauth-svr.cebggame.com/mint'
 VITE_GPAL_API='http://192.168.100.83:4000/sns'
+# VITE_GPAL_ROUTER='https://vlpwkzon-testflight.counterfire.games'
+VITE_GPAL_ROUTER='https://mint.kingsome.cn/'
 VITE_TOKENID_ID='0x34a1'
 VITE_ERC_ADDRESS='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
 VITE_CFNFT_ADDRESS='0xaa34B79A0Ab433eaC900fB3CB9f191F5Cd27501D'
 VITE_CLAIM_ADDRESS='0xf45702180314187a3549FEDac3B78349b47ca6A0'
-VITE_CLAIMWL_ADDRESS='0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'
\ No newline at end of file
+VITE_CLAIMWL_ADDRESS='0x20204A3df0c3191Ee93f4DB328Ca92aEe148Ce24'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 22e5aa1..82cc983 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,6 @@
 VITE_BASE_API='https://oauth-svr.cebggame.com/mint'
 VUE_APP_GPAL_API='http://192.168.100.83:4000/sns'
+VITE_GPAL_ROUTER='http://localhost:5173'
 VITE_TOKENID_ID='0x34a1'
 VITE_ERC_ADDRESS='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
 VITE_CFNFT_ADDRESS='0xaa34B79A0Ab433eaC900fB3CB9f191F5Cd27501D'
diff --git a/.env.text b/.env.text
new file mode 100644
index 0000000..75a0027
--- /dev/null
+++ b/.env.text
@@ -0,0 +1,8 @@
+VITE_BASE_API='https://oauth-svr.cebggame.com/mint'
+VITE_GPAL_API='http://192.168.100.83:4000/sns'
+VITE_GPAL_ROUTER='http://localhost:5173'
+VITE_TOKENID_ID='0x34a1'
+VITE_ERC_ADDRESS='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
+VITE_CFNFT_ADDRESS='0xaa34B79A0Ab433eaC900fB3CB9f191F5Cd27501D'
+VITE_CLAIM_ADDRESS='0xf45702180314187a3549FEDac3B78349b47ca6A0'
+VITE_CLAIMWL_ADDRESS='0x20204A3df0c3191Ee93f4DB328Ca92aEe148Ce24'
\ No newline at end of file
diff --git a/package.json b/package.json
index dcebda0..08cd207 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "text": "vite --host --mode text",
     "dev": "vite --host --mode development",
     "build": "vite build --mode development",
     "build:prod": "vite build --mode production",
diff --git a/src/App.vue b/src/App.vue
index ee4d266..71b9e8c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="app">
     <HelloWorld />
     <FooterView />
 </div>
@@ -11,7 +11,7 @@ import HelloWorld from "./view/mintIndex.vue";
 import FooterView from "./components/footerView.vue";
 </script>
 
-<style scoped>
+<style  lang="scss" scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/src/assets/home/Gen2_ani.gif b/src/assets/home/Gen2_ani.gif
new file mode 100644
index 0000000..2b57258
Binary files /dev/null and b/src/assets/home/Gen2_ani.gif differ
diff --git a/src/assets/home/Gen2_raw.gif b/src/assets/home/Gen2_raw.gif
index 2b57258..4f2b4b7 100644
Binary files a/src/assets/home/Gen2_raw.gif and b/src/assets/home/Gen2_raw.gif differ
diff --git a/src/assets/home/Golden_GIF.gif b/src/assets/home/Golden_GIF.gif
deleted file mode 100644
index b00ca60..0000000
Binary files a/src/assets/home/Golden_GIF.gif and /dev/null differ
diff --git a/src/assets/home/ICON01.png b/src/assets/home/ICON01.png
new file mode 100644
index 0000000..8e73fc7
Binary files /dev/null and b/src/assets/home/ICON01.png differ
diff --git a/src/assets/home/ICON02.png b/src/assets/home/ICON02.png
new file mode 100644
index 0000000..f07a139
Binary files /dev/null and b/src/assets/home/ICON02.png differ
diff --git a/src/assets/home/KeyVisual.png b/src/assets/home/KeyVisual.png
index ce8936d..30207f9 100644
Binary files a/src/assets/home/KeyVisual.png and b/src/assets/home/KeyVisual.png differ
diff --git a/src/assets/home/Normal_GIF_1.gif b/src/assets/home/Normal_GIF_1.gif
deleted file mode 100644
index 5c79f09..0000000
Binary files a/src/assets/home/Normal_GIF_1.gif and /dev/null differ
diff --git a/src/assets/home/Purple_GIF.gif b/src/assets/home/Purple_GIF.gif
deleted file mode 100644
index fd9de83..0000000
Binary files a/src/assets/home/Purple_GIF.gif and /dev/null differ
diff --git a/src/assets/home/blind box img.png b/src/assets/home/blind box img.png
new file mode 100644
index 0000000..58f9a63
Binary files /dev/null and b/src/assets/home/blind box img.png differ
diff --git a/src/assets/home/blindbox ICON.png b/src/assets/home/blindbox ICON.png
new file mode 100644
index 0000000..089310c
Binary files /dev/null and b/src/assets/home/blindbox ICON.png differ
diff --git a/src/assets/home/blur.png b/src/assets/home/blur.png
deleted file mode 100644
index db710e4..0000000
Binary files a/src/assets/home/blur.png and /dev/null differ
diff --git a/src/assets/home/frame_Immutable.png b/src/assets/home/frame_Immutable.png
new file mode 100644
index 0000000..37709c5
Binary files /dev/null and b/src/assets/home/frame_Immutable.png differ
diff --git a/src/assets/home/icon_ConnectWallet.png b/src/assets/home/icon_ConnectWallet.png
deleted file mode 100644
index cd7cd1a..0000000
Binary files a/src/assets/home/icon_ConnectWallet.png and /dev/null differ
diff --git a/src/assets/home/icon_Immutable.png b/src/assets/home/icon_Immutable.png
new file mode 100644
index 0000000..68ddd71
Binary files /dev/null and b/src/assets/home/icon_Immutable.png differ
diff --git a/src/assets/home/invite_box.png b/src/assets/home/invite_box.png
new file mode 100644
index 0000000..0d68f7d
Binary files /dev/null and b/src/assets/home/invite_box.png differ
diff --git a/src/assets/home/medium.png b/src/assets/home/medium.png
new file mode 100644
index 0000000..2b2bb01
Binary files /dev/null and b/src/assets/home/medium.png differ
diff --git a/src/assets/home/mint bg.png b/src/assets/home/mint bg.png
index 6a34d07..cf7e886 100644
Binary files a/src/assets/home/mint bg.png and b/src/assets/home/mint bg.png differ
diff --git a/src/assets/home/nav.png b/src/assets/home/nav.png
index 88ad9f9..54a738f 100644
Binary files a/src/assets/home/nav.png and b/src/assets/home/nav.png differ
diff --git a/src/assets/home/open sea.png b/src/assets/home/open sea.png
deleted file mode 100644
index e6d9471..0000000
Binary files a/src/assets/home/open sea.png and /dev/null differ
diff --git a/src/components/starTimer.vue b/src/components/starTimer.vue
index b740b61..a40d7d2 100644
--- a/src/components/starTimer.vue
+++ b/src/components/starTimer.vue
@@ -11,6 +11,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  openNft: {
+    type: Number,
+    required: true,
+  }
 });
 let remainingTime = ref(0); // 24小时 = 86400秒
 const day = ref(0);
@@ -23,7 +27,7 @@ const starTimer = () => {
   let nowTime = new Date().getTime();
   // let str = localStorage.getItem(`openTime${props.getAddress}`)
   // let strTime = (1718098200000 - nowTime) / 1000
-  let strTime = (1718098200000 - nowTime) / 1000
+  let strTime = (props.openNft - nowTime) / 1000
   intervalId = setInterval(() => {
     if (strTime >= 1) {
       // remainingTime.value -= 1;
diff --git a/src/style.css b/src/style.css
index fff9140..3de08bd 100644
--- a/src/style.css
+++ b/src/style.css
@@ -80,6 +80,21 @@ button:focus-visible {
 body {
   padding: 0 !important;
   margin: 0 !important;
+  &::-webkit-scrollbar {
+    width: 0px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #171220;
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-corner {
+    display: block;
+  }
+  &::-webkit-scrollbar-thumb {
+    height: 15px;
+    background: #9950fd;
+    border-radius: 10px;
+  }
 }
 
 h1 {
diff --git a/src/view/mintIndex.vue b/src/view/mintIndex.vue
index e87ec26..af97da0 100644
--- a/src/view/mintIndex.vue
+++ b/src/view/mintIndex.vue
@@ -28,7 +28,9 @@
                 </a>
               </li>
               <li>
-                <img src="./../assets/home/Nav bar_character.png" alt />
+                <a href="https://medium.com/@CounterFire" target="_blank">
+                  <img src="./../assets/home/medium.png" alt />
+                </a>
               </li>
             </div>
           </div>
@@ -36,15 +38,14 @@
         <div class="home-content-config">
           <div class="home-content-left-time">
             <div class="home-content-left-time-top">
-              <p>COUNTER FIRE-</p>
+              <p>COUNTER FIRE<span>-</span></p>
               <p>
                 GENESIS HEROES
                 <!-- <img src alt /> -->
               </p>
             </div>
-            <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>
+              <p>Guaranteed Mint</p>
               <div v-if="activityState == 0" class="mint-time">
                 <span>{{ days1 }}D</span>
                 <span>{{ hours1 }}H</span>
@@ -55,13 +56,13 @@
                 <span>OPENING</span>
               </div>
               <div v-if="activityState == 4" class="mint-time">
-                <span>The minting session has ended.</span>
+                <span class="mint-ent">The minting session has ended.</span>
               </div>
             </div>
-            <div class="home-content-left-time-btm">
-              <p>Mint Ⅱis first come</p>
+            <div class="home-content-left-time-btm home-content-left-time-btm-tow">
+              <p>FCFS Mint</p>
               <div v-if="activityState == 4" class="mint-time">
-                <span>The minting session has ended.</span>
+                <span class="mint-ent">The minting session has ended.</span>
               </div>
               <div v-else-if="activityState == 3" class="mint-time">
                 <span>OPENING</span>
@@ -76,17 +77,33 @@
           </div>
           <div class="home-content-left-amount">
             <div class="box-img">
-              <img src="./../assets/home/blind box img02.png" alt="">
+              <img src="./../assets/home/blind box img.png" alt="">
             </div>
-            <p>Number of units being</p>
-            <p>opened: {{ nftList.length }}</p>
+            <p>My Genesis Box</p>
+            <p>quantity: {{ nftList.length }}</p>
             <div class="box-btn" @click="nftDialogVisible = true">
-              My blind box
+              My Genesis Box
             </div>
           </div>
         </div>
-
-        <div class="explore-download">
+        <div class="base">
+          <div class="base-title">
+            <div class="base-title-img">
+              <img src="./../assets/home/icon_Immutable.png" alt="">
+            </div>
+            <div class="base-title-text">Base on Immutable zkEvm</div>
+          </div>
+          <div class="base-content">
+            <p>-Pepare ETH on Immutable zkEVM for minting.</p>
+            <p>-CounterFire will airdrop $IMX for gas to whitelisted addresses before mint.
+            </p>
+            <!-- <p>-Pepare ETH on Immutable zkEVM for minting.</p> -->
+          </div>
+          <div class="base-btn">
+            <a href="https://www.immutable.com/blog/how-to-get-imx-on-immutable-zkevm" target="_blank">Learn More</a>
+          </div>
+        </div>
+        <!-- <div class="explore-download">
           <div class="download-title">Pre-season Testing is live. Download now at:</div>
           <div class="download-list">
             <li v-for="(item, index) in download" :key="index">
@@ -98,7 +115,7 @@
               </div>
             </li>
           </div>
-        </div>
+        </div> -->
       </div>
       <div class="mint-content-right">
         <div class="home-content-right-top">
@@ -135,23 +152,28 @@
             <div class="join-list">
               <div class="join-list-top">
                 <div class="claim-period">
-                  <div>A Mint 100% must-have blind box</div>
+                  <div v-if="isOpenClaim < 3" class="claim-total">
+                    <h1 v-if="totalLimit > 0">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
+                    <!-- <h1 v-else>{{getMintConfig.maxSupply}}</h1> -->
+                    <div>Supply</div>
+                  </div>
+                  <div class="claim-price">
+                    <h1>MINT Price: {{mintPrice}}</h1>
+                    <div>
+                      <img src="./../assets/home/ETHicon.png" alt />
+                    </div>
+                  </div>
                 </div>
                 <div class="claim-tips">
-                  <h1>MINT DETAILS</h1>
+                  <h1>DETAILS</h1>
                   <div @click="tipsDialogVisible = true">
                     <img src="./../assets/home/Icon_!.png" alt />
                   </div>
                 </div>
               </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-else>{{getMintConfig.maxSupply}}</h1> -->
-                  <div>Supply</div>
-                </div>
                 <div class="claim-price">
-                  <h1>MINT Price: 0.08</h1>
+                  <h1>MINT Price: {{mintPrice}}</h1>
                   <div>
                     <img src="./../assets/home/ETHicon.png" alt />
                   </div>
@@ -166,7 +188,7 @@
                     <span @click="decrease">
                       <span v-if="isOpenClaim == 2 && mintTotal != 1">-</span>
                     </span>
-                    <span>{{ mintTotal == 0 ? mintTotal+1 : mintTotal }}</span>
+                    <span class="bold">{{ mintTotal == 0 ? mintTotal+1 : mintTotal }}</span>
                     <span @click="increase">
                       <span v-if="mintTotal < whiteCount">+</span>
                     </span>
@@ -191,23 +213,22 @@
             <div class="join-list">
               <div class="join-list-top">
                 <div class="claim-period">
-                  <div>A Mint 100% must-have blind box</div>
+                  <div v-if="isOpenClaim < 3" class="claim-total">
+                    <h1 v-if="totalLimit > 0 || getMintConfig">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
+                    <!-- <h1 v-else>{{getMintConfig.maxSupply}}</h1> -->
+                    <div>Supply</div>
+                  </div>
                 </div>
                 <div class="claim-tips">
-                  <h1>MINT DETAILS</h1>
+                  <h1>DETAILS</h1>
                   <div @click="tipsDialogVisible = true">
                     <img src="./../assets/home/Icon_!.png" alt />
                   </div>
                 </div>
               </div>
               <div class="join-list-btm">
-                <div v-if="isOpenClaim < 3" class="claim-total">
-                  <h1 v-if="totalLimit > 0 || getMintConfig">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
-                  <!-- <h1 v-else>{{getMintConfig.maxSupply}}</h1> -->
-                  <div>Supply</div>
-                </div>
                 <div class="claim-price">
-                  <h1>MINT Price: 0.08</h1>
+                  <h1>MINT Price: {{mintPrice}}</h1>
                   <div>
                     <img src="./../assets/home/ETHicon.png" alt />
                   </div>
@@ -222,7 +243,7 @@
                     <span @click="decrease">
                       <span v-if="isOpenClaim == 2 && mintTotal != 1">-</span>
                     </span>
-                    <span>{{ mintTotal == 0 ? mintTotal+1 : mintTotal }}</span>
+                    <span class="bold">{{ mintTotal == 0 ? mintTotal+1 : mintTotal }}</span>
                     <span @click="increase">
                       <span v-if="mintTotal < whiteCount">+</span>
                     </span>
@@ -280,7 +301,7 @@
                   <div></div>
                 </div>
                 <div class="claim-tips">
-                  <h1>MINT DETAILS</h1>
+                  <h1>DETAILS</h1>
                   <div @click="tipsDialogVisible = true">
                     <img src="./../assets/home/Icon_!.png" alt />
                   </div>
@@ -328,7 +349,7 @@
                   <div></div>
                 </div>
                 <div class="claim-tips">
-                  <h1>MINT DETAILS</h1>
+                  <h1>DETAILS</h1>
                   <div @click="tipsDialogVisible = true">
                     <img src="./../assets/home/Icon_!.png" alt />
                   </div>
@@ -365,35 +386,37 @@
               </div>
             </div>
           </div>
-          <div v-if="activityState == 0 || activityState == 1 || activityState == 2" class="home-content-right-join-btm">
-            <div class="tow-title">Phase II Min will be available on a <br /> first-come-first-served basis</div>
+          <div v-if="activityState == 0 || activityState == 1 || activityState == 2" class="home-content-right-join-btm FCFS-no">
+            <div class="tow-title">
+              <p>FCFS Mint will be available on a</p>
+              <p>first-come-first-served basis</p>
+            </div>
             <div class="tow-time-title">Countdown</div>
             <div class="tow-time-event">
-              <span>{{ hours2 }}H</span>
-              <span>{{ minutes2 }}M</span>
-              <span>{{ senconds2 }}S</span>
+              <span>{{ hours2 }}H&nbsp;</span>
+              <span>{{ minutes2 }}M&nbsp;</span>
+              <span>{{ senconds2 }}S&nbsp;</span>
             </div>
           </div>
           <div v-if="activityState == 3" class="home-content-right-join-btm">
             <div class="join-list">
               <div class="join-list-top">
                 <div class="claim-period">
-                  <div>Public Mint- First Come, First Served!</div>
+                  <div class="claim-total">
+                    <h1 v-if="totalLimit > 0 || getMintConfig">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
+                    <div>Supply</div>
+                  </div>
                 </div>
                 <div class="claim-tips">
-                  <h1>MINT DETAILS</h1>
+                  <h1>DETAILS</h1>
                   <div @click="tipsDialogVisible = true">
                     <img src="./../assets/home/Icon_!.png" alt />
                   </div>
                 </div>
               </div>
               <div class="join-list-btm">
-                <div class="claim-total">
-                  <h1 v-if="totalLimit > 0 || getMintConfig">{{ totalLimit+500 }}/{{getMintConfig.maxSupply}}</h1>
-                  <div>Supply</div>
-                </div>
                 <div class="claim-price">
-                  <h1>MINT Price: 0.08</h1>
+                  <h1>MINT Price: {{mintPrice}}</h1>
                   <div>
                     <img src="./../assets/home/ETHicon.png" alt />
                   </div>
@@ -408,7 +431,7 @@
                     <span @click="decrease">
                       <span v-if="isOpenClaim == 2 && mintTotal != 1">-</span>
                     </span>
-                    <span>{{ mintTotal == 0 ? mintTotal+1 : mintTotal }}</span>
+                    <span class="bold">{{ mintTotal == 0 ? mintTotal+1 : mintTotal }}</span>
                     <span @click="increase">
                       <span v-if="mintTotal < whiteCount">+</span>
                     </span>
@@ -508,9 +531,14 @@
             <div class="disconnect" v-if="index == 3">
               <span>{{ item.name }}</span>
             </div>
-            <div v-else>
-              <img :src="item.imgUrl" alt />
-              <span>{{ item.name }}</span>
+            <div class="wallet-item" v-else>
+              <div class="wallet-item-left">
+                <img :src="item.imgUrl" alt />
+                <span>{{ item.name }}</span>
+              </div>
+              <div class="wallet-item-right" v-if="index == 2">
+                Recommended
+              </div>
             </div>
           </li>
         </div>
@@ -537,9 +565,12 @@
           <img src="./../assets/home/Close counter.png" alt />
         </div>
       </div>
-      <div
-        class="content"
-      >The Genesis Heroes NFT collection grants access to play-to-earn (P2E) features in the Counter Fire game. Its initial release will be through blind boxes. Upon opening these boxes, players will randomly obtain their unique hero characters, spanning across 10 professions and 2 tiers. Owners of Genesis Heroes will also enjoy lucrative token airdrop rewards.</div>
+      <div class="content">
+        The Genesis Heroes NFT collection grants access to play-to-earn (P2E) features in the Counter Fire game.
+        Its initial release will be through blind boxes. Upon opening these boxes, players will randomly obtain their unique hero characters,
+        spanning across 10 professions and 2 tiers. Owners of Genesis Heroes will also enjoy lucrative token airdrop rewards.
+        We are committed to launching P2E Season 1 within one week after the mint to deliver the value of the NFTs as soon as possible.
+      </div>
     </el-dialog>
     <el-dialog
       :model-value="nftDialogVisible"
@@ -549,7 +580,7 @@
       class="nft-dialog"
     >
       <div class="top">
-        <div class="top-title">My blind box</div>
+        <div class="top-title">My Genesis Box</div>
         <div class="top-close" @click="nftDialogVisible = false">
           <img src="./../assets/home/Close counter.png" alt />
         </div>
@@ -560,38 +591,41 @@
             <img src="./../assets/home/Empty state.png" alt="">
           </div>
         </div>
-        <li v-else v-for="(item, index) in nftList" :key="index">
-          <div v-if="!stopTimes" class="nft-content-no">
-            <div class="nft-top">
-              <img src="./../assets/home/blind box img02.png" alt="">
-            </div>
-            <div class="nft-btm">
-              <div class="time-tips">
-                <img src="./../assets/home/Opening.png" alt="">
-                <span>Opening</span>
+        <div class="content-scroll" v-else>
+          <li v-for="(item, index) in nftList" :key="index">
+            <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 @stopTime="stopTimeChange" :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" :openNft="openNft" :getAddress="getAddress" />
+                </div>
               </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 v-else class="nft-content-yes">
+              <div class="heroes">
+                <div class="heroes-video-bg">
+                  <img :src="item.image" alt="">
+                </div>
+                <div class="heroes-top">
+                  {{ item.detail.max_mining_days }}D
+                  <!-- <div><img src="" alt=""></div> -->
+                  <!-- <div></div> -->
+                </div>
+                <div class="heroes-btm">
+                  <div>{{ item.detail.wealth }}</div>
+                  <div>{{ item.detail.lucky }}</div>
+                </div>
               </div>
+              <div class="heroes-name">{{ item.name }}</div>
             </div>
-          </div>
-        </li>
+          </li>
+        </div>
       </div>
     </el-dialog>
     <el-dialog
@@ -604,27 +638,27 @@
       <div class="mint-content">
         <div class="mint-content-left">
           <div class="Normal">
-            <img src="./../assets/home/Gen2_raw.gif" alt />
+            <img src="./../assets/home/Gen2_ani.gif" alt="">
           </div>
         </div>
         <div class="mint-content-right">
           <div class="logo">
             <img src="./../assets/home/Counter Fire Logo.png" alt />
           </div>
-          <div class="title" :style="`${titleColor}`">MINT SUCCESSFULL</div>
+          <div class="title" :style="`${titleColor}`">MINT SUCCESSFUL</div>
           <div class="name">
-            <span>Blind Box * {{ thisMintTotal }}</span>
+            <div>Blind Box <span>X{{ thisMintTotal }}</span></div>
           </div>
           <div class="mint-bottom">
             <div>
               <li>
                 <a href="https://opensea.io/collection/counterfire-founders-tag" target="_blank">
-                  <img src="./../assets/home/open sea.png" alt />
+                  <img src="./../assets/home/ICON01.png" alt />
                 </a>
               </li>
               <li>
                 <a href="https://blur.io/collection/counterfire-founders-tag" target="_blank">
-                  <img src="./../assets/home/blur.png" alt />
+                  <img src="./../assets/home/ICON02.png" alt />
                 </a>
               </li>
               <li>
@@ -636,9 +670,9 @@
                 </a>
               </li>
             </div>
-            <div>
+            <div class="lmmutascan">
               <a :href="'https://etherscan.io/tx/'" target="_blank">
-                <span>Etherscan</span>
+                <span>lmmutascan</span>
                 <img src="./../assets/home/Links web icon.png" alt />
               </a>
             </div>
@@ -723,9 +757,9 @@ const walletList = ref([
     imgUrl: new URL("./../assets/home/icon_OKXwallet.png", import.meta.url).href
   },
   {
-    name: "WalletConnect",
+    name: "Immutable",
     value: "connect",
-    imgUrl: new URL("./../assets/home/icon_ConnectWallet.png", import.meta.url)
+    imgUrl: new URL("./../assets/home/icon_Immutable.png", import.meta.url)
       .href
   },
   {
@@ -733,7 +767,7 @@ const walletList = ref([
     value: "disconnect"
   }
 ]);
-const navList = ref(["Phase I", "Phase II"]);
+const navList = ref(["Guaranteed Mint", "FCFS Mint"]);
 const navIndex = ref(0);
 const navBtn = index => {
   navIndex.value = index;
@@ -750,9 +784,9 @@ const isWalletList = ref([
     imgUrl: new URL("./../assets/home/icon_OKXwallet.png", import.meta.url).href
   },
   {
-    name: "WalletConnect",
+    name: "Immutable",
     value: "connect",
-    imgUrl: new URL("./../assets/home/icon_ConnectWallet.png", import.meta.url)
+    imgUrl: new URL("./../assets/home/icon_Immutable.png", import.meta.url)
       .href
   }
 ]);
@@ -786,7 +820,7 @@ const getLinkWallet = async value => {
   if (localStorage.getItem("walletName") == null) {
     let res;
     if (value == "connect") {
-      const passportProvider = proxy.$passportInit.connectEvm();
+      // const passportProvider = proxy.$passportInit.connectEvm();
       let address = await passportProvider.request({
         method: "eth_requestAccounts"
       });
@@ -801,20 +835,28 @@ const getLinkWallet = async value => {
     walletDialogVisible.value = false;
     await isSepoliNetwork(value);
   } else {
-    disconnectLink(isWallet.value);
     if (value == "disconnect") {
-      localStorage.removeItem("address");
-      localStorage.removeItem("walletName");
-      window.location.reload();
+      if (localStorage.getItem("walletName") == "connect") {
+        localStorage.removeItem("address");
+        localStorage.removeItem("walletName");
+        await proxy.$passportInit.logout();
+        await proxy.$passportInit.logoutSilentCallback(`${import.meta.env.VITE_GPAL_ROUTER}`)
+      } else {
+        disconnectLink(isWallet.value);
+        localStorage.removeItem("address");
+        localStorage.removeItem("walletName");
+        location.reload();
+      }
     } else if (value == "connect") {
+      await proxy.$passportInit.logout();
+      await proxy.$passportInit.logoutSilentCallback(`${import.meta.env.VITE_GPAL_ROUTER}`)
       let address = await passportProvider.request({
         method: "eth_requestAccounts"
       });
       localStorage.setItem("address", address[0]);
       localStorage.setItem("walletName", value);
-      // await proxy.$passportInit.logout();
     } else {
-      // disconnectLink(isWallet.value);
+      disconnectLink(localStorage.getItem("walletName"));
       let res = await linkWallet(value);
       localStorage.setItem("address", res);
       localStorage.setItem("walletName", value);
@@ -824,7 +866,6 @@ const getLinkWallet = async value => {
     walletDialogVisible.value = false;
     await isSepoliNetwork(value);
   }
-  window.location.reload();
   await mintInit();
 };
 
@@ -839,19 +880,20 @@ let hours2 = ref(0);
 let minutes2 = ref(0);
 let senconds2 = ref(0);
 let timer = null;
+const openNft = ref(1719284551426)
 // 倒计时
 const starTimer = () => {
   let now = new Date().getTime();
-  let str = 1718088300000; // 开始前 （前24）
-  let bar = 1718088600000; // 开始后 （一期倒计时4小时）
-  let end = 1718089080000; // 结束前 （）
+  let str = 1718099100000; // 开始前 （前24）
+  let bar = 1718099400000; // 开始后 （一期倒计时4小时）
+  let end = 1718099940000; // 结束前 （）
   let strTime = (str - now) / 1000; // 开始前毫秒数 - 现在毫秒数
   let begTime = (bar - now) / 1000; // 开始后毫秒数 - 现在毫秒数
   let leftTime = (end - now) / 1000; // 结束前毫秒数 - 现在毫秒数
 
-  let towStr = 1718088600000; // 开始前 （前24）
-  let towBar = 1718088900000; // 开始后 （一期倒计时4小时）
-  let towEnd = 1718089080000; // 结束前 （）
+  let towStr = 1718099700000; // 开始前 （前24）
+  let towBar = 1718099820000; // 开始后 （一期倒计时4小时）
+  let towEnd = 1718099940000; // 结束前 （）
   let towStrTime = (towStr - now) / 1000; // 开始前毫秒数 - 现在毫秒数
   let towBarTime = (towBar - now) / 1000; // 开始后毫秒数 - 现在毫秒数
   let towEndTime = (towEnd - now) / 1000; // 结束前毫秒数 - 现在毫秒数
@@ -975,7 +1017,10 @@ const starTimer = () => {
 4 都结束
 */
 
-const dialogText = ref()
+
+// 报错弹窗提示
+const errDialogVisible = ref(false)
+const dialogText = ref('Event not started')
 // 活动未开启
 const hasNot = () => {
   dialogText.value = 'Event not started';
@@ -1000,6 +1045,7 @@ const getIsWhite = async () => {
       mintTotal.value = whiteAmount;
       isOpenClaim.value = 2;
     } else {
+      mintTotal.value = 0
       isOpenClaim.value = 1;
     }
   }
@@ -1021,10 +1067,6 @@ const openStatus = ref(0);
 const openLoading = ref(false);
 // 开始mint
 const mintClaim = async () => {
-  // let times = new Date().getTime()
-  //           console.log(getAddress.value+times.value)
-  //           localStorage.setItem(`openTime${getAddress.value}`,getAddress.value+'-'+times)
-  //           return
   // 1、判断是否有mint次数
   if (mintTotal.value > 0) {
     thisMintTotal.value = mintTotal.value
@@ -1032,23 +1074,14 @@ const mintClaim = async () => {
     // 2、添加TIMX代币
     try {
       // 4、获取mint信息
-      // let res = await axios.post(
-      //   `${import.meta.env.VITE_BASE_API}/api/202406/sign`,
-      //   { address: getAddress.value, count: mintTotal.value },
-      //   { headers: { "Content-Type": "application/json" } }
-      // );
-      // if (mintTotal.value < res.data.data[0].length) {
-      //   res.data.data[0].splice(mintTotal.value);
-      // }
-      // res.data.data.splice(1, 1, Number(res.data.data[1]));
-      // let res = await mintConfig("ethereum", getAddress.value);
-      // console.log(mintTotal.value)
-      // return
       // 5、开始Mint
       let web3;
       let name = localStorage.getItem("walletName");
       if (name == "connect") {
-        web3 = await passportProvider;
+        const w3provider = await passportProvider
+        await w3provider.request({ method: "eth_requestAccounts"});
+        web3 = new Web3(w3provider);
+        web3.eth.transactionConfirmationBlocks = 3
       } else if (name == "okxwallet") {
         web3 = new Web3(okxwallet);
       } else if (name == "ethereum") {
@@ -1060,10 +1093,9 @@ const mintClaim = async () => {
           name,
           getAddress.value,
           mintTotal.value,
-          web3
+          mintPrice.value,
+          web3,
         );
-        // console.log(claimNft)
-        // return
         if (claimNft) {
           isOpenClaim.value = 3;
           openStatus.value = 2;
@@ -1083,7 +1115,6 @@ const mintClaim = async () => {
       } catch (e) {
         openStatus.value = 3;
         openLoading.value = false;
-        console.log(e);
       }
     } catch (e) {
       openLoading.value = false;
@@ -1095,11 +1126,13 @@ const mintClaim = async () => {
 
 const totalLimit = ref(0);
 const getMintConfig = ref({});
+const mintPrice = ref()
 // mint配置
 const getNftAmount = async () => {
   try {
     totalLimit.value = await balanceOfAmount("ethereum", import.meta.env.VITE_CLAIMWL_ADDRESS);
     getMintConfig.value = await mintConfig("ethereum", import.meta.env.VITE_CLAIMWL_ADDRESS);
+    mintPrice.value = parseInt(getMintConfig.value.mintPrice)/1e18
   } catch (e) {
     console.info(e);
   }
@@ -1109,12 +1142,25 @@ const getNftAmount = async () => {
 const nftList = ref([])
 const getMyNftList = async () => {
   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]))
+    if(stopTimes.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
+      console.log(nftList.value,'===')
+    } else {
+      const data = {
+        type: '0',
+        page_size: '100',
+        cursor: '',
+        search_name: ''
+      }
+      let res = await axios.get(`https://market-test.kingsome.cn/api/asset/13473/${getAddress.value}?type=0&page_size=20&cursor=&search_name=`)
+      nftList.value = res.data.rows
+      console.log(nftList.value)
     }
-    nftList.value = arr
   }
 }
 
@@ -1124,9 +1170,6 @@ const stopTimeChange = (e) => {
   stopTimes.value = true
 }
 
-// 报错弹窗提示
-const errDialogVisible = ref(false)
-
 const mintInit = async () => {
   await getIsWhite();
   await getNftAmount();
@@ -1148,16 +1191,17 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .mint {
-  height: 100vh;
   background: #0f1013;
   .mint-page {
     display: flex;
-    justify-content: space-around;
+    // justify-content: space-around;
     height: 100%;
-    padding: 20px;
+    // padding: 20px;
     box-sizing: border-box;
     .mint-content-left {
-      width: 60%;
+      margin: 17px 22px 25px 24px;
+      width: 1170px;
+      height: 1038px;
       background: url("./../assets/home/KeyVisual.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
@@ -1166,8 +1210,8 @@ onMounted(() => {
         align-items: center;
         // justify-content: space-between;
         .home-content-left-tit-left {
-          width: 240px;
-          height: 120px;
+          width: 269px;
+          height: 145px;
           margin-right: 50px;
           cursor: pointer;
           img {
@@ -1190,8 +1234,8 @@ onMounted(() => {
           }
         }
         .home-content-left-tit-right {
-          width: 800px;
-          height: 60px;
+          width: 805px;
+          height: 87px;
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -1205,26 +1249,35 @@ onMounted(() => {
               align-items: center;
               color: #fff;
               text-decoration: none;
+              font-family: 'Poppins';
+              font-weight: 300;
+              font-size: 16px;
               img {
-                width: 40px;
-                height: 40px;
+                width: 68.1px;
+                height: 68.1px;
               }
             }
           }
           .link-item {
             display: flex;
             align-items: center;
-            padding: 8px 25px;
+            justify-content: center;
+            width: 225px;
+            height: 72px;
             background: url("./../assets/home/nav.png") no-repeat;
             background-size: 100% 100%;
             li {
               width: 30px;
               height: 30px;
-              margin-left: 10px;
+              margin: 0 10px;
               img {
                 width: 100%;
                 height: 100%;
               }
+              &:nth-child(3) {
+                width: 41px;
+                height: 23px;
+              }
             }
           }
         }
@@ -1238,30 +1291,45 @@ onMounted(() => {
           margin-left: 60px;
           color: #fff;
           .home-content-left-time-top {
+            height: 152px;
             p {
-              font-size: 58px;
-              font-weight: 700;
+              font-size: 72px;
+              font-weight: 400;
               font-family: "Anton";
-              line-height: 1.1;
+              line-height: 88px;
+              position: relative;
+              span {
+                position: absolute;
+                top: 9px;
+                line-height: 50px;
+              }
             }
           }
-          .activity-time {
-            margin-bottom: 20px;
-          }
           .home-content-left-time-btm {
+            margin-top: 40px;
+            p {
+              font-family: 'Poppins';
+              font-weight: 500;
+              font-size: 18px;
+              margin-bottom: 5px;
+            }
             .mint-time {
-              width: 280px;
+              width: 392.2px;
+              height: 58.4px;
               display: flex;
               align-items: center;
               justify-content: space-evenly;
-              padding: 10px 0;
-              margin-top: 10px;
-              background: rgba(0, 0, 0, 0.5);
-              border-radius: 20px;
+              // padding: 10px 0;
+              // margin-top: 10px;
+              background: #1A1821;
+              border-radius: 29px;
               span {
                 display: inline-block;
                 position: relative;
-                font-weight: 700;
+                font-family: 'Poppins';
+                font-weight: 600;
+                font-size: 30px;
+                color: #B762FF;
                 &::after {
                   display: block;
                   content: ":";
@@ -1278,20 +1346,28 @@ onMounted(() => {
                   }
                 }
               }
+              .mint-ent {
+                font-size: 24px !important;
+              }
             }
           }
+          .home-content-left-time-btm-tow {
+            margin-top: 50px;
+          }
         }
         .home-content-left-amount {
-          width: 180px;
-          height: 180px;
-          margin-right: 20px;
+          width: 219px;
+          height: 195px;
+          margin-right: 70px;
           padding: 20px;
           border-radius: 20px;
-          background: rgba(0, 0, 0, 0.3);
+          // background: rgba(0, 0, 0, 0.5);
+          background: url('./../assets/home/invite_box.png') no-repeat;
+          background-size: 100% 100%;
           color: #fff;
           .box-img {
-            width: 80px;
-            height: 80px;
+            width: 82px;
+            height: 82px;
             margin: 0 auto;
             margin-bottom: 8px;
             border-radius: 10px;
@@ -1302,13 +1378,17 @@ onMounted(() => {
             }
           }
           p {
-            font-size: 16px;
-            text-align: left;
+            width: 140px;
+            margin: 0 auto;
+            font-family: 'Poppins';
+            font-weight: 500;
+            font-size: 14px;
+            text-align: center;
           }
           .box-btn {
-            width: 140px;
-            height: 35px;
-            line-height: 35px;
+            width: 139px;
+            height: 36px;
+            line-height: 36px;
             margin: 0 auto;
             margin-top: 8px;
             font-size: 16px;
@@ -1319,7 +1399,63 @@ onMounted(() => {
           }
         }
       }
-
+      .base {
+        width: 392px;
+        height: 183px;
+        border-radius: 36px;
+        background: rgba(26,24,33,.4);
+        padding: 20px 8px;
+        box-sizing: border-box;
+        position: absolute;
+        left: 60px;
+        bottom: 56px;
+        .base-title {
+          display: flex;
+          align-items: center;
+          padding-bottom: 10px;
+          border-bottom: 1px solid #000;
+          .base-title-img {
+            width: 38px;
+            height: 38px;
+            margin: 0 10px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .base-title-text {
+            font-family: 'Poppins';
+            font-weight: bold;
+            font-size: 20px;
+            color: #FFFFFF;
+          }
+        }
+        .base-content {
+          text-align: left;
+          padding-left: 10px;
+          padding-top: 10px;
+          box-sizing: border-box;
+          p {
+            font-family: 'Poppins';
+            font-weight: 400;
+            font-size: 14px;
+            color: #FFFFFF;
+            line-height: 1.5;
+          }
+        }
+        .base-btn {
+          text-align: right;
+          a {
+            font-family: 'Poppins';
+            font-weight: 400;
+            font-size: 14px;
+            color: #FFCB3F;
+            text-decoration-line: underline;
+            margin-right: 7px;
+            cursor: pointer;
+          }
+        }
+      }
       .explore-download {
         position: absolute;
         right: 30px;
@@ -1373,18 +1509,21 @@ onMounted(() => {
       }
     }
     .mint-content-right {
-      width: 35%;
+      width: 681px;
+      height: 1033px;
+      margin-top: 20px;
       background: #1a1821;
       border-radius: 140px;
       color: #fff;
+      position: relative;
       .home-content-right-top {
         display: flex;
         align-items: center;
         justify-content: end;
         cursor: pointer;
         .wallet {
-          width: 180px;
-          height: 50px;
+          width: 289px;
+          height: 53px;
           border-radius: 26px;
           padding-left: 40px;
           display: flex;
@@ -1396,10 +1535,10 @@ onMounted(() => {
           span {
             display: inline-block;
             margin-right: 10px;
-            font-size: 16px;
+            font-size: 21px;
           }
           .wallet-address {
-            font-size: 16px;
+            font-size: 21px;
           }
           .wallet-arrow {
             width: 19px;
@@ -1431,10 +1570,10 @@ onMounted(() => {
           .wallet-btn {
             z-index: 999;
             position: absolute;
-            top: -25px;
+            top: -28px;
             right: -50px;
-            width: 100px;
-            height: 100px;
+            width: 109px;
+            height: 109px;
             img {
               width: 100%;
               height: 100%;
@@ -1506,19 +1645,22 @@ onMounted(() => {
       }
       .mint-table {
         display: flex;
-        margin: 15px 0 10px 140px;
-        height: 30px;
+        margin: 35px 0 10px 95px;
+        // height: 30px;
         div {
-          width: 80px;
+          // width: 160px;
+          padding: 0 10px;
           margin-right: 10px;
-          font-size: 18px;
+          font-size: 15px;
+          font-family: 'Poppins';
+          font-weight: 600;
           text-align: center;
-          border-bottom: 4px solid #fff;
+          border-bottom: 3px solid #fff;
           cursor: pointer;
         }
         .activity {
           color: #994FFD;
-          border-bottom: 4px solid #994FFD;
+          border-bottom: 3px solid #994FFD;
           position: relative;
           &::after {
             display: block;
@@ -1534,25 +1676,20 @@ onMounted(() => {
         }
       }
       .home-content-right-join {
-        width: 561px;
-        height: 690px;
+        width: 541px;
+        height: 700px;
         margin: 0 auto;
         background: url("./../assets/home/mint bg.png") no-repeat;
         background-size: 100% 100%;
         box-sizing: border-box;
-        border-radius: 140px;
+        border-radius: 80px;
         .home-content-right-join-top {
-          width: 561px;
-          height: 400px;
-          border-radius: 140px 140px 0 0;
-          overflow: hidden;
-          position: relative;
+          width: 540.5px;
+          height: 388px;
           img {
-            width: 561px;
-            height: 561px;
-            position: absolute;
-            top: -110px;
-            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 80px 80px 0 0;
           }
         }
         .home-content-right-join-out {
@@ -1566,17 +1703,47 @@ onMounted(() => {
         }
         .home-content-right-join-btm {
           padding: 20px;
+          margin-left: 17px;
           .join-list {
             .join-list-top {
               display: flex;
               justify-content: space-between;
-              align-items: center;
               .claim-period {
-                font-size: 14px;
+                .claim-total {
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  h1 {
+                    font-size: 48px;
+                    font-family: "Anton";
+                    margin-right: 10px;
+                  }
+                  div {
+                    font-size: 30px;
+                  }
+                }
+                .claim-price {
+                  display: flex;
+                  h1 {
+                    font-family: "Poppins";
+                    color: #fff;
+                    font-size: 18px;
+                    margin-right: 10px;
+                  }
+                  div {
+                    width: 25px;
+                    height: 25px;
+                    img {
+                      width: 100%;
+                      height: 100%;
+                    }
+                  }
+                }
               }
               .claim-tips {
                 display: flex;
                 align-items: center;
+                margin-right: 17px;
                 h1 {
                   font-family: "Poppins-SemiBold";
                   margin-right: 10px;
@@ -1633,20 +1800,20 @@ onMounted(() => {
           .join-btm {
             display: flex;
             justify-content: space-between;
-            margin-top: -20px;
+            margin-top: -10px;
             .join-btm-left {
               position: relative;
-              width: 260px;
-              margin-left: 20px;
+              width: 203px;
               .quantity {
                 margin-top: 30px;
                 p {
+                  font-family: 'Poppins';
                   font-size: 14px;
                   text-align: left;
                   display: flex;
                 }
                 div {
-                  width: 180px;
+                  width: 222px;
                   height: 42px;
                   line-height: 42px;
                   margin-top: 10px;
@@ -1659,6 +1826,9 @@ onMounted(() => {
                   // justify-content: space-between;
                   span {
                     display: inline-block;
+                    font-family: 'Poppins-SemiBold';
+                    font-weight: bold;
+                    font-size: 20px;
                     &:nth-child(1) {
                       width: 30px;
                       cursor: pointer;
@@ -1672,12 +1842,15 @@ onMounted(() => {
                       cursor: pointer;
                     }
                   }
+                  .bold {
+                    font-size: 24px;
+                  }
                 }
               }
               .purchase {
                 position: absolute;
-                right: 0%;
-                bottom: 35%;
+                right: -20%;
+                bottom: 25%;
                 width: 210px;
                 text-align: center;
               }
@@ -1696,11 +1869,11 @@ onMounted(() => {
               }
             }
             .join-btm-right {
-              width: 200px;
-              height: 200px;
+              width: 234px;
+              height: 234px;
               cursor: pointer;
               position: relative;
-              overflow: hidden;
+              // overflow: hidden;
               .mint {
                 width: 100%;
                 height: 100%;
@@ -1712,8 +1885,8 @@ onMounted(() => {
                 background-size: 100% 100%;
                 font-weight: 700;
                 position: absolute;
-                left: 0;
-                top: 0;
+                left: 25px;
+                top: -5px;
                 z-index: 0;
                 span {
                   font-weight: 700;
@@ -1875,10 +2048,22 @@ onMounted(() => {
             }
           }
           .tow-title {
+            width: 293px;
+            height: 56px;
+            margin: 0 auto;
+            font-family: 'Poppins';
+            font-weight: 400;
             font-size: 18px;
+            p {
+              margin-top: 10px;
+            }
           }
           .tow-time-title {
-            margin-top: 20px;
+            margin-top: 60px;
+            font-family: 'Poppins';
+            font-weight: 400;
+            font-size: 30px;
+            color: #FFFFFF;
           }
           .tow-time-event {
             margin: 0 auto;
@@ -1890,14 +2075,16 @@ onMounted(() => {
             span {
               display: inline-block;
               position: relative;
-              font-weight: 700;
+              font-weight: 600;
+              font-size: 40px;
+              font-family: "Poppins";
               &::after {
                 display: block;
                 content: ":";
                 /* 定位 */
                 position: absolute;
-                top: 40%;
-                left: -50%;
+                top: 50%;
+                left: -12%;
                 transform: translateY(-50%);
               }
               &:nth-child(1) {
@@ -1909,9 +2096,30 @@ onMounted(() => {
             }
           }
         }
+        .FCFS-no {
+          background: #2d2738;
+          height: 290px;
+          border-radius: 0 0 80px 80px;
+          .tow-title {
+            // margin-top: 60px;
+            width: 293px;
+            height: 56px;
+            margin: 0 auto;
+            font-family: 'Poppins';
+            font-weight: 400;
+            font-size: 18px;
+            p {
+              margin-top: 10px;
+            }
+          }
+        }
       }
       .join-pending {
-        margin-top: 5px;
+        // margin-bottom: 50px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 100px;
         > div {
           width: 380px;
           height: 40px;
@@ -2046,6 +2254,8 @@ onMounted(() => {
       }
     }
     .nft-dialog {
+      width: 1660px;
+      height: 648.8px;
       border: 1px solid #924df2;
       background: #1a1821;
       border-radius: 80px;
@@ -2068,8 +2278,8 @@ onMounted(() => {
           }
           .top-close {
             position: absolute;
-            top: -10%;
-            right: -13%;
+            top: -50px;
+            right: -100px;
             width: 154px;
             height: 154px;
             cursor: pointer;
@@ -2080,141 +2290,175 @@ onMounted(() => {
           }
         }
         .content {
+          height: 500px;
           margin: 20px 0;
           padding: 15px;
           min-height: 280px;
           line-height: 1.8;
           font-size: 22px;
           color: #fff;
-          text-align: left;
-          display: flex;
-          // justify-content: space-between;
-          flex-wrap: wrap;
-          clear: both;
-          li {
-            width: 32%;
-            height: 420px;
+          box-sizing: border-box;
+          overflow-y: scroll;
+          .content-scroll {
+            text-align: left;
             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;
+            flex-wrap: wrap;
+            clear: both;
+            li {
+              width: 280px;
+              height: 420px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: #2d2738;
+              border-radius: 50px;
+              margin-right: 30px;
+              margin-bottom: 24px;
+              .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: 100%;
+                    height: 100%;
+                  }
+                }
+                .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: 30px;
+                    color: #FFFFFF;
+                  }
+                }
+              }
+              .nft-content-yes {
+                width: 280px;
+                // display: flex;
+                // justify-content: center;
+                // align-items: center;
+                .heroes {
+                  width: 213px;
+                  height: 319px;
+                  margin: 0 auto;
+                  position: relative;
+                  .heroes-video-bg {
+                    position: absolute;
+                    z-index: 1;
+                    img {
+                      width: 100%;
+                      height: 100%;
+                    }
+                  }
+                  .heroes-top {
+                    width: 100px;
+                    height: 32px;
+                    line-height: 32px;
+                    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: 40px;
+                    margin-left: 10px;
+                    margin-top: 10px;
+                    box-sizing: border-box;
+                  }
+                  .heroes-btm {
+                    width: 100%;
+                    position: absolute;
+                    bottom: 10px;
+                    display: flex;
+                    z-index: 9;
+                    color: #fff;
+                    font-size: 12px;
+                    div:nth-child(1) {
+                      width: 66px;
+                      height: 24px;
+                      line-height: 25px;
+                      margin-right: 6px;
+                      margin-left: 30px;
+                      background: url('./../assets/home/icon_wealth.png') no-repeat;
+                      background-size: 100% 100%;
+                      padding-left: 30px;
+                      box-sizing: border-box;
+                    }
+                    div:nth-child(2) {
+                      width: 66px;
+                      height: 24px;
+                      line-height: 25px;
+                      background: url('./../assets/home/icon_luck .png') no-repeat;
+                      background-size: 100% 100%;
+                      padding-left: 40px;
+                      box-sizing: border-box;
+                    }
+                  }
+                }
+                .heroes-name {
+                  text-align: center;
+                  font-family: 'Poppins';
+                  font-weight: bold;
+                  font-size: 30px;
+                  padding-top: 10px;
+                }
+              }
+              &:nth-child(5n) {
+                margin-right: 0;
+              }
+            }
+            div {
+              width: 100%;
+              .empty {
+                width: 401px;
+                height: 322px;
+                margin: 0 auto;
                 img {
                   width: 100%;
                   height: 100%;
                 }
               }
-              .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: 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;
-                  }
-                }
-              }
             }
           }
-          div {
-            width: 100%;
-            .empty {
-              width: 401px;
-              height: 322px;
-              margin: 0 auto;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
+          &::-webkit-scrollbar {
+            width: 5px;
+          }
+          &::-webkit-scrollbar-track {
+            background: #171220;
+            border-radius: 2px;
+          }
+          &::-webkit-scrollbar-corner {
+            display: block;
+          }
+          &::-webkit-scrollbar-thumb {
+            height: 15px;
+            background: #9950fd;
+            border-radius: 10px;
           }
         }
       }
@@ -2269,30 +2513,70 @@ onMounted(() => {
             li {
               display: flex;
               align-items: center;
+              width: 468px;
               margin: 20px 0;
               cursor: pointer;
               border: 2px solid #625a6b;
               border-radius: 8px;
               text-align: left;
               padding: 15px 30px;
-              div {
+              .disconnect {
+                align-items: center;
+                font-family: 'Poppins';
+                font-weight: 400;
+                font-size: 24px;
+              }
+              .wallet-item {
                 display: flex;
                 align-items: center;
-                img {
-                  width: 40px;
-                  height: 40px;
-                }
-                span {
-                  margin-left: 20px;
+                justify-content: space-between;
+                width: 100%;
+                .wallet-item-left {
+                  display: flex;
+                  align-items: center;
+                  font-family: 'Poppins';
+                  font-weight: 400;
                   font-size: 24px;
+                  img {
+                    width: 40px;
+                    height: 40px;
+                  }
+                  span {
+                    margin-left: 20px;
+                    font-size: 24px;
+                  }
+                }
+                .wallet-item-right {
+                  font-family: 'Poppins';
+                  font-weight: 400;
+                  font-size: 20px;
+                  color: #B6A8C9;
                 }
               }
               &:hover {
                 background: #d5befa;
                 color: #000;
                 border: 2px solid #d5befa;
+                &:nth-child(3) {
+                  background: #d5befa;
+                  color: #000;
+                  .wallet-item-right {
+                    color: #000;
+                  }
+                }
               }
             }
+            li:nth-child(3) {
+              // border: 2px solid;
+              // border-image: linear-gradient(to right, #FFAFFA, #D1FFFA, #6DD5F9, #C9BAFF, #94E2FF) 1;
+              border-radius: 8px;
+              // overflow: hidden;
+              border: 2px solid transparent;
+              background-clip: padding-box, border-box;
+              background-origin: padding-box, border-box;
+              background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #FFAFFA, #D1FFFA, #6DD5F9, #C9BAFF, #94E2FF)
+
+            }
             li:nth-child(4) {
               background: #d5befa;
               .disconnect {
@@ -2359,9 +2643,11 @@ onMounted(() => {
       }
     }
     .mint-dialog {
-      width: 45%;
-      height: 320px;
+      width: 1052px;
+      height: 496px;
       border: 2px solid #7a0bfe;
+      border-radius: 100px;
+      margin-top: 260px;
       .el-dialog__header {
         height: 0px;
         line-height: 0px;
@@ -2370,19 +2656,20 @@ onMounted(() => {
       .mint-content {
         display: flex;
         .mint-content-left {
-          width: 320px;
-          height: 320px;
+          width: 445px;
+          height: 445px;
           // padding: 30px;
+          margin: 24px 31px 15px 24px;
           display: flex;
           justify-content: center;
           align-items: center;
           .Normal {
-            width: 300px;
-            height: 300px;
+            width: 445px;
+            height: 445px;
             display: flex;
             justify-content: center;
             align-items: center;
-            border-radius: 60px;
+            border-radius: 90px;
             overflow: hidden;
             img {
               width: 100%;
@@ -2391,39 +2678,54 @@ onMounted(() => {
           }
         }
         .mint-content-right {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
+          text-align: left;
           padding: 30px;
           .logo {
             width: 152px;
             height: 49px;
+            margin-top: 31px;
             img {
               width: 100%;
               height: 100%;
             }
           }
           .title {
-            font-size: 48px;
-            color: #ce7cff;
+            height: 58px;
+            line-height: 58px;
+            margin-top: 19px;
+            font-weight: 400;
+            font-size: 64px;
+            color: #D27BFF;
             font-family: "Anton";
           }
           .name {
+            height: 30px;
             color: #fff;
-            font-size: 32px;
+            font-family: 'Poppins-SemiBold';
+            font-weight: bold;
+            font-size: 48px;
+            margin-top: 61px;
+            span {
+              display: inline-block;
+              margin-left: 10px;
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 36px;
+            }
           }
           .mint-bottom {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            width: 380px;
+            width: 470px;
+            margin-top: 139px;
             div {
               display: flex;
               align-items: center;
               li {
-                width: 25px;
-                height: 25px;
-                margin-right: 10px;
+                width: 36px;
+                height: 36px;
+                margin-left: 12px;
                 display: flex;
                 align-items: center;
                 img {
@@ -2432,34 +2734,46 @@ onMounted(() => {
                 }
               }
               li:last-child {
-                width: 50px;
-                height: 12px;
+                width: 58.4px;
+                height: 17.2px;
+                margin-left: 14px;
               }
               li:first-child {
-                margin-left: 10px;
+                margin-left: 0px;
               }
             }
-            a {
-              display: flex;
-              align-items: center;
-              color: #fff;
-              cursor: pointer;
-              img {
-                width: 15px;
-                height: 15px;
-                margin-left: 10px;
+            .lmmutascan {
+              width: 120px;
+              height: 20px;
+              a {
+                display: flex;
+                // align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                color: #fff;
+                cursor: pointer;
+                img {
+                  width: 17px;
+                  height: 15px;
+                }
               }
             }
             p {
-              // width: 120px;
+              width: 162.4px;
+              height: 42.4px;
               background: #a085b6;
               display: flex;
-              padding: 8px 10px;
-              border-radius: 30px;
-              font-size: 14px;
+              align-items: center;
+              justify-content: center;
+              border-radius: 21px;
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 18px;
+              color: #09080B;
+              cursor: pointer;
               img {
-                width: 17px;
-                height: 17px;
+                width: 25px;
+                height: 25px;
               }
               a {
                 color: #000;
@@ -2468,10 +2782,11 @@ onMounted(() => {
           }
           .close {
             position: absolute;
-            top: -15%;
-            right: -150px;
+            top: -10px;
+            right: -80px;
             transform: translateX(-50%);
-            width: 160px;
+            width: 106px;
+            height: 106px;
             cursor: pointer;
             img {
               width: 100%;
diff --git a/src/wallet/index.js b/src/wallet/index.js
index 4bfe5e0..e8cfa3e 100644
--- a/src/wallet/index.js
+++ b/src/wallet/index.js
@@ -1,7 +1,5 @@
 import Web3 from 'web3'
-import { config, passport } from '@imtbl/sdk';
-import { ethers, providers } from 'ethers';
-
+import passportInit from './initPassport.js'
 import ERC_abi from './../abi/ImmutableERC20MinterBurnerPermit.json'
 import CFNFT_abi from './../abi/CFNFTGame.json'
 import CLAIM_abi from './../abi/NFTClaimStage2.json'
@@ -20,8 +18,8 @@ var chainId = import.meta.env.VITE_TOKENID_ID
 // var connectUrl = process.env.VUE_APP_CONFIG_URL
 
 // 公用方法
-const MINT_CONTRACT_ADDRESS='0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'
-const RPC='https://rpc.testnet.immutable.com/'
+const MINT_CONTRACT_ADDRESS = '0x31f29c9a3d0c1c13c825475aebf0d964b5b47c45'
+const RPC = 'https://rpc.testnet.immutable.com/'
 
 const requestChain = async (rpc, method, params) => {
   const data = {
@@ -39,7 +37,7 @@ const requestChain = async (rpc, method, params) => {
   }
   return fetch(rpc, options, DEFAULT_TIMEOUT).then(res => res.json())
 }
-const queryMintData = async(user, data) => {
+const queryMintData = async (user, data) => {
   const params = [{
     from: user,
     to: MINT_CONTRACT_ADDRESS,
@@ -48,121 +46,40 @@ const queryMintData = async(user, data) => {
   return requestChain(RPC, 'eth_call', params)
 }
 
-// const checkoutSDK = new checkout.Checkout()
-//   const type = checkout.WalletFilterTypes.ALL;
-// window.addEventListener('load', function() {
-//   const passportInstance = new passport.Passport({
-//       baseConfig: {
-//         environment: config.Environment.SANDBOX, // or Environment.PRODUCTION 
-//         publishableKey: 'wc:b348768c53d32b69062adcc7f67b263f771564c39edc06acc4cb3e9ee561d415@2?relay-protocol=irn&symKey=b8302aed25de3f9e3485eb8601d27c52779ab28cd8b1398312aa18be01cebbe8', // replace with your publishable API key from Hub
-//         // publishableKey: '', // replace with your publishable API key from Hub
-//       },
-//       clientId: 'eWbQF3aPY83RCNBMYGv2wUAbOJFKZo8l', // replace with your client ID from Hub
-//       redirectUri: 'http://localhost:5173/', // replace with one of your redirect URIs from Hub
-//       logoutRedirectUri: 'http://localhost:5173/', // replace with one of your logout URIs from Hub
-//       audience: '',
-//       scope: 'openid offline_access email transact',
-//       popupOverlayOptions: {
-//         disableGenericPopupOverlay: false, // Set to true to disable the generic pop-up overlay
-//         disableBlockedPopupOverlay: false, // Set to true to disable the blocked pop-up overlay
-//       }
-//   });
-
-//   passportInstance.loginCallback();
-// });
-
-
-const passportInstance = new passport.Passport({
-  baseConfig: {
-    environment: config.Environment.SANDBOX, // or Environment.PRODUCTION 
-    publishableKey: 'pk_imapik-test-1E-detBXtG7U$5961WuL', // replace with your publishable API key from Hub
-    // publishableKey: '', // replace with your publishable API key from Hub
-  },
-  clientId: 'gYQrjtct7CN4UVwDG2sb8yACfYRo3xQJ', // replace with your client ID from Hub
-  redirectUri: 'http://localhost:5173/redirect', // replace with one of your redirect URIs from Hub
-  logoutRedirectUri: 'http://localhost:5173/logout', // replace with one of your logout URIs from Hub
-  audience: 'platform_api',
-  scope: 'openid offline_access email transact',
-  popupOverlayOptions: {
-    disableGenericPopupOverlay: true, // Set to true to disable the generic pop-up overlay
-    disableBlockedPopupOverlay: true, // Set to true to disable the blocked pop-up overlay
-  }
-});
-
-// 链接Wallet Connect钱包
-export async function getConnect() {
-  const passportProvider = proxy.$passportInit;
-  const accounts = await passportProvider.request({ method: "eth_requestAccounts" })
-  console.log( accounts,'-----------------------------------------------------------------')
-  return
-}
-
-export async function getLogout() {
-  const profile = await passportInstance.logout();
-  return
-}
 
 export async function linkWallet(val) {
-let res
-  if(val == 'ethereum') {
+  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" });
+  } else if (val == 'okxwallet') {
+    res = await okxwallet.request({ method: "eth_requestAccounts" });
   }
   return res[0]
 }
 
 export async function disconnectLink(name) {
-  if(name == 'ethereum') {
+  if (name == 'ethereum') {
     await window.ethereum.request({
-      "method": "wallet_revokePermissions",
-      "params": [
+      method: "wallet_revokePermissions",
+      params: [
         {
-          "eth_accounts": {}
+          eth_accounts: {}
         }
       ]
     });
-  } else if(name == 'okxwallet') {
+  } else if (name == 'okxwallet') {
     await okxwallet.request({
-      "method": "wallet_disconnect",
+      method: "wallet_disconnect",
     })
-  } else if(name == 'connect') {
-    await passportInstance.logout()
+  // } else if (name == 'connect') {
+  //   await passportInit.logout()
+  //   await passportInit.logoutSilentCallback(`${import.meta.env.VITE_GPAL_ROUTER}`)
   }
 }
 
-
-// Wallet Connect初始化
-// import { EthereumProvider } from '@walletconnect/ethereum-provider'
-// const provider = await EthereumProvider.init({
-//   projectId: 'e7743d46923911fa8850619b7a7f6d9d', // required
-//   chains: ['1'], // required
-//   showQrModal: true, // requires @walletconnect/modal
-//   optionalChains: ['1'],
-//   // optionalMethods: ['eth_signTypedData', 'eth_signTypedData_v4'],
-//   metadata: {
-//     name: 'Counter Fire',
-//     description: 'Counter Fire',
-//     url: 'https://mint.counterfire.games/',
-//     icons: ['https://www.counterfire.games/favicon.ico'],
-//   },
-// });
-// 链接Wallet Connect钱包
-// export async function getConnect() {
-//   await provider.connect()
-//   let result = await provider.request({ method: 'eth_requestAccounts' })
-//   return result
-// }
-
 // 获取钱包地址
 export async function getWalletAddress() {
   const web3js = window.ethereum
@@ -185,7 +102,7 @@ export async function isWalletConnected() {
     let res = await ethereum.request({ method: "eth_accounts" })
     // await okxwallet.request({ method: "eth_accounts" });
     // console.log(res,'279-----')
-    if(res[0] == '') {
+    if (res[0] == '') {
       return false
     } else {
       return true
@@ -197,7 +114,7 @@ export async function isWalletConnected() {
 // 检查是否有arbitrum-sepolia网络
 export async function isSepoliNetwork(name) {
   let res
-  if(name == 'ethereum') {
+  if (name == 'ethereum') {
     res = await window.ethereum.request({
       method: "wallet_switchEthereumChain",
       params: [
@@ -206,28 +123,27 @@ export async function isSepoliNetwork(name) {
         }
       ]
     });
-    console.log(res,'-----')
     return false
-  } else if(name == 'okxwallet') {
-    res = 
-    await window.ethereum.request({
-      method: "wallet_switchEthereumChain",
-      params: [
-        {
-          chainId: chainId
-        }
-      ]
-    });
+  } else if (name == 'okxwallet') {
+    res =
+      await window.ethereum.request({
+        method: "wallet_switchEthereumChain",
+        params: [
+          {
+            chainId: chainId
+          }
+        ]
+      });
     return false
-  } else if(name == 'connect') {
+  } else if (name == 'connect') {
     return false
   }
 }
 
 // 添加arbitrum-sepolia网络
 export async function addNetwork(name) {
-  if(name == 'ethereum') {
-    try{
+  if (name == 'ethereum') {
+    try {
       let res = await window.ethereum.request({
         method: 'wallet_addEthereumChain',
         params: [{
@@ -244,11 +160,11 @@ export async function addNetwork(name) {
         },]
       })
       return await res
-    } catch(e) {
-    return false
+    } catch (e) {
+      return false
     }
-  } else if(name == 'okxwallet') {
-    try{
+  } else if (name == 'okxwallet') {
+    try {
       let res = await okxwallet.request({
         method: 'wallet_addEthereumChain',
         params: [{
@@ -264,12 +180,12 @@ export async function addNetwork(name) {
           },
         }]
       })
-    return await res
-    } catch(e) {
-    return false
+      return await res
+    } catch (e) {
+      return false
     }
-  } else if(name == 'connect') {
-    try{
+  } else if (name == 'connect') {
+    try {
       let res = await window.provider.request({
         method: 'wallet_addEthereumChain',
         params: [{
@@ -285,143 +201,97 @@ export async function addNetwork(name) {
           },
         }]
       })
-    return await res
-    } catch(e) {
-    return false
+      return await res
+    } catch (e) {
+      return false
     }
   }
 }
 
 const GAS_BOOST = 2
-
 // claim NFT
-export const claimStage2Nft = async(name, myAddress, params, web3) => {
-  let price = params*1e18
-  if(name == 'connect') {
-    let gasPrice = await web3.request({ method: 'eth_gasPrice' })
-    let web3Provider = new providers.Web3Provider(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, BigInt(price))
-    // let gasApprove = await contractFT.estimateGas.approve(claimWlAddress, price)
+export const claimStage2Nft = async (name, myAddress, params, mintPrice, web3) => {
+  const price = params * mintPrice * 1e18
+  console.log(BigInt(price))
+  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()
+  
+  if(allowance < BigInt(price)) {
+    let gasApprove = await contractFT.methods.approve(claimWlAddress, price).estimateGas();
     gasApprove = (parseInt(gasApprove) * GAS_BOOST) | 0;
-    await contractFT.approve(claimWlAddress, BigInt(price))
-    // await contractFT.approve(claimWlAddress, price)
-    //------
-    const contract = new ethers.Contract(claimWlAddress, abis['CLAIMWL'].abi, signer);
-    let gas = await contract.estimateGas.claim(params)
-    // console.log(await contract.claim(params))
-    return await contract.claim(params)
-    
-  } else {
-    // const account = await web3.eth.getAccounts()
-    // 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)
-      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 });
-    const contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, {
-      from: myAddress
-    });
-    let gas = await contract.methods.claim(params).estimateGas()
-    gas = (parseInt(gas) * GAS_BOOST) | 0;
-    // let abc = await contract.methods.claim(params).send({gas, gasPrice})
-    // console.log(abc)
-    return contract.methods.claim(params).send({gas, gasPrice})
+    await contractFT.methods.approve(claimWlAddress, price).send({ gas: gasApprove, gasPrice });
   }
+  const contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, {
+    from: myAddress
+  });
+  let gas = await contract.methods.claim(params).estimateGas()
+  gas = (parseInt(gas) * GAS_BOOST) | 0;
+  return contract.methods.claim(params).send({ gas, gasPrice })
+
 }
 
 
 // 查询已Mint NFT数量
-export const balanceOfAmount = async(name, myAddress) => {
+export const balanceOfAmount = async (name, myAddress) => {
   let web3
-  if(name == 'ethereum') {
+  if (name == 'ethereum') {
     web3 = new Web3(window.ethereum);
-  } else if(name == 'okxwallet') {
+  } else if (name == 'okxwallet') {
     web3 = new Web3(okxwallet)
-  } else if(name == 'connect') {
-    web3 =  new Web3(provider)
+  } else if (name == 'connect') {
+    web3 = new Web3(provider)
   }
-  let contract = new web3.eth.Contract(abis['CLAIM'].abi, claimAddress, { from: myAddress})
+  let contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, { from: myAddress })
   const tokenId = await contract.methods.totalCount(myAddress).call();
   return parseInt(tokenId)
 }
 
 
 // mint配置
-export const mintConfig = async(name, myAddress) => {
+export const mintConfig = async (name, myAddress) => {
   let web3
-  if(name == 'ethereum') {
+  if (name == 'ethereum') {
     web3 = new Web3(window.ethereum);
-  } else if(name == 'okxwallet') {
+  } else if (name == 'okxwallet') {
     web3 = new Web3(okxwallet)
-  } else if(name == 'connect') {
-    web3 =  new Web3(provider)
+  } else if (name == 'connect') {
+    web3 = new Web3(provider)
   }
-  let contract = new web3.eth.Contract(abis['CLAIM'].abi, claimAddress, { from: myAddress})
+  let contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, { from: myAddress })
   const mintArr = await contract.methods.mintConfig(myAddress).call();
   return mintArr
 }
 
 // 当前用户白单数量
-export const fetchWLCount = async(name, myAddress) => {
+export const fetchWLCount = async (name, myAddress) => {
   let web3
-  if(name == 'ethereum') {
+  if (name == 'ethereum') {
     web3 = new Web3(window.ethereum);
-  } else if(name == 'okxwallet') {
+  } else if (name == 'okxwallet') {
     web3 = new Web3(okxwallet)
-  } else if(name == 'connect') {
-    web3 =  new Web3(provider)
+  } else if (name == 'connect') {
+    web3 = new Web3(provider)
   }
-  let contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, { from: myAddress})
+  let contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, { from: myAddress })
   const tokenId = await contract.methods.whiteCount(myAddress).call();
   return parseInt(tokenId)
-
-  const data = '0xe65ee803'
-  return queryMintData(user, data)
 }
 
 // 当前用户已获得的数量
 export const fetchMintedCount = async (name, myAddress) => {
   let web3
-  if(name == 'ethereum') {
+  if (name == 'ethereum') {
     web3 = new Web3(window.ethereum);
-  } else if(name == 'okxwallet') {
+  } else if (name == 'okxwallet') {
     web3 = new Web3(okxwallet)
-  } else if(name == 'connect') {
-    web3 =  new Web3(provider)
+  } else if (name == 'connect') {
+    web3 = new Web3(provider)
   }
-  let contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, { from: myAddress})
-  const tokenId = await contract.methods.mintedNft(myAddress).call();
-  return tokenId
-
-  const data = '0xe65ee803'
-  return queryMintData(user, data)
+  let contract = new web3.eth.Contract(abis['CLAIMWL'].abi, claimWlAddress, { from: myAddress })
+  const tokenArr = await contract.methods.mintedNft(myAddress).call();
+  return tokenArr
 }
 
-
-
-// passport send()
-
-const returnSend = async (web3, ERCAddress, contractAddress, abi, data) => {
-  // let gasPrice = await web3.request({ method: 'eth_gasPrice' })
-  let web3Provider = new providers.Web3Provider(web3)
-  const signer = web3Provider.getSigner();
-  const contract = new ethers.Contract(ERCAddress, abi, signer);
-  let gasApprove = await contract.estimateGas.approve(contractAddress, data)
-  // let gasApprove =  tx
-  gasApprove = (parseInt(gasApprove) * GAS_BOOST) | 0;
-  console.log(parseInt(gasApprove),'---')
-  return contract.approve(contractAddress, data)
-}
-
-
diff --git a/src/wallet/initPassport.js b/src/wallet/initPassport.js
index 885c3f2..bc0cf75 100644
--- a/src/wallet/initPassport.js
+++ b/src/wallet/initPassport.js
@@ -1,21 +1,24 @@
+import { Web3 } from "web3"
 import { config, passport } from '@imtbl/sdk';
+console.log(import.meta.env.VITE_GPAL_ROUTER,'import.meta.env.VITE_GPAL_ROUTER')
 const passportInstance = new passport.Passport({
   baseConfig: {
     environment: config.Environment.SANDBOX, // or Environment.PRODUCTION 
-    publishableKey: 'pk_imapik-test-1E-detBXtG7U$5961WuL', // replace with your publishable API key from Hub
+    publishableKey: 'pk_imapik-test-1E-detBXtG7U$5961WuL', // replace with your publishable API key from Hub pk_imapik-tU10buLqoyLZ0o54rcub pk_imapik-test-1E-detBXtG7U$5961WuL
     // publishableKey: '', // replace with your publishable API key from Hub
   },
-  clientId: 'gYQrjtct7CN4UVwDG2sb8yACfYRo3xQJ', // replace with your client ID from Hub
-  redirectUri: 'http://localhost:5173/redirect', // replace with one of your redirect URIs from Hub
-  logoutRedirectUri: 'http://localhost:5173/logout', // replace with one of your logout URIs from Hub
+  clientId: 'gYQrjtct7CN4UVwDG2sb8yACfYRo3xQJ', // replace with your client ID from Hub gYQrjtct7CN4UVwDG2sb8yACfYRo3xQJ tTB5eEedqDOHPHMI41sRDGmqAQwus9oE
+  redirectUri: `${import.meta.env.VITE_GPAL_ROUTER}/redirect`, // replace with one of your redirect URIs from Hub
+  logoutRedirectUri: `${import.meta.env.VITE_GPAL_ROUTER}`, // replace with one of your logout URIs from Hub
+  logoutMode: 'silent',
   audience: 'platform_api',
   scope: 'openid offline_access email transact',
   popupOverlayOptions: {
-    disableGenericPopupOverlay: true, // Set to true to disable the generic pop-up overlay
-    disableBlockedPopupOverlay: true, // Set to true to disable the blocked pop-up overlay
+    disableGenericPopupOverlay: false, // Set to true to disable the generic pop-up overlay
+    disableBlockedPopupOverlay: false, // Set to true to disable the blocked pop-up overlay
   }
 });
-const passportInit  = app => {
+const passportInit  = app => { 
   app.component('passportInit',passportInstance)
   app.config.globalProperties.$passportInit = passportInstance
   // app.provide('passportInit', passportInit)