From 6a4fab049ec03c72e3afc6c4d3a8bcf7d0151314 Mon Sep 17 00:00:00 2001
From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com>
Date: Wed, 26 Jun 2024 17:12:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AAconfirm?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86,=20=E8=B4=AD=E7=89=A9=E8=B4=AD?=
 =?UTF-8?q?=E4=B9=B0=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/buyDialog.vue       |  17 +-
 src/components/Dialogs/confirmDialog.vue   | 232 +++++++++++++++++++++
 src/components/cart/index.vue              |  46 +++-
 src/components/chain/WalletSelectModel.vue |   4 +-
 src/components/common/card.vue             |  20 +-
 src/components/layout/NavBar.vue           |   2 +-
 src/configs/configchain.js                 |  24 +--
 src/utils/marketplace.js                   |   1 +
 8 files changed, 306 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Dialogs/confirmDialog.vue

diff --git a/src/components/Dialogs/buyDialog.vue b/src/components/Dialogs/buyDialog.vue
index 4bd1161..73f397b 100644
--- a/src/components/Dialogs/buyDialog.vue
+++ b/src/components/Dialogs/buyDialog.vue
@@ -1,8 +1,8 @@
 <template>
-  <div ref="buyModal">
+  <div ref="buyModal" v-if="props.visible">
     <a-modal
       :class="'buyDia'"
-      v-model:open="props.buyDialogVisible"
+      :open="true"
       :closable="false"
       :footer="null"
       :getContainer="() => $refs.buyModal"
@@ -65,14 +65,12 @@ import { priceCalculated } from "@/configs/priceCalculate"
 import { BlockChain } from "@/components/chain/BlockChain"
 // const passProd = ref(new PassportWallet())
 const props = defineProps({
-  buyDialogVisible: {
-    type: Boolean,
-    required: true,
-  },
   buyDataArr: {
     type: Array,
     required: true,
   },
+  visible: ref(Boolean),
+  close: Function,
 });
 
 console.log(props.buyDataArr);
