What is the right custom extension to use for WalletConnect's Web3Modal?

Wappler General
1

Ok, super wise Wappler devs. I’m stuck. I’m trying to integrate Wallet Connect.
The concept is a user will click a button, and that will display a modal so the user can connect their crypto wallet to the site.

I’m stuck on whether this should be a custom server connect module or an app connect component and how to implement it.

Any help is appreciated

Add Packages​

  • npm
npm install @web3modal/ethereum @web3modal/html @wagmi/core viem

Implementation​

Start by importing Web3Modal and wagmi packages, then create wagmi config using your own settings or our default presets as shown below. Finally, pass wagmi config to Web3Modal as ethereumClient .

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'
import { configureChains, createConfig } from '@wagmi/core'
import { arbitrum, mainnet, polygon } from '@wagmi/core/chains'

const chains = [arbitrum, mainnet, polygon]
const projectId = 'YOUR_PROJECT_ID'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({ 
 autoConnect: true,  
connectors: w3mConnectors({ projectId, version: 1, chains }), 
 publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)

Add connect button​

Add our pre-built button component in your app to open/close connection and account modals. Alternatively, use your own button.

<body>  <w3m-core-button></w3m-core-button></body>

Use wagmi core actions​

wagmi core provides everything you’ll need to start working with accounts, contracts, chains and much more.

import { getAccount, readContract } from '@wagmi/core'
2

Hi @kfawcett when we launched our web3 project the web3 connectivity was all done front-end. We didn’t need any custom extensions, just the JS library. Hope that helps somewhat.

3

Thanks @mgaussie. What library did you use?

I’m partly doing this as a way to learn more about custom extensions and node.js. Using ChatGPT yesterday, I learned that put of the code is meant to be served client side, so that’s pushing me towards an app connect component. The documentation on custom app connect components is not the easiest to understand, so I’m struggling to wire everything up.

4

Pretty sure we used https://web3js.readthedocs.io/en/v1.10.0/

I’d have to restart the old Wappler project to confirm, but i’m 99% it was this library.

I would say that the use case would determine what needs to be on the b/e vs f/e. We were connecting f/e to get wallet info, and then making backend API calls via infura to get the necessary chain data.

I just don’t remember if actual calls to the contract (we had both ETH and Poly) were made backend or frontend.

I had some professional support for the really complex blockchain calls/data processing but simply connecting to a wallet and getting the wallet address was pretty simple with this library.

1 Like