שילוב WalletConnect לכניסה עם ארנק קריפטו באתר שלך

שילוב WalletConnect לכניסה עם ארנק קריפטו באתר שלך

בנית dApp ונתקלת בבעיה: משתמשים לא יכולים להיכנס מארנק נייד. תוספי דפדפן כמו MetaMask לא עובדים בטלפונים, ושילוב כל ארנק בנפרד הוא כאב ראש אינסופי. אנחנו פותרים את זה עם WalletConnect—פרוטוקול פתוח שמאפשר חיבור של 400+ ארנקים תוך כמה ימים דרך קוד QR או קישור עמוק. להלן איך אנחנו עושים את זה, עם קוד ותצורות אמיתיות. אם אתה מחפש פתרון אימות Web3 מוכן, פנה אלינו: ניישם את השילוב בהתאמה לדרישות שלך.

למה WalletConnect v2, לא v1?

WalletConnect v2 (דרך Reown AppKit) החליף לחלוטין את הגרסה הראשונה. הוא מהיר יותר: החיבור לוקח פחות משנייה לעומת כמה שניות ב-v1. תומך בריבוי שרשראות: יכול להתחבר בו-זמנית ל-Ethereum, Polygon ו-Arbitrum (עד 5 רשתות). והכי חשוב—אימות מובנה דרך חתימת הודעה (EIP-712). V1 כבר לא נתמך ולא מומלץ לפרויקטים חדשים.

איך עובד חיבור הארנק

התהליך נראה כך:

1. המשתמש לוחץ על "Connect Wallet".
2. נוצרת סשן WalletConnect, ומוצג קוד QR או קישור עמוק.
3. הארנק של המשתמש סורק את הקוד, וחותם על בקשת החיבור.
4. ה-dApp מקבל את כתובת הארנק ויכול לבקש חתימות על עסקאות.

לאימות, אנחנו בנוסף מבקשים חתימת הודעה (Sign-in with Ethereum): המשתמש חותם על nonce, השרת מאמת את החתימה ומנפיק טוקן JWT. בלי סיסמאות.

איך מובטחת אבטחת האימות?

פרוטוקול WalletConnect משתמש בהצפנה מקצה לקצה ואינו מאחסן מפתחות פרטיים על השרת.

אימות דרך חתימת nonce מגן מפני התקפות replay. ה-nonce נוצר על ידי השרת, יש לו זמן חיים קצר (בדרך כלל 5 דקות), והוא מבוטל לאחר השימוש. ניתן להגדיר הגבלות CORS נוספות בצד ה-API.

יישום ב-React + Wagmi (AppKit)

התקן את החבילות:

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi [email protected] @tanstack/react-query 

רשום את הפרויקט ב-Reown Cloud (תוכנית חינמית – עד 50,000 משתמשים פעילים בחודש). קבל את ה-projectId.

קוד החיבור:

import { createAppKit } from '@reown/appkit/react';
import { WagmiProvider } from 'wagmi';
import { mainnet, polygon, arbitrum } from '@reown/appkit/networks';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();
const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID;
const networks = [mainnet, polygon, arbitrum];

const wagmiAdapter = new WagmiAdapter({ networks, projectId });

createAppKit({
  adapters: [wagmiAdapter],
  networks,
  projectId,
  metadata: {
    name: 'My App',
    description: 'My Web3 Application',
    url: 'https://example.com',
    icons: ['https://example.com/icon.png']
  },
  features: {
    analytics: false,
    email: false,
    socials: false
  }
});

function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <YourApp />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

כפתור החיבור ואימות

import { useAppKit, useAppKitAccount } from '@reown/appkit/react';
import { useSignMessage } from 'wagmi';

function ConnectButton() {
  const { open } = useAppKit();
  const { address, isConnected } = useAppKitAccount();
  const { signMessageAsync } = useSignMessage();

  const handleLogin = async () => {
    if (!isConnected) {
      await open();
      return;
    }

    // Авторизация через подпись
    const nonce = await fetch(`/api/auth/nonce?address=${address}`)
      .then(r => r.json())
      .then(d => d.nonce);

    const message = `Авторизация на example.com\nNonce: ${nonce}`;
    const signature = await signMessageAsync({ message });

    const { token } = await fetch('/api/auth/web3', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ address, signature, message })
    }).then(r => r.json());

    setAuthToken(token);
  };

  return (
    <button onClick={handleLogin}>
      {isConnected ? `Войти как ${address?.slice(0, 6)}...` : 'Подключить кошелёк'}
    </button>
  );
}

