שילוב ConnectKit ב-dApp: חיבור ארנק והתאמה אישית

ConnectKit dApp Integration: חיבור ארנק והתאמה אישית

בעת שילוב חיבור ארנק ב-dApp, כל ספק מושך תלויות משלו, ורכיבי ממשק צריכים להתאים למערכת העיצוב. ConnectKit מ-Family פותר זאת על ידי מתן wrapper קל משקל מעל wagmi עם ממשק מוכן אך ניתן להתאמה מלאה.

בניגוד ל-RainbowKit, שיש לו מבנה נוקשה, ConnectKit בנוי על משתני CSS. אתה עוקף צבעים, רדיוסים, גופנים—ומקבל ממשק שאינו ניתן להבחנה מהמותג שלך. הוא תומך באותם ארנקים: MetaMask, Rabby, Frame, WalletConnect v2, Coinbase Wallet, ועוד.

כיצד אנו מגדירים את ConnectKit לפרויקט שלך

ההגדרה מתחילה עם createConfig מ-wagmi 2.x ו-getDefaultConfig מ-connectkit. להלן תבנית טיפוסית שאנו משתמשים בה בייצור:

import { createConfig, http } from 'wagmi';
import { mainnet, polygon, base } from 'wagmi/chains';
import { getDefaultConfig } from 'connectkit';

