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>
+    <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>
@@ -1,11 +1,15 @@
 <script setup>
 import { storeToRefs } from "pinia";
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
-import { useWalletStore } from "@/stores/wallet";
-const walletStore = useWalletStore();
+import { useWalletStoreV2 } from "@/stores/walletV2";
+const emit = defineEmits(["showPanel"]);
+
+const walletStore = useWalletStoreV2();
 const { connected, address } = storeToRefs(walletStore);
 const isMobile = inject("isMobile");

+const showPanel = ref(false);
+
 const showNavbar = ref(true);
 const lastScrollPosition = ref(0);

@@ -62,8 +66,9 @@ onBeforeUnmount(() => {
 				</div>
 				<div class="navbar-end">
 					<div v-if="!isMobile">
-						<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
-						<span v-else> {{ address }}</span>
+						<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
+						<div v-if="!address" class="btn btn-immortal" @click="$emit('showPanel', true)">connect</div>
+						<span v-else @click="$emit('showPanel', true)"> {{ address }}</span>
 					</div>
 					<div v-else class="hamburger-menu">
 						<font-awesome-icon :icon="['fas', 'bars']" />
@@ -0,0 +1,62 @@
+<template>
+     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
+        <div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
+       
+            <div class="slideout-panel" @click="testClick">
+                <slot></slot>
+            </div>
+        </div>
+     </div>
+</template>
+
+<script setup>
+import { inject, watchEffect } from "vue";
+
+const props = defineProps({
+	modelValue: Boolean,
+});
+
+defineEmits(["update:modelValue"]);
+
+const showPanel = inject("showPanel");
+console.log("showPanel.value", showPanel);
+const isMobile = inject("isMobile");
+
+function testClick(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+</script>
+
+<style lang="sass">
+.slideout-overlay
+    background-color: rgba(0,0,0,.5)
+    z-index: 100
+    &.open
+        height: 100%
+        width: 100%
+        position: fixed
+    .slideout-wrapper
+        z-index: 100
+        height: 100vh
+        right: 0
+        position: fixed
+        display: flex
+        border: 1px solid rgba(152, 161, 192, 0.24)
+        box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
+        transition: margin-right 250ms ease 0s
+        margin-right: -300px
+        background-color: #2D2D2D
+        &.open
+            margin-right: 0
+        .slideout-panel
+            width: 300px
+            height: 100%
+            padding: 24px
+            .slideout-icon
+                cursor: pointer
+                &:hover, &:active, &:focus
+                    background-color: lighten(#2D2D2D, 20%)
+                svg
+                    font-size: 30px
+</style>