리액트에 WAGMI설치하기 (초보용)
개발 경험이 없는 사람들도 충분히 경험해볼 수 있을 정도로 쉽게 블록체인관련 코딩을 할 수 있도록 해보려고 한다. 물론 VS코드를 설치하거나 노드를 설치하는 것부터 시작하지는 않고 처음부터 블록체인에 관련된 코드만 작성하고 얘기해보려고 한다.
이번 포스팅에서는 WAGMI를 설치해볼건데 와그미는 이더리움같은 블록체인과 작업을 하는데 필요한 React 훅을 제공하는 라이브러리이다. 쉽게 말해서 메타마스크 연결, 메타마스크의 잔액 정보나 스마트 컨트랙트와의 상호작용들을 할 수 있다. 메타마스크 지갑외에도 코인베이스, 월렛 커넥트등 다양한 지갑과도 사용이 가능하다.
블록체인 앱을 만들기 위해서는 어찌되었든 지갑과의 상호작용이 필요한데 WAGMI를 설치함으로써 여러기능들을 간편하게 구현할 수 있도록 도와주는 도구이다. 여러 시리즈로 점점 넓혀나갈 계획이지만 이번 포스팅은 메타마스크를 연결하고 메타마스크의 주소를 WAGMI로 가져오는 매우 매우 간단한 웹앱을 만들어보려고 한다.
WAGMI가 리액트 외에서도 사용이 가능하지만 리액트에서의 사용이 가장 스무스한 편이긴하다. 그래서 리액트를 사용하는게 가장 좋긴한데 NextJs 나 React를 그대로 설치하면 타입 스크립트의 버전이 안맞거나 node-gyp의 호환이 문제가 글을 작성하는 기준 발생하고 있다. 물론 잘 돌아가긴하나 에러가 보이는것을 매우 싫어하기 때문에 다른 방법을 이번 포스팅에서는 사용하려고 한다.
요즘 개인적으로는 왠만하면 NextJS를 사용하고 있지만 블록체인 앱은 결국 클라이언트쪽에서 지갑과 상호작용해야 하기 떄문에 NextJS를 사용하려면 어차피 클라이언트 사이드 렌더링으로 돌려야 하기 때문에 현재는 리액트를 사용하는것을 추천한다.
여러가지 시도를 해보고 와그미까지 설치를 하는데 에러가 안나는 것은 VIte(React)였기 때문에 Vite로의 설치를 이번 포스팅에서는 이야기 하려고 한다.
일단 웹앱을 설치 할 경로에 가서
npm create vite . 터미널에 바이트를 설치한다. 점을 붙인 이유는 현재 경로에 설치하기 위함이고 만약 폴더를 만들어서 설치를 하려고 한다면 폴더 이름을 점대신 적어주면 된다.
그다음에는 여러가지 질문들이 나오는데
... 진행할거냐는 질문에 Yes
... 현재 폴더를 지워도 되는지 물어보는 질문에 Yes
... 프레임 워크를 물어보는 질문에는 키보드로 리액트 선택
... 자바스크립트 또는 타입스크립트 쓸건지 물어보는것에는 개인차로 선택, 본인은 자바스크립트 선택
이 이후에는 리액트가 잘 설치가 되었다.
그 다음 WAGMI를 설치해줘야하는데 WAGMI만 설치해줘도 되지만 추후를 위해 VIEM까지 설치를 해주는것을 추천한다.
npm install wagmi viem설치 후 App.jsx에 가서 다음과 같이 변경해보자.
import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
import Profile from './components/Profile/Profile';
const { publicClient, webSocketPublicClient } = configureChains(
[mainnet],
[publicProvider()],
)
const config = createConfig({
autoConnect: true,
publicClient,
webSocketPublicClient,
})
function App() {
return (
<>
<WagmiConfig config={config}>
<Profile />
</WagmiConfig>
</>
)
}
export default App
간단하게 설명하면 설치한 wagmi에서 다양한 함수들을 가져오고 프로필 컴포넌트도 가져오고 있다. 프로필 컴포넌트는 아직 설치하지 않았지만 바로 만들 파일이고 wagmi에서 가져오는 함수들은 대부분 configure하는 설정 함수들이다.
밑에 configureChains에서는 메인넷을 설정을 해주었고 만약 다른 블록체인과 상호작용하고 싶다면 이곳에서 변경 또는 추가해주면 된다.
const { publicClient, webSocketPublicClient } = configureChains(
[mainnet], // 이곳에서 체인 변경
[publicProvider()],
)그리고 해당 체인으로 config함수를 만들고 Profile 컴포넌트를 WagmiConfig로 감싸주었다.
<WagmiConfig config={config}> //여기서 하위 컴포넌트들을 감싸주어야 함
<Profile />
</WagmiConfig>이제 /src디렉토리에서 components폴더를 만들고 그 아래에 Profile 폴더 그리고 그 아래에 Profile.jsx파일을 만들어 준다.
여기에 들어가는 코드는
import React from 'react';
import { useAccount, useConnect, useEnsName } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
function Profile() {
const { address, isConnected } = useAccount()
const { data: ensName } = useEnsName({ address })
const { connect } = useConnect({
connector: new InjectedConnector(),
})
if (isConnected) return <div>Connected to {ensName ?? address}</div>
return <button onClick={() => connect()}>Connect Wallet</button>
}
export default Profile;
인데
wagmi에서는 account, connect, ensName훅을 가져온다.
각각 계정, 연결, ens계정을 담당하는 기능이며
InjectedConnector는 현재 브라우저에 설치된 지갑과 연결 할 수 있도록 돕는다. (window.ethereum을 찾는다)
const { address, isConnected } = useAccount()useAccount훅을 쓰면 지갑 주소와 현재 연결되었는지의 정보를 가져오고
const { connect } = useConnect({
connector: new InjectedConnector(),
})useConnect훅을 쓰면 지갑주소를 연결시킬 수 있다.
if (isConnected) return <div>Connected to {ensName ?? address}</div>
return <button onClick={() => connect()}>Connect Wallet</button>
이로써 계정 연결이 되어있지 않으면 연결하는 버튼만 보여지고 연결이 되면 주소가 보여지는 (ens 계정이 있으면 ens주소가 보이는) 간단한 앱을 만들 수 있다.
매우 심플한 앱이지만 지갑이 연결되어야 본인의 자산도 보여줄 수 있고 스마트 컨트랙트와의 연결도 할 수 있다. 지갑을 보여주지 않고도 소셜 계정을 연결할수도 있고 지갑 자체를 안보여줄 수 있지만 보여지지 않는것 뿐이지 모든 블록체인앱의 뒷단에는 지갑이 존재한다. 따라서 지갑을 연결하는 앱은 중요하고 다음단계로 가기위해서 가장 중요한 단계이다.
리포: https://github.com/kanghamin/react-wagmi/tree/react-wagmi-template
출처: OpenAI의 DALL·E를 통해 생성됨
