新着:HeliusがLight Protocolを買収
HeliusとDynamic SDKを使用したSolana埋め込みウォレットのチュートリアル
ブログ/開発

Solanaアプリのオンボーディング:埋め込みウォレットを採用すべき理由

Dynamic.xyzの開発者体験担当XのMatthew FoyleLinkedInのMatthew Foyle
読了時間:7分

モバイルアプリやWebアプリの画期的なアイデアがあるとします。

Solanaが構築先として最適なブロックチェーンであることを理解し、初日からユーザーを引き付ける多機能な体験を備えて、すぐにリリースしたいと考えています。

では、それを実現するために、開発者ツールキットには何が必要でしょうか?

Cursorやv0は候補の上位に挙がるでしょう。フロントエンドフレームワークにはNext.jsが有力です。

しかし、アプリ固有のSolana要件を満たし、スムーズなリリースと効果的なスケーリングを実現するには、どのようなソリューションが役立つのでしょうか?

Solana上での構築とスケーリングには、2つの重要な要素が必要です。

  1. 認証とウォレット管理のためのシームレスなオンボーディングソリューション
  2. 高性能なトランザクションを処理する堅牢なRPCサービス

これらの要素は開発を簡素化するだけでなく、シームレスなユーザー体験も提供します。

それぞれの要素を詳しく見ていきましょう。

Solana Wallet Adapter

最もシンプルなオンボーディング方法は、PhantomやSolflareなどの既存ウォレットを介してユーザーを接続することです。この方法は、Solanaに慣れていて、すでにウォレットを設定しているユーザーのオンボーディングに適しています。

最初の選択肢としておすすめなのが、以下を提供するSolana Wallet Adapterです。

  • 簡単に統合できる標準化されたAPI
  • ウォレット接続とトランザクション署名の基本機能
  • アプリのニーズに合わせてカスタマイズできるオープンソースの柔軟性

Solana Wallet Adapterは迅速かつ簡単に実装できるため、既存のウォレットを持つユーザーにとって信頼できる選択肢です。

複数のウォレットをサポートするだけでなく、一貫したウォレット機能を実現する標準化された統合や、ウォレット接続ボタンなどのすぐに使えるUIコンポーネントも備えています。さらに、window.solanaのような未加工のAPIと比べて、トランザクションの署名と送信を高速化できるようパフォーマンスが最適化されています。

Solana Wallet Adapterはオープンソースであるため、開発者はアプリ固有の要件に合わせてカスタマイズできます。また、コミュニティによる実装を通じて、Vue、Angular、Svelte、TypeScriptなどのフレームワークにも対応できます。

ただし、アダプターを使用するとプロジェクトに追加の依存関係が導入され、開発者の負担が増える可能性があります。

アダプターには多くの機能が標準で用意されていますが、大幅にカスタマイズするにはコードベースを詳しく調べたり、回避策を作成したりする必要があります。ユースケースによっては、時間がかかる可能性があります。

ほかのサードパーティ製ライブラリと同様に、開発者が制御できないバグや問題が発生する可能性があります。その結果、アプリの安定性に影響が及んだり、解決のために外部サポートが必要になったりする場合があります。

ウォレットアダプターは暗号資産に慣れたユーザーには実用的ですが、より幅広い層、特にブロックチェーンに不慣れなユーザーや、まだウォレットを持っていないユーザーをオンボーディングする場合には十分ではありません。

埋め込みウォレットによる新規ユーザーのオンボーディング

埋め込みウォレットはSolanaのオンボーディングを大幅に改善し、開発者によるユーザー獲得を促進します。新規ユーザーは登録すると、アプリ内でウォレットを自動的に受け取れます。

これにより、ユーザーは次のことが可能になります。

  • サードパーティ製ウォレットを設定せずに利用を開始する
  • 資産をシームレスに受け取る
  • オンチェーントランザクションを実行する

このアプローチは利用時の障壁を最小限に抑え、一般ユーザーへの普及を目指すコンシューマー向けアプリに有効です。

Dynamicのデータによると、既存ウォレットを接続する代わりに、50%以上のユーザーが埋め込みウォレットを選択しています。

ただし、導入率はオンボーディング方法や対象ユーザー層によって異なります。

暗号資産に慣れたユーザーは既存ウォレットの接続を選ぶ傾向がありますが、より一般的なユーザーは埋め込み型ソリューションの利便性を好む可能性があります。

適切なバランスを見つけることが重要です。

個人投資家の流動性は今も主にホットウォレットにあります。そのため、埋め込みウォレットはオンボーディングを効率化できますが、必ずしも最適な出発点とは限りません。開発者は当初の対象ユーザーを考慮し、そのニーズに合ったオンボーディング体験を設計する必要があります。

オンボーディングとウォレットインフラのための包括的なSDK

Solana Wallet Adapterが提供する範囲を超える機能を実現したい開発者には、DynamicのSDKのような、より包括的なソリューションがあります。

Dynamicを使用すると、次のことが可能です。

1. 複数のウォレットオプションに対応する

Phantomなどの既存のSolanaウォレットをユーザーが接続できるようにし、新規ユーザーには埋め込みウォレットを発行できます。

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プロバイダーの追加と優先手数料の設定

現在、オンボーディングはユーザーにとって最大の障壁の1つですが、トランザクション処理もそれに次ぐ課題です。Solanaのネットワーク混雑への対処は簡単ではありません。専用のRPCサービスがなければ、トランザクションが失敗し、ユーザーにストレスを与える可能性があります。同様に、優先手数料を誤って設定すると、ユーザー体験が損なわれ、アプリの信頼性が低下します。

RPCエンドポイントにHeliusを使用し、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アプリを開発するには、堅牢なウォレットインフラが不可欠です。

大手NFTマーケットプレイスのMagic Edenは、新しいチェーンを追加することで積極的に規模を拡大してきました。このアプローチに対応し、NFTのミント時のようなトラフィックの多い状況でも優れた性能を発揮する、柔軟なウォレットが必要でした。

DynamicのSDKを統合したことで、Magic Edenはマルチチェーンウォレット対応、ソーシャルアカウント連携、複数ウォレット管理を提供できるようになりました。複数のウォレットを管理し、複数のネットワークにまたがって収集する作業も簡単です。

Magic Edenは、RPCノードを管理するため、そしてトランザクションのスループットを最適化するためにHeliusも利用しています。HeliusのPriority Fee APIにより、Magic Edenはトラフィックのピーク時でも信頼性と速度を維持しています。

DynamicとHeliusを組み合わせることで、Magic Edenは毎月数百万人のユーザーに優れた体験を提供しながら、効率的にスケーリングできるようになりました。

スケーラビリティ、速度、ユーザー体験を重視することで、Magic EdenはNFTマーケットプレイスで実現可能な水準のベンチマークを確立しています。

暗号資産に慣れたユーザーと一般ユーザーの両方に支持されるアプリを構築したい開発者にとって、信頼できるウォレットソリューションへの投資は、開発の効率化、より幅広いユーザー層へのリーチ、長期的な成長基盤の構築につながります。

その他のリソース

この記事の以前のバージョンをレビューしてくださった@__lostin__とBrady Werkheiserに深く感謝します。

Heliusを購読

Solana開発の最新情報や新しい記事の公開通知を受け取れます

拡大画像