const config = createConfig(
  getDefaultConfig({
    chains: [mainnet, polygon, base],
    transports: {
      [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'),
      [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_KEY'),
      [base.id]: http('https://base-mainnet.g.alchemy.com/v2/YOUR_KEY'),
    },
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
    appName: 'Your dApp',
    appDescription: 'Description for wallet connection screen',
    appUrl: 'https://your-dapp.xyz',
    appIcon: 'https://your-dapp.xyz/icon.png',
  })
);

import { createConfig, http } from 'wagmi'; import { mainnet, polygon, base } from 'wagmi/chains'; import { getDefaultConfig } from 'connectkit'; const config = createConfig( getDefaultConfig({ chains: [mainnet, polygon, base], transports: { [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'), [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_KEY'), [base.id]: http('https://base-mainnet.g.alchemy.com/v2/YOUR_KEY'), }, walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!, appName: 'Your dApp', appDescription: 'Description for wallet connection screen', appUrl: 'https://your-dapp.xyz', appIcon: 'https://your-dapp.xyz/icon.png', }) ); מחבר אוטומטית injectors (MetaMask, Rabby, Frame), WalletConnect v2, ו-Coinbase Wallet. נדרש Project ID של WalletConnect—קבל אחד בחינם בcloud.walletconnect.com. ציון מפתח RPC מותאם אישית הוא אופציונלי; ניתן להשתמש ב-RPC ציבורי, אך לייצור אנו ממליצים על מפתח Alchemy או Infura משלך לשליטה בקצב ובמהירות.

הספק עוטף את האפליקציה:

'use client'; // Next.js App Router
export function Web3Provider({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

כפתור חיבור: פשוט ומותאם אישית

getDefaultConfig הוא רכיב מוכן עם מצב מלא:

import { ConnectKitButton } from 'connectkit'; // Готовый вариант — минимум кода
<ConnectKitButton />
// Кастомный рендер через render prop
<ConnectKitButton.Custom>
  {({ isConnected, isConnecting, show, address, ensName }) => (
    <button onClick={show} disabled={isConnecting}>
      {isConnected ? ensName ?? `${address?.slice(0, 6)}...${address?.slice(-4)}` : 'Подключить кошелёк'}
    </button>
  )}
</ConnectKitButton.Custom>

דרך תבנית 'use client'; // Next.js App Router export function Web3Provider({ children }: { children: React.ReactNode }) { return ( <WagmiProvider config={config}> <QueryClientProvider client={queryClient}> <ConnectKitProvider>{children}</ConnectKitProvider> </QueryClientProvider> </WagmiProvider> ); } , ConnectKit משתלב במלואו בכל מערכת עיצוב. ConnectKitButton פותח את מודל החיבור. אנו משתמשים לעתים קרובות באפשרות השנייה כדי לאחד כפתורים עם אלמנטים אחרים של ממשק.

כיצד להתאים אישית את ערכת הנושא של ConnectKit?

ConnectKit תומך בערכות נושא מובנות: auto, web95, retro, soft, midnight. אבל הכוח האמיתי הוא ב-import { ConnectKitButton } from 'connectkit'; // Готовый вариант — минимум кода <ConnectKitButton /> // Кастомный рендер через render prop <ConnectKitButton.Custom> {({ isConnected, isConnecting, show, address, ensName }) => ( <button onClick={show} disabled={isConnecting}> {isConnected ? ensName ?? `${address?.slice(0, 6)}...${address?.slice(-4)}` : 'Подключить кошелёк'} </button> )} </ConnectKitButton.Custom> דרך משתני CSS:

<ConnectKitProvider theme="midnight" customTheme={{ '--ck-font-family': '"Inter", sans-serif', '--ck-accent-color': '#6366f1', '--ck-accent-text-color': '#ffffff', '--ck-border-radius': '12px', '--ck-overlay-backdrop-filter': 'blur(8px)', }} > 

המשתנים מכסים הכל: רקעים, גבולות, צללים, גדלים. לרספונסיביות, השתמש ב-render prop או show. במצב auto, הערכת הנושא עוקבת אחרי המערכת ללא הבהובים. אנו מבטיחים שההתאמה האישית שומרת על נגישות וקריאות.

עבודה עם מצב הארנק

לאחר החיבור, השתמש ב-hooks הסטנדרטיים של wagmi:

import { useAccount, useBalance, useChainId, useSwitchChain } from 'wagmi';

function WalletInfo() {
  const { address, isConnected, chain } = useAccount();
  const { data: balance } = useBalance({ address });
  const { switchChain } = useSwitchChain();

  if (!isConnected) return null;

  return (
    <div>
      <p>{address}</p>
      <p>{balance?.formatted} {balance?.symbol}</p>
      {chain?.id !== base.id && (
        <button onClick={() => switchChain({ chainId: base.id })}>
          Переключиться на Base
        </button>
      )}
    </div>
  );
}

customTheme נותן כתובת ורשת, <ConnectKitProvider theme="midnight" customTheme={{ '--ck-font-family': '"Inter", sans-serif', '--ck-accent-color': '#6366f1', '--ck-accent-text-color': '#ffffff', '--ck-border-radius': '12px', '--ck-overlay-backdrop-filter': 'blur(8px)', }} > נותן יתרת מטבע מקורי, mode: 'light' | 'dark' מאפשר החלפת רשת. הכל עובד ישירות מהקופסה ללא הגדרה נוספת.

מדוע ConnectKit מהיר ופשוט יותר מאלטרנטיבות

מדד מפתח הוא נפח הקוד. להתאמת ערכת נושא, RainbowKit דורש עקיפת אובייקט שלם, בעוד ConnectKit דורש רק קבוצה של משתני CSS. בפועל, זה חוסך עד 40% מזמן האינטגרציה ומפשט את תחזוקת מערכת העיצוב.

בעיות נפוצות ופתרונותיהן

Hydration mismatch היא בעיה קלאסית של Next.js. פתרון: השתמש במצב בוליאני 'auto' והגדר אותו ל-true ב-import { useAccount, useBalance, useChainId, useSwitchChain } from 'wagmi'; function WalletInfo() { const { address, isConnected, chain } = useAccount(); const { data: balance } = useBalance({ address }); const { switchChain } = useSwitchChain(); if (!isConnected) return null; return ( <div> <p>{address}</p> <p>{balance?.formatted} {balance?.symbol}</p> {chain?.id !== base.id && ( <button onClick={() => switchChain({ chainId: base.id })}> Переключиться на Base </button> )} </div> ); } . הצג את כל הרכיבים שתלויים ב-useAccount רק כאשר useBalance.

תמיכה ב-Safe Wallet רלוונטית אם ה-dApp שלך משמש DAOs או multi-sigs. אנו מוסיפים אותו ידנית דרך connector נפרד—זה לוקח כ-15 דקות.

כמה זמן לוקחת האינטגרציה?

לוחות הזמנים הם משוערים—הכל תלוי במורכבות המחסנית שלך. אנו מחשבים עלות באופן אישי, ללא עמלות נסתרות. צור קשר כדי לדון בפרטים ולקבל הצעה מסחרית.

מה כלול בהיקף המלא

• קוד אינטגרציה עם הערות
• תיעוד התאמה אישית לצוות שלך
• גישה לסביבת בדיקות במהלך הפיתוח
• הכשרת מפתחי frontend על wagmi ו-ConnectKit
• תמיכה לאחר השחרור למשך שבועיים

אנו מבטיחים שהאינטגרציה לא תשבור פונקציונליות קיימת. בקש ייעוץ—נראה דוגמאות מיותר מ-50 פרויקטים שהושלמו.

מדוע לסמוך עלינו עם האינטגרציה?

יש לנו למעלה מחמש שנות ניסיון בפיתוח Web3. השלמנו יותר מ-50 אינטגרציות ארנק לפרוטוקולי DeFi, שווקי NFT ופלטפורמות משחק. המהנדסים שלנו הם תורמים בקוד פתוח לספריות wagmi ו-ConnectKit. אנו מכירים את כל המלכודות: מבאגי EIP-1193 ועד לבעיות החלפת רשת במכשירים ניידים. קבל ייעוץ עכשיו—ראה בעצמך את הניסיון שלנו עם יותר מ-50 מקרים אמיתיים.