הגדרת קישור עמוק לארנקים ניידים

קישור עמוק מאפשר לפתוח את הארנק ישירות מהאתר במכשיר נייד, תוך עקיפת קוד ה-QR. אנחנו מגדירים universal link ל-iOS ו-intent ל-Android. ב-Reown Cloud, הפעל קישור עמוק בהגדרות הפרויקט וציין סכמות נתמכות (לדוגמה, npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi [email protected] @tanstack/react-query ). לפעולה תקינה ב-Android, נדרש טיפול ב-intent דרך import { createAppKit } from '@reown/appkit/react'; import { WagmiProvider } from 'wagmi'; import { mainnet, polygon, arbitrum } from '@reown/appkit/networks'; import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID; const networks = [mainnet, polygon, arbitrum]; const wagmiAdapter = new WagmiAdapter({ networks, projectId }); createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata: { name: 'My App', description: 'My Web3 Application', url: 'https://example.com', icons: ['https://example.com/icon.png'] }, features: { analytics: false, email: false, socials: false } }); function App() { return ( <WagmiProvider config={wagmiAdapter.wagmiConfig}> <QueryClientProvider client={queryClient}> <YourApp /> </QueryClientProvider> </WagmiProvider> ); } .

טיפול בשגיאות חיבור

חשוב לטפל בשגיאות: דחיית משתמש, timeout, רשת לא נתמכת. Wagmi AppKit מספק את ה-hooks import { useAppKit, useAppKitAccount } from '@reown/appkit/react'; import { useSignMessage } from 'wagmi'; function ConnectButton() { const { open } = useAppKit(); const { address, isConnected } = useAppKitAccount(); const { signMessageAsync } = useSignMessage(); const handleLogin = async () => { if (!isConnected) { await open(); return; } // Авторизация через подпись const nonce = await fetch(`/api/auth/nonce?address=${address}`) .then(r => r.json()).then(d => d.nonce); const message = `Авторизация на example.com\nNonce: ${nonce}`; const signature = await signMessageAsync({ message }); const { token } = await fetch('/api/auth/web3', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ address, signature, message }) }).then(r => r.json()); setAuthToken(token); }; return ( <button onClick={handleLogin}> {isConnected ? `Войти как ${address?.slice(0, 6)}...` : 'Подключить кошелёк'} </button> ); } ו-wc:. אנחנו מוסיפים fallback: אם החיבור נכשל, מציעים אפשרות להשתמש בתוסף דפדפן. אנחנו גם מתעדים אירועים לניפוי באגים.

Project ID

WalletConnect v2 דורש רישום פרויקט ב-Reown Cloud כדי לקבל WalletConnectBridge. תוכנית חינמית: עד 50,000 משתמשים פעילים בחודש. זה מספיק לרוב הסטארטאפים. אם יש צורך בנפח גדול, קיימות תוכניות בתשלום.

ארנקים נתמכים

WalletConnect עובד עם MetaMask Mobile, Trust Wallet, Rainbow, Coinbase Wallet, Ledger Live, Argent, Safe, ומאות אחרים. לנייד—קוד QR או קישור אוניברסלי.

השוואת תוכניות Reown Cloud

מה כלול בעבודה?

• רישום פרויקט והגדרת מפתח API.
• פיתוח רכיב חיבור הארנק (כפתור, מודאל, טיפול במצבים).
• יישום אימות דרך חתימת הודעה (Sign-in with Ethereum).
• תמיכה בריבוי שרשראות (עד 5 רשתות).
• תיעוד אינטגרציה והוראות למשתמש.
• אחריות תאימות לארנקים מרכזיים.

לוחות זמנים

אינטגרציה בסיסית של WalletConnect עם אימות—3–5 ימים. אם יש צורך במודאל מותאם אישית, קישור עמוק או קישורי הפניה—עד שבועיים. נעריך את הפרויקט שלך—צור קשר כדי לדון בפרטים.

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