Kurulum

Kurulum

RainbowKit ile hızlı bir başlangıç yapın

Tercih ettiğiniz paket yöneticisini kullanarak, aşağıdaki komutlardan biriyle yeni bir RainbowKit + wagmi + Next.js uygulaması oluşturabilirsiniz.

npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

Bu, sizden bir proje adı girmenizi isteyecek, bir şablon projeyi içeren yeni bir dizin oluşturacak ve gerekli tüm bağımlılıkları yükleyecektir.

Alternatif olarak, RainbowKit'i mevcut projenize manuel olarak entegre edebilirsiniz.

RainbowKit ve yan bağımlılıkları olan wagmi, viem ve @tanstack/react-query kütüphanelerini yükleyin.

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

Not: RainbowKit bir React kütüphanesidir.

RainbowKit, Wagmi ve TanStack Query'i içe aktarın.

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

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

İstediğiniz zincirleri yapılandırın ve gerekli konektörleri oluşturun. DApp'iniz sunucu tarafı render (SSR) kullanıyorsa, ssr'yi true olarak ayarladığınızdan emin olun.

Not: WalletConnect’e güvenen her dApp şimdi WalletConnect Cloud üzerinden bir projectId edinmelidir. Bu tamamen ücretsizdir ve sadece birkaç dakika sürer.

...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

Uygulamanızı RainbowKitProvider, WagmiProvider ve QueryClientProvider ile sarın.

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Ardından, uygulamanızda ConnectButton bileşenini içe aktarın ve render edin.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKit artık kullanıcılarınızın cüzdan seçimini gerçekleştirecek, cüzdan/işlem bilgilerini gösterecek ve ağ/cüzdan değişikliklerini yönetecektir.

Bazı yapı araçları ek ayarlar gerektirecektir.

Remix kullanırken buffer, events ve http modüllerini polyfill yapmanız gerekmektedir. aşağıdaki Remix yapılandırmasına veya örnek Remix projemize bakabilirsiniz.

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};

Varsayılan olarak, dApp'iniz her zincir için bakiye sorgulamak, ENS adlarını çözmek ve daha fazlası için genel RPC sağlayıcılarını kullanır. Bu, kullanıcılarınız için genellikle güvenilirlik sorunlarına yol açar çünkü genel düğümler sınırlıdır. Bunun yerine, Alchemy veya QuickNode gibi hizmetler aracılığıyla bir RPC sağlayıcısına erişim satın almalı ve Wagmi'de kendi Taşımacılığınızı tanımlamalısınız. Bu, getDefaultConfig içindeki transports parametresini ekleyerek veya doğrudan Wagmi'nin createConfig ile sağlanabilir.

Bir Ulaştırma, JSON-RPC isteklerini Ethereum Düğüm Sağlayıcısına (Alchemy, Infura vb. gibi) gönderen ağ orta katmanıdır.

Bir http taşıma örneği

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});

Daha fazla ayrıntı için wagmi taşıma belgelerine bakın.

Artık kullanıcılarınız cüzdanlarını bağlayabildiğine göre, wagmi kullanarak uygulamanızın geri kalanını oluşturmaya başlayabilirsiniz.

İşlemler gönderin, sözleşmelerle etkileşimde bulunun, ENS detaylarını çözün ve wagmi'nin kapsamlı React Çengelleri serisi ile daha birçok şey yapın.

Daha fazla ayrıntı için wagmi belgelerine bakın.

RainbowKit çalışır durumda daha fazla örnek görmek veya hatta yeni bir proje oluşturmak için onların otomatik yazılım çatısını kullanmak için resmi örneklere göz atın.

RainbowKit'i doğrudan tarayıcınızda denemek için aşağıdaki CodeSandbox bağlantılarına göz atın:

• Create React App ile
• Next.js ile
• Next.js App Router ile
• Remix ile
• Vite ile
• React Router ile