walletv2 + connectwallet
This commit is contained in:
Michel Fromme
@@ -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>
|
||||
@@ -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,
|
||||
});
|
||||
Reference in New Issue
Block a user