本記事は下記の翻訳となります。
『Integrating Arweave Wallet Kit in a NextJS Application』（by Community Labs）

Arweave では分散型アプリケーション（dApps）向けに様々なウォレットオプションが提供されており、それぞれのオプションとのやり取りを管理するために複数の統合が必要とされています。Arweave Wallet Kit は、ArConnect.io、Arweave.app、Othent.io に対応した統一的なソリューションを提供し、ユーザーが好みのウォレットを通じて操作できるようにすることで、このプロセスを効率化します。

Arweave Wallet Kit は、React フックとコンポーネントのセットを通じて、開発者にこのソリューションを提供します。

それでは、NextJS アプリケーションに Wallet Kit を 3 つの簡単なステップで統合する方法について、クイックチュートリアルを見ていきましょう。

NextJS への Arweave Wallet Kit の統合

このチュートリアルでは、create-next-app で新規作成した NextJS バージョン 14 の App Router セットアップを使用します。

1. モジュールのインストール

最初のステップは、Arweave Wallet Kit を依存関係としてインストールすることです。アプリケーション内でターミナルを開き、以下を実行します：

yarn add arweave-wallet-kit

#or

npm i arweave-wallet-kit

2. アプリケーションを Wallet Kit Provider でラップする

次のステップは、アプリケーション全体で機能を使用できるようにするため、アプリケーションを Wallet Kit Provider でラップすることです。app/layout.tsx に移動し、以下のように children をラップします：

import { ArweaveWalletKit } from 'arweave-wallet-kit';

// other code...

<html lang="en">
  <body className={inter.className}>
    <ArweaveWalletKit>{children}</ArweaveWalletKit>
  </body>
</html>;

これにより、すべてのサブコンポーネントとページで Wallet Kit の機能にアクセスできるようになります。Wallet Kit プロバイダーには、ユーザーが接続する際のパーミッション、ユーザーが接続するアプリケーション名、接続に使用する Arweave のゲートウェイの設定など、オプションのカスタマイズも含まれています。

3. 接続ボタンの追加

最後のステップは、ユーザーがウォレット接続プロセスを操作できるようにする接続ボタンを追加することです。Arweave Wallet Kit は、この目的のための専用コンポーネントを提供しており、アプリケーションの適切な場所で以下のようにインポートして実装できます：

import { ConnectButton } from 'arweave-wallet-kit';

// other code...

<ConnectButton showBalance={true} showProfilePicture={true} />;

この接続ボタンにはカスタマイズ可能な機能が付属しており、テーマのカスタマイズ、接続されたユーザーのウォレット残高の表示、追加のプロフィール詳細の表示などが可能です。提供されている例は、これらのカスタマイズの実装方法を示しています。

以下は、この統合によるウォレット接続プロセスをユーザーがどのように体験するかを示すクイックビジュアルガイドです。

次のステップ

Arweave Wallet Kit の機能とカスタマイズの全容を探るには、包括的なドキュメントをご覧いただき、アプリケーションの要件に合わせて統合をカスタマイズしてください。

サポートが必要な場合や、あなたの開発について共有したい場合は、コミュニティ Discord をチェックしてください。

また、Arweave エコシステムの最新情報については、X でフォローしてください。

【Arweave Japan とは】
Arweave Japan は Arweave / AO の日本語ビルダーエコシステム構築を目的とした分散型組織です。

【Arweave / AO とは？】
Arweave は無制限にスケール可能な分散型ストレージであり、AO は Arweave 上に構築された無制限にスケール可能な分散型スーパーコンピュータです。Arweave と AO を使って既存のブロックチェーンでは実現不可能であった実用的なプロダクトが開発できます。

イーサリアム L1 のリステーキングによってセキュリティが担保され、TVL はローンチ数ヶ月で 1000 億円近くまで上がり、今後数兆円規模の市場が期待されます。完全フェアローンチされた AO のトークン設計によって、この流動性は AO 上のプロジェクトが活用することができ、ビットコインと同じ半減スケジュールでミントされる AO トークンは開発者やプロジェクトが受け取れる仕組みとなっています。

Web2 を置き換えるレベルで実用的なプロジェクトが構築できる唯一無二の分散型プロトコル AO で開発することはグローバルの第一線で活躍する非常に大きなチャンスとなっています。

【Social Links】

【Blog】