Reputation: 1
I created a Vite + Vue project using TypeScript with the Wagmi template project. After implementing the functionality of Web3Modal, the modal pops up and shows all the crypto wallets. However, when I click on a wallet, I don't receive a QR code and can't copy the link. Only email and CoinBase authentication works.
Here is my wagmi.ts config file:
import { http, createConfig, createStorage } from '@wagmi/vue'
import { mainnet, optimism, arbitrum } from '@wagmi/vue/chains'
import { coinbaseWallet, walletConnect } from '@wagmi/vue/connectors'
const projectId = import.meta.env.VITE_WC_PROJECT_ID
export const config = createConfig({
chains: [mainnet, arbitrum, optimism],
connectors: [
walletConnect({ projectId }),
coinbaseWallet({ appName: 'WalletConnect', darkMode: true }),
],
storage: createStorage({ storage: localStorage, key: 'vite-vue' }),
transports: {
[mainnet.id]: http(),
[arbitrum.id]: http(),
[optimism.id]: http(),
},
})
declare module '@wagmi/vue' {
interface Register {
config: typeof config
}
}
And Connect.vue file:
<script setup lang="ts">
import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi";
import { arbitrum, mainnet, optimism } from "@wagmi/vue/chains";
const projectId = import.meta.env.VITE_WC_PROJECT_ID
const metadata = {
name: 'Web3Modal',
description: 'Web3Modal Vue',
url: 'https://web3modal.com',
icons: ['https://avatars.githubusercontent.com/u/37784886']
}
const config = defaultWagmiConfig({
projectId,
chains: [mainnet, arbitrum, optimism],
metadata,
})
createWeb3Modal({
wagmiConfig: config,
projectId,
})
</script>
<template>
<h1 class="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl">
<span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">
WalletConnect Demo
</span>
</h1>
<w3m-button />
</template>
I tried clearing localStorage. In WalletConnect, I have no active sessions at all.
Upvotes: 0
Views: 241