zena
zena

Reputation: 1

WalletConnect on Vue Wagmi Not Loading Links and QR Codes

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

Answers (0)

Related Questions