From 91ed51c8348f7074395403dd2d44eb0c77878d9b Mon Sep 17 00:00:00 2001
From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com>
Date: Tue, 2 Jul 2024 14:38:51 +0800
Subject: [PATCH] update price show for usdc

---
 src/components/Dialogs/buyDialog.vue | 27 ++++++++++++++----
 src/components/cart/index.vue        |  7 +++--
 src/components/chain/utils.js        | 42 +++++++++++++---------------
 src/components/common/card.vue       |  2 +-
 src/configs/configchain.js           |  4 +--
 src/configs/priceCalculate.js        |  4 +--
 src/views/DetailView.vue             |  2 +-
 7 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/src/components/Dialogs/buyDialog.vue b/src/components/Dialogs/buyDialog.vue
index 6c58d45..bc9aa47 100644
--- a/src/components/Dialogs/buyDialog.vue
+++ b/src/components/Dialogs/buyDialog.vue
@@ -21,7 +21,7 @@
             </div>
             <div class="id">{{ item.nft.token_id }}</div>
             <div class="price">
-              <div>{{ priceCalculated(item.event.data.buy[0].amount) }}</div>
+              <div>{{ item.tokenAmount }}</div>
               <div class="price-img">
                 <img :src="item.icon" alt />
               </div>
@@ -45,10 +45,11 @@
   </div>
 </template>
 <script setup>
-import {ref, toRaw, computed} from "vue";
+import {ref, toRaw, computed, onMounted} from "vue";
 import {Modal} from "ant-design-vue";
 import {priceCalculated} from "@/configs/priceCalculate";
 import {BlockChain} from "@/components/chain/BlockChain";
