112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<template>
|
|
<h3>Connect Wallet</h3>
|
|
<div class="connectors-wrapper" v-if="!walletStore.connected">
|
|
<div class="connectors-element" v-for="connector in walletStore.config?.connectors" @click="connectWallet(connector)">
|
|
<div class="connector-icon">
|
|
<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`">
|
|
</div>
|
|
<div class="connector-name">{{ connector.name }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
|
|
<div>Connected: {{ walletStore.connected }}</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, toRaw, onMounted, onUnmounted, getCurrentInstance } from "vue";
|
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
|
import Meme1Json from "@/assets/contracts/Meme1.json";
|
|
|
|
import {
|
|
createConfig,
|
|
configureChains,
|
|
mainnet,
|
|
getAccount,
|
|
getContract,
|
|
connect,
|
|
disconnect,
|
|
InjectedConnector,
|
|
watchAccount,
|
|
} from "@wagmi/core";
|
|
|
|
const walletStore = useWalletStoreV2();
|
|
|
|
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
|
|
|
const fromAddress = ref(null);
|
|
|
|
const accountSub = ref(null);
|
|
|
|
const instance = getCurrentInstance();
|
|
|
|
// config.value = createConfig({
|
|
// autoConnect: true,
|
|
// connectors: [
|
|
// new CoinbaseWalletConnector({
|
|
// chains,
|
|
// options: {
|
|
// appName: "wagmi demo",
|
|
// },
|
|
// }),
|
|
// new MetaMaskConnector({ chains }),
|
|
// new WalletConnectConnector({
|
|
// chains,
|
|
// options: {
|
|
// projectId: projectId,
|
|
// showQrModal: true,
|
|
// metadata: {
|
|
// name: "Bloodline-App",
|
|
// description: "TODO Bloodline Description",
|
|
// url: "https://gitea.loseyourip.com/",
|
|
// icons: [
|
|
// "https://gitea.loseyourip.com/assets/img/vampir.png",
|
|
// ],
|
|
// },
|
|
// },
|
|
// }),
|
|
// ],
|
|
// publicClient,
|
|
// webSocketPublicClient,
|
|
// });
|
|
// console.log("config", config);
|
|
|
|
async function disconnectWallet() {
|
|
console.log("disconnectWallet");
|
|
try {
|
|
instance.parent.emit("update:modelValue", false);
|
|
await disconnect();
|
|
// walletStore.connected = false;
|
|
// walletStore.address = null;
|
|
} catch (error) {
|
|
console.log("error", error);
|
|
}
|
|
}
|
|
|
|
async function connectWallet(connector) {
|
|
instance.parent.emit("update:modelValue", false);
|
|
await walletStore.connectWallet(toRaw(connector));
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="sass">
|
|
.connectors-wrapper
|
|
display: flex
|
|
flex-direction: column
|
|
.connectors-element
|
|
display: flex
|
|
padding: 12px
|
|
border: 1px solid rgba(152, 161, 192, 0.24)
|
|
background-color: #202020
|
|
&:hover, &:active, &:focus
|
|
background-color: lighten(#202020, 20%)
|
|
cursor: pointer
|
|
.connector-icon
|
|
border-radius: 12px
|
|
width: 40px
|
|
overflow: hidden
|
|
height: 40px
|
|
.connector-name
|
|
padding: 0 8px
|
|
align-self: center
|
|
</style> |