@@ -92,6 +90,7 @@ const buyConfirm = async () => {
   try {
     await bc.market.batchBuy(ids)
     console.log('buy success ')
+    hideModal({errcode: 0});
   } catch (err) {
     console.log("buy fail", err.message);
   }
@@ -100,8 +99,12 @@ const buyConfirm = async () => {
 
 
 const handleCancel = (e) => {
-  emit("handleClose");
+  hideModal({errcode: 1});
 };
+
+function hideModal(result = null) {
+  props.close(result);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Dialogs/confirmDialog.vue b/src/components/Dialogs/confirmDialog.vue
new file mode 100644
index 0000000..68943b5
--- /dev/null
+++ b/src/components/Dialogs/confirmDialog.vue
@@ -0,0 +1,232 @@
+<template>
+  <Transition name="fade">
+    <div v-if="props.visible" class="cf-overlay" id="vueConfirm">
+      <Transition name="zoom">
+        <div v-if="props.visible" ref="vueConfirmDialog" class="cf-container">
+          <span class="cf-text-grid">
+            <h4 v-if="props.title" class="cf-title" v-html="props.title"></h4>
+            <p v-if="props.message" class="cf-text" v-html="props.message"></p>
+          </span>
+          <div class="cf-btn-grid" :class="{isMono: !props.noBtnTitle || !props.yesBtnTitle}">
+            <button v-if="props.noBtnTitle" @click="cancelSelect" class="cf-btn left" type="button">
+              {{ props.noBtnTitle }}
+            </button>
+
+            <button v-if="props.yesBtnTitle" @click="confirmClick" class="cf-btn" type="button">
+              {{ props.yesBtnTitle }}
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </Transition>
+</template>
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  visible: ref(Boolean),
+  close: Function,
+  title: String,
+  message: String,
+  noBtnTitle: {type: String, required: false, default: 'Cancel'},
+  yesBtnTitle: {type: String, required: false, default: 'Confirm'},
+});
+
+async function confirmClick() {
+  hideModal({errcode: 0});
+}
+
+function cancelSelect() {
+  hideModal({errcode: 1});
+}
+
+function hideModal(result = null) {
+  props.close(result);
+}
+</script>
+<style>
+:root {
+  --title-color: black;
+  --message-color: black;
+  --overlay-background-color: #0000004a;
+  --container-box-shadow: #0000004a 0px 3px 8px 0px;
+  --base-background-color: #ffffff;
+  --button-color: #4083ff;
+  --button-background-color: #ffffff;
+  --button-border-color: #e0e0e0;
+  --button-background-color-disabled: #f5f5f5;
+  --button-background-color-hover: #f5f5f5;
+  --button-box-shadow-active: inset 0 2px 0px 0px #00000014;
+  --input-background-color: #ebebeb;
+  --input-background-color-hover: #dfdfdf;
+  --font-size-m: 16px;
+  --font-size-s: 14px;
+  --font-weight-black: 900;
+  --font-weight-bold: 700;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --font-weight-light: 300;
+}
+
+/**
+* Dialog
+*/
+
+.cf-overlay *,
+.cf-overlay *:before,
+.cf-overlay *:after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  text-decoration: none;
+  -webkit-touch-callout: none;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+}
+
+.cf-title {
+  color: var(--title-color);
+  padding: 0 1rem;
+  width: 100%;
+  font-weight: var(--font-weight-black);
+  text-align: center;
+  font-size: var(--font-size-m);
+  line-height: initial;
+  margin-bottom: 5px;
+}
+
+.cf-text {
+  color: var(--message-color);
+  padding: 0 1rem;
+  width: 100%;
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+  font-size: var(--font-size-s);
+  line-height: initial;
+}
+
+.cf-overlay {
+  background-color: var(--overlay-background-color);
+  width: 100%;
+  height: 100%;
+  transition: all 0.1s ease-in;
+  left: 0;
+  top: 0;
+  z-index: 999999999999;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: baseline;
+}
+
+.cf-container {
+  background-color: var(--base-background-color);
+  border-radius: 1rem;
+  width: 286px;
+  height: auto;
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  box-shadow: var(--container-box-shadow);
+}
+
+.cf-text-grid {
+  padding: 1rem;
+}
+
+.cf-btn-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-radius: 0 0 1rem 1rem;
+  overflow: hidden;
+}
+
+.cf-btn-grid.isMono {
+  grid-template-columns: 1fr;
+}
+
+.cf-btn {
+  border-radius: 0 0 1rem 0;
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  border: 0;
+  font-size: 1rem;
+  border-top: 1px solid var(--button-border-color);
+  cursor: pointer;
+  font-weight: var(--font-weight-bold);
+  outline: none;
+  min-height: 50px;
+}
+
+.cf-btn:hover {
+  background-color: var(--button-background-color-hover);
+}
+
+.cf-btn:disabled {
+  background-color: var(--button-background-color-disabled);
+}
+
+.cf-btn:active {
+  box-shadow: var(--button-box-shadow-active);
+}
+
+.cf-btn.left {
+  border-radius: 0;
+  border-right: 1px solid var(--button-border-color);
+}
+
+.cf-input[type="password"] {
+  width: 100%;
+  outline: none;
+  border-radius: 8px;
+  height: 35px;
+  border: 0;
+  margin: 5px 0;
+  background-color: var(--input-background-color);
+  padding: 0 0.5rem;
+  font-size: var(--font-size-m);
+  transition: 0.21s ease;
+}
+
+.cf-input[type="password"]:hover,
+.cf-input[type="password"]:focus {
+  background-color: var(--input-background-color-hover);
+}
+
+/**
+* Transition
+*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.21s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.zoom-enter-active,
+.zoom-leave-active {
+  animation-duration: 0.21s;
+  animation-fill-mode: both;
+  animation-name: zoom;
+}
+
+.zoom-leave-active {
+  animation-direction: reverse;
+}
+
+@keyframes zoom {
+  from {
+    opacity: 0;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+</style>
diff --git a/src/components/cart/index.vue b/src/components/cart/index.vue
index 30c1891..0c2e1df 100644
--- a/src/components/cart/index.vue
+++ b/src/components/cart/index.vue
@@ -38,7 +38,7 @@
           <div>≈ {{ 200 }}$</div>
         </div>
       </div> -->
-      <div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn">Buy All</div>
+      <div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn" @click="buyAll">Buy All</div>
       <div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
     </div>
     
@@ -47,10 +47,12 @@
 
 <script setup>
 import { ref, defineEmits, onMounted, watch } from "vue"
-import { useRouter, useRoute } from "vue-router";
-import { useImmutableStore } from "@/store/immutable"
+import { useRouter } from "vue-router";
 import { useMarketplaceStore } from "@/store/marketplace"
 import {priceCalculated} from "@/configs/priceCalculate.js"
+import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
+import {createModal} from "@/utils/model.util";
+import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 const marketplaceList = useMarketplaceStore()
 import {
   apiDelCartList,
@@ -58,8 +60,6 @@ import {
 } from "@/utils/marketplace"
 const router = useRouter();
 const emit = defineEmits(['clickStatusChild'])
-const immutableStore = useImmutableStore()
-// const token = immutableStore.accessToken
 
 const cartList = ref()
 
@@ -114,9 +114,41 @@ const deleteNft = async (val) => {
 
 // 清空购物车
 const clearCart = async () => {
+  if (cartList.value.length === 0) {
+    return
+  }
   try {
-    let res = await apiClearCartList()
-    console.log(res)
+    const confirmResult = await createModal(ConfirmDialog, {
+      title: 'Confirm Clear Cart', 
+      message: 'Are you sure you want to clear the cart?'
+    }).show()
+    if (confirmResult.errcode) {
+      console.log('user cancel')
+      return
+    }
+    const res = await apiClearCartList()
+    if (res.errcode) {
+      throw new Error(res.errmsg)
+    }
+    await getCartList()
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+const buyAll = async () => {
+  try {
+    const confirmResult = await createModal(BuyDialog, {
+      buyDataArr: cartList.value,
+    }).show()
+
+    if(confirmResult.errcode) {
+      console.log('buy fail')
+      return 
+    }
+    getCartList()
+    alert('success')
+
   } catch (e) {
     console.log(e)
   }
diff --git a/src/components/chain/WalletSelectModel.vue b/src/components/chain/WalletSelectModel.vue
index 483fef5..cf852c7 100644
--- a/src/components/chain/WalletSelectModel.vue
+++ b/src/components/chain/WalletSelectModel.vue
@@ -31,12 +31,12 @@
   </div>
 </template>
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { ALL_PROVIDERS } from "@/configs/configchain";
 import { allProviders } from "@/components/chain/BlockChain"
 
 const props = defineProps({
-  visible: Boolean,
+  visible: ref(Boolean),
   close: Function,
 });
 
diff --git a/src/components/common/card.vue b/src/components/common/card.vue
index bd521fe..0335b39 100644
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@@ -27,7 +27,6 @@
         <img src="@/assets/img/marketplace/Move out.png" alt="">
       </div>
     </div>
-    <BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="buyDataArr" @handleClose="buyHandleClose" />
   </div>
 </template>
 
@@ -44,7 +43,7 @@ import {
 } from "@/store/marketplace"
 const detailData = useDetailStore()
 const marketplaceList = useMarketplaceStore()
-const immutableData = useImmutableStore()
+import {createModal} from "@/utils/model.util";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
@@ -56,13 +55,18 @@ const props = defineProps({
   },
 });
 
-const buyDialogVisible = ref(false)
 const buyDataArr = ref([])
 
 // 确认购买弹窗
-const buyNft = (val) => {
+const buyNft = async (val) => {
   buyDataArr.value.push(val)
-  buyDialogVisible.value = true
+  const buyResult = await createModal(BuyDialog, {
+    buyDataArr: buyDataArr.value,
+  }).show()
+  if(buyResult.errcode) {
+    console.log('buy fail')
+    return 
+  }
 }
 
 const getImageUrl = (name) => {
@@ -99,12 +103,6 @@ const addCart = async (val) => {
   }
 }
 
-// 关闭弹窗
-const buyHandleClose = () => {
-  buyDialogVisible.value = false
-  // buyDataArr.value = []
-}
-
 onMounted(() => {
   // console.log(JSON.parse(JSON.stringify(props.nftData)), "-=-=-");
 });
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 77755a8..cd52ca8 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -41,7 +41,7 @@
             <img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
           </div>
           <div v-if="localWalletStore.address" class="immutable-cart-amount">
-            <span v-if="marketplaceStore.getCartList">{{ marketplaceStore.getCartList.data.length }}</span>
+            <span v-if="marketplaceStore.getCartList">{{ marketplaceStore.getCartList.data?.length || 0 }}</span>
             <span v-else>0</span>
           </div>
         </div>
diff --git a/src/configs/configchain.js b/src/configs/configchain.js
index 079f237..232290c 100644
--- a/src/configs/configchain.js
+++ b/src/configs/configchain.js
@@ -1,18 +1,18 @@
 const env = "development";
 
 export const ALL_PROVIDERS = [
-  // {
-  //   id: 1,
-  //   name: "MetaMask",
-  //   logo: "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM1NSIgdmlld0JveD0iMCAwIDM5NyAzNTUiIHdpZHRoPSIzOTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMSAtMSkiPjxwYXRoIGQ9Im0xMTQuNjIyNjQ0IDMyNy4xOTU0NzIgNTIuMDA0NzE3IDEzLjgxMDE5OHYtMTguMDU5NDlsNC4yNDUyODMtNC4yNDkyOTJoMjkuNzE2OTgydjIxLjI0NjQ1OSAxNC44NzI1MjNoLTMxLjgzOTYyNGwtMzkuMjY4ODY4LTE2Ljk5NzE2OXoiIGZpbGw9IiNjZGJkYjIiLz48cGF0aCBkPSJtMTk5LjUyODMwNSAzMjcuMTk1NDcyIDUwLjk0MzM5NyAxMy44MTAxOTh2LTE4LjA1OTQ5bDQuMjQ1MjgzLTQuMjQ5MjkyaDI5LjcxNjk4MXYyMS4yNDY0NTkgMTQuODcyNTIzaC0zMS44Mzk2MjNsLTM5LjI2ODg2OC0xNi45OTcxNjl6IiBmaWxsPSIjY2RiZGIyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSA0ODMuOTYyMjcgMCkiLz48cGF0aCBkPSJtMTcwLjg3MjY0NCAyODcuODg5NTIzLTQuMjQ1MjgzIDM1LjA1NjY1NyA1LjMwNjYwNC00LjI0OTI5Mmg1NS4xODg2OGw2LjM2NzkyNSA0LjI0OTI5Mi00LjI0NTI4NC0zNS4wNTY2NTctOC40OTA1NjUtNS4zMTE2MTUtNDIuNDUyODMyIDEuMDYyMzIzeiIgZmlsbD0iIzM5MzkzOSIvPjxwYXRoIGQ9Im0xNDIuMjE2OTg0IDUwLjk5MTUwMjIgMjUuNDcxNjk4IDU5LjQ5MDA4NTggMTEuNjc0NTI4IDE3My4xNTg2NDNoNDEuMzkxNTExbDEyLjczNTg0OS0xNzMuMTU4NjQzIDIzLjM0OTA1Ni01OS40OTAwODU4eiIgZmlsbD0iI2Y4OWMzNSIvPjxwYXRoIGQ9Im0zMC43NzgzMDIzIDE4MS42NTcyMjYtMjkuNzE2OTgxNTMgODYuMDQ4MTYxIDc0LjI5MjQ1MzkzLTQuMjQ5MjkzaDQ3Ljc1OTQzNDN2LTM3LjE4MTMwM2wtMi4xMjI2NDEtNzYuNDg3MjUzLTEwLjYxMzIwOCA4LjQ5ODU4M3oiIGZpbGw9IiNmODlkMzUiLz48cGF0aCBkPSJtODcuMDI4MzAzMiAxOTEuMjE4MTM0IDg3LjAyODMwMjggMi4xMjQ2NDYtOS41NTE4ODYgNDQuNjE3NTYzLTQxLjM5MTUxMS0xMC42MjMyMjl6IiBmaWxsPSIjZDg3YzMwIi8+PHBhdGggZD0ibTg3LjAyODMwMzIgMTkyLjI4MDQ1NyAzNi4wODQ5MDU4IDMzLjk5NDMzNHYzMy45OTQzMzR6IiBmaWxsPSIjZWE4ZDNhIi8+PHBhdGggZD0ibTEyMy4xMTMyMDkgMjI3LjMzNzExNCA0Mi40NTI4MzEgMTAuNjIzMjI5IDEzLjc5NzE3IDQ1LjY3OTg4OC05LjU1MTg4NiA1LjMxMTYxNS00Ni42OTgxMTUtMjcuNjIwMzk4eiIgZmlsbD0iI2Y4OWQzNSIvPjxwYXRoIGQ9Im0xMjMuMTEzMjA5IDI2MS4zMzE0NDgtOC40OTA1NjUgNjUuODY0MDI0IDU2LjI1LTM5LjMwNTk0OXoiIGZpbGw9IiNlYjhmMzUiLz48cGF0aCBkPSJtMTc0LjA1NjYwNiAxOTMuMzQyNzggNS4zMDY2MDQgOTAuMjk3NDUxLTE1LjkxOTgxMi00Ni4yMTEwNDl6IiBmaWxsPSIjZWE4ZTNhIi8+PHBhdGggZD0ibTc0LjI5MjQ1MzkgMjYyLjM5Mzc3MSA0OC44MjA3NTUxLTEuMDYyMzIzLTguNDkwNTY1IDY1Ljg2NDAyNHoiIGZpbGw9IiNkODdjMzAiLz48cGF0aCBkPSJtMjQuNDEwMzc3NyAzNTUuODc4MTkzIDkwLjIxMjI2NjMtMjguNjgyNzIxLTQwLjMzMDE5MDEtNjQuODAxNzAxLTczLjIzMTEzMzEzIDUuMzExNjE2eiIgZmlsbD0iI2ViOGYzNSIvPjxwYXRoIGQ9Im0xNjcuNjg4NjgyIDExMC40ODE1ODgtNDUuNjM2NzkzIDM4LjI0MzYyNy0zNS4wMjM1ODU4IDQyLjQ5MjkxOSA4Ny4wMjgzMDI4IDMuMTg2OTY5eiIgZmlsbD0iI2U4ODIxZSIvPjxwYXRoIGQ9Im0xMTQuNjIyNjQ0IDMyNy4xOTU0NzIgNTYuMjUtMzkuMzA1OTQ5LTQuMjQ1MjgzIDMzLjk5NDMzNHYxOS4xMjE4MTNsLTM4LjIwNzU0OC03LjQzNjI2eiIgZmlsbD0iI2RmY2VjMyIvPjxwYXRoIGQ9Im0yMjkuMjQ1Mjg2IDMyNy4xOTU0NzIgNTUuMTg4NjgtMzkuMzA1OTQ5LTQuMjQ1MjgzIDMzLjk5NDMzNHYxOS4xMjE4MTNsLTM4LjIwNzU0OC03LjQzNjI2eiIgZmlsbD0iI2RmY2VjMyIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgNTEzLjY3OTI1MiAwKSIvPjxwYXRoIGQ9Im0xMzIuNjY1MDk2IDIxMi40NjQ1OTMtMTEuNjc0NTI4IDI0LjQzMzQyNyA0MS4zOTE1MS0xMC42MjMyMjl6IiBmaWxsPSIjMzkzOTM5IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAyODMuMzcyNjQ2IDApIi8+PHBhdGggZD0ibTIzLjM0OTA1NyAxLjA2MjMyMjk2IDE0NC4zMzk2MjUgMTA5LjQxOTI2NTA0LTI0LjQxMDM3OC01OS40OTAwODU4eiIgZmlsbD0iI2U4OGYzNSIvPjxwYXRoIGQ9Im0yMy4zNDkwNTcgMS4wNjIzMjI5Ni0xOS4xMDM3NzM5MiA1OC40Mjc3NjI5NCAxMC42MTMyMDc3MiA2My43MzkzNzgxLTcuNDI5MjQ1NDEgNC4yNDkyOTIgMTAuNjEzMjA3NzEgOS41NjA5MDYtOC40OTA1NjYxNyA3LjQzNjI2MSAxMS42NzQ1Mjg0NyAxMC42MjMyMjktNy40MjkyNDU0IDYuMzczOTM4IDE2Ljk4MTEzMjMgMjEuMjQ2NDU5IDc5LjU5OTA1NzctMjQuNDMzNDI4YzM4LjkxNTA5Ni0zMS4xNjE0NzMgNTguMDE4ODY5LTQ3LjA5NjMxOCA1Ny4zMTEzMjItNDcuODA0NTMzLS43MDc1NDgtLjcwODIxNS00OC44MjA3NTYtMzcuMTgxMzAzNi0xNDQuMzM5NjI1LTEwOS40MTkyNjUwNHoiIGZpbGw9IiM4ZTVhMzAiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAzOTkuMDU2NjExIDApIj48cGF0aCBkPSJtMzAuNzc4MzAyMyAxODEuNjU3MjI2LTI5LjcxNjk4MTUzIDg2LjA0ODE2MSA3NC4yOTI0NTM5My00LjI0OTI5M2g0Ny43NTk0MzQzdi0zNy4xODEzMDNsLTIuMTIyNjQxLTc2LjQ4NzI1My0xMC42MTMyMDggOC40OTg1ODN6IiBmaWxsPSIjZjg5ZDM1Ii8+PHBhdGggZD0ibTg3LjAyODMwMzIgMTkxLjIxODEzNCA4Ny4wMjgzMDI4IDIuMTI0NjQ2LTkuNTUxODg2IDQ0LjYxNzU2My00MS4zOTE1MTEtMTAuNjIzMjI5eiIgZmlsbD0iI2Q4N2MzMCIvPjxwYXRoIGQ9Im04Ny4wMjgzMDMyIDE5Mi4yODA0NTcgMzYuMDg0OTA1OCAzMy45OTQzMzR2MzMuOTk0MzM0eiIgZmlsbD0iI2VhOGQzYSIvPjxwYXRoIGQ9Im0xMjMuMTEzMjA5IDIyNy4zMzcxMTQgNDIuNDUyODMxIDEwLjYyMzIyOSAxMy43OTcxNyA0NS42Nzk4ODgtOS41NTE4ODYgNS4zMTE2MTUtNDYuNjk4MTE1LTI3LjYyMDM5OHoiIGZpbGw9IiNmODlkMzUiLz48cGF0aCBkPSJtMTIzLjExMzIwOSAyNjEuMzMxNDQ4LTguNDkwNTY1IDY1Ljg2NDAyNCA1NS4xODg2OC0zOC4yNDM2MjZ6IiBmaWxsPSIjZWI4ZjM1Ii8+PHBhdGggZD0ibTE3NC4wNTY2MDYgMTkzLjM0Mjc4IDUuMzA2NjA0IDkwLjI5NzQ1MS0xNS45MTk4MTItNDYuMjExMDQ5eiIgZmlsbD0iI2VhOGUzYSIvPjxwYXRoIGQ9Im03NC4yOTI0NTM5IDI2Mi4zOTM3NzEgNDguODIwNzU1MS0xLjA2MjMyMy04LjQ5MDU2NSA2NS44NjQwMjR6IiBmaWxsPSIjZDg3YzMwIi8+PHBhdGggZD0ibTI0LjQxMDM3NzcgMzU1Ljg3ODE5MyA5MC4yMTIyNjYzLTI4LjY4MjcyMS00MC4zMzAxOTAxLTY0LjgwMTcwMS03My4yMzExMzMxMyA1LjMxMTYxNnoiIGZpbGw9IiNlYjhmMzUiLz48cGF0aCBkPSJtMTY3LjY4ODY4MiAxMTAuNDgxNTg4LTQ1LjYzNjc5MyAzOC4yNDM2MjctMzUuMDIzNTg1OCA0Mi40OTI5MTkgODcuMDI4MzAyOCAzLjE4Njk2OXoiIGZpbGw9IiNlODgyMWUiLz48cGF0aCBkPSJtMTMyLjY2NTA5NiAyMTIuNDY0NTkzLTExLjY3NDUyOCAyNC40MzM0MjcgNDEuMzkxNTEtMTAuNjIzMjI5eiIgZmlsbD0iIzM5MzkzOSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjgzLjM3MjY0NiAwKSIvPjxwYXRoIGQ9Im0yMy4zNDkwNTcgMS4wNjIzMjI5NiAxNDQuMzM5NjI1IDEwOS40MTkyNjUwNC0yNC40MTAzNzgtNTkuNDkwMDg1OHoiIGZpbGw9IiNlODhmMzUiLz48cGF0aCBkPSJtMjMuMzQ5MDU3IDEuMDYyMzIyOTYtMTkuMTAzNzczOTIgNTguNDI3NzYyOTQgMTAuNjEzMjA3NzIgNjMuNzM5Mzc4MS03LjQyOTI0NTQxIDQuMjQ5MjkyIDEwLjYxMzIwNzcxIDkuNTYwOTA2LTguNDkwNTY2MTcgNy40MzYyNjEgMTEuNjc0NTI4NDcgMTAuNjIzMjI5LTcuNDI5MjQ1NCA2LjM3MzkzOCAxNi45ODExMzIzIDIxLjI0NjQ1OSA3OS41OTkwNTc3LTI0LjQzMzQyOGMzOC45MTUwOTYtMzEuMTYxNDczIDU4LjAxODg2OS00Ny4wOTYzMTggNTcuMzExMzIyLTQ3LjgwNDUzMy0uNzA3NTQ4LS43MDgyMTUtNDguODIwNzU2LTM3LjE4MTMwMzYtMTQ0LjMzOTYyNS0xMDkuNDE5MjY1MDR6IiBmaWxsPSIjOGU1YTMwIi8+PC9nPjwvZz48L3N2Zz4=",
-  //   desc: "Connect to your MetaMask Wallet",
-  // },
-  // {
-  //   id: 2,
-  //   name: "OKX",
-  //   logo: "data:image/png;base64,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",
-  //   desc: "Connect to your OKX Wallet",
-  // },
+  {
+    id: 1,
+    name: "MetaMask",
+    logo: "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM1NSIgdmlld0JveD0iMCAwIDM5NyAzNTUiIHdpZHRoPSIzOTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMSAtMSkiPjxwYXRoIGQ9Im0xMTQuNjIyNjQ0IDMyNy4xOTU0NzIgNTIuMDA0NzE3IDEzLjgxMDE5OHYtMTguMDU5NDlsNC4yNDUyODMtNC4yNDkyOTJoMjkuNzE2OTgydjIxLjI0NjQ1OSAxNC44NzI1MjNoLTMxLjgzOTYyNGwtMzkuMjY4ODY4LTE2Ljk5NzE2OXoiIGZpbGw9IiNjZGJkYjIiLz48cGF0aCBkPSJtMTk5LjUyODMwNSAzMjcuMTk1NDcyIDUwLjk0MzM5NyAxMy44MTAxOTh2LTE4LjA1OTQ5bDQuMjQ1MjgzLTQuMjQ5MjkyaDI5LjcxNjk4MXYyMS4yNDY0NTkgMTQuODcyNTIzaC0zMS44Mzk2MjNsLTM5LjI2ODg2OC0xNi45OTcxNjl6IiBmaWxsPSIjY2RiZGIyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSA0ODMuOTYyMjcgMCkiLz48cGF0aCBkPSJtMTcwLjg3MjY0NCAyODcuODg5NTIzLTQuMjQ1MjgzIDM1LjA1NjY1NyA1LjMwNjYwNC00LjI0OTI5Mmg1NS4xODg2OGw2LjM2NzkyNSA0LjI0OTI5Mi00LjI0NTI4NC0zNS4wNTY2NTctOC40OTA1NjUtNS4zMTE2MTUtNDIuNDUyODMyIDEuMDYyMzIzeiIgZmlsbD0iIzM5MzkzOSIvPjxwYXRoIGQ9Im0xNDIuMjE2OTg0IDUwLjk5MTUwMjIgMjUuNDcxNjk4IDU5LjQ5MDA4NTggMTEuNjc0NTI4IDE3My4xNTg2NDNoNDEuMzkxNTExbDEyLjczNTg0OS0xNzMuMTU4NjQzIDIzLjM0OTA1Ni01OS40OTAwODU4eiIgZmlsbD0iI2Y4OWMzNSIvPjxwYXRoIGQ9Im0zMC43NzgzMDIzIDE4MS42NTcyMjYtMjkuNzE2OTgxNTMgODYuMDQ4MTYxIDc0LjI5MjQ1MzkzLTQuMjQ5MjkzaDQ3Ljc1OTQzNDN2LTM3LjE4MTMwM2wtMi4xMjI2NDEtNzYuNDg3MjUzLTEwLjYxMzIwOCA4LjQ5ODU4M3oiIGZpbGw9IiNmODlkMzUiLz48cGF0aCBkPSJtODcuMDI4MzAzMiAxOTEuMjE4MTM0IDg3LjAyODMwMjggMi4xMjQ2NDYtOS41NTE4ODYgNDQuNjE3NTYzLTQxLjM5MTUxMS0xMC42MjMyMjl6IiBmaWxsPSIjZDg3YzMwIi8+PHBhdGggZD0ibTg3LjAyODMwMzIgMTkyLjI4MDQ1NyAzNi4wODQ5MDU4IDMzLjk5NDMzNHYzMy45OTQzMzR6IiBmaWxsPSIjZWE4ZDNhIi8+PHBhdGggZD0ibTEyMy4xMTMyMDkgMjI3LjMzNzExNCA0Mi40NTI4MzEgMTAuNjIzMjI5IDEzLjc5NzE3IDQ1LjY3OTg4OC05LjU1MTg4NiA1LjMxMTYxNS00Ni42OTgxMTUtMjcuNjIwMzk4eiIgZmlsbD0iI2Y4OWQzNSIvPjxwYXRoIGQ9Im0xMjMuMTEzMjA5IDI2MS4zMzE0NDgtOC40OTA1NjUgNjUuODY0MDI0IDU2LjI1LTM5LjMwNTk0OXoiIGZpbGw9IiNlYjhmMzUiLz48cGF0aCBkPSJtMTc0LjA1NjYwNiAxOTMuMzQyNzggNS4zMDY2MDQgOTAuMjk3NDUxLTE1LjkxOTgxMi00Ni4yMTEwNDl6IiBmaWxsPSIjZWE4ZTNhIi8+PHBhdGggZD0ibTc0LjI5MjQ1MzkgMjYyLjM5Mzc3MSA0OC44MjA3NTUxLTEuMDYyMzIzLTguNDkwNTY1IDY1Ljg2NDAyNHoiIGZpbGw9IiNkODdjMzAiLz48cGF0aCBkPSJtMjQuNDEwMzc3NyAzNTUuODc4MTkzIDkwLjIxMjI2NjMtMjguNjgyNzIxLTQwLjMzMDE5MDEtNjQuODAxNzAxLTczLjIzMTEzMzEzIDUuMzExNjE2eiIgZmlsbD0iI2ViOGYzNSIvPjxwYXRoIGQ9Im0xNjcuNjg4NjgyIDExMC40ODE1ODgtNDUuNjM2NzkzIDM4LjI0MzYyNy0zNS4wMjM1ODU4IDQyLjQ5MjkxOSA4Ny4wMjgzMDI4IDMuMTg2OTY5eiIgZmlsbD0iI2U4ODIxZSIvPjxwYXRoIGQ9Im0xMTQuNjIyNjQ0IDMyNy4xOTU0NzIgNTYuMjUtMzkuMzA1OTQ5LTQuMjQ1MjgzIDMzLjk5NDMzNHYxOS4xMjE4MTNsLTM4LjIwNzU0OC03LjQzNjI2eiIgZmlsbD0iI2RmY2VjMyIvPjxwYXRoIGQ9Im0yMjkuMjQ1Mjg2IDMyNy4xOTU0NzIgNTUuMTg4NjgtMzkuMzA1OTQ5LTQuMjQ1MjgzIDMzLjk5NDMzNHYxOS4xMjE4MTNsLTM4LjIwNzU0OC03LjQzNjI2eiIgZmlsbD0iI2RmY2VjMyIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgNTEzLjY3OTI1MiAwKSIvPjxwYXRoIGQ9Im0xMzIuNjY1MDk2IDIxMi40NjQ1OTMtMTEuNjc0NTI4IDI0LjQzMzQyNyA0MS4zOTE1MS0xMC42MjMyMjl6IiBmaWxsPSIjMzkzOTM5IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAyODMuMzcyNjQ2IDApIi8+PHBhdGggZD0ibTIzLjM0OTA1NyAxLjA2MjMyMjk2IDE0NC4zMzk2MjUgMTA5LjQxOTI2NTA0LTI0LjQxMDM3OC01OS40OTAwODU4eiIgZmlsbD0iI2U4OGYzNSIvPjxwYXRoIGQ9Im0yMy4zNDkwNTcgMS4wNjIzMjI5Ni0xOS4xMDM3NzM5MiA1OC40Mjc3NjI5NCAxMC42MTMyMDc3MiA2My43MzkzNzgxLTcuNDI5MjQ1NDEgNC4yNDkyOTIgMTAuNjEzMjA3NzEgOS41NjA5MDYtOC40OTA1NjYxNyA3LjQzNjI2MSAxMS42NzQ1Mjg0NyAxMC42MjMyMjktNy40MjkyNDU0IDYuMzczOTM4IDE2Ljk4MTEzMjMgMjEuMjQ2NDU5IDc5LjU5OTA1NzctMjQuNDMzNDI4YzM4LjkxNTA5Ni0zMS4xNjE0NzMgNTguMDE4ODY5LTQ3LjA5NjMxOCA1Ny4zMTEzMjItNDcuODA0NTMzLS43MDc1NDgtLjcwODIxNS00OC44MjA3NTYtMzcuMTgxMzAzNi0xNDQuMzM5NjI1LTEwOS40MTkyNjUwNHoiIGZpbGw9IiM4ZTVhMzAiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAzOTkuMDU2NjExIDApIj48cGF0aCBkPSJtMzAuNzc4MzAyMyAxODEuNjU3MjI2LTI5LjcxNjk4MTUzIDg2LjA0ODE2MSA3NC4yOTI0NTM5My00LjI0OTI5M2g0Ny43NTk0MzQzdi0zNy4xODEzMDNsLTIuMTIyNjQxLTc2LjQ4NzI1My0xMC42MTMyMDggOC40OTg1ODN6IiBmaWxsPSIjZjg5ZDM1Ii8+PHBhdGggZD0ibTg3LjAyODMwMzIgMTkxLjIxODEzNCA4Ny4wMjgzMDI4IDIuMTI0NjQ2LTkuNTUxODg2IDQ0LjYxNzU2My00MS4zOTE1MTEtMTAuNjIzMjI5eiIgZmlsbD0iI2Q4N2MzMCIvPjxwYXRoIGQ9Im04Ny4wMjgzMDMyIDE5Mi4yODA0NTcgMzYuMDg0OTA1OCAzMy45OTQzMzR2MzMuOTk0MzM0eiIgZmlsbD0iI2VhOGQzYSIvPjxwYXRoIGQ9Im0xMjMuMTEzMjA5IDIyNy4zMzcxMTQgNDIuNDUyODMxIDEwLjYyMzIyOSAxMy43OTcxNyA0NS42Nzk4ODgtOS41NTE4ODYgNS4zMTE2MTUtNDYuNjk4MTE1LTI3LjYyMDM5OHoiIGZpbGw9IiNmODlkMzUiLz48cGF0aCBkPSJtMTIzLjExMzIwOSAyNjEuMzMxNDQ4LTguNDkwNTY1IDY1Ljg2NDAyNCA1NS4xODg2OC0zOC4yNDM2MjZ6IiBmaWxsPSIjZWI4ZjM1Ii8+PHBhdGggZD0ibTE3NC4wNTY2MDYgMTkzLjM0Mjc4IDUuMzA2NjA0IDkwLjI5NzQ1MS0xNS45MTk4MTItNDYuMjExMDQ5eiIgZmlsbD0iI2VhOGUzYSIvPjxwYXRoIGQ9Im03NC4yOTI0NTM5IDI2Mi4zOTM3NzEgNDguODIwNzU1MS0xLjA2MjMyMy04LjQ5MDU2NSA2NS44NjQwMjR6IiBmaWxsPSIjZDg3YzMwIi8+PHBhdGggZD0ibTI0LjQxMDM3NzcgMzU1Ljg3ODE5MyA5MC4yMTIyNjYzLTI4LjY4MjcyMS00MC4zMzAxOTAxLTY0LjgwMTcwMS03My4yMzExMzMxMyA1LjMxMTYxNnoiIGZpbGw9IiNlYjhmMzUiLz48cGF0aCBkPSJtMTY3LjY4ODY4MiAxMTAuNDgxNTg4LTQ1LjYzNjc5MyAzOC4yNDM2MjctMzUuMDIzNTg1OCA0Mi40OTI5MTkgODcuMDI4MzAyOCAzLjE4Njk2OXoiIGZpbGw9IiNlODgyMWUiLz48cGF0aCBkPSJtMTMyLjY2NTA5NiAyMTIuNDY0NTkzLTExLjY3NDUyOCAyNC40MzM0MjcgNDEuMzkxNTEtMTAuNjIzMjI5eiIgZmlsbD0iIzM5MzkzOSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjgzLjM3MjY0NiAwKSIvPjxwYXRoIGQ9Im0yMy4zNDkwNTcgMS4wNjIzMjI5NiAxNDQuMzM5NjI1IDEwOS40MTkyNjUwNC0yNC40MTAzNzgtNTkuNDkwMDg1OHoiIGZpbGw9IiNlODhmMzUiLz48cGF0aCBkPSJtMjMuMzQ5MDU3IDEuMDYyMzIyOTYtMTkuMTAzNzczOTIgNTguNDI3NzYyOTQgMTAuNjEzMjA3NzIgNjMuNzM5Mzc4MS03LjQyOTI0NTQxIDQuMjQ5MjkyIDEwLjYxMzIwNzcxIDkuNTYwOTA2LTguNDkwNTY2MTcgNy40MzYyNjEgMTEuNjc0NTI4NDcgMTAuNjIzMjI5LTcuNDI5MjQ1NCA2LjM3MzkzOCAxNi45ODExMzIzIDIxLjI0NjQ1OSA3OS41OTkwNTc3LTI0LjQzMzQyOGMzOC45MTUwOTYtMzEuMTYxNDczIDU4LjAxODg2OS00Ny4wOTYzMTggNTcuMzExMzIyLTQ3LjgwNDUzMy0uNzA3NTQ4LS43MDgyMTUtNDguODIwNzU2LTM3LjE4MTMwMzYtMTQ0LjMzOTYyNS0xMDkuNDE5MjY1MDR6IiBmaWxsPSIjOGU1YTMwIi8+PC9nPjwvZz48L3N2Zz4=",
+    desc: "Connect to your MetaMask Wallet",
+  },
+  {
+    id: 2,
+    name: "OKX",
+    logo: "data:image/png;base64,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",
+    desc: "Connect to your OKX Wallet",
+  },
   {
     id: 3,
     name: "Passport",
diff --git a/src/utils/marketplace.js b/src/utils/marketplace.js
index bcec09c..33a9a54 100644
--- a/src/utils/marketplace.js
+++ b/src/utils/marketplace.js
@@ -98,6 +98,7 @@ export const apiDelCartList = async (data) => {
 // 清空购物车
 export const apiClearCartList = async () => {
   const url = `${API_BASE}/api/shopcart/clear`
+  return httpPost(url, {net_id})
 }
 
 export const nftDetail = async(address, tokenId) => {