+import { formatPrice } from "@/components/chain/utils";
 const props = defineProps({
   buyDataArr: {
     type: Array,
@@ -59,10 +60,10 @@ const props = defineProps({
 });
 const totalPrice = computed(() => {
   let total = 0n;
-  props.buyDataArr.forEach((item) => {
-    total += item.event.data.buy[0].amount;
-  });
-  return priceCalculated(total);
+  for (let sub of props.buyDataArr) {
+    total += sub.amount || 0n;
+  }
+  return priceCalculated(total, props.buyDataArr[0].decimals);
 });
 const emit = defineEmits(["handleClose"]);
 
@@ -92,6 +93,20 @@ const handleCancel = (e) => {
 function hideModal(result = null) {
   props.close(result);
 }
+
+onMounted(() => {
+  for (let sub of props.buyDataArr) {
+    if (sub.event?.data) {
+      const _data = formatPrice(sub.event.data)
+      sub.icon = _data.icon
+      sub.usd = _data.usd
+      sub.currencyName = _data.currencyName
+      sub.amount = _data.amount
+      sub.tokenAmount = _data.tokenAmount
+      sub.decimals = _data.decimals
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cart/index.vue b/src/components/cart/index.vue
index affab60..63208a8 100644
--- a/src/components/cart/index.vue
+++ b/src/components/cart/index.vue
@@ -17,7 +17,7 @@
           </div>
           <div class="cart-item-right">
             <div class="cart-item-right-price">
-              <div>{{ priceCalculated(item.amount) }}</div>
+              <div>{{ priceCalculated(item.amount, item.decimals) }}</div>
               <div class="cart-item-right-price-img">
                 <img :src="item.icon" alt="">
               </div>
@@ -37,7 +37,7 @@
       <div :class="{'top': index == 0, 'bottom': index > 0}">
         <div class="left" v-if="index == 0">Total Price</div>
         <div class="left" v-if="index > 0"></div>
-        <div class="right">{{ priceCalculated(item.amount) }} <img :src="item.icon" alt=""></div>
+        <div class="right">{{ priceCalculated(item.amount, item.decimals) }} <img :src="item.icon" alt=""></div>
       </div>
       </template>
       <div class="bottom">
@@ -94,6 +94,7 @@ const priceList = computed(() => {
     }
     let data = map.get(item.currencyName)
     data.amount += item.amount
+    data.decimals = item.decimals
     map.set(item.currencyName, data)
   }
   let result = []
@@ -128,6 +129,8 @@ const getCartList = async () => {
             sub.usd = _data.usd
             sub.currencyName = _data.currencyName
             sub.amount = _data.amount
+            sub.tokenAmount = _data.tokenAmount
+            sub.decimals = _data.decimals
           }
         }
       }
diff --git a/src/components/chain/utils.js b/src/components/chain/utils.js
index eefd7b9..0733cb0 100644
--- a/src/components/chain/utils.js
+++ b/src/components/chain/utils.js
@@ -217,8 +217,7 @@ export const formatPrice = (nftData) => {
       amountBn = amountBn + BigInt(fee.amount)
     })
   }
-  const tokenAmount = priceCalculated(data.amount)
-  const amount = parseFloat(ethers.utils.formatUnits(data.amount, 18))
+  
   if (type == 'NATIVE') {
     address = 'NATIVE'
   } else if (type == 'ERC20') {
@@ -230,17 +229,18 @@ export const formatPrice = (nftData) => {
   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)
-      usd = (amount * price.price).toFixed(2)
-    }
+  const currencyData = currencyMap[address]
+  const amount = parseFloat(ethers.utils.formatUnits(amountBn, currencyData.decimals))
+  const tokenAmount = priceCalculated(amountBn, currencyData.decimals)
+  currencyName = currencyData.name
+  if (currencyData) {
+    const currencyPrice = marketplaceList.priceDatas
+    icon = currencyData.icon
+    price = currencyPrice.find(o => o.id == currencyData.id_query)
+    usd = (amount * price.price).toFixed(2)
   }
-  return {icon, price, usd, tokenAmount, currencyName, amount: amountBn}
+
+  return {icon, price, usd, tokenAmount, currencyName, amount: amountBn, decimals: currencyData.decimals}
 }
 
 export const parseTradeEvent = (event) => {
@@ -264,16 +264,14 @@ export const parseTradeEvent = (event) => {
   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)
-    }
+  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, currencyData.decimals))
+    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/card.vue b/src/components/common/card.vue
index 13adee2..d18323d 100644
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@@ -170,7 +170,7 @@ onMounted(() => {
   if (props.nftData?.event?.data) {
     const data = formatPrice(props.nftData?.event?.data)
     icon.value = data.icon
-    price.value = priceCalculated(data.amount.toString())
+    price.value = data.tokenAmount
   }
 });
 </script>
diff --git a/src/configs/configchain.js b/src/configs/configchain.js
index c705218..92920f7 100644
--- a/src/configs/configchain.js
+++ b/src/configs/configchain.js
@@ -40,7 +40,7 @@ export const CURRENCYS = {
     },
     "0x3b2d8a1931736fc321c24864bceee981b11c3c57": {
       name: 'USDC',
-      decimals: 18,
+      decimals: 6,
       icon: icon_usdc,
       id_query: 'usd-coin'
     },
@@ -72,7 +72,7 @@ export const CURRENCYS = {
     },
     "0x6de8acc0d406837030ce4dd28e7c08c5a96a30d2": {
       name: 'USDC',
-      decimals: 18,
+      decimals: 6,
       icon: icon_usdc,
       id_query: 'usd-coin'
     },
diff --git a/src/configs/priceCalculate.js b/src/configs/priceCalculate.js
index 14dcb2c..3b305d8 100644
--- a/src/configs/priceCalculate.js
+++ b/src/configs/priceCalculate.js
@@ -2,8 +2,8 @@ import moment from "moment"
 import { ethers } from "ethers"
 
 // 计算价格精度
-export const priceCalculated = (price) => {
-  let str = Number(ethers.utils.formatUnits(price, 18)).toFixed(5)
+export const priceCalculated = (price, decimals=18) => {
+  let str = Number(ethers.utils.formatUnits(price, decimals)).toFixed(5)
   if(str == '0.00000') {
     str = '<0.00001'
   }
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 0cdde9a..43c251a 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -369,7 +369,7 @@ const getDetail = async () => {
     const _data = formatPrice(data.event?.data)
     icon.value = _data.icon
     usd.value = _data.usd
-    price.value = priceCalculated(_data.amount.toString())
+    price.value = _data.tokenAmount
   }
   console.log(data,'----')
 }