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