Bitflower/src/views/HomeView.vue

<script setup lang="ts">
//@ts-ignore
import MetaMaskSDK from '../utils/metamask-sdk.js'
//@ts-ignore
import getZksEra from '../utils/getZksEra.js'
//@ts-ignore
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 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;

onMounted(() => {
  checkWalletAddress()
  listeningDisconnect()
})


type dataArrType = {
  name: string,
  type: string[],
  BG: string,
  avatar: string,
  url:string
}[]
let dataArr: dataArrType = [
  {
    name: 'Stargate',
    type: ['Offical','Bridge'],
    BG: stargateBg,
    avatar: stargateAv,
    url:'https://stargate.finance/'
  },
  {
    name: 'aptos',
    type: ['Bridge'],
    BG: aptosBg,
    avatar: aptosAv,
    url:'https://theaptosbridge.com/'
  },
  {
    name: 'Radiant Capital',
    type: ['DeFi'],
    BG: radiantBg,
    avatar: radiantAv,
    url:'https://radiant.capital/'
  },
  {
    name: 'LayerZero Name Service',
    type: ['Digitalid ID'],
    BG: layerzeroBg,
    avatar: layerzeroAv,
    url:'https://www.lz.domains/'
  },
  {
    name: 'TapiocaDAO',
    type: ['DeFi'],
    BG: tapiocaBg,
    avatar: tapiocaAv,
    url:'https://www.tapioca.xyz/'
  },
  {
    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/'
  },
]

let MM = ref()//MetaMaskSDK
let address = ref('')//钱包地址
let chainId = '0x144'
const MMSDK = new MetaMaskSDK()
MM.value = MMSDK.getProvider()

//监听连接断开(通过监听账号的变化判断是否断开连接)
const listeningDisconnect = () => {
  MM.value.on('accountsChanged', (accounts: string[]) => {
    if (accounts.length >= 1) {
      address.value = accounts[0]
      connectWallet()
    } else {
      address.value = ''
    }
  })
}
//查询钱包地址
const checkWalletAddress = async () => {
  let accounts: string[] = await MM.value.request({method: 'eth_accounts'});//不弹窗
  address.value = accounts[0]
  // getMainTx()
  // getLiteTx()
  // getMoreInfo()
  getLayerInfo()
  // await addChain()
  // await switchEthereumChain()
}
//添加链
const addChain = () => {
  MM.value.request({
    method: 'wallet_addEthereumChain',
    params: [{
      chainId: chainId,
      chainName: 'zkSync Era Mainnet',
      rpcUrls: ['https://mainnet.era.zksync.io'],
      blockExplorerUrls: ['https://explorer.zksync.io'],
      nativeCurrency: {
        name: 'ETH',
        symbol: 'ETH',
        decimals: 18,
      },
    }]
  })
}
//切换链
const switchEthereumChain = () => {
  MM.value.request({
    method: 'wallet_switchEthereumChain',
    params: [{chainId: chainId}],
  }).then(() => {

  }).catch(() => {

  });
}
//连接钱包按钮
const connectWallet = async () => {
  let accounts: string[] = await MM.value.request({method: 'eth_requestAccounts'});
  address.value = accounts[0]
  // getMainTx()
  // getLiteTx()
  // getMoreInfo()
  getLayerInfo()
  // await addChain()
  // await switchEthereumChain()
}
//获取主网交易次数
let mainTx = ref(0)
const getMainTx = () => {
  getZksEra(address.value).then(({tx2}:{tx2:number}) => {
    mainTx.value = tx2
  })
}
//获取lite网交易次数
let liteTx = ref(0)
const getLiteTx = () => {
  getZksLite(address.value).then(({tx1}:{tx1:number}) => {
    liteTx.value = tx1
  })
}
//获取更多信息
let amount = ref(0)
let contract = ref(0)
let tradingTimeArr = ref()
let l1Tol2Tx = ref(0)
let l2Tol1Tx = ref(0)
const getMoreInfo = () => {
  getZkSyncBridge(address.value).then((
      {
          totalExchangeAmount,
          contractActivity,
          overTimeArr,
          l1Tol2Times,
          l2Tol1Times
      }:{
        totalExchangeAmount:number
        contractActivity:number
        overTimeArr:any
        l1Tol2Times:number
        l2Tol1Times:number
      }) => {
    amount.value = totalExchangeAmount
    contract.value = contractActivity
    tradingTimeArr.value = overTimeArr
    l1Tol2Tx.value = l1Tol2Times
    l2Tol1Tx.value = l2Tol1Times
    processTime()
  })
}
//获得layer信息
let apiKey:any
let layerInfo = ref<any>({})
const getLayerInfo = () => {
  getLayerData('0x7E43BD38A0D67807887e459f0316395650cBb4C3',apiKey).then((
      {arb, avax, bsc, eth, ftm, matic, metis, op, total, arr}:{arb:string, avax:string, bsc:string, eth:string, ftm:string, matic:string, metis:string, op:string, total:string, arr:any[]}
  ) => {
    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])
let showMonthArr = ref()
const processTime = () => {
  let nowDate = new Date().toString()
  let nowDateArr = nowDate.split(' ')
  let nowMonth = nowDateArr[1]
  showMonthArr.value = []
  showMonthArr.value.push(nowMonth)
  let nowMonthIndex = monthArr.indexOf(nowMonth)
  const forLoop = () => {
    for (let i = 11; i !== nowMonthIndex ; i--) {
      showMonthArr.value.unshift(monthArr[i])
    }
  }
  for (let i = nowMonthIndex; i !== 0 ; i--) {
    showMonthArr.value.unshift(monthArr[i-1])
    if (i === 1) {
      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(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]++
    })
  }

  initEcharts()

}

