gpalweb/src/components/ChainModel.vue

<template>
  <div class="chain-modal" v-if="modalShow" :class="{'mobile': mobile}">
    <div class="modal-bg" @click="cancelSelect"></div>
    <div class="modal-content" :class="{'mobile': mobile}">
      <div class="modal-title">
        You need to connect to supported network
      </div>
      <div class="chain-modal-card"
            v-for="data in currentDatas"
            :key="data.name"
            @click="cardClicked(data.id)"
      >
          <div class="icon">
            <img :src="data.logo" :alt="data.name">
          </div>
          <div class="name">{{data.name}}</div>
          <div class="desc">{{data.desc}}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { ALL_PROVIDERS } from '@/configs/configchain';
import { useChainStore } from '@/store/chain';
import { useEventBus } from '@vueuse/core';
import * as bus_event from '@/bus/event';

const busShowChainModal = useEventBus(bus_event.SHOW_CHAIN_MODAL);
const busNeedChangeChain = useEventBus(bus_event.NEED_CHANGE_CHAIN);

const chain = useChainStore();
const modalShow = ref(false);
const dataType = ref(1);
const chainDatas = computed(()=> {
  console.log([...chain.chainManager.availableChains.values()]);
  return [...chain.chainManager.availableChains.values()];
});
const currentDatas = computed(()=> {
  if (dataType.value===0) {
    console.log({ALL_PROVIDERS});
    return ALL_PROVIDERS;
  } else if (dataType.value===1) {
    console.log({chainDatas});
    return chainDatas.value;
  } else {
    console.log("error=====");
    return [];
  }
});

let confirmFun = (id)=>{};
let cancelFun = (reason)=>{};

onMounted(()=> {
  busShowChainModal.on(showSelectWallet);
  busNeedChangeChain.on(showChangeChain);
});
onUnmounted(()=> {
  busShowChainModal.off(showSelectWallet);
  busNeedChangeChain.off(showChangeChain);
});

function showSelectWallet({confirm, cancel}) {
  confirmFun = confirm;
  cancelFun = cancel;
  showModal(0);
}

function showChangeChain({confirm, cancel}) {
  confirmFun = confirm;
  cancelFun = cancel;
  showModal(1);
}

function cardClicked(id) {
  console.log("card clicked:", id);
  confirmFun && confirmFun(id);
  hideModal();
}

function cancelSelect() {
  cancelFun && cancelFun("User cancel");
  hideModal();
}

function showModal(type) {
  dataType.value = type;
  modalShow.value = true;
}

function hideModal() {
  modalShow.value = false;
  confirmFun = (id)=>{console.log(id)};
  cancelFun = (reason)=>{console.log(reason)};
}

</script>
<style lang="scss" scoped>
.chain-modal{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 10;
  .modal-bg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background-color: #000000a3;
  }
  .modal-content{
    width: 500px;
    max-height: 400px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    &.mobile{
      width: 100vw;
    }
    .modal-title{
      background-color: rgb(255, 255, 255);
      color: black;
      border-radius: 12px 12px 0 0;
      padding: 15px 20px;
      border-bottom: 1px solid rgba(195, 195, 195, 0.14);
    }
    .chain-modal-card{
      background-color: rgb(255, 255, 255);
      transition: background-color 0.2s ease-in-out 0s;
      display: flex;
      flex-direction: column;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      padding: 24px 16px;
      text-align: center;
      cursor: pointer;
      &:first-child{
        border-radius: 12px 12px 0 0;
      }
      &:not(:first-child) {
        border-top: 1px solid rgba(195, 195, 195, 0.14);
      }
      &:last-child{
        border-radius: 0 0 12px 12px;
      }
      .icon{
        width: 45px;
        height: 45px;
        display: flex;
        border-radius: 50%;
        overflow: visible;
        box-shadow: none;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        img{
          width: 100%;
          height: 100%;
        }
        .icon-svg{
          width: 100%;
          height: 100%;
          fill: currentColor;
          color: unset;
          stroke: none;
        }
      }
      .name{
        width: 100%;
        font-size: 24px;
        font-weight: 700;
        margin-top: 0.5em;
        color: rgb(12, 12, 13);
      }
      .desc{
        width: 100%;
        font-size: 18px;
        margin: 0.333em 0px;
        color: rgb(169, 169, 188);
      }
    }
  }
}
</style>