Kurulum

Kurulum

RainbowKit ile çalışmaya başlayın

Paket yöneticinizin tercihine göre, aşağıdaki komutlardan biriyle yeni bir RainbowKit + wagmi + Next.js uygulamasını scaffold edebilirsiniz:

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

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

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

RainbowKit ve eş bağımlılıkları olan wagmi, viem ve @tanstack/react-query kurun.

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

Not: RainbowKit, bir React kütüphanesidir.

RainbowKit, Wagmi ve TanStack Query'yi 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 bağlayıcıları oluşturun. Ayrıca bir wagmi konfigürasyonu kurmanız gerekecek. Eğer dApp'iniz sunucu tarafı oluşturma (SSR) kullanıyorsa, ssr'yi true olarak ayarladığınızdan emin olun.

Not: Artık WalletConnect'e dayanan her dApp'in, WalletConnect Cloud üzerinden bir projectId alması gerekiyor. 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>
  );
};

Sonra, 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ınızın cüzdan seçimini, cüzdan/ işlem bilgilerini göstermeyi ve ağ/cüzdan değiştirmeyi ele alacak.

Bazı build araçları ek kurulum gerektirecektir.

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

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

Varsayılan olarak, dApp'iniz, dengeleri getirmek, ENS adlarını çözmek ve daha fazlası için her zincir için genel RPC sağlayıcılarını kullanır. Bu, genellikle kullanıcılarınız için güvenilirlik sorunlarına neden olabilir, çünkü genel nodlar oran 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 Transportlarınızı tanımlamalısınız. Bu, getDefaultConfig içine transports parametresini ekleyerek veya doğrudan Wagmi'nin createConfig yoluyla gerçekleştirilebilir.

Transport, JSON-RPC isteklerini Ethereum Node Sağlayıcısına (Alchemy, Infura, vb. gibi) göndermeyi yöneten ağın orta katmanıdır.

http transport ile örnek

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 transport belgelerini görüntüleyin.

Artık kullanıcılarınız cüzdanlarını bağlayabilir, wagmi kullanarak uygulamanızın geri kalanını oluşturmaya başlayabilirsiniz

Wagmi'nin kapsamlı React Hooks seti ile işlemler gönderin, sözleşmelerle etkileşimde bulunun, ENS detaylarını çözün ve çok daha fazlasını yapın.

Daha fazla ayrıntı için, wagmi belgelerini görüntüleyin

RainbowKit örneklerinin bazılarını çalıştırmanın yada yeni bir proje otomatik olarak oluşturmak için kullanmanın yollarını görmek için, resmi örnekleri kontrol edin.

RainbowKit'i doğrudan tarayıcınızda denemek için aşağıdaki CodeSandbox linklerini kontrol edin:

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