НОВОЕ: Helius приобретает Light Protocol
руководство по встроенным кошелькам Solana с использованием Helius и Dynamic SDK
Блог/Разработка

Онбординг в приложениях Solana: аргументы в пользу встроенных кошельков

Разработка пользовательского опыта @ Dynamic.xyzMatthew Foyle в XMatthew Foyle в LinkedIn
Чтение: 7 мин

У вас есть революционная идея для мобильного или веб-приложения.

Вы знаете, что Solana — идеальный блокчейн для разработки, и хотите быстро запустить многофункциональный продукт, который привлечет пользователей с первого дня.

Какие инструменты разработчика помогут воплотить эту идею?

Cursor и v0, скорее всего, занимают верхние позиции в вашем списке, а Next.js — один из главных кандидатов на роль фронтенд-фреймворка.

Но какие решения помогут учесть специфические требования Solana, обеспечить плавный запуск и эффективно масштабировать приложение?

Для разработки и масштабирования на Solana нужны два ключевых компонента:

  1. Удобное решение для онбординга, аутентификации и управления кошельками
  2. Надежные RPC-сервисы для обработки высокопроизводительных транзакций

Эти компоненты не только упрощают разработку, но и обеспечивают удобство для пользователей.

Рассмотрим каждый из них подробнее.

Solana Wallet Adapter

Самый простой способ онбординга — подключить пользователей через существующий кошелек, например Phantom или Solflare. Этот метод подходит пользователям, которые знакомы с Solana и уже настроили кошельки.

Хорошей отправной точкой станет Solana Wallet Adapter, который предлагает:

  • Стандартизированный API для простой интеграции
  • Базовые функции для подключения кошельков и подписания транзакций
  • Гибкость открытого исходного кода для адаптации к потребностям вашего приложения

Solana Wallet Adapter быстро и просто внедряется, поэтому это надежный выбор для пользователей с существующими кошельками.

Помимо поддержки нескольких кошельков, он предлагает стандартизированную интеграцию для единообразной работы с кошельками и готовые UI-компоненты, например кнопки подключения кошелька. Кроме того, он оптимизирует производительность, позволяя подписывать и отправлять транзакции быстрее, чем при использовании низкоуровневых API вроде window.solana.

Открытый исходный код Solana Wallet Adapter позволяет разработчикам адаптировать его под конкретные требования приложения. Реализации от сообщества также расширяют совместимость с такими фреймворками и технологиями, как Vue, Angular, Svelte и TypeScript.

Однако адаптер добавляет в проект дополнительные зависимости, что может усложнить работу разработчиков.

Адаптер предоставляет множество готовых функций, но для глубокой настройки может потребоваться изучить его кодовую базу или создать обходные решения. В зависимости от сценария это может занять много времени.

Как и в случае с любой сторонней библиотекой, разработчики могут столкнуться с ошибками или проблемами вне своего контроля. Они способны повлиять на стабильность приложения или потребовать внешней поддержки.

Адаптер кошельков удобен для пользователей, знакомых с криптовалютами, но не подходит для привлечения более широкой аудитории. Особенно это касается пользователей, которые не знакомы с блокчейном или еще не имеют кошелька.

Онбординг новых пользователей с помощью встроенных кошельков

Встроенные кошельки могут значительно улучшить онбординг в Solana и помочь разработчикам привлечь больше пользователей. Новые пользователи могут зарегистрироваться и автоматически получить кошелек прямо в приложении.

Это позволяет пользователям:

  • Начать работу без настройки стороннего кошелька
  • Беспрепятственно получать активы
  • Совершать ончейн-транзакции

Такой подход снижает барьеры и особенно полезен для пользовательских приложений, рассчитанных на массовое распространение.

По данным Dynamic, более 50% пользователей выбирают встроенный кошелек, а не подключают существующий.

Однако показатели использования зависят от способа онбординга и целевой аудитории.

Пользователи, знакомые с криптовалютами, чаще подключают существующие кошельки, а массовая аудитория, вероятно, предпочтет удобство встроенных решений.

Важно найти правильный баланс.

Розничная ликвидность по-прежнему сосредоточена преимущественно в горячих кошельках. Поэтому, хотя встроенные кошельки упрощают онбординг, они не всегда будут лучшей отправной точкой. Разработчикам следует учитывать первоначальную целевую аудиторию и создавать процесс онбординга с учетом потребностей пользователей.

Комплексный SDK для онбординга и инфраструктуры кошельков

Разработчикам, которым нужны дополнительные возможности помимо функций Solana Wallet Adapter, такие решения, как SDK от Dynamic, предлагают более комплексный подход.

С Dynamic вы можете:

1. Поддерживать несколько вариантов кошельков

Позвольте пользователям подключать существующие кошельки Solana, например Phantom, и создавайте встроенные кошельки для новых пользователей.

2. Включить вход через социальные сети и электронную почту

Упростите настройку кошелька с помощью привычных способов входа, например через X и Telegram.

3. Настраивать пользовательский опыт

Используйте готовые UI-компоненты для быстрой интеграции или полностью автономные варианты без интерфейса, чтобы создавать собственные сценарии.

4. Подготовить приложение к будущему

Добавьте поддержку нескольких кошельков, инструменты защиты от мошенничества и аналитику для масштабирования и оптимизации приложения.

5. Привлекать пользователей из других блокчейнов

