walletv2 + connectwallet

src/components/ConnectWallet.vue

@@ -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>

src/stores/walletV2.js

@@ -0,0 +1,167 @@
+import { defineStore } from "pinia";
+import { markRaw } from "vue";
+import { useTokenStore } from "./tokens";
+
+import {
+	createConfig,
+	configureChains,
+	mainnet,
+	getAccount,
+	getContract,
+	connect,
+	getWalletClient,
+	disconnect,
+	InjectedConnector,
+	watchAccount,
+} from "@wagmi/core";
+
+import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
+import { MetaMaskConnector } from "@wagmi/core/connectors/metaMask";
+import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet";
+
+import { goerli } from "@wagmi/core/chains";
+import { publicProvider } from "@wagmi/core/providers/public";
+import { alchemyProvider } from "@wagmi/core/providers/alchemy";
+
+
+export const useWalletStoreV2 = defineStore("walletV2", {
+	state: () => ({
+		count: 0,
+		alchemy: null,
+		connected: false,
+		address: null,
+		web3: null,
+        provider: null,
+        client: null,
+        pubilcClient: null,
+        walletClient: null,
+        config: null
+	}),
+	getters: {},
+	actions: {
+        async init() {
+            
+            console.log("wallet init");
+            const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+            const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
+            
+			const { chains, publicClient, webSocketPublicClient } = configureChains(
+				[goerli],
+				[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
+			);
+
+			this.config = 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,
+			});
+
+			// await this.isConnected();
+			// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
+			// if (this.connected) {
+			// 	const web3 = new Web3(window.ethereum);
+			// 	this.web3 = markRaw(web3);
+			// 	console.log("hierabc");
+			// 	window.ethereum.on("accountsChanged", async (data) => {
+			// 		console.log("accountsChanged", data);
+			// 		console.log("data", data);
+			// 		if (data.length > 0) {
+			// 			this.address = data[0];
+			// 			this.connected = true;
+			// 		} else {
+			// 			this.address = null;
+			// 			this.connected = false;
+			// 		}
+			// 	});
+
+			// 	// provider = new ethers.BrowserProvider(window.ethereum);
+			// } else {
+			// 	const url = `https://eth-goerli.g.alchemy.com/v2/${goerliKey}`;
+			// 	this.web3 = new Web3(url);
+			// 	// provider = new ethers.AlchemyProvider("goerli", goerliKey);
+			// }
+
+			// //Websocket
+			// this.web3socket = new Web3(
+			// 	new Web3.providers.WebsocketProvider(`wss://eth-goerli.g.alchemy.com/v2/${goerliKey}`)
+			// );
+		},
+		// connectWalletV2(connector) {
+		//     this.address = data[0];
+		// },
+       async connectWallet(connector) {
+            console.log("connector.name", connector.name);
+            // if (!account.isConnected) {
+            const connection = await connect({
+				chainId: goerli.id,
+				connector: connector,
+            });
+            // this.address = connection.account;
+		},
+		async getTokenBalance(token) {
+			const tokenStore = useTokenStore();
+			const contract = tokenStore.getTokenContract(token);
+			const result = await contract.methods.balanceOf(this.address).call();
+			return result;
+		},
+		async isConnected() {
+			try {
+				this.loading = true;
+				if (!window.ethereum) {
+					console.warn("Metamask not installed"), (this.connected = false);
+					return;
+				}
+				const accounts = await window.ethereum.request({ method: "eth_accounts" });
+				if (accounts.length) {
+					this.connected = true;
+					this.address = accounts[0];
+					console.log(`You're connected to: ${accounts[0]}`);
+					// const web3 = new Web3(window.ethereum);
+					// const tokenStore = useTokenStore();
+					// console.log("tokenStore.activeToken", tokenStore.activeToken);
+					// if (tokenStore.activeToken.contractAddress) {
+					// 	tokenStore.activeToken.balance = await this.getTokenBalance(
+					// 		tokenStore.activeToken
+					// 	);
+					// 	tokenStore.activeToken.allowance = await tokenStore.allowance();
+					// }
+					// tokenStore.memeBurner.contract = new web3.eth.Contract(
+					// 	tokenStore.memeBurner.config.abi,
+					// 	tokenStore.memeBurner.config.contractAddress
+					// );
+				} else {
+					console.log("Metamask is not connected");
+					this.connected = false;
+				}
+			} catch (error) {
+				console.log("error", error);
+			} finally {
+				this.loading = false;
+				return this.connected;
+			}
+		},
+	},
+	persist: true,
+});