Создание красивой кнопки подключения кошелька с помощью RainbowKit и React

Аутентификация в Web3 чрезвычайно проста, но поддержка всех кошельков и создание красивого пользовательского интерфейса может быть болезненной и отнимать много времени. К счастью, существует множество библиотек, которые делают это чрезвычайно просто. Сегодня мы рассмотрим добавление RainbowKit в приложение React.

Что такое RainbowKit?

RainbowKit — это библиотека React, которая предоставляет нам компоненты для создания пользовательского интерфейса кошелька Connect в несколько строк кода. Она поставляется с поддержкой многих кошельков, включая Metamask, Rainbow, Coinbase Wallet, WalletConnect и многие другие. Он также чрезвычайно настраиваемый и поставляется с удивительной встроенной темой.

RainbowKit использует Ethers.js и Wagmi, обе популярные библиотеки в этом пространстве, под капотом.

Кроме того, он разработан той же командой, которая стоит за прекрасным кошельком Rainbow Wallet.

Создание нового приложения Next.js

Выполните следующую команду для создания нового приложения Next.js (обратите внимание, что вы можете использовать ее и для обычного приложения React).

# With NPM
npx create-next-app rainbowkit-demo
# With yarn
yarn create next-app rainbowkit-demo
Войдите в полноэкранный режим Выйти из полноэкранного режима

Теперь перейдите в каталог проекта и откройте его в вашем любимом редакторе кода.

Добавление RainbowKit в наше приложение React

Выполните следующую команду для установки 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. Для целей данной демонстрации мы используем публичные URL-адреса RPC для наших поставщиков API. RainbowKit также позволяет нам указывать собственные JSON RPC URL или URL Alchemy или Infura для наших API-провайдеров. Вы можете ознакомиться с документацией по API-провайдерам здесь.

Далее мы создаем наш 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 и импортируйте функцию midnightTheme из RainbowKit. (В качестве альтернативы вы также можете импортировать функцию darkTheme, более тусклую версию midnight).

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  midnightTheme,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы также должны передать нашу тему в RainbowKitProvider

<RainbowKitProvider chains={chains} theme={midnightTheme()}>
Вход в полноэкранный режим Выйти из полноэкранного режима

RainbowKit поддерживает более продвинутые темы, вы можете посмотреть документацию RainbowKit Theming здесь для получения дополнительной информации.

Также добавьте этот небольшой фрагмент кода в styles/globals.css, чтобы сделать наше приложение темным.

body {
  background-color: #010101;
  color: #f0f0f0;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь наше приложение должно выглядеть следующим образом —

Экскурсия по RainbowKit

После аутентификации с кошельком, наша кнопка подключения автоматически изменится на переключатель сети, который также покажет нам наш баланс и адрес кошелька.

Переключить сеть так же просто, как нажать на переключатель сетей, а затем выбрать сеть, на которую мы хотим переключиться —

При нажатии на адрес нашего кошелька появляется модальное окно с возможностью скопировать наш адрес или отключить наш кошелек —

Прохладный режим 😎

Давайте сделаем наше приложение немного круче 🙂
Просто добавьте свойство coolMode к RainbowKitProvider.

<RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь, если мы нажмем на любую из опций в модале подключения, мы получим несколько удивительных конфетти 🎊.

Заключение

Это была базовая демонстрация того, что может RainbowKit, но он может делать гораздо больше, например, показывать последние транзакции. Лучшее место, чтобы узнать больше об этом, — документация RainbowKit.

Важные ссылки

  • Исходный код
  • Развернутый предварительный просмотр
  • RainbowKit
  • RainbowKit GitHub

Оцените статью
Procodings.ru
Добавить комментарий