From e40181d6b08af30f8f7d580abee58e2ce65c77d7 Mon Sep 17 00:00:00 2001
From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com>
Date: Sat, 29 Jun 2024 17:14:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=86=E5=8F=B2=E5=92=8C=E5=9C=A8=E5=94=AE?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0=E6=98=BE=E7=A4=BAicon?=
 =?UTF-8?q?=E5=92=8C=E7=BE=8E=E5=85=83=E4=BB=B7=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/assets/hanging.vue     | 10 ++++++++
 src/components/assets/trading.vue     | 10 ++++++++
 src/components/chain/utils.js         | 35 +++++++++++++++++++++++++++
 src/components/common/hangingCard.vue |  5 ++--
 src/components/common/tradingCard.vue | 25 ++++++++++++-------
 5 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/src/components/assets/hanging.vue b/src/components/assets/hanging.vue
index fe47f0e..294a038 100644
--- a/src/components/assets/hanging.vue
+++ b/src/components/assets/hanging.vue
@@ -19,6 +19,7 @@ import OverView from "@/components/common/searchView/Overview.vue";
 import Card from "@/components/common/hangingCard.vue";
 import { apiHangingState } from "@/utils/marketplace"
 import {walletStore} from "@/store/wallet";
+import { formatPrice } from "@/components/chain/utils"
 const localWalletStore = walletStore()
 
 const nftList = ref([])
@@ -54,6 +55,15 @@ const getHistoryList = async () => {
   }
   if(myAddress) {
     let res = await apiHangingState(data)
+    for (let sub of res.rows) {
+      if (sub.event?.data) {
+        const _data = formatPrice(sub.event.data)
+        sub.event.icon = _data.icon
+        sub.event.usd = _data.usd
+        sub.event.currencyName = _data.currencyName
+        sub.event.amount = _data.amount
+      }
+    }
     nftList.value = res.rows
   }
 }
diff --git a/src/components/assets/trading.vue b/src/components/assets/trading.vue
index fbc9061..e94852c 100644
--- a/src/components/assets/trading.vue
+++ b/src/components/assets/trading.vue
@@ -21,6 +21,7 @@ import StatusRadio from "@/components/common/searchView/statusRadio.vue";
 import Card from "@/components/common/tradingCard.vue";
 import { apiHistoryState, nftDetail } from "@/utils/marketplace"
 import {walletStore} from "@/store/wallet";
+import { parseTradeEvent } from "@/components/chain/utils"
 const localWalletStore = walletStore()
 const myAddress = ref(localWalletStore.address)
 const nftList = ref([])
@@ -44,6 +45,15 @@ const getHistoryList = async () => {
   }
   if(myAddress.value) {
     let res = await apiHistoryState(myAddress.value,data)
+    for (let sub of res.rows) {
+      if (sub.event?.data) {
+        const _data = parseTradeEvent(sub.event)
+        sub.event.icon = _data.icon
+        sub.event.usd = _data.usd
+        sub.event.currencyName = _data.currencyName
+        sub.event.amount = _data.amount
+      }
+    }
     nftList.value = res.rows
   }
 }
diff --git a/src/components/chain/utils.js b/src/components/chain/utils.js
index d866089..eefd7b9 100644
--- a/src/components/chain/utils.js
+++ b/src/components/chain/utils.js
@@ -241,4 +241,39 @@ export const formatPrice = (nftData) => {
     }
   }
   return {icon, price, usd, tokenAmount, currencyName, amount: amountBn}
+}
+
+export const parseTradeEvent = (event) => {
+  const marketplaceList = useMarketplaceStore()
+  const payments = event.data?.details?.payment
+  const feeList = payments?.fees || []
+  let amountBn = 0n;
+  for (const fee of feeList) {
+    amountBn += BigInt(fee.amount)
+  }
+  let address;
+  let icon, price, usd, currencyName;
+  if (payments?.token?.contract_address) {
+    address = payments?.token?.contract_address
+    if (address) {
+      address = address.toLowerCase()
+    }
+  } else {
+    address = 'NATIVE'
+  }
+  if (!address) {
+    return {icon, price}
+  }
+  if (address) {
+    const currencyData = currencyMap[address]
+    currencyName = currencyData.name
+    if (currencyData) {
+      const currencyPrice = marketplaceList.priceDatas
+      icon = currencyData.icon
+      price = currencyPrice.find(o => o.id == currencyData.id_query)
+      let amount = parseFloat(ethers.utils.formatUnits(amountBn, 18))
+      usd = (amount * price.price).toFixed(2)
+    }
+  }
+  return {icon, price, usd, currencyName, amount: amountBn}
 }
