显示实际的货币icon

src/components/chain/Market.js

@@ -1,5 +1,7 @@
 import { baseConfig } from './wallet/PassportWallet';
 import { orderbook } from '@imtbl/sdk';
+import { queryTokenPriceCg } from "@/components/chain/utils"
+import {useMarketplaceStore} from "@/store/marketplace";
 const makeFeeAddress = import.meta.env.VUE_APP_MAKEFEE_ADDRESS
 const NATIVE = 'NATIVE'
 const ERC20 = 'ERC20'
@@ -8,6 +10,8 @@ export class ImtblMarket {
   constructor(_chainInstance) {
     this.client = new orderbook.Orderbook({ baseConfig });
     this.bc = _chainInstance
+    this.marketStore = useMarketplaceStore();
+    this.updateCurrencyPrice();
   }
 
   updateProvider(provider) {
@@ -226,4 +230,17 @@ export class ImtblMarket {
     const receipt = await this.signer.sendTransaction(unsignedCancelOrderTransaction);
     return receipt;
   }
+
+  async updateCurrencyPrice() {
+    const ids = ['immutable-x', 'ethereum', 'usd-coin']
+    let priceList = await queryTokenPriceCg(ids);
+    priceList = priceList.map((item) => {
+      return {
+        id: item.id,
+        price: item.current_price
+      }
+    })
+    this.marketStore.currencyPrice = priceList;
+    return priceList;
+  }
 }

src/components/chain/utils.js

@@ -6,6 +6,10 @@ import { ethers } from 'ethers';
 import assert from 'assert'
 import { AllChains } from "@/configs/allchain";
 import { Deferred } from '@/utils/promise.util';
+import { CURRENCYS } from "@/configs/configchain";
+import { useMarketplaceStore } from "@/store/marketplace"
+import {priceCalculated} from "@/configs/priceCalculate.js"
+
 
 export const cfgChainId = parseInt(import.meta.env.VUE_APP_NET_ID);
 
@@ -20,6 +24,9 @@ for (const d of AllChains) {
 }
 assert(chainCfg, 'chain config not found');
 
+export const currencyMap = CURRENCYS[cfgChainId]
+assert(currencyMap, 'currencys not configured')
+
 export const currentChainCfg = chainCfg;
 
 
@@ -57,6 +64,16 @@ export const genRefreshToken = async(refreshToken) => {
   }
   return res.data;
 }