Когда будете готовы, расширьте функциональность приложения за пределы Solana и добавьте другие блокчейны.

Решение вроде Dynamic упрощает разработку и обеспечивает удобный онбординг пользователей.

Оно дополняет Solana Wallet Adapter и предоставляет разработчикам больше возможностей для онбординга, масштабирования и настройки.

Solana Wallet Adapter и встроенные кошельки

Ниже приведено наглядное сравнение:

ФункцияSolana Wallet AdapterDynamic
Подключение кошельков✅✅
Встроенные кошельки❌✅
Вход через социальные сети❌✅
Поддержка нескольких блокчейнов❌✅
Настраиваемый UI❌✅
Защита от мошенничества❌✅
Списки доступа❌✅
Управление пользователями❌✅
Webhooks❌✅

Независимо от набора функций, время внедрения всегда играет решающую роль. Может показаться, что из-за обилия возможностей внедрить Dynamic сложнее, чем Solana Wallet Adapter, но это не так.

Ниже сравниваются стандартные реализации на React:

Solana Wallet Adapter: стандартная реализация

Код
import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

const wallets = useMemo(
() => [
new UnsafeBurnerWalletAdapter(),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Dynamic: стандартная реализация

Код
import React from 'react'
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'

export const App = () => {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: process.env.REACT_APP_DYNAMIC_ENVIRONMENT_ID,
walletConnectors: [SolanaWalletConnectors],
}}
>
{ /* Your app's components go here, nested within the context providers. */ }
<DynamicWidget />
</DynamicContextProvider>
</div>
)
}

Все готово для онбординга: мы используем DynamicWidget — универсальный UI-компонент, который включает кнопку входа и регистрации, полный процесс аутентификации, профиль пользователя и многое другое.

После запуска приложения вы увидите следующее:

Если вы предпочитаете создать собственный UI или настроить отдельные элементы, все параметры можно изменить с точностью до пикселя. Подробные инструкции доступны в документации по дизайну и в разделе о варианте интеграции без интерфейса.

Чтобы включить регистрацию со встроенным кошельком в Solana, откройте панель управления и выполните следующие действия:

Готово!

Каждый, кто зарегистрируется с помощью электронной почты, телефона или аккаунта в социальной сети, получит кошелек Solana и сможет сразу использовать ваше приложение.

Всего несколько строк кода обеспечат первоклассный онбординг со всеми функциями, которые нужны вам сейчас и понадобятся в будущем.

Добавление RPC-провайдера и настройка приоритетных комиссий

Сегодня онбординг остается одним из главных препятствий для пользователей, а обработка транзакций занимает второе место. Работать с перегрузкой сети Solana бывает непросто. Без выделенного RPC-сервиса транзакции пользователей могут отклоняться, вызывая недовольство. Неправильно заданные приоритетные комиссии также ухудшают пользовательский опыт и снижают надежность приложения.

Этого легко избежать, если использовать Helius как RPC-эндпоинт и динамически настраивать комиссии через Priority Fee API. Чтобы подключить его к Dynamic, достаточно указать RPC URL в панели управления.

При создании транзакции получите размер комиссии через Priority Fee API.

Код
async function getPriorityFeeEstimate(priorityLevel, transaction) {
    const response = await fetch(HeliusURL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            jsonrpc: "2.0",
            id: "1",
            method: "getPriorityFeeEstimate",
            params: [
                {
                    transaction: bs58.encode(transaction.serialize()), // Pass serialized transaction in Base58
                    options: { priorityLevel: priorityLevel },
                },
            ],
        }),
    });

    const data = await response.json();
    console.log(
        "Fee in function for",
        priorityLevel,
        "",
        data.result.priorityFeeEstimate
    );
    return data.result;
}

Пример Magic Eden

Надежная инфраструктура кошельков критически важна для разработки мощных и масштабируемых приложений Solana.

Magic Eden, ведущий NFT-маркетплейс, активно масштабируется, добавляя новые блокчейны. Компании требовался гибкий кошелек, соответствующий этому подходу и способный эффективно работать при высокой нагрузке, например во время выпуска NFT.

Интеграция SDK от Dynamic позволяет Magic Eden поддерживать кошельки в нескольких блокчейнах, привязку социальных аккаунтов и управление несколькими кошельками. Управлять кошельками и собирать активы в разных сетях стало просто.

Magic Eden также использует Helius, чтобы управлять RPC-нодами и оптимизировать пропускную способность транзакций. Priority Fee API от Helius помогает Magic Eden сохранять надежность и скорость даже при пиковой нагрузке.

Сочетание Dynamic и Helius позволило Magic Eden эффективно масштабироваться и обеспечить превосходный пользовательский опыт для миллионов посетителей в месяц.

Уделяя приоритетное внимание масштабируемости, скорости и пользовательскому опыту, Magic Eden задает стандарт возможностей для NFT-маркетплейсов.

Разработчикам приложений для пользователей, знакомых с криптовалютами, и массовой аудитории стоит инвестировать в надежное решение для кошельков. Это упрощает разработку, помогает охватить более широкую аудиторию и закладывает основу для долгосрочного роста.

Дополнительные ресурсы

Большое спасибо @__lostin__ и Brady Werkheiser за рецензирование предыдущих версий этой статьи.

Подпишитесь на Helius

Следите за новостями разработки на Solana и получайте уведомления о наших публикациях

Увеличенное изображение