Connect with WalletConnect
WalletConnect is an open-source, chain-agnostic protocol that securely links wallets and Web3 applications. It uses a bridge server to relay encrypted messages, allowing users to connect by scanning a QR code or via deep-linking, without exposing private keys.
Integration Steps for WalletConnect
Prerequisites
Register at WalletConnect Cloud and obtain the project ID.
Install Dependency
npm install ethers wagmi viem @walletconnect/ethereum-provider
Set up Injective EVM network configuration
// lib/injectiveChain.ts
import { defineChain } from 'viem'
export const injectiveEvm = defineChain({
id: 1439,
name: 'Injective EVM',
nativeCurrency: {
name: 'INJ',
symbol: 'INJ',
decimals: 18,
},
rpcUrls: {
default: { http: ['https://k8s.testnet.json-rpc.injective.network'] },
},
blockExplorers: {
default: { name: 'InjectiveScan', url: 'https://testnet.blockscout.injective.network/blocks' },
},
})
Set up Wagmi + WalletConnect
// lib/wagmi.ts
import { createConfig, http } from '@wagmi/core'
import { walletConnect } from '@wagmi/connectors'
import { injectiveEvm } from './injectiveChain'
export const wagmiConfig = createConfig({
chains: [injectiveEvm],
connectors: [
walletConnect({
projectId: 'your-walletconnect-project-id', // From WalletConnect Cloud
showQrModal: true,
}),
],
transports: {
[injectiveEvm.id]: http(injectiveEvm.rpcUrls.default.http[0]),
},
})
Integrate into your project
'use client'
import { useConnect, useAccount, WagmiProvider } from 'wagmi'
import { wagmiConfig } from './providers'
import Image from 'next/image'
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
export const queryClient = new QueryClient()
function WalletConnector() {
const { connectors, connect, isPending } = useConnect()
const { address, isConnected } = useAccount()
const wcConnector = connectors.find(c => c.id === 'walletConnect')
return (
<div style={{ textAlign: 'center', marginTop: '100px' }}>
{isConnected ? (
<p>Connected to {address}</p>
) : (
<button
onClick={() => wcConnector && connect({ connector: wcConnector })}
disabled={isPending || !wcConnector}
style={{ padding: '12px 24px', fontSize: '16px' }}
>
Connect Wallet (WalletConnect)
</button>
)}
</div>
)
}
export default function Home() {
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<WalletConnector />
</QueryClientProvider>
</WagmiProvider>
)
}
More Info
WalletConnect docs: https://docs.walletconnect.com
WalletConnect official examples: https://github.com/WalletConnect/web-examples
Last updated