WalletConnect로 연결

WalletConnect는 지갑과 Web3 애플리케이션을 안전하게 연결하는 오픈 소스, 체인에 구애받지 않는 프로토콜입니다. 브릿지 서버를 사용하여 암호화된 메시지를 릴레이하여 사용자가 개인 키를 노출하지 않고 QR 코드를 스캔하거나 딥 링킹을 통해 연결할 수 있게 합니다.

​

WalletConnect 통합 단계

​

사전 요구 사항

WalletConnect Cloud에 등록하고 project ID를 얻으세요.

---

​

종속성 설치

npm install ethers wagmi viem @walletconnect/ethereum-provider

Injective EVM 네트워크 구성 설정

// 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' },
  },
})

Wagmi + WalletConnect 설정

 // lib/wagmi.ts
import { walletConnect } from '@wagmi/connectors'
import { createConfig, http } from '@wagmi/core'
import { injectiveEvm } from './injectiveChain'

export const wagmiConfig = createConfig({
  chains: [injectiveEvm],
  connectors: [
    walletConnect({
      projectId: 'your-walletconnect-project-id', // WalletConnect Cloud에서
      showQrModal: true,
    }),
  ],
  transports: {
    [injectiveEvm.id]: http(injectiveEvm.rpcUrls.default.http[0]),
  },
})

프로젝트에 통합

'use client'

import Image from 'next/image'
import { wagmiConfig } from './providers'
import { useConnect, useAccount, WagmiProvider } from 'wagmi'
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>
  )
}

---

추가 정보

• WalletConnect 문서: https://docs.walletconnect.com
• WalletConnect 공식 예제: https://github.com/WalletConnect/web-examples