138 lines
3.9 KiB
Vue
138 lines
3.9 KiB
Vue
<script setup>
|
|
import { walletConnectProvider } from '@web3modal/wagmi';
|
|
import { publicProvider } from '@wagmi/core/providers/public';
|
|
import { createWeb3Modal, defaultWagmiConfig, useWeb3Modal } from '@web3modal/wagmi/vue';
|
|
import { arbitrumGoerli, arbitrum, mainnet } from '@wagmi/core/chains';
|
|
import {
|
|
getAccount,
|
|
fetchToken,
|
|
writeContract,
|
|
disconnect,
|
|
watchAccount,
|
|
configureChains,
|
|
createConfig,
|
|
fetchBalance,
|
|
} from '@wagmi/core';
|
|
import { InjectedConnector } from '@wagmi/core';
|
|
import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
|
|
|
|
import { EthereumProvider } from '@walletconnect/ethereum-provider';
|
|
// import Web3 from 'web3';
|
|
|
|
// 1. Get projectId
|
|
const projectId = 'e7743d46923911fa8850619b7a7f6d9d';
|
|
|
|
// 2. Configure wagmi client
|
|
const { chains, publicClient } = configureChains(
|
|
[arbitrumGoerli, arbitrum, mainnet],
|
|
[walletConnectProvider({ projectId }), publicProvider()]
|
|
);
|
|
|
|
const metadata = {
|
|
name: 'Web3Modal',
|
|
description: 'Web3Modal Example',
|
|
url: 'https://web3modal.com',
|
|
icons: ['https://avatars.githubusercontent.com/u/37784886'],
|
|
};
|
|
|
|
const wagmiConfig = createConfig({
|
|
autoConnect: true,
|
|
connectors: [
|
|
new WalletConnectConnector({ chains, options: { projectId, showQrModal: false, metadata } }),
|
|
new InjectedConnector({ chains, options: { shimDisconnect: true } }),
|
|
// new CoinbaseWalletConnector({ chains, options: { appName: metadata.name } }),
|
|
],
|
|
publicClient,
|
|
});
|
|
// const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
|
|
|
|
// 3. Create modal
|
|
createWeb3Modal({ wagmiConfig, projectId, chains });
|
|
const modal = useWeb3Modal();
|
|
|
|
async function connectWc() {
|
|
modal.open();
|
|
}
|
|
|
|
function getCurrentAccount() {
|
|
let account = getAccount();
|
|
console.log(account);
|
|
}
|
|
|
|
async function tokenInfo() {
|
|
let info = await fetchToken({ address: '0x2C7221588D4FBac2585D71618CD540e74c7413B8', chainId: 421613 });
|
|
console.log(info);
|
|
let balance = await fetchBalance({
|
|
address: '0x50A8e60041A206AcaA5F844a1104896224be6F39',
|
|
token: '0x2C7221588D4FBac2585D71618CD540e74c7413B8',
|
|
chainId: 421613,
|
|
});
|
|
console.log('balance', balance);
|
|
}
|
|
|
|
// async function connectWc2() {
|
|
// const provider = await EthereumProvider.init({
|
|
// projectId: 'e7743d46923911fa8850619b7a7f6d9d', // required
|
|
// chains: [42161], // required
|
|
// showQrModal: true, // requires @walletconnect/modal
|
|
// qrModalOptions: {
|
|
// enableExplorer: true,
|
|
// // explorerRecommendedWalletIds: 'NONE',
|
|
// explorerRecommendedWalletIds: [
|
|
// 'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
|
|
// '971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709',
|
|
// ],
|
|
// },
|
|
// metadata: {
|
|
// name: 'Counter Fire',
|
|
// description: 'Counter Fire Game',
|
|
// url: 'https://my-dapp.com',
|
|
// icons: ['https://my-dapp.com/logo.png'],
|
|
// },
|
|
// });
|
|
|
|
// let web3 = new Web3(provider);
|
|
// provider.on('connect', () => console.info(provider.accounts));
|
|
// await provider.connect();
|
|
// const accounts = await web3.eth.getAccounts();
|
|
// accounts.forEach((account) => console.log(account));
|
|
// const chainId = await web3.eth.getChainId();
|
|
// console.log(`chainId: ${chainId}`);
|
|
// }
|
|
</script>
|
|
|
|
<template>
|
|
<div class="greetings">
|
|
<w3m-button />
|
|
<p class="green"><a @click="connectWc" rel="noopener">Connect WC</a></p>
|
|
<!-- <p class="green"><a @click="connectWc2" rel="noopener">Connect WC2</a></p> -->
|
|
<p class="green"><a @click="getCurrentAccount" rel="noopener">Get Account</a></p>
|
|
<p class="green"><a @click="tokenInfo" rel="noopener">Token Info</a></p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
h1 {
|
|
font-weight: 500;
|
|
font-size: 2.6rem;
|
|
position: relative;
|
|
top: -10px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.greetings h1,
|
|
.greetings h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.greetings h1,
|
|
.greetings h3 {
|
|
text-align: left;
|
|
}
|
|
}
|
|
</style>
|