//初始化echarts
const initEcharts = () => {
  let chartDom = document.getElementById('echartsBox')!
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: showMonthArr.value
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        color: '#000000',
        data: showMonthNumberArr.value,
        type: 'bar'
      }
    ]
  };

  option && myChart.setOption(option);
}

//跳转网页
const toLink = (url:string) => {
  window.open(url)
}

const toEmail = (email:string) => {
  const emailAddress = email; // 替换为你想发送邮件的收件人地址
  const subject = 'Hello'; // 替换为你想在邮件中设置的主题
  const body = 'This is the email body.'; // 替换为你想在邮件中设置的内容

  const mailtoUrl = `mailto:${emailAddress}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

  window.open(mailtoUrl);
}

let sun = ref(true)
const sunAndMoon = () => {
  if (sun.value){
    document.documentElement.style.setProperty('--color-background','#181818')
    document.documentElement.style.setProperty('--color-text','#f2f2f2')
  }else {
    document.documentElement.style.setProperty('--color-background','#f2f2f2')
    document.documentElement.style.setProperty('--color-text','#181818')
  }
  sun.value = !sun.value
}

</script>

<template>
  <main class="main">
    <div class="mainBG">
      <img src="../assets/BG.png" alt="BG">
    </div>
    <div class="topBar">
      <div class="left">
        <img v-show="!sun" src="../assets/bitflower-white.svg" alt="bitflower">
        <img v-show="sun" src="../assets/bitflower.svg" alt="logo">
      </div>
      <div class="mid">
        Blossom your Web3 Trip ✈
      </div>
      <div class="right">
        <img v-show="!sun" @click="sunAndMoon" src="../assets/sun-fill.svg" alt="sun-fill">
        <img v-show="sun" @click="sunAndMoon" src="../assets/moon-clear-fill.svg" alt="moon-clear-fill">
        <div class="button" v-show="!address" @click="connectWallet">
          <img src="../assets/git-commit-line.svg" alt="commit">
          Connect Wallet
        </div>
        <div class="connect" v-if="address">
          <img src="../assets/git-commit-line-black.svg" alt="commit">
          {{ address.slice(0, 8) }}...{{ address.slice(-4) }}
        </div>
      </div>
    </div>
    <div class="dataColumn">
      <div class="item">
        <div class="top">
          <div class="img">
            <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">
            Total Transactions
            <el-popover
                placement="bottom"
                :width="230"
                trigger="hover"
                effect="dark"
            >
              <template #reference>
                <img src="../assets/info.svg" alt="info">
              </template>
              <div class="popoverText">
                Number of protocolsinteracted
              </div>
              <div class="popoverText">
                with out of allavailable protocols
              </div>
            </el-popover>
          </div>
        </div>
        <div class="number">
          {{ layerInfo.total || 0 }}
        </div>
      </div>
      <div class="item" style="gap:6px;">
        <div class="top">
          <div class="img">
            <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="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="publicChainItem">
            <div class="title">
              <img src="../assets/layerZero/MATIC.svg" alt="ETH">
              MATIC
            </div>
            <div class="number">
              {{ layerInfo.matic || 0 }}
            </div>
          </div>
          <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 class="publicChainItem">
            <div class="title">
              <img src="../assets/layerZero/ARB.svg" alt="ETH">
              ARB
            </div>
            <div class="number">
              {{ layerInfo.arb || 0 }}
            </div>
          </div>
          <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="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>
    </div>
    <div class="primary">
      <div class="left">
        <div class="echarts">
          <div class="title">
            Transactions Over Time
            <el-popover
                placement="right"
                :width="240"
                trigger="hover"
                effect="dark"
            >
              <template #reference>
                <img src="../assets/info.svg" alt="info">
              </template>
              <div class="popoverText">
                Number of transactions permonth
              </div>
            </el-popover>
          </div>
          <div class="echartsBox" id="echartsBox">

          </div>
        </div>
        <div class="disclaimer">
          <img v-show="!sun" src="../assets/disclaimer-white.svg" alt="disclaimer">
          <img v-show="sun" src="../assets/disclaimer.svg" alt="disclaimer">
          <div class="description">
            The list of dApps is for informational purposes only. It is not a testimony of the security or reliability
            of any dApp. Furthermore, most dApps are currently in alpha stage and their code is not audited. You are
            encouraged to do your own research (DYOR) before interacting with, or investing in any dApps. This should
            not be considered financial or investment advice.
          </div>
          <div class="contact">
            <div class="item" @click="toEmail('bitflower.web3@gmail.com')">
              <img src="../assets/mail-open-line.svg" alt="mail">
              E-mail
            </div>
            <div class="line"/>
            <div class="item" @click="toLink('https://t.me/bitflowersupport')">
              <img src="../assets/telegram-line.svg" alt="telegram">
              Telegram
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="item" @click="toLink(item.url)" v-for="item in dataArr">
          <div class="BG">
            <img class="BG" :src="item.BG" alt="BG">
          </div>
          <div class="infoBox">
            <div class="avatar">
              <img class="avatar" :src="item.avatar" alt="avatar">
            </div>
            <div class="nameAndType">
              <div class="name">
                {{ item.name }}
              </div>
              <div class="typeBox">
                <div class="type" v-for="item1 in item.type">
                  {{ item1 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss">
.main {
  width: 1440px;
  height: 100vh;
  margin: auto;
  border: 1px solid #f7f7f7;
  border-top: none;
  border-bottom: none;
  padding: 30px 60px;
  .mainBG{
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .topBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .mid{
      font-weight: 400;
      font-size: 15px;
      line-height: 21px;
      font-family: 'Chillax';
      text-transform: uppercase;
    }
    .right {
      display: flex;
      align-items: center;
      gap:40px;
      cursor: pointer;

      .button {
        width: fit-content;
        height: 44px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #010101;
        padding: 0 24px;
        font-weight: 500;
        font-size: 15px;
        line-height: 20px;
        color: #FFFFFF;
        cursor: pointer;
      }

      .connect {
        width: fit-content;
        height: 44px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #FFFFFF;
        border: 1px solid #010101;
        border-radius: 30px;
        padding: 0 24px;
        font-weight: 500;
        font-size: 15px;
        line-height: 20px;
        color: #010101;
      }
    }
  }

  .dataColumn {
    display: flex;
    align-items: center;
    //justify-content: space-between;
    padding: 75px 60px 60px 60px;
    border-bottom: 1px solid #f7f7f7;
    margin: 0 -60px;

    .item {
      width: 260px;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .top {
        display: flex;
        flex-direction: column;
        gap: 6px;

        .img {
          height: 16px;
        }
      }
      .publicChainBox{
        display: flex;
        align-items: center;
        gap:88px;
        .publicChainItem{
          display: flex;
          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: 12px;
          line-height: 24px;
        }
      }

      .number {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 26px;
        line-height: 34px;
        //color: #010101;
      }
    }
  }

  .primary {
    display: flex;
    gap: 60px;
    margin-top: 60px;

    .left {
      display: flex;
      flex-direction: column;

      .echarts {
        .title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 700;
          font-size: 14px;
          line-height: 18px;
          //color: #010101;
        }

        .echartsBox {
          height: 360px;
          width: 560px;
        }
      }

      .disclaimer {
        width: 558px;
        height: 246px;
        border: 1px solid #010101;
        padding: 24px;

        .description {
          margin-top: 8px;
          margin-bottom: 28px;
          font-weight: 400;
          font-size: 12px;
          line-height: 24px;
          color: #808080;
        }

        .contact {
          width: fit-content;
          height: 44px;
          display: flex;
          align-items: center;
          gap: 24px;
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          color: #FFFFFF;
          background: #010101;
          padding: 0 24px;
          .item{
            display: flex;
            align-items: center;
            gap:6px;
            cursor: pointer;
          }
          .line{
            width: 1px;
            height: 16px;
            border-right: 1px solid #4C4C4C;
          }
        }
      }
    }

    .right {
      display: flex;
      flex-wrap: wrap;
      overflow: auto;
      gap: 26px;
      width: 100%;
      height: 62vh;
      margin-right: -60px;

      .item {
        height: 256px;
        width: 336px;
        cursor: pointer;
        .BG {
          width: 100%;
          height: 175px;
        }

        .infoBox {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 0 24px;
          height: 80px;
          border: 1px solid #010101;
          border-top: none;
          background: #FFFFFF;

          .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }

          .nameAndType {
            display: flex;
            flex-direction: column;
            gap: 2px;

            .name {
              font-weight: 700;
              font-size: 17px;
              line-height: 22px;
              color: #010101;
            }

            .typeBox {
              display: flex;
              align-items: center;
              gap: 10px;

              .type {
                width: fit-content;
                border: 1px solid #b3b3b3;
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
                color: #b3b3b3;
                padding: 0 4px;
              }
            }

          }
        }
      }
    }
  }
}

::-webkit-scrollbar {
  width: 4px; /* 滚动条宽度 */
}

// /* 滚动条轨道 */
// ::-webkit-scrollbar-track {
//   background: #f1f1f1; /* 轨道背景色 */
// }

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块背景色 */
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬停状态下滑块背景色 */
}
</style>