+/**
+ * query token->usd price from coingecko
+ * @param {*} ids 
+ * @returns 
+ */
+export const queryTokenPriceCg = async(ids) => {
+  const idstr = ids.join(',');
+  const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&ids=${idstr}`
+  return fetch(url).then(res => res.json());
+}
 
 const utf8ToHex = (str) => {
   return '0x' + Buffer.from(str).toString('hex');
@@ -185,4 +202,34 @@ export const switchEthereumChain = async (provider, targetChainId) => {
     }
   }
   return deferred.promise
+}
+
+export const formatPrice = (data) => {
+  const marketplaceList = useMarketplaceStore()
+  const type = data.item_type
+  let address;
+  let icon, price, usd
+  const tokenAmount = priceCalculated(data.amount, 3)
+  const amount = parseFloat(ethers.utils.formatUnits(data.amount, 18))
+  if (type == 'NATIVE') {
+    address = 'NATIVE'
+  } else if (type == 'ERC20') {
+    address = data.contract_address
+    if (address) {
+      address = address.toLowerCase()
+    }
+  }
+  if (!address) {
+    return {icon, price}
+  }
+  if (address) {
+    const currencyData = currencyMap[address]
+    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}
 }

src/components/common/card.vue

@@ -13,7 +13,7 @@
           <span>
             {{ priceCalculated(nftData.event.data.buy[0].amount) }}
           </span>
-          <img src="@/assets/img/marketplace/ETHicon.png" alt="图片">
+          <img :src="icon" alt="图片">
         </div>
         <div class="card-address">{{ nftData.nft.owner_address.substr(0,4) }}...{{ nftData.nft.owner_address.substr(-4) }}</div>
       </div>
@@ -47,9 +47,11 @@ import {
 const localWalletStore = walletStore()
 const marketplaceList = useMarketplaceStore()
 import {createModal} from "@/utils/model.util";
+import {formatPrice} from "@/components/chain/utils"
 const emit = defineEmits(['renewNft'])
 import { useRouter } from "vue-router";
 const router = useRouter();
+const icon = ref('')
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   nftData: {
@@ -118,6 +120,10 @@ const addCart = async (val) => {
 
 onMounted(() => {
   // console.log(JSON.parse(JSON.stringify(props.nftData)), "-=-=-");
+  if (props.nftData?.event?.data?.buy && props.nftData?.event?.data?.buy.length > 0) {
+    const data = formatPrice(props.nftData?.event?.data?.buy[0])
+    icon.value = data.icon
+  }
 });
 </script>
 

src/configs/configchain.js

@@ -20,6 +20,70 @@ export const ALL_PROVIDERS = [
   },
 ];
 
+export const icon_imx = 'data:image/png;base64,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'
+export const icon_usdc = 'data:image/png;base64,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'
+export const icon_eth = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAEgUlEQVR42u2ZfUwbdRjHCwWCYS8QI8bMqEujzqh/GGdifMMgZaMTROacYmH0rtC70UDQUQizQSgLcC302kLGNpIFgyQKc3At2ZzGxEST+cfiFg0xMZmJb1HmMmemGy/j8Xu12m5d6VhIe5f0ST5p0mvJ98NzT+9+v9OkKlWpStWq1F7H2IONzYc2qFrCN3xi7Tvd7x/lGwd7S8vt6aoVcQ0ETJ3C+Fyd1fsrY3E/o0oJp8+/EZxxCBNUW+8lhnMfBWtVJhHQQkIA5BDG/xO5wnCiSW3dKBC80iyIFJE5w/DiRrVIrBN8kiRLRIsEERjerVWDiBkCc8uIzOIUK1C0hODz6xD+a0CxREJILOdep8xOeP0ZEOkLCsQXmQNmpYoUIvjvcUXCfMPyok5REi6vfz1mY1oOvgIRYjmxj+U8WiUNOIfQ8ysVAefQlUKlSNwveP0z0RIhEefEciJAnGZ4MTepEsKAJA+4J5YEJAk3jcTyYkwRMA8ZLtnd0CPw+RtJdLmOUGv7u2Te7aGyV+y007iPdtW6YsnMYF4eSJZEHjge/u9L1OuRqBMzsWfvYbI0DARDGhmBtrzYQnpDM20rb6MdlQ6qNjtvICN6QEYyRKwQWPhXYCp4CjW1DlOd9dp5qAqL/E9JWStVvNYhS0Z+9jxmRZ/odcYmiHzb454ke9cYNTQfDJ5CJktYILZImK2lLVS+o53eqOnBd/vlWTqOv5OXEAmH80gWGGrrHCXrm0PBQUaIKIG4ImFw3EZl2+30enX3QjXrbEyIiM0+klvftH8EApejOhBHJB7F22x/lFbY2ytNvYmZlSrWmYPBrELQU+DqKojM6Q22j0Bxgb4pMyESgkfKcvkC+SMTJ9MQdAOEOvD68y2KLIGZYoONKyppXo9OZ6DT+WaLOz0BIlPyMtYI6p2DgbznC5sgJG4Gowh+aQUis+iAC686DQoC94A2lncXJfKnNx9M46r+KV5LfMMfZ2JIsxFkO4S+gMDiMiKXITAJnn2qwKqtrfetYXhxF753Gt8fhEh2om/bnxS80g/gT9xrHYTQwxoUY+nPh0AL+P46kavgK1BdtHVPjvWtA1oEfw6fmQLz4KTclWStQXiIXAEEzkLG5hoM3KFBIdgjCHbIyAgXcb34BQKd4O7QaaTDcTc4Bwj8hvf0ydz2yUH4EVkkxCK68zneqxCHjmXX1PVnVdb0vmB4qe0J3aadabjY5SLwbgSfAUuAwII8GyBdAbfx0mlAEVxCt0Zx7PFx/6k0zEEmgm5B6BNgHlAEkziWp5Q1ycsIfwHQNfj8P+3r+7AbnTiAwBcAXcd3LCc+pqDdk0AGOtCN8EvRK8SJpRgLq78YXjQpcT/rTnTgkxUsdYdAtlI3555G+B9vQuRLnFL3KX2nsTHOTiN+ckWDRumFWVmDxdZ7MUQWIdHO8J50tWxkPxTcOo0WCWDAb1fbo4VXwcUIkbMsL25W4xOrTNAXemL1N0RqNWot9/5jd3X0fPAZ1zBw2Mg6b9Ooud7uGnsUmxP3ph7UpypVqVqV+gfpQf8nbEeobAAAAABJRU5ErkJggg=='
+
+export const CURRENCYS = {
+  13473: {
+    'NATIVE': {
+      name: 'tIMX',
+      decimals: 18,
+      icon: icon_imx,
+      id_query: 'immutable-x'
+    },
+    "0xe9e96d1aad82562b7588f03f49ad34186f996478": {
+      name: 'ETH',
+      decimals: 18,
+      icon: icon_eth,
+      id_query: 'ethereum'
+    },
+    "0x3b2d8a1931736fc321c24864bceee981b11c3c57": {
+      name: 'USDC',
+      decimals: 18,
+      icon: icon_usdc,
+      id_query: 'usd-coin'
+    },
+    "0x1ccca691501174b4a623ceda58cc8f1a76dc3439": {
+      name: 'WIMX',
+      decimals: 18,
+      icon: icon_imx,
+      id_query: 'immutable-x'
+    },
+    "0xfd42bfb03212da7e1a4608a44d7658641d99cf34": {
+      name: 'cETH',
+      decimals: 18,
+      icon: icon_eth,
+      id_query: 'ethereum'
+    },
+  },
+  13471: {
+    'NATIVE': {
+      name: 'tIMX',
+      decimals: 18,
+      icon: icon_imx,
+      id_query: 'immutable-x'
+    },
+    "0x52a6c53869ce09a731cd772f245b97a4401d3348": {
+      name: 'ETH',
+      decimals: 18,
+      icon: icon_eth,
+      id_query: 'ethereum'
+    },
+    "0x6de8acc0d406837030ce4dd28e7c08c5a96a30d2": {
+      name: 'USDC',
+      decimals: 18,
+      icon: icon_usdc,
+      id_query: 'usd-coin'
+    },
+    "0x3a0c2ba54d6cbd3121f01b96dfd20e99d1696c9d": {
+      name: 'WIMX',
+      decimals: 18,
+      icon: icon_imx,
+      id_query: 'immutable-x'
+    },
+  }
+}
 
 export default {
   ALL_PROVIDERS,

src/configs/priceCalculate.js

@@ -2,8 +2,17 @@ import moment from "moment"
 import { ethers } from "ethers"
 
 // 计算价格精度
-export const priceCalculated = (price) => {
+export const priceCalculated = (price, n) => {
-  return ethers.utils.formatUnits(price, 18)
+  n = n || 3
+  console.log('priceCalculated')
+  let str = ethers.utils.formatUnits(price, 18)
+  if (str.indexOf('.') > -1) {
+    str = str.slice(0, str.indexOf('.') + n + 1)
+  }
+  if (str === '0.000') {
+    str = '<0.001'
+  }
+  return str
 }
 
 export const timeFormat = (value) => {

src/store/marketplace.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { ref, toRaw, computed } from 'vue';
 import { apiMarketplaceState, apiGetCartList, apiAddCartList, apiDelCartList } from "@/utils/marketplace"
 
 export const useMarketplaceStore = defineStore('marketplace', () => {
@@ -12,6 +12,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
   const gold = ref([])
   const status = ref([])
   const getCartList = ref([])
+  const currencyPrice = ref([])
   const updateOverviewStatus = (_connected) => {
     overview.value = _connected;
   }
@@ -37,6 +38,10 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
     status.value = _connected;
   }
 
+  const priceDatas = computed(() => {
+    return toRaw(currencyPrice.value)
+  })
+
   async function getMarketplaceState(_connected) {
     return await apiMarketplaceState(_connected)
   }
@@ -66,6 +71,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
     getCartList, getCartListState,
     addCartListState,
     delCartListState,
+    currencyPrice,priceDatas
   }
 },
 {

src/views/DetailView.vue

@@ -25,8 +25,8 @@
             <li>
               <div class="price">
                 <span class="bold">{{ priceCalculated(detailData.event.data.buy[0].amount) }}&nbsp;</span>
-                <img src="@/assets/img/marketplace/ETHicon.png" alt="ICON">
+                <img :src="icon" alt="ICON">
-                <!-- <span>( $ 37.64 )</span> -->
+                <span>( $ {{ usd }} )</span>
               </div>
             </li>
           </div>
@@ -149,6 +149,7 @@ import {priceCalculated} from "@/configs/priceCalculate.js"
 import { BlockChain } from "@/components/chain/BlockChain"
 import {walletStore} from "@/store/wallet";
 import LazyLoadImg from "@/components/lazyloadimg"
+import {formatPrice} from "@/components/chain/utils"
 const router = useRouter();
 const localWalletStore = walletStore()
 const props = defineProps({
@@ -159,6 +160,8 @@ import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 const detailData = ref(null)
 const myAddress = localWalletStore.address
 const nftAbilities = ref()
+const icon = ref('')
+const usd = ref('')
 
 // 购买
 const buyNow = async () => {
@@ -291,6 +294,11 @@ const getDetail = async () => {
   nftData.event = data.event
   nftAbilities.value = data.nft.detail
   detailData.value = data
+  if (data.event?.data?.buy && data.event?.data?.buy.length > 0) {
+    const _data = formatPrice(data.event?.data?.buy[0])
+    icon.value = _data.icon
+    usd.value = _data.usd
+  }
   console.log(data,'----')
 }