React 및 Vite로 간단한 Web3 애플리케이션을 구축하는 방법(1부)

이 부분에서는 wagmi을 사용하여 블록체인 네트워크에 연결하는 방법을 배웁니다.

전제 조건

NodeJS 설치됨

브라우저에 설치된 MetaMask 확장 프로그램

시작하기

시작하려면 vite를 사용하여 새 React 애플리케이션을 만듭니다.

npm:

$ npm create vite simple-dapp --template react-ts

실:

$ yarn create vite simple-dapp --template react-ts

pnpm:

$ pnpm create vite simple-dapp --template react-ts

다음으로 wagmi - Ethereum 작업을 시작하는 데 필요한 모든 것을 포함하는 React Hooks 모음 및 ethers.js를 설치합니다.

$ pnpm add wagmi ethers

그런 다음 블록체인 네트워크에 연결할 와그미 클라이언트를 만들기 위해 main.tsx(또는 index.tsx)를 업데이트합니다."

1. 체인 구성

먼저, wagmi에서 사용할 원하는 체인과 사용하려는 공급자를 구성합니다.

import { WagmiConfig, createClient, configureChains, defaultChains } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'

const { chains, provider, webSocketProvider } = configureChains(defaultChains, [publicProvider()])

defaultChains는 인기 있는 블록체인 네트워크(Ethereum 메인넷, 테스트넷, 폴리곤, 낙관주의 등) 목록이 될 것입니다.

참고: 공용 공급자 끝점에서 속도 제한에 직면할 수 있으므로 publicProvider를 configureChains에만 전달하는 것은 권장되지 않습니다. alchemyProvider 또는 infuraProvider을 사용하는 것이 좋습니다.

2. wagmi 클라이언트 인스턴스 생성

다음으로 createClient를 사용하여 wagmi 클라이언트 인스턴스를 생성하고 configureChains의 결과를 여기에 전달합니다.

import { WagmiConfig, createClient, configureChains, defaultChains } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'

const { chains, provider, webSocketProvider } = configureChains(defaultChains, [publicProvider()])
const client = createClient({
  autoConnect: true,
  connectors: [new MetaMaskConnector({ chains })],
  provider,
  webSocketProvider
})

Metamask를 사용하여 지갑을 블록체인 네트워크에 연결합니다.

3. WagmiConfig로 앱 래핑

마지막으로 WagmiConfig 구성 요소로 앱을 래핑하여 client를 전달합니다.

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <WagmiConfig client={client}>
      <App />
    </WagmiConfig>
  </React.StrictMode>
)

이제 준비가 되었습니다. 모든 블록체인 네트워크에 연결할 WalletConnect 구성 요소를 만들어 보겠습니다.

WalletConnect.tsx

import { chain as Chain, useAccount, useConnect, useDisconnect } from 'wagmi'

export interface WalletConnectProps {}

export const WalletConnect = ({}: WalletConnectProps) => {
  const { isConnected, address } = useAccount()
  const { connect, connectors } = useConnect()
  const { disconnect } = useDisconnect()

  const handleConnect = () => {
    connect({
      connector: connectors[0], // metamask
      chainId: Chain.goerli.id // chainId = 5, goerli is Ethereum testnet
    })
  }

  const handleDisconnect = () => {
    disconnect()
  }

  if (isConnected) {
    return (
      <div>
        <p>Address: {address}</p>
        <button onClick={handleDisconnect}>Disconnect Wallet</button>
      </div>
    )
  }

  return <button onClick={handleConnect}>Connect Wallet</button>
}

connect 함수에서 사용하려는 커넥터(이 경우 메타마스크)와 연결하려는 네트워크(이 경우 goerli testnet)를 포함하는 구성을 전달합니다.

이제 준비가 되었습니다. WalletConnect 구성 요소를 App.tsx로 가져오고 프로젝트를 실행해 보겠습니다.
App.tsx

function App() {
  return (
    <div className='App'>
      <div>
        <a href='https://vitejs.dev' target='_blank'>
          <img src='/vite.svg' className='logo' alt='Vite logo' />
        </a>
        <a href='https://reactjs.org' target='_blank'>
          <img src={reactLogo} className='logo react' alt='React logo' />
        </a>
      </div>
      <h1>Simple dApp</h1>
      <WalletConnect />
    </div>
  )
}

네트워크에 연결하지 않았을 때의 앱입니다.



이제 연결 버튼을 클릭하여 Goerli 테스트넷에 연결해 보겠습니다.
클릭 후 메타마스크는 계정을 선택하라는 팝업을 표시합니다(또는 계정이 1개뿐인 경우 지갑을 이 앱에 연결할지 여부를 확인).





메타마스크를 확인한 후 지갑이 앱에 연결되었음을 알 수 있습니다.

그리고 yayyy, 당신의 주소는 우리의 앱에 표시됩니다


disconnect 버튼을 클릭하여 앱과 지갑의 연결을 끊을 수도 있습니다.

이 튜토리얼의 파트 2에서는 현재 네트워크에서 다른 네트워크로 전환하는 방법과 기존 스마트 계약 내에서 데이터를 읽고 쓰는 방법을 배웁니다.