viem wagmi
This commit is contained in:
Michel Fromme
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
{{ activeWallet }}
|
||||
{{ fromAddressWC }}
|
||||
<div class="connect-overview" v-if="!activeWallet && !fromAddressWC">
|
||||
<div v-for="wallet in wallets">
|
||||
<img :src="wallet.icon" :alt="wallet.name" @click="connectWallet($event, wallet)">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button @click="disconnectWallet">disconnect</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { WalletConnectModalSign } from "@walletconnect/modal-sign-html";
|
||||
import {
|
||||
EthereumProvider,
|
||||
OPTIONAL_EVENTS,
|
||||
REQUIRED_EVENTS,
|
||||
REQUIRED_METHODS,
|
||||
OPTIONAL_METHODS,
|
||||
} from "@walletconnect/ethereum-provider";
|
||||
|
||||
import Web3 from "web3";
|
||||
|
||||
// const modal = new WalletConnectModal({
|
||||
// projectId: "d8e5ecb0353c02e21d4c0867d4473ac5",
|
||||
// chains: ["goerli"],
|
||||
// });
|
||||
|
||||
const activeWallet = ref(null);
|
||||
const fromAddressWC = ref(null);
|
||||
const provider = ref(null);
|
||||
const wallets = [
|
||||
{
|
||||
name: "MetaMask",
|
||||
icon: "https://cdn.iconscout.com/icon/free/png-512/metamask-2728406-2261817.png",
|
||||
},
|
||||
{
|
||||
name: "WalletConnect",
|
||||
icon: "https://time.com/img/icons/wallet-connect.png",
|
||||
},
|
||||
];
|
||||
|
||||
const disableConnectButton = ref(false);
|
||||
// const web3Modal = new WalletConnectModalSign({
|
||||
// projectId,
|
||||
// metadata: {
|
||||
// name: "Bloodline-App",
|
||||
// description: "TODO Bloodline Description",
|
||||
// url: "https://gitea.loseyourip.com/",
|
||||
// icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
|
||||
// },
|
||||
// });
|
||||
|
||||
onMounted(async () => {
|
||||
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
|
||||
const showQrModal = true;
|
||||
|
||||
const metadata = {
|
||||
name: "Bloodline-App",
|
||||
description: "TODO Bloodline Description",
|
||||
url: "https://gitea.loseyourip.com/",
|
||||
icons: ["https://gitea.loseyourip.com/assets/img/vampir.png"],
|
||||
};
|
||||
provider.value = await EthereumProvider.init({
|
||||
projectId, // REQUIRED your projectId
|
||||
chains: [1], // chains added to required namespaces
|
||||
optionalChains: [5], // chains added to optional namespaces
|
||||
showQrModal, // REQUIRED set to "true" to use @walletconnect/modal
|
||||
REQUIRED_METHODS, // REQUIRED ethereum methods
|
||||
OPTIONAL_METHODS, // OPTIONAL ethereum methods
|
||||
REQUIRED_EVENTS, // REQUIRED ethereum events
|
||||
OPTIONAL_EVENTS, // OPTIONAL ethereum events
|
||||
// rpcMap, // OPTIONAL rpc urls for each chain
|
||||
metadata, // OPTIONAL metadata of your app
|
||||
// qrModalOptions, // OPTIONAL - `undefined` by default, see https://docs.walletconnect.com/2.0/web3modal/options
|
||||
});
|
||||
console.log("provider.value", provider.value);
|
||||
if (provider.value.accounts.length > 0) {
|
||||
fromAddressWC.value = provider.value.accounts[0];
|
||||
} else {
|
||||
fromAddressWC.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
async function disconnectWallet() {
|
||||
activeWallet.value = null;
|
||||
fromAddressWC.value = null;
|
||||
provider.value.disconnect();
|
||||
}
|
||||
|
||||
async function connectWallet(event, wallet) {
|
||||
try {
|
||||
disableConnectButton.value = true;
|
||||
if (wallet.name === "MetaMask") {
|
||||
window.ethereum
|
||||
.request({ method: "eth_requestAccounts" })
|
||||
.then((data) => {
|
||||
console.log("data", data);
|
||||
activeWallet.value = { ...wallet, address: data };
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.code === 4001) {
|
||||
// EIP-1193 userRejectedRequest error
|
||||
console.log("Please connect to MetaMask.");
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
} else if (wallet.name === "WalletConnect") {
|
||||
const methods = [
|
||||
"eth_signTypedData",
|
||||
"eth_signTypedData_v4",
|
||||
"eth_sign",
|
||||
];
|
||||
const optionalMethods = [];
|
||||
const events = [];
|
||||
|
||||
console.log("OPTIONAL_EVENTS", OPTIONAL_EVENTS);
|
||||
console.log("REQUIRED_EVENTS", REQUIRED_EVENTS);
|
||||
console.log("REQUIRED_METHODS", REQUIRED_METHODS);
|
||||
console.log("OPTIONAL_METHODS", OPTIONAL_METHODS);
|
||||
|
||||
console.log("provider", provider.value);
|
||||
// await provider.value.connect();
|
||||
await provider.value.enable();
|
||||
provider.value.on("accountsChanged", function (account) {
|
||||
console.log("accountschanged", { account });
|
||||
fromAddressWC.value = account;
|
||||
});
|
||||
const result = await provider.value.request({
|
||||
method: "eth_requestAccounts",
|
||||
});
|
||||
|
||||
console.log("result", result);
|
||||
fromAddressWC.value = result[0];
|
||||
// const session = await web3Modal.connect({
|
||||
// requiredNamespaces: {
|
||||
// eip155: {
|
||||
// methods: ["eth_sendTransaction", "personal_sign"],
|
||||
// chains: ["eip155:1"],
|
||||
// events: ["chainChanged", "accountsChanged"],
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// console.log("session", session);
|
||||
// const web3 = new Web3(session);
|
||||
// console.log("web3", web3);
|
||||
// try {
|
||||
// // console.log("web3Modal", web3Modal);
|
||||
// // var test = await web3Modal.request({
|
||||
// // method: "eth_requestAccounts",
|
||||
// // });
|
||||
// // console.log("test", test);
|
||||
|
||||
// console.log("getAccounts");
|
||||
// const accounts = await web3.eth.getAccounts();
|
||||
// console.log("Got accounts", accounts);
|
||||
// } catch (error) {
|
||||
// console.log("error", error);
|
||||
// }
|
||||
// // MetaMask does not give you all accounts, only the selected account
|
||||
// const fromAddress = session.namespaces.eip155.accounts[0].slice(9);
|
||||
// console.log("Web3 instance is", web3);
|
||||
// try {
|
||||
// var balance = web3.eth.getBalance(fromAddress);
|
||||
// console.log("balance", balance);
|
||||
// } catch (error) {
|
||||
// console.log("error", error);
|
||||
// }
|
||||
// // var accounts = await web3.eth.getAccounts();
|
||||
// console.log("accounts", accounts);
|
||||
// var userAccount = accounts[0];
|
||||
// console.log("userAccount", userAccount);
|
||||
// session.on("accountsChanged", (accounts) => {
|
||||
// console.log("ACCOUNTS CHANGED" + accounts[0]);
|
||||
// });
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
disableConnectButton.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onConnect() {
|
||||
try {
|
||||
disableConnectButton.value = true;
|
||||
const session = await web3Modal.connect({
|
||||
requiredNamespaces: {
|
||||
eip155: {
|
||||
methods: ["eth_sendTransaction", "personal_sign"],
|
||||
chains: ["eip155:1"],
|
||||
events: ["chainChanged", "accountsChanged"],
|
||||
},
|
||||
},
|
||||
});
|
||||
console.info(session);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
disableConnectButton.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
modal.closeModal();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.connect-overview
|
||||
display: flex
|
||||
div
|
||||
background-color: black
|
||||
width: 100px
|
||||
height: auto
|
||||
img
|
||||
width: 100%
|
||||
height: auto
|
||||
</style>
|
||||
Reference in New Issue
Block a user