3 способа подключить кошелёк в 2023

Привет! В этой статье я расскажу о трёх библиотеках для подключения EVM-кошелька в web3-приложение.

Web3Modal

Это библиотека от WalletConnect, поэтому здесь всегда будет отличная поддержка свежих версий WC. Кастомизируется через CSS-переменные, хотя кастомизация не очень глубокая. У них нет интеграции с Sign In With Ethereum, но зато есть своё облачное решение для аутентификации — WalletConnect Auth. Если вас не беспокоит вендор лок, то выглядит это удобнее чем SIWE.

Пример кода

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal, Web3Button } from '@web3modal/react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { arbitrum, mainnet, polygon } from 'wagmi/chains'

const chains = [arbitrum, mainnet, polygon]
const projectId = 'YOUR_PROJECT_ID'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, version: 1, chains }),
  publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)

function App() {
  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <HomePage />
      </WagmiConfig>

      <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
      
      <Web3Button />
    </>
  )
}

Кстати, Web3Modal поддерживает не только Реакт, в отличие от аналогов.

RainbowKit

Библиотека от создателей кошелька Rainbow, интерфейс подключения кошелька сделан в том же стиле. Самый главный минус это, пожалуй, очень скудная кастомизация, в которой даже нельзя задать начертание для шрифта. Есть интеграция с Sign In With Ethereum.

Пример кода

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

import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, publicClient } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

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

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient
})

const App = () => {
  return (
    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider chains={chains}>
        /* Your App */
        <ConnectButton />
      </RainbowKitProvider>
    </WagmiConfig>
  );
};

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

ConnectKit

Моя любимая библиотека: минималистичный интерфейс, приятные анимации, чем-то напоминает Телеграм. Глубоко кастомизируется, можно даже аватарку подгрузить произвольную. Тоже есть интеграция с Sign In With Ethereum.

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

Пример кода

import { WagmiConfig, createClient } from "wagmi";
import { ConnectKitProvider, ConnectKitButton, getDefaultClient } from "connectkit";

const alchemyId = process.env.ALCHEMY_ID;

const client = createClient(
  getDefaultClient({
    appName: "Your App Name",
    alchemyId,
  }),
);

const App = () => {
  return (
    <WagmiConfig client={client}>
      <ConnectKitProvider>
        /* Your App */
        <ConnectKitButton />
      </ConnectKitProvider>
    </WagmiConfig>
  );
};

Удобно, что в документации ConntectKit есть чеклист того, что нужно проверить перед деплоем в продакшн.

Бонус: @viaprotocol/web3-wallets

Библиотека от команды via.exchange. Не уверен, что она ещё активно поддерживается, но если вам нужно подключать не только EVM-кошельки, то можно обратить внимание на то, как это сделано здесь. Библиотека может работать с кошельками для Solana, Tron, Bitcoin. Полный список сетей можно посмотреть в файле networks.ts.

Пример кода

import { useContext } from 'react'
import { WalletContext, WalletProvider } from '@viaprotocol/web3-wallets'

function App() {
  return (
    <WalletProvider>
      <NestedComponent />
    </WalletProvider>
  )
}

function NestedComponent() {
  const { connect, isConnected, address } = useContext(WalletContext)

  if (!isConnected) {
    return (
      // Select MetaMask and connect to ETH Mainnet
      <button
        type="button"
        onClick={() => connect({ name: 'MetaMask', chainId: 1 })}
      >Connect wallet</button>
    )
  }

  return (
    <p>{address}</p>
  )
}