CounterFireGames/src/components/chain/WalletSelectModel.vue
CounterFire2023 323d708d09 修改样式
2024-06-24 11:59:49 +08:00

178 lines
5.2 KiB
Vue

<template>
<div class="chain-modal" v-if="props.visible" :class="{ mobile: 'mobile' }">
<div class="modal-bg" @click="cancelSelect"></div>
<div class="modal-content" :class="{ mobile: 'mobile' }">
<div class="modal-title">
<div>Please connect your wallet</div>
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs+MAAAAAXNSR0IArs4c6QAAApVJREFUWEe1lj1v01AUht9zEygDA0tYYAIJVWJL3KGtUZyFAQYWggQSqkgkhuQPMDDDHwBRYKIoHaJOSIgBNUlxUoY4KQtiRvwCFopEfA+yG4fE9ce1ayJPubrnffyeDx8CgE8d62ZO0GMiOM+T1XLxnfN/1r/BrnUdOXrkxGXIp7qx8pFMc3gpJ8U3ZpyeCtoAPVg3im+zBBh0h7dBYhvAqWnc37Bpmfp71j1iavnEbEmydq28spUFRID4UVimu2SaX64I2/4KIP8/IELFAZvz+avkiO7vjWvM/BqAyBIiQpyZuaFXtE0XwIXojutM/CoriChxgJvrhvbC0Z0BZAmhKn4MIAuIJOKBACeBSCoeCuAc9LvDOpEIrAkiqq2Viwstau5aVZFz29nrc6+8eD7n/rZeqAH/oSpEWvFIBzyYOAh7Ig/TvLkXP9IBFQgAMsh2wdRYrRQ34yapEkBMTfg1WFVcKQXz0SPSMSu4JOKJAZwLg97oJYCHQdYSaGvNKG7E2T5/rpwC55LZs6oC2AbI/+HyYtpBLRoFpAygID6DYOa6XtHeqDihBBAhzu5yE/AVVYWIBYgSdwrOhv0nbGKqQEQC7PcOqgw7KOcLrRY1rOIgQgHCxIlISomm7hsyaSECAZKKq0zMMCeOAaQVTwuxuBGF5DzM9rA2i9oxmbiul/+16Ayg3xndIcEt/5BJKu5BqUK4AIPO8BaE2PGv5mnFlSAYG3ql1DoC6Fk/ALq4MKPdapdNZ3VWmWgp0vHzXOHMeWJmGvTGh0RYmi0JGYnHOMH5yaQwdWD0HEBjekEy84nf3O+IvyYY+KAbpRsuQLvdzl0oXL4P0DITv9eNknkS28Pufu4eGJJkFcD3pbP8TNO0X38BHAnKrhM25C0AAAAASUVORK5CYII="
alt="close"
class="close"
@click="cancelSelect"/>
</div>
<div class="modal-sub-title">
Connect your wallet to start your Counter Fire journey
</div>
<div class="modal-body">
<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>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import { ALL_PROVIDERS } from "@/configs/configchain";
import { allProviders } from "@/components/chain/BlockChain"
import {walletStore} from "@/store/wallet";
const localWalletStore = walletStore()
const props = defineProps({
visible: Boolean,
close: Function,
});
const currentDatas = computed(() => {
return ALL_PROVIDERS;
});
async function cardClicked(id) {
console.log("card clicked:", id);
const Provider = allProviders[id];
const { provider, accounts } = await new Provider().web3Provider();
console.log(accounts)
hideModal({errcode: 0, provider, wallet: id, accounts});
}
function cancelSelect() {
hideModal({errcode: 1, errmsg: "user cancel select wallet"});
}
function hideModal(result = null) {
props.close(result);
}
</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: 31.25vw;
background-color: #2d2738;
border-radius: 20px;
color: white;
margin: auto;
display: flex;
position: relative;
margin-top: 15vh;
flex-direction: column;
.mobile {
width: 100vw;
}
.modal-title {
border-radius: 12px 12px 0 0;
padding: 15px 20px;
border-bottom: 1px solid rgba(195, 195, 195, 0.14);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.modal-sub-title {
padding: 15px 20px;
border-bottom: 1px solid rgba(195, 195, 195, 0.14);
font-size: 16px;
font-weight: 400;
}
.modal-body {
padding: 0 1.5625vw 1.04167vw;
.chain-modal-card {
transition: background-color 0.2s ease-in-out 0s;
display: flex;
flex-direction: row;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
padding: .78125vw 1.5625vw;
text-align: center;
cursor: pointer;
border: .10417vw solid #625a6b;
border-radius: .41667vw;
padding: .78125vw 1.5625vw;
margin: 1.04167vw 0;
// &: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: 80%;
font-size: 24px;
font-weight: 700;
margin-top: 0.5em;
text-align: left;
margin-left: 20px;
}
}
}
}
}
</style>