next.js를 사용하여 놀라운 지갑 구성 요소를 구축하는 방법 wagmi rainbowkit tailwindcss

1. 개요

일부 web3 프로젝트를 구축했습니다. 이 모든 프로젝트에는 지갑 연결 UI가 필요합니다. 그래서 이 게시물을 작성합니다. 손을 잡고 next.js tailwindcss daisyUI wagmi와 가장 중요한 rainbowkit을 사용하여 놀라운 지갑 연결 UI를 구축하는 방법을 보여드리겠습니다. 시작합니다!

2. 우리가 사용할 기술 스택.

next.js

와그미(리액트 후크)

ranbowkit(UI 라이브러리)

tailwindcss(css 프레임워크)

daisyUI(UI 라이브러리)

3.next.js 설정

next.js는 무엇입니까?
Next.js는 프로덕션을 위한 반응 프레임워크입니다. 따라서 이전에 react.js를 사용한 적이 없다면 먼저 react.js를 배워야 합니다. 그러길 바랍니다. Next.js에는 웹을 더 빠르게 만드는 데 필요한 모든 도구가 있습니다. Next.js에는 제로 구성, 빠른 새로 고침, SSR, typescript 지원, 요법과 같은 몇 가지 기능이 있습니다.

3.1 next.js 설정

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

3.2 tailwindcss 라이브러리 추가

Tailwindcss는 CSS를 줄이는 데 도움이 되는 CSS 프레임워크입니다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

next.js 페이지/_app.js 에서 기본 tailwindcss 라이브러리를 가져와야 합니다.

// pages/_app.js
- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

또한 이 프로젝트를 더 섹시하게 만들기 위해 daisyUI 라이브러리를 추가합니다.

npm i --save daisyui

위의 모든 작업이 완료된 후 이 프로젝트의 루트 문서에 있는 tailwindcss 구성 파일을 수정하기만 하면 됩니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")], //this is what we added.
};

4.rainbowkit 구성

우리는 _app.js 파일을 약간 수정해야 합니다. 가장 먼저 css, 공급자, 체인과 같은 종속성 패키지를 가져옵니다.
그런 다음 클라이언트 요약을 얻습니다. 아래는 모든 코드입니다.

import {
  WagmiConfig,
  createClient,
  configureChains,
  defaultChains,
} from "wagmi";
import { publicProvider } from "wagmi/providers/public";
//rainbow kit UI framework.
import "@rainbow-me/rainbowkit/styles.css";
import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";

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

const { connectors } = getDefaultWallets({
  appName: "My RainbowKit App",
  chains,
});

const client = createClient({
  autoConnect: true,
  connectors,
  provider,
});

클라이언트 요약에 전달할 수 있는 몇 가지 선택적 매개변수가 있습니다.

자동 연결

커넥터

공급자

저장

webSocetProvider

자세한 문서를 얻으려면 공식 웹사이트 참조: https://wagmi.sh/

클라이언트를 얻은 후 클라이언트와 체인을 MyApp 기능에 전달합니다.

function MyApp({ Component, pageProps }) {
  return (
    <WagmiConfig client={client}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  )
}

이것이 프로젝트에서 실제로 사용하기 전에 구성해야 하는 전부입니다.
기본적으로 지갑 연결과 같은 버튼을 만드는 것은 매우 간단합니다.
헤더 구성 요소에 버튼을 생성한다고 가정해 보겠습니다.
여기에 코드가 있습니다.
간단하죠?

import {
    useConnectModal,
    useAccountModal,
    useChainModal,
} from '@rainbow-me/rainbowkit';
import { useAccount } from 'wagmi'

const { openConnectModal } = useConnectModal();
const { openAccountModal } = useAccountModal();
const { openChainModal } = useChainModal();

react.js에서 클릭 이벤트 함수를 정의한 후 함수를 onClick 속성에 연결합니다.
그게 우리가 해야 할 전부야?
문제가 발생하면 언제든지 저를 연결해 주세요!

{isConnected ?
    (<><button class="btn btn-sm btn-outline btn-primary ml-3 normal-case" onClick={openAccountModal}>Profile</button><button class="btn btn-sm btn-outline btn-primary ml-3 normal-case" onClick={openChainModal}>Chain</button></>)
    :
    (<button class="btn btn-sm btn-outline btn-primary ml-3 normal-case" onClick={openConnectModal}>connect wallet</button>)
}

5.내 코드 보여주기

github : https://github.com/coffiasd/demo-wagmi-rainbowkit

데모: https://demo-wagmi-rainbowkit.vercel.app/