\ No newline at end of file
diff --git a/src/components/common/hangingCard.vue b/src/components/common/hangingCard.vue
index e9fc093..1bfaba3 100644
--- a/src/components/common/hangingCard.vue
+++ b/src/components/common/hangingCard.vue
@@ -14,7 +14,7 @@
       <a-table-column title="Price" data-index="event">
         <template  #default="{ text: event }">
           <div class="price">
-            {{ priceCalculated(event.data.buy[0].amount) }}
+            {{ priceCalculated(event.data.buy[0].amount) }}<img :src="event.icon" alt="">
           </div>
       </template>
       </a-table-column>
@@ -50,6 +50,7 @@ import ImgCard from "@/components/common/imgCard.vue"
 import { priceCalculated, showTime } from "@/configs/priceCalculate"
 import { BlockChain } from "@/components/chain/BlockChain"
 
+
 const props = defineProps({
   nftData: {
     type: Array,
@@ -57,6 +58,7 @@ const props = defineProps({
   },
 });
 
+
 const eventNft = async (e) => {
   console.log(e.data.id)
   // return
@@ -65,7 +67,6 @@ const eventNft = async (e) => {
   console.log("---",res)
 }
 
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/common/tradingCard.vue b/src/components/common/tradingCard.vue
index 07d463a..39d0d55 100644
--- a/src/components/common/tradingCard.vue
+++ b/src/components/common/tradingCard.vue
@@ -21,16 +21,16 @@
       <a-table-column title="Price" data-index="event" :width="400">
         <template  #default="{ text: event }">
           <div class="price">
-            <div class="nft-price">{{ event.data.details.asset[0].amount }}</div>
-            <p>$ &nbsp; 400</p>
+            <div class="nft-price">{{ priceCalculated(event.amount) }}</div>
+            <p>$ &nbsp; {{ event.usd }}</p>
           </div>
         </template>
       </a-table-column>
       <a-table-column  title="" data-index="event">
         <template  #default="{ text: event }">
           <div class="price-icon">
-            <span>{{event}}</span>
-            <img src="@/assets/img/marketplace/ETHicon.png" alt="">
+            <!-- <span>{{event}}</span> -->
+            <img :src="event.icon" alt="">
           </div>
         </template>
       </a-table-column>
@@ -51,7 +51,7 @@
       <a-table-column  title="" data-index="event">
         <template  #default="{ text: event }">
           <div class="from-to-icon">
-            <span>{{event}}</span>
+            <!-- <span>{{event}}</span> -->
             <img src="@/assets/img/marketplace/Arrows.png" alt="">
           </div>
         </template>
@@ -70,11 +70,11 @@
           </div>
         </template>
       </a-table-column>
-      <a-table-column title="Contract" data-index="nft" :width="400">
-        <template  #default="{ text: nft }">
+      <a-table-column title="Contract" data-index="event" :width="400">
+        <template  #default="{ text: event }">
           <div class="contract">
             <div class="nft-contract">
-              <a :href="nft.meta_url" target="_back">
+              <a :href="chainExpolor(event.data.blockchain_metadata.transaction_hash)" target="_back">
                 <span>Etherscan</span>
                 <img src="@/assets/img/marketplace/Links web icon.png" alt="">
               </a>
@@ -89,7 +89,8 @@
 <script setup>
 import { ref } from "vue"
 import ImgCard from "@/components/common/imgCard.vue"
-import { sliceAddress, showTime } from "@/configs/priceCalculate"
+import { sliceAddress, showTime, priceCalculated } from "@/configs/priceCalculate"
+import { currentChainCfg } from '@/components/chain/utils'
 
 const props = defineProps({
   nftData: {
@@ -98,6 +99,12 @@ const props = defineProps({
   },
 });
 
+const chainExpolor = (urlPart) => {
+  const base = currentChainCfg.explorerurl
+  return `${base}/tx/${urlPart}`
+}
+
+
 
 console.log(props.nftData)