viem wagmi

2023-07-27 11:10:05 +02:00
parent 161262f590
commit b2121a1ca4
18 changed files with 3487 additions and 4160 deletions
@@ -0,0 +1,126 @@
+<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";
+import { useWalletStore } from "@/stores/wallet";
+const walletStore = useWalletStore();
+
+const fromAddress = ref(null);
+const showConnectors = ref(false);
+import {
+	createConfig,
+	configureChains,
+	mainnet,
+	getAccount,
+	getContract,
+	connect,
+	disconnect,
+	InjectedConnector,
+	getWalletClient,
+	watchAccount,
+} 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>