120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="!fromAddress" @click="showConnectors = true">Connect</div>
|
|
<div v-if="showConnectors">
|
|
<div v-for="connector in config.connectors" @click="connectWallet(connector)">
|
|
{{ connector.name }}
|
|
</div>
|
|
</div>
|
|
<div v-if="fromAddress" @click="disconnectWallet">Disconnect</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, toRaw, onMounted, onUnmounted } from "vue";
|
|
import Meme1Json from "@/assets/contracts/Meme1.json";
|
|
|
|
const fromAddress = ref(null);
|
|
const showConnectors = ref(false);
|
|
import {
|
|
createConfig,
|
|
configureChains,
|
|
getAccount,
|
|
connect,
|
|
disconnect,
|
|
InjectedConnector,
|
|
getWalletClient,
|
|
} from "@wagmi/core";
|
|
|
|
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
|
|
import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
|
|
|
|
import { goerli } from "@wagmi/core/chains";
|
|
import { publicProvider } from "@wagmi/core/providers/public";
|
|
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
|
|
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
|
console.log("goerliKey", goerliKey);
|
|
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
|
[goerli],
|
|
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
|
|
);
|
|
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
|
|
const config = ref(null);
|
|
const accountSub = ref(null);
|
|
// onMounted(() => {
|
|
// const account = getAccount();
|
|
// console.log("account", account);
|
|
// if (account.isConnected) {
|
|
// fromAddress.value = account.address;
|
|
// }
|
|
// accountSub.value = watchAccount((account) => {
|
|
// console.log("account123", account);
|
|
// fromAddress.value = account.address;
|
|
// walletStore.address = account.address;
|
|
// });
|
|
// });
|
|
|
|
// onUnmounted(() => {
|
|
// accountSub.value();
|
|
// console.log("unsubscribe");
|
|
// });
|
|
|
|
config.value = createConfig({
|
|
autoConnect: true,
|
|
connectors: [
|
|
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);
|
|
const walletClient = await getWalletClient();
|
|
console.log("walletClient", walletClient);
|
|
|
|
async function disconnectWallet() {
|
|
try {
|
|
await disconnect();
|
|
} catch (error) {
|
|
console.log("error", error);
|
|
}
|
|
}
|
|
|
|
async function connectWallet(connector) {
|
|
console.log("connector.name", connector.name);
|
|
const rawConnector = toRaw(connector);
|
|
// if (!account.isConnected) {
|
|
const connection = await connect({
|
|
chainId: goerli.id,
|
|
connector: rawConnector,
|
|
});
|
|
console.log("Connecting to:", connection);
|
|
fromAddress.value = connection.account;
|
|
showConnectors.value = false;
|
|
}
|
|
|
|
async function connect1() {
|
|
const connection = await connect({
|
|
chainId: goerli.id,
|
|
connector: new InjectedConnector(),
|
|
});
|
|
console.log("Connecting to:", connection);
|
|
}
|
|
async function getAccount1() {
|
|
const account = getAccount();
|
|
console.log("account", account);
|
|
}
|
|
</script>
|