RainbowKit과 React로 아름다운 Connect Wallet 버튼 만들기

16390 단어 javascriptreactnextjsweb3
Web3의 인증은 매우 쉽지만 모든 지갑을 지원하고 멋진 UI를 만드는 것은 고통스럽고 시간이 많이 소요될 수 있습니다. 고맙게도 이것을 매우 쉽게 해주는 많은 라이브러리가 있습니다. 오늘은 React 앱에 RainbowKit을 추가하는 방법을 살펴보겠습니다.

RainbowKit이란 무엇입니까?



RainbowKit은 몇 줄의 코드로 Connect Wallet UI를 구축하기 위한 구성 요소를 제공하는 React 라이브러리입니다. Metamask, Rainbow, Coinbase Wallet, WalletConnect 등을 포함한 많은 지갑을 지원합니다. 또한 매우 사용자 정의가 가능하며 놀라운 내장 테마가 함께 제공됩니다.

RainbowKit은 내부적으로 이 공간에서 널리 사용되는 라이브러리인 Ethers.js 및 Wagmi 을 사용합니다.

또한 beautifulRainbow Wallet 뒤에 있는 같은 팀에서 개발했습니다.

새 Next.js 앱 만들기



다음 명령을 실행하여 새 Next.js 앱을 만듭니다(일반 React 앱에서도 사용할 수 있음).

# With NPM
npx create-next-app rainbowkit-demo
# With yarn
yarn create next-app rainbowkit-demo


이제 프로젝트 디렉토리로 이동하여 선호하는 코드 편집기에서 엽니다.

React 앱에 RainbowKit 추가



다음 명령을 실행하여 RainbowKit 및 해당 피어 종속성을 설치합니다.

# With NPM
npm install @rainbow-me/rainbowkit wagmi ethers
# With yarn
yarn add @rainbow-me/rainbowkit wagmi ethers


이제 다음 코드를 pages/_app.js에 추가합니다.

import "../styles/globals.css";

import "@rainbow-me/rainbowkit/styles.css";

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { chain, createClient, WagmiProvider } from "wagmi";

const { chains, provider } = configureChains(
  [
    chain.mainnet,
    chain.polygon,
    chain.goerli,
    chain.rinkeby,
    chain.polygonMumbai,
  ],
  [apiProvider.fallback()]
);

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

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

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

export default MyApp;


먼저 RainbowKit 스타일, RainbowKitPovider 및 기타 기능을 가져와 체인을 구성하고 WagmiProvider .

다음으로 지원하려는 체인을 구성합니다. 이 예에서는 Ethereum Mainnet, Polygon Mainnet, Goerli 및 Rinkeby(둘 다 Ethereum 테스트 네트워크) 및 Polygon Mumbai 테스트넷을 추가했습니다. API 공급자를 위한 이 데모의 목적으로 공개 대체 RPC URL을 사용하고 있습니다. 또한 RainbowKit을 사용하면 API 공급자에 대한 자체 JSON RPC URL 또는 Alchemy 또는 Infura URL을 지정할 수 있습니다. API Providers documentation here 을 볼 수 있습니다.

다음으로 wagmiClient 를 만들고 autoConnect 를 전달하고 true 로 설정합니다. 우리 앱은 이런 식으로 마지막으로 사용한 커넥터에 자동으로 다시 연결됩니다.

마지막으로 WagmiProvider 및 RainbowKitProvider 로 응용 프로그램을 래핑합니다.

다음으로 Connect Wallet 버튼을 앱에 추가하겠습니다. pages/index.js의 코드를 다음으로 바꿉니다.

import { ConnectButton } from "@rainbow-me/rainbowkit";
import Head from "next/head";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>RainbowKit Demo</title>
        <meta
          name="description"
          content="Demo app part of a tutorial on adding RainbowKit to a React application"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title} style={{ marginBottom: "4rem" }}>
          Welcome to this demo of{" "}
          <a href="https://www.rainbowkit.com/">RainbowKit</a>
        </h1>

        <ConnectButton />
      </main>
    </div>
  );
}


이제 npm run dev 또는 yarn dev를 실행하고 브라우저에서 localhost:3000을 열면 다음과 같이 표시됩니다.



다크모드로 만들기 🌑



더 이상 눈이 따가워지지 않도록 할 시간입니다.
pages/_app.js로 이동하여 RainbowKit에서 midnightTheme 함수를 가져옵니다. (또는 자정의 디머 버전인 darkTheme 함수를 가져올 수도 있습니다)

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  midnightTheme,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";


또한 테마를 RainbowKitProvider에 전달해야 합니다.

<RainbowKitProvider chains={chains} theme={midnightTheme()}>


RainbowKit은 고급 테마를 지원합니다. 자세한 내용은 RainbowKit Theming docs here을 참조하십시오.

또한 styles/globals.css에 이 작은 코드를 추가하여 앱을 어두운 모드로 만듭니다.

body {
  background-color: #010101;
  color: #f0f0f0;
}


이제 앱은 다음과 같아야 합니다.



RainbowKit 둘러보기



지갑으로 인증한 후 연결 버튼은 잔액과 지갑 주소를 보여주는 네트워크 전환기로 자동 변경됩니다.



네트워크 전환은 네트워크 전환기를 클릭한 다음 전환하려는 네트워크를 선택하는 것만큼 쉽습니다.



지갑 주소를 클릭하면 주소를 복사하거나 지갑 연결을 끊을 수 있는 옵션이 있는 모달이 제공됩니다.



쿨모드 😎



응용 프로그램을 좀 더 멋지게 만들어 봅시다 :)coolMode 소품을 RainbowKitProvider에 추가하기만 하면 됩니다.

<RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>


이제 연결 모달의 옵션 중 하나를 클릭하면 놀라운 색종이 조각이 나타납니다 🎊



결론



이것은 RainbowKit이 할 수 있는 일에 대한 기본 데모였지만 최근 거래를 표시하는 것과 같은 훨씬 더 많은 일을 할 수 있습니다. 이에 대해 자세히 알아볼 수 있는 가장 좋은 곳은 RainbowKit docs 입니다.

중요한 링크


  • Source Code
  • Deployed Preview
  • RainbowKit
  • RainbowKit GitHub
    • (자신 용) docker + code-server, cloud9에서 C# 환경 만들기
    JavaScript의 Cache API - 단 20줄의 코드만 있으면 됩니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage