Merge branch 'new-CounterFire' of http://git.kingsome.cn/huangjinming/CounterFireGames into new-CounterFire

.env.production

@@ -1,4 +1,15 @@
 VUE_APP_BASE_API='https://market.cebg.games'
 VUE_APP_BASE_API2='https://invitation.counterfire.games'
 //VUE_APP_BASE_API2='http://192.168.100.83:3000/'
-VUE_APP_GPAL_API='https://game2006api.cebggame.com/'
+VUE_APP_GPAL_API='https://game2006api.cebggame.com/'
+
+VUE_APP_PASSPORT_PUBLISHABLE_KEY=pk_imapik-tU10buLqoyLZ0o54rcub
+VUE_APP_PASSPORT_REDIRECT_URI=https://www.counterfire.games/marketplace
+VUE_APP_PASSPORT_LOGOUT_URI=https://tTB5eEedqDOHPHMI41sRDGmqAQwus9oE/
+VUE_APP_PASSPORT_CLIENT_ID=tTB5eEedqDOHPHMI41sRDGmqAQwus9oE
+VUE_APP_PASSPORT_MARKET_ADDRESS=0x7d117aA8BD6D31c4fa91722f246388f38ab1942c
+VUE_APP_MKT_API='https://market-test.kingsome.cn'
+VUE_APP_NET_ID='13471'
+VUE_APP_MARKET_CURRENCY='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
+VUE_APP_MAKEFEE_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'
+VUE_APP_LOCKER_ADDRESS='0x59e751c2037B710090035B6ea928e0cce80aC03f'

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"
@@ -47,8 +47,7 @@
           <li>Total&nbsp;:&nbsp;</li>
           <li>
             <div>
-              <span>{{ priceCalculated(buyDataArr[0].event.data.buy[0].amount) }}</span>
-              <!-- <span>0.08</span> -->
+              <span>{{ totalPrice }}</span>
               <img src="@/assets/img/marketplace/ETHicon.png" alt />
             </div>
             <!-- <div class="money">$ 400</div> -->
@@ -63,20 +62,25 @@
 import {ref, toRaw, defineEmits, computed} from "vue";
 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);
 
+const totalPrice = computed(() => {
+  let total = 0n;
+  props.buyDataArr.forEach((item) => {
+    total += BigInt(item.event.data.buy[0].amount);
+  });
+  return priceCalculated(total);
+});
 const emit = defineEmits(["handleClose"]);
 
 const handleOk = (e) => {
@@ -92,6 +96,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 +105,12 @@ const buyConfirm = async () => {
 
 
 const handleCancel = (e) => {
-  emit("handleClose");
+  hideModal({errcode: 1});
 };
+
+function hideModal(result = null) {
+  props.close(result);
+}
 </script>
 
 <style lang="scss" scoped>

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>

src/components/assets/card.vue

@@ -32,7 +32,6 @@
 <script setup>
 import { ref, toRaw, onMounted, getCurrentInstance } from "vue"
 import SellDialog from "@/components/Dialogs/sellDialog.vue"
-import {PassportWallet} from "@/wallet/passPort.js"
 import { useDetailStore } from "@/store/detail"
 import { apiGetPrice } from "@/utils/marketplace"
 import LazyLoadImg from "@/components/lazyloadimg"

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)
   }

src/components/chain/BlockChain.js

@@ -24,7 +24,7 @@ export class BlockChain {
     this.store = walletStore();
     this.store.$hydrate({runHooks: false});
     this.initWallet();
-    this.market = new ImtblMarket()
+    this.market = new ImtblMarket(this)
     this.locker = new Locker(this)
     BlockChain.instance = this;
     

src/components/chain/Market.js

@@ -1,7 +1,6 @@
 import { baseConfig } from './wallet/PassportWallet';
 import { orderbook } from '@imtbl/sdk';
-const marketAddress = import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
-
+const makeFeeAddress = import.meta.env.VUE_APP_MAKEFEE_ADDRESS
 const NATIVE = 'NATIVE'
 const ERC20 = 'ERC20'
 
@@ -100,7 +99,7 @@ export class ImtblMarket {
       // Optional maker marketplace fee
       makerFees: [{
         amount,
-        recipientAddress: marketAddress, // Replace address with your own marketplace address
+        recipientAddress: makeFeeAddress, // Replace address with your own marketplace address
       }],
     });
     console.log('order:', order);

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,
 });
 

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)), "-=-=-");
 });

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>

src/configs/priceCalculate.js

@@ -1,12 +1,9 @@
 import moment from "moment"
+import { ethers } from "ethers"
 
 // 计算价格精度
 export const priceCalculated = (price) => {
-  let priceNum = Number(price)/1e18
-  if(isNaN(priceNum)){return priceNum}
-  let str = ''+priceNum
-  if(!/e/i.test(str)){return priceNum}
-  return (priceNum).toFixed(18).replace(/\.?0+$/,"")
+  return ethers.utils.formatUnits(price, 18)
 }
 
 export const timeFormat = (value) => {

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) => {