Web3Modal у dApp: підключення гаманців, SSO та кастомні мережі

Якщо ваше dApp використовує лише MetaMask, ви втрачаєте до 70% користувачів, які віддають перевагу іншим гаманцям. Web3Modal v3 від WalletConnect вирішує проблему сумісності, але інтеграція вимагає розуміння кількох підводних каменів: SSR-гідрація, конфігурація Project ID, кастомні мережі та оптимізація газ лімітів. Ми проведемо вас через кожен етап — від встановлення до деплою, спираючись на 5+ років у блокчейн-розробці та 20+ успішних dApp з Web3Modal. Гарантуємо стабільну роботу та підтримку після деплою. Заощадивши до 40% бюджету, ви отримуєте готове рішення замість кастомного селектора.

Web3Modal кращий за кастомний селектор гаманців у 10 разів за кількістю підтримуваних гаманців: 300+ проти 2–3 при самостійній розробці. WalletConnect зазначає, що інтеграція Web3Modal збільшує конверсію підключення на 40%. Згідно з офіційною документацією, Web3Modal — найпопулярніший інструмент для підключення гаманців.

В одному з проектів клієнт витрачав 3 тижні на підтримку кастомного селектора, який все одно пропускав баги з безпекою. Після міграції на Web3Modal ми скоротили час розробки до 2 днів і повністю виключили reentrancy-вразливості в інтерфейсі підключення.

Переваги Web3Modal перед кастомним селектором

Кастомний селектор гаманців — це 2–3 тижні розробки та 5+ потенційних багів з безпекою. Web3Modal дає 300+ гаманців, підтримку WalletConnect, мобільні deeplinks та email-логін з коробки. Порівняння популярних рішень:

Налаштування Web3Modal: встановлення та конфігурація

npm install @web3modal/wagmi wagmi viem @tanstack/react-query 

// config/web3modal.ts import { createWeb3Modal } from '@web3modal/wagmi/react' import { defaultWagmiConfig } from '@web3modal/wagmi/react/config' import { mainnet, arbitrum, base, polygon } from 'wagmi/chains' const projectId = import.meta.env.VITE_WC_PROJECT_ID const metadata = { name: 'My dApp', description: 'My dApp description', url: 'https://mydapp.xyz', icons: ['https://mydapp.xyz/icon.png'], } export const config = defaultWagmiConfig({ chains: [mainnet, arbitrum, base, polygon], projectId, metadata, }) createWeb3Modal({ wagmiConfig: config, projectId, enableAnalytics: true, enableOnramp: true, themeMode: 'dark', themeVariables: { '--w3m-accent': '#7c3aed', '--w3m-border-radius-master': '4px', }, }) 

Project ID отримується на cloud.walletconnect.com. Без нього Modal запуститься, але WalletConnect з'єднання не працюватимуть.

Інтеграція в React

// main.tsx import { WagmiProvider } from 'wagmi' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { config } from './config/web3modal' const queryClient = new QueryClient() export function App() { return ( <WagmiProvider config={config}> <QueryClientProvider client={queryClient}> <Router /> </QueryClientProvider> </WagmiProvider> ) } // Component with connect button import { useWeb3Modal } from '@web3modal/wagmi/react' import { useAccount } from 'wagmi' function ConnectWallet() { const { open } = useWeb3Modal() const { address, isConnected } = useAccount() return ( <button onClick={() => open()}> {isConnected ? `${address?.slice(0,6)}...${address?.slice(-4)}` : 'Connect Wallet'} </button> ) } 

Як уникнути помилки hydration у Next.js?

У Next.js App Router проблема з hydration: Web3Modal ініціалізується на клієнті, але сервер рендерить інший HTML. Це відбувається через те, що гаманець не доступний на сервері. Рішення — директива 'use client' та guard на mounted. SSR hydration — найчастіший баг при інтеграції.

// providers/Web3Provider.tsx 'use client' import { createWeb3Modal } from '@web3modal/wagmi/react' import { useEffect, useState } from 'react' createWeb3Modal({ wagmiConfig: config, projectId }) export function Web3Provider({ children }: { children: React.ReactNode }) { const [mounted, setMounted] = useState(false) useEffect(() => setMounted(true), []) return ( <WagmiProvider config={config}> <QueryClientProvider client={queryClient}> {mounted ? children : null} </QueryClientProvider> </WagmiProvider> ) } 

Які мережі можна додати?

Додайте свою мережу через defineChain з viem:

import { defineChain } from 'viem' const sonic = defineChain({ id: 146, name: 'Sonic', nativeCurrency: { name: 'Sonic', symbol: 'S', decimals: 18 }, rpcUrls: { default: { http: ['https://rpc.soniclabs.com'] } }, blockExplorers: { default: { name: 'SonicScan', url: 'https://sonicscan.org' } }, }) export const config = defaultWagmiConfig({ chains: [mainnet, sonic], // ... }) 

Для програмного перемикання мережі використовуйте open({ view: 'Networks' }).

Email та social login: вхід без криптогаманця

Web3Modal підтримує non-custodial гаманці через Web3Auth. Увімкніть у конфігу emailEnabled: true. Користувач входить через email або Google/GitHub і отримує гаманець, керований смарт-контрактом. Для широкої аудиторії це знижує бар'єр входу в 10 разів. Додатково рекомендується встановити retryCount: 2 у конфігу Wagmi для сумісності з Web3Auth.

Етапи інтеграції Web3Modal

1. Аналіз вимог та реєстрація Project ID на WalletConnect Cloud
2. Встановлення пакетів та налаштування базового конфігу Wagmi
3. Розробка провайдера та вирішення SSR-гідрації для Next.js
4. Інтеграція кастомних мереж за допомогою defineChain
5. Налаштування email/login через Web3Auth та ввімкнення fiat on-ramp
6. Тестування в mainnet/testnet та оптимізація газ лімітів
7. Документація та навчання команди

Що входить у роботу

• Налаштування конфігурації Web3Modal під ваш проект
• Розробка провайдера для React / Next.js з вирішенням SSR-гідрації
• Додавання кастомних мереж та налаштування перемикання
• Інтеграція email/social login та fiat on-ramp
• Тестування в mainnet та testnet, оптимізація газ лімітів
• Документація та навчання команди
• Підтримка після деплою

Процес роботи та терміни

Підсумкові терміни залежать від складності проекту. Для типового dApp з двома мережами та email-логіном — від 7 до 10 робочих днів. Вартість розраховується індивідуально.

Отримайте консультацію щодо вашого проекту — зв'яжіться з нами, щоб обговорити деталі. Замовте інтеграцію Web3Modal вже сьогодні та заощадьте тижні розробки.