walletv2 + connectwallet

2023-07-27 11:25:34 +02:00
parent 34a445eaa3
commit 0bab85fe75
2 changed files with 293 additions and 0 deletions
@@ -0,0 +1,126 @@
+<template>
+    <h3>Connect Wallet</h3>
+    <div class="connectors-wrapper">
+        <div class="connectors-element" v-for="connector in walletStore.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 @click="disconnectWallet">disconnect</div>
+    <div @click="getWalletClientTest">getwalletclient</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,
+	getWalletClient,
+} 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 {
+		await disconnect();
+	} catch (error) {
+		console.log("error", error);
+	}
+}
+
+async function getWalletClientTest() {
+	const walletClient = await getWalletClient();
+	console.log("walletClient", walletClient);
+	const contract = getContract({
+		address: Meme1Json.contractAddress,
+		abi: Meme1Json.abi,
+		walletClient,
+	});
+	const result = await contract.read.totalSupply();
+	console.log("result", result);
+
+	// 	console.log("obj", obj);
+	// });
+}
+
+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>