|
|
@@ -7,31 +7,24 @@ import getZksEra from '../utils/getZksEra.js'
|
|
|
import getZksLite from '../utils/getZksLite.js'
|
|
|
//@ts-ignore
|
|
|
import getZkSyncBridge from '../utils/getZkSyncBridge.js'
|
|
|
+//@ts-ignore
|
|
|
+import getLayerData from '../utils/getLayerData.js'
|
|
|
import * as echarts from 'echarts';
|
|
|
import {onMounted, ref} from 'vue';
|
|
|
-import balancerBg from '../project/balancer/balancerBg.png'
|
|
|
-import balancerAv from '../project/balancer/balancerAv.png'
|
|
|
-import argentBg from '../project/argent/argentBg.png'
|
|
|
-import argentAv from '../project/argent/argentAv.png'
|
|
|
-import ontoBg from '../project/onto/ontoBg.png'
|
|
|
-import ontoAv from '../project/onto/ontoAv.png'
|
|
|
-import zerionBg from '../project/zerion/zerionBg.png'
|
|
|
-import zerionAv from '../project/zerion/zerionAv.png'
|
|
|
-import zksEraBridgeAv from '../project/zksEraBridge/zksEraBridgeAv.png'
|
|
|
-import zksEraBridgeBg from '../project/zksEraBridge/zksEraBridgeBg.png'
|
|
|
-import zksLiteBridgeBg from '../project/zksLiteBridge/zksLiteBridgeBg.png'
|
|
|
-import zksLiteBridgeAv from '../project/zksLiteBridge/zksLiteBridgeAv.png'
|
|
|
-import orbiterAv from '../project/orbiter/orbiterAv.png'
|
|
|
-import orbiterBg from '../project/orbiter/orbiterBg.png'
|
|
|
-import muteAv from '../project/mute/muteAv.png'
|
|
|
-import muteBg from '../project/mute/muteBg.png'
|
|
|
-import syncswapBg from '../project/syncswap/syncswapBg.png'
|
|
|
-import syncswapAv from '../project/syncswap/syncswapAv.png'
|
|
|
-import getcoinBg from '../project/getcoin/getcoinBg.png'
|
|
|
-import getcoinAv from '../project/getcoin/getcoinAv.png'
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+import aptosAv from '../project/layer0/aptosAv.png'
|
|
|
+import aptosBg from '../project/layer0/aptosBg.png'
|
|
|
+import stargateAv from '../project/layer0/stargateAv.png'
|
|
|
+import stargateBg from '../project/layer0/stargateBg.png'
|
|
|
+import radiantAv from '../project/layer0/radiantAv.png'
|
|
|
+import radiantBg from '../project/layer0/radiantBg.png'
|
|
|
+import layerzeroAv from '../project/layer0/layerzeroAv.png'
|
|
|
+import layerzeroBg from '../project/layer0/layerzeroBg.png'
|
|
|
+import tapiocaAv from '../project/layer0/tapiocaAv.png'
|
|
|
+import tapiocaBg from '../project/layer0/tapiocaBg.png'
|
|
|
+import omniAv from '../project/layer0/omniAv.png'
|
|
|
+import omniBg from '../project/layer0/omniBg.png'
|
|
|
+import omniteAv from '../project/layer0/omniteAv.png'
|
|
|
+import omniteBg from '../project/layer0/omniteBg.png'
|
|
|
|
|
|
type EChartsOption = echarts.EChartsOption;
|
|
|
|
|
|
@@ -50,46 +43,53 @@ type dataArrType = {
|
|
|
}[]
|
|
|
let dataArr: dataArrType = [
|
|
|
{
|
|
|
- name: 'zks-era bridge',
|
|
|
- type: ['OFFICAL','BRIDGE'],
|
|
|
- BG: zksEraBridgeBg,
|
|
|
- avatar: zksEraBridgeAv,
|
|
|
- url:'https://bridge.zksync.io/'
|
|
|
+ name: 'Stargate',
|
|
|
+ type: ['Offical','Bridge'],
|
|
|
+ BG: stargateBg,
|
|
|
+ avatar: stargateAv,
|
|
|
+ url:'https://stargate.finance/'
|
|
|
},
|
|
|
{
|
|
|
- name: 'zks-lite bridge',
|
|
|
- type: ['OFFICAL','BRIDGE'],
|
|
|
- BG: zksLiteBridgeBg,
|
|
|
- avatar: zksLiteBridgeAv,
|
|
|
- url:'https://lite.zksync.io/transaction/deposit'
|
|
|
+ name: 'aptos',
|
|
|
+ type: ['Bridge'],
|
|
|
+ BG: aptosBg,
|
|
|
+ avatar: aptosAv,
|
|
|
+ url:'https://theaptosbridge.com/'
|
|
|
},
|
|
|
{
|
|
|
- name: 'Orbiter',
|
|
|
- type: ['ERA', 'SWAP'],
|
|
|
- BG: orbiterBg,
|
|
|
- avatar: orbiterAv,
|
|
|
- url:'https://www.orbiter.finance/'
|
|
|
+ name: 'Radiant Capital',
|
|
|
+ type: ['DeFi'],
|
|
|
+ BG: radiantBg,
|
|
|
+ avatar: radiantAv,
|
|
|
+ url:'https://radiant.capital/'
|
|
|
},
|
|
|
{
|
|
|
- name: 'Mute',
|
|
|
- type: ['ERA', 'DEFI', 'SWAP'],
|
|
|
- BG: muteBg,
|
|
|
- avatar: muteAv,
|
|
|
- url:'https://app.mute.io/swap'
|
|
|
+ name: 'LayerZero Name Service',
|
|
|
+ type: ['Digitalid ID'],
|
|
|
+ BG: layerzeroBg,
|
|
|
+ avatar: layerzeroAv,
|
|
|
+ url:'https://www.lz.domains/'
|
|
|
},
|
|
|
{
|
|
|
- name: 'Syncswap',
|
|
|
- type: ['ERA', 'SWAP'],
|
|
|
- BG: syncswapBg,
|
|
|
- avatar: syncswapAv,
|
|
|
- url:'https://syncswap.xyz/'
|
|
|
+ name: 'TapiocaDAO',
|
|
|
+ type: ['DeFi'],
|
|
|
+ BG: tapiocaBg,
|
|
|
+ avatar: tapiocaAv,
|
|
|
+ url:'https://www.tapioca.xyz/'
|
|
|
},
|
|
|
{
|
|
|
- name: 'Gitcoin',
|
|
|
- type: ['DEFI', 'SWAP'],
|
|
|
- BG: getcoinBg,
|
|
|
- avatar: getcoinAv,
|
|
|
- url:'https://bounties.gitcoin.co/'
|
|
|
+ name: 'Omni X',
|
|
|
+ type: ['NFT', 'Bridge'],
|
|
|
+ BG: omniBg,
|
|
|
+ avatar: omniAv,
|
|
|
+ url:'https://omni-x.io/'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Omnite',
|
|
|
+ type: ['NFT'],
|
|
|
+ BG: omniteBg,
|
|
|
+ avatar: omniteAv,
|
|
|
+ url:'https://omnite.io/'
|
|
|
},
|
|
|
]
|
|
|
|
|
|
@@ -114,11 +114,12 @@ const listeningDisconnect = () => {
|
|
|
const checkWalletAddress = async () => {
|
|
|
let accounts: string[] = await MM.value.request({method: 'eth_accounts'});//不弹窗
|
|
|
address.value = accounts[0]
|
|
|
- getMainTx()
|
|
|
- getLiteTx()
|
|
|
- getMoreInfo()
|
|
|
- await addChain()
|
|
|
- await switchEthereumChain()
|
|
|
+ // getMainTx()
|
|
|
+ // getLiteTx()
|
|
|
+ // getMoreInfo()
|
|
|
+ getLayerInfo()
|
|
|
+ // await addChain()
|
|
|
+ // await switchEthereumChain()
|
|
|
}
|
|
|
//添加链
|
|
|
const addChain = () => {
|
|
|
@@ -152,11 +153,12 @@ const switchEthereumChain = () => {
|
|
|
const connectWallet = async () => {
|
|
|
let accounts: string[] = await MM.value.request({method: 'eth_requestAccounts'});
|
|
|
address.value = accounts[0]
|
|
|
- getMainTx()
|
|
|
- getLiteTx()
|
|
|
- getMoreInfo()
|
|
|
- await addChain()
|
|
|
- await switchEthereumChain()
|
|
|
+ // getMainTx()
|
|
|
+ // getLiteTx()
|
|
|
+ // getMoreInfo()
|
|
|
+ getLayerInfo()
|
|
|
+ // await addChain()
|
|
|
+ // await switchEthereumChain()
|
|
|
}
|
|
|
//获取主网交易次数
|
|
|
let mainTx = ref(0)
|
|
|
@@ -201,6 +203,26 @@ const getMoreInfo = () => {
|
|
|
processTime()
|
|
|
})
|
|
|
}
|
|
|
+//获得layer信息
|
|
|
+let apiKey = null
|
|
|
+let layerInfo = ref({})
|
|
|
+const getLayerInfo = () => {
|
|
|
+ getLayerData('0x7E43BD38A0D67807887e459f0316395650cBb4C3',apiKey).then(({arb, avax, bsc, eth, ftm, matic, metis, op, total, arr}) => {
|
|
|
+ layerInfo.value = {
|
|
|
+ arb: arb,
|
|
|
+ avax: avax,
|
|
|
+ bsc: bsc,
|
|
|
+ eth: eth,
|
|
|
+ ftm: ftm,
|
|
|
+ matic: matic,
|
|
|
+ metis: metis,
|
|
|
+ op: op,
|
|
|
+ total: total,
|
|
|
+ arr:arr
|
|
|
+ }
|
|
|
+ processTime()
|
|
|
+ })
|
|
|
+}
|
|
|
//处理时间数据
|
|
|
const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
|
let showMonthNumberArr = ref([0,0,0,0,0,0,0,0,0,0,0,0])
|
|
|
@@ -223,15 +245,26 @@ const processTime = () => {
|
|
|
forLoop()
|
|
|
}
|
|
|
}
|
|
|
- if (tradingTimeArr.value){
|
|
|
- tradingTimeArr.value.forEach((item:any) => {
|
|
|
- if(item.balanceChanges[0].from && item.balanceChanges[0].from.toLowerCase() === address.value.toLowerCase()){
|
|
|
- let receivedAt = new Date(Date.parse(item.receivedAt)).toString();
|
|
|
- let strArr = receivedAt.split(' ')
|
|
|
- let month = strArr[1]
|
|
|
- let index = showMonthArr.value.indexOf(month)
|
|
|
- showMonthNumberArr.value[index]++
|
|
|
- }
|
|
|
+ // if (tradingTimeArr.value){
|
|
|
+ // tradingTimeArr.value.forEach((item:any) => {
|
|
|
+ // if(item.balanceChanges[0].from && item.balanceChanges[0].from.toLowerCase() === address.value.toLowerCase()){
|
|
|
+ // let receivedAt = new Date(Date.parse(item.receivedAt)).toString();
|
|
|
+ // let strArr = receivedAt.split(' ')
|
|
|
+ // let month = strArr[1]
|
|
|
+ // let index = showMonthArr.value.indexOf(month)
|
|
|
+ // showMonthNumberArr.value[index]++
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ if(layerInfo.value.arr){
|
|
|
+ layerInfo.value.arr.forEach((item:any) => {
|
|
|
+ let timestamp = parseFloat(item.timeStamp) * 1000; // 时间戳（以毫秒为单位）
|
|
|
+ let date = new Date(timestamp);
|
|
|
+ let dateString = date.toDateString();
|
|
|
+ let strArr = dateString.split(' ')
|
|
|
+ let month = strArr[1]
|
|
|
+ let index = showMonthArr.value.indexOf(month)
|
|
|
+ showMonthNumberArr.value[index]++
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -299,8 +332,8 @@ const sunAndMoon = () => {
|
|
|
document.documentElement.style.setProperty('--color-text','#181818')
|
|
|
}
|
|
|
sun.value = !sun.value
|
|
|
-
|
|
|
}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -333,11 +366,11 @@ const sunAndMoon = () => {
|
|
|
<div class="item">
|
|
|
<div class="top">
|
|
|
<div class="img">
|
|
|
- <img v-show="!sun" src="../assets/group1-white.svg" alt="group1">
|
|
|
- <img v-show="sun" src="../assets/group1.svg" alt="group1">
|
|
|
+ <img v-show="!sun" src="../assets/layerZero/layerZero-white.svg" alt="group1">
|
|
|
+ <img v-show="sun" src="../assets/layerZero/layerZero.svg" alt="group1">
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
- Protocols lnteraction
|
|
|
+ Total Transactions
|
|
|
<el-popover
|
|
|
placement="bottom"
|
|
|
:width="230"
|
|
|
@@ -357,107 +390,89 @@ const sunAndMoon = () => {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="number">
|
|
|
- {{ contract }}
|
|
|
+ {{ layerInfo.total || 0 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="item">
|
|
|
+ <div class="item" style="gap:6px;">
|
|
|
<div class="top">
|
|
|
<div class="img">
|
|
|
- <img v-show="!sun" class="img" src="../assets/group3-white.svg" alt="group2">
|
|
|
- <img v-show="sun" class="img" src="../assets/group3.svg" alt="group2">
|
|
|
- </div>
|
|
|
- <div class="title">
|
|
|
- Total Transactions
|
|
|
- <el-popover
|
|
|
- placement="bottom"
|
|
|
- :width="250"
|
|
|
- trigger="hover"
|
|
|
- effect="dark"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <img src="../assets/info.svg" alt="info">
|
|
|
- </template>
|
|
|
- <div class="popoverText">
|
|
|
- Total zkSync lite
|
|
|
- </div>
|
|
|
- <div class="popoverText">
|
|
|
- transactions issuedfrom the account
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
+ <img v-show="!sun" src="../assets/layerZero/publicChain-white.svg" alt="group1">
|
|
|
+ <img v-show="sun" src="../assets/layerZero/publicChain.svg" alt="group1">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="number">
|
|
|
- {{ liteTx }}
|
|
|
- <img @click="toLink('https://zkscan.io/')" style="cursor: pointer" src="../assets/arrow-right-up-line.svg" alt="arrow">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="top">
|
|
|
- <div class="img">
|
|
|
- <img v-show="!sun" class="img" src="../assets/group2-white.svg" alt="group2">
|
|
|
- <img v-show="sun" class="img" src="../assets/group2.svg" alt="group2">
|
|
|
+ <div class="publicChainBox">
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/ETH.svg" alt="ETH">
|
|
|
+ ETH
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.eth || 0 }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="title">
|
|
|
- Total Transactions
|
|
|
- <el-popover
|
|
|
- placement="bottom"
|
|
|
- :width="250"
|
|
|
- trigger="hover"
|
|
|
- effect="dark"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <img src="../assets/info.svg" alt="info">
|
|
|
- </template>
|
|
|
- <div class="popoverText">
|
|
|
- Total zkSync era
|
|
|
- </div>
|
|
|
- <div class="popoverText">
|
|
|
- transactions issuedfrom the account
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/MATIC.svg" alt="ETH">
|
|
|
+ MATIC
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.matic || 0 }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="number">
|
|
|
- {{ mainTx }}
|
|
|
- <img @click="toLink('https://explorer.zksync.io/')" style="cursor: pointer" src="../assets/arrow-right-up-line.svg" alt="arrow">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item" style="height: 94px">
|
|
|
- <div class="top">
|
|
|
- <div class="img">
|
|
|
- <img v-show="!sun" class="img" src="../assets/official-bridge-white.svg" alt="group2">
|
|
|
- <img v-show="sun" class="img" src="../assets/official-bridge-black.svg" alt="group2">
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/BSC.svg" alt="ETH">
|
|
|
+ BSC
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.bsc || 0 }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="display: flex;gap:40px">
|
|
|
- <div style="display: flex;flex-direction: column;gap:20px">
|
|
|
- <img v-show="!sun" src="../assets/L1-To-L2-white.svg" alt="To">
|
|
|
- <img v-show="sun" src="../assets/L1-To-L2.svg" alt="To">
|
|
|
- <div class="number">
|
|
|
- {{ l1Tol2Tx }}
|
|
|
- </div>
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/ARB.svg" alt="ETH">
|
|
|
+ ARB
|
|
|
</div>
|
|
|
- <div style="display: flex;flex-direction: column;gap:20px">
|
|
|
- <img v-show="!sun" src="../assets/L2-To-L1-white.svg" alt="To">
|
|
|
- <img v-show="sun" src="../assets/L2-To-L1.svg" alt="To">
|
|
|
- <div class="number">
|
|
|
- {{ l2Tol1Tx }}
|
|
|
- </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.arb || 0 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="top">
|
|
|
- <div class="img">
|
|
|
- <img class="img" src="../assets/group4.svg" alt="group2">
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/OP.svg" alt="ETH">
|
|
|
+ OP
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.op || 0 }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="title">
|
|
|
- Total amount spent
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/AVAX.svg" alt="ETH">
|
|
|
+ AVAX
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.avax || 0 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/FTM.svg" alt="ETH">
|
|
|
+ FTM
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.ftm || 0 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="publicChainItem">
|
|
|
+ <div class="title">
|
|
|
+ <img src="../assets/layerZero/METIS.svg" alt="ETH">
|
|
|
+ METIS
|
|
|
+ </div>
|
|
|
+ <div class="number">
|
|
|
+ {{ layerInfo.metis || 0 }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="number">
|
|
|
- {{ amount }} USDT
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -599,13 +614,13 @@ const sunAndMoon = () => {
|
|
|
.dataColumn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+ //justify-content: space-between;
|
|
|
padding: 75px 60px 60px 60px;
|
|
|
border-bottom: 1px solid #f7f7f7;
|
|
|
margin: 0 -60px;
|
|
|
|
|
|
.item {
|
|
|
- width: 330px;
|
|
|
+ width: 260px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20px;
|
|
|
@@ -618,21 +633,30 @@ const sunAndMoon = () => {
|
|
|
.img {
|
|
|
height: 16px;
|
|
|
}
|
|
|
-
|
|
|
- .title {
|
|
|
+ }
|
|
|
+ .publicChainBox{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:88px;
|
|
|
+ .publicChainItem{
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ //color: #010101;
|
|
|
+ font-family: 'HONOR Sans CN';
|
|
|
+ .popoverText{
|
|
|
font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 18px;
|
|
|
- //color: #010101;
|
|
|
- font-family: 'HONOR Sans CN';
|
|
|
- .popoverText{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
}
|
|
|
|
million
