fix

mobile/src/App.vue

@@ -68,18 +68,4 @@ html {
 .fade-leave-to {
   opacity: 0;
 }
-@font-face {
-  font-family: "MyFont";
-  src: url("/fonts/myfont.ttf") format("truetype");
-}
-
-.layerTop {
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 128px;
-  height: 128px;
-  z-index: 2000;
-  user-select: none;
-}
 </style>

mobile/src/components/global/ChainModel.vue

@@ -0,0 +1,216 @@
+<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 isMobile = 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 [];
+//   }
+// });
+
+const currentDatas = computed(() => {
+  return (
+    {
+      0: ALL_PROVIDERS,
+      1: chainDatas.value,
+    }[dataType.value] || []
+  );
+});
+
+let confirmFun = (id) => {};
+let cancelFun = (reason) => {};
+
+onMounted(() => {
+  busShowChainModal.on(showSelectWallet);
+  busNeedChangeChain.on(showChangeChain);
+  if (/Mobi/.test(navigator.userAgent)) {
+    isMobile.value = true;
+  }
+});
+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(0);
+  cancelSelect();
+}
+
+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>