update price show for usdc

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) => {
+  for (let sub of props.buyDataArr) {
-    total += item.event.data.buy[0].amount;
+    total += sub.amount || 0n;
-  });
+  }
-  return priceCalculated(total);
+  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>

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

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]
-    const currencyData = currencyMap[address]
+  const amount = parseFloat(ethers.utils.formatUnits(amountBn, currencyData.decimals))
-    currencyName = currencyData.name
+  const tokenAmount = priceCalculated(amountBn, currencyData.decimals)
-    if (currencyData) {
+  currencyName = currencyData.name
-      const currencyPrice = marketplaceList.priceDatas
+  if (currencyData) {
-      icon = currencyData.icon
+    const currencyPrice = marketplaceList.priceDatas
-      price = currencyPrice.find(o => o.id == currencyData.id_query)
+    icon = currencyData.icon
-      usd = (amount * price.price).toFixed(2)
+    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]
-    const currencyData = currencyMap[address]
+  currencyName = currencyData.name
-    currencyName = currencyData.name
+  if (currencyData) {
-    if (currencyData) {
+    const currencyPrice = marketplaceList.priceDatas
-      const currencyPrice = marketplaceList.priceDatas
+    icon = currencyData.icon
-      icon = currencyData.icon
+    price = currencyPrice.find(o => o.id == currencyData.id_query)
-      price = currencyPrice.find(o => o.id == currencyData.id_query)
+    let amount = parseFloat(ethers.utils.formatUnits(amountBn, currencyData.decimals))
-      let amount = parseFloat(ethers.utils.formatUnits(amountBn, 18))
+    usd = (amount * price.price).toFixed(2)
-      usd = (amount * price.price).toFixed(2)
-    }
   }
   return {icon, price, usd, currencyName, amount: amountBn}
 }

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>

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'
     },

src/configs/priceCalculate.js

@@ -2,8 +2,8 @@ import moment from "moment"
 import { ethers } from "ethers"
 
 // 计算价格精度
-export const priceCalculated = (price) => {
+export const priceCalculated = (price, decimals=18) => {
-  let str = Number(ethers.utils.formatUnits(price, 18)).toFixed(5)
+  let str = Number(ethers.utils.formatUnits(price, decimals)).toFixed(5)
   if(str == '0.00000') {
     str = '<0.00001'
   }

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