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'
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 dmailAv from '../project/dmail/dmailAv.png'
import dmailBg from '../project/dmail/dmailBg.png'
import tiktokFiAv from '../project/tiktokFi/tiktokFiAv.png'
import tiktokFiBg from '../project/tiktokFi/tiktokFiBg.png'
import karatDAOAv from '../project/karatDAO/karatDAOAv.png'
import karatDAOBg from '../project/karatDAO/karatDAOBg.png'

//@ts-ignore
import {getAllZksSyncData} from "@/utils/getZksyncData/index.js";

type EChartsOption = echarts.EChartsOption;

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


type dataArrType = {
  name: string,
  type: string[],
  BG: string,
  avatar: string,
  url:string
}[]
let dataArr: dataArrType = [
  {
    name: 'zks-era bridge',
    type: ['OFFICAL','BRIDGE'],
    BG: zksEraBridgeBg,
    avatar: zksEraBridgeAv,
    url:'https://bridge.zksync.io/'
  },
  {
    name:'TiktokFi',
    type: ['NFT'],
    BG:tiktokFiBg,
    avatar:tiktokFiAv,
    url:'https://zksync.tiktokfi.xyz/'
  },
  {
    name: 'zks-lite bridge',
    type: ['OFFICAL','BRIDGE'],
    BG: zksLiteBridgeBg,
    avatar: zksLiteBridgeAv,
    url:'https://lite.zksync.io/transaction/deposit'
  },
  {
    name: 'Orbiter',
    type: ['ERA', 'SWAP'],
    BG: orbiterBg,
    avatar: orbiterAv,
    url:'https://www.orbiter.finance/'
  },
  {
    name: 'Mute',
    type: ['ERA', 'DEFI', 'SWAP'],
    BG: muteBg,
    avatar: muteAv,
    url:'https://app.mute.io/swap'
  },
  {
    name: 'Syncswap',
    type: ['ERA', 'SWAP'],
    BG: syncswapBg,
    avatar: syncswapAv,
    url:'https://syncswap.xyz/'
  },
  {
    name:'Dmail',
    type: ['Dapp'],
    BG:dmailBg,
    avatar:dmailAv,
    url:'https://mail.dmail.ai/login?icode=393233'
  },
  {
    name: 'Gitcoin',
    type: ['DEFI', 'SWAP'],
    BG: getcoinBg,
    avatar: getcoinAv,
    url:'https://bounties.gitcoin.co/'
  },
  {
    name: 'KaratDAO',
    type: ['DAO', 'NFT'],
    BG: karatDAOBg,
    avatar: karatDAOAv,
    url:'https://karatdao.com/mint/claimer?lieutenantAddress=0x0870682e56A9069E7655afD728D91f3653Bff0bE&validatorId=117'
  },
]

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()
  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()
  await addChain()
  await switchEthereumChain()
}
//获取主网交易次数
let mainTx = ref('-')
const getMainTx = () => {
  getZksEra(address.value).then(({tx2}:{tx2:number}) => {
    mainTx.value = tx2.toString()
  })
}
//获取lite网交易次数
let liteTx = ref('-')
const getLiteTx = () => {
  getZksLite(address.value).then(({tx1}:{tx1:number}) => {
    liteTx.value = tx1.toString()
  })
}
//获取更多信息
let amount = ref('-')
let fee = ref('-')
let contract = ref('-')
let tradingTimeArr = ref()
let l1Tol2Tx = ref('-')
let l2Tol1Tx = ref('-')
const getMoreInfo = () => {
  // getZkSyncBridge('0x555b07470647Cd159FF6595771054Aee7343e853').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()
  // })
  getAllZksSyncData(address.value).then((res:any)=>{
      amount.value = res.totalExchangeAmount
      fee.value = res.totalFee
      contract.value = res.contractActivity
      tradingTimeArr.value = res.overTimeArr
      l1Tol2Tx.value = res.l1Tol2Times
      l2Tol1Tx.value = res.l2Tol1Times
      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]++
      // }
    })
  }

  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/group1-white.svg" alt="group1">
            <img v-show="sun" src="../assets/group1.svg" alt="group1">
          </div>
          <div class="title">
            Protocols lnteraction
            <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">
          {{ contract }}
        </div>
      </div>
      <div class="item">
        <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>
          </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>
          <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>
        </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>
          <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>
            <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>
          </div>
        </div>

      </div>
      <div class="item">
        <div class="top">
          <div class="img">
            <img class="img" src="../assets/group4.svg" alt="group2">USDT
          </div>
          <div class="title">
            <span style="width: 150px">Amount</span>
            <span>Fee</span>
          </div>
        </div>
        <div class="number">
          <span class="number" style="width: 150px">
                {{ amount }}
          </span>
          <span class="number">
                {{fee}}
          </span>
        </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: 330px;
      display: flex;
      flex-direction: column;
      gap: 20px;

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

        .img {
          height: 16px;
          display: flex;
          align-items: center;
          font-weight: 700;
          gap:4px
        }

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