Zenn
🍿

🔗 ブロックチェーンウォレット接続機能の実装方法【Solflare, Phantom, MetaMask対応】

2024/12/26に公開
ブロックチェーン
Web3
MetaMask
phantom
solflare
tech

はじめに 🛠️

ブロックチェーンプロジェクトを開発する際、ユーザーがウォレットを接続して操作する機能は重要な要素のひとつです。本記事では、ReactとTypeScript を使用して、以下のウォレット接続機能を実装する方法を解説します。

対応するウォレットは以下の通りです：

  • Solflare
  • Phantom
  • MetaMask

また、ウォレット切り替え機能や接続解除機能も実装します。
途中にコードスニペットやスクリーンショットを挿入し、具体的な手順をわかりやすく説明します！

完成する機能一覧 ✨

  1. ウォレット接続：3つのウォレット（Solflare, Phantom, MetaMask）に対応。
  2. ウォレット切り替え：接続中のウォレットを他のウォレットにスイッチ可能。
  3. 公開鍵の確認：接続中のウォレットの公開鍵を表示。
  4. ウォレット切断：接続を解除する機能。
  5. スタイリッシュなUI：ポップアップを用意し、UXを向上。

実装方法 💻

必要なライブラリのインストール

以下のコマンドを使用して、必要なライブラリをインストールします。

npm install @solflare-wallet/sdk
npm install @solana/web3.js

また、MetaMaskの接続にはブラウザの window.ethereum を利用します。

コードの全体像👀

ウォレット選択画面
ウォレット選択画面におけるデザインの例

今回は上記のデザインで実装してみました

基本構造の作成

ウォレット接続のヘッダーを作成します。以下は基本的なReactコンポーネントです。

基本構造

import React, { useState } from 'react';
import Solflare from '@solflare-wallet/sdk';
import { PublicKey } from '@solana/web3.js';

const Header: React.FC = () => {
  const [walletConnected, setWalletConnected] = useState(false);
  const [walletAddress, setWalletAddress] = useState<string | null>(null);
  const [walletType, setWalletType] = useState<'solflare' | 'phantom' | 'metamask' | null>(null);

  // Solflareウォレットの初期化
  const solflareWallet = new Solflare();

  // メインUI
  return (
    <header>
      <h1>Wallet Connection</h1>
      {/* 接続ボタン */}
      <button onClick={() => console.log("Connect Wallet Button Clicked!")}>
        {walletConnected ? `Connected: ${walletAddress?.slice(0, 6)}...` : 'Connect Wallet'}
      </button>
    </header>
  );
};

export default Header;

ウォレット接続機能を追加💸

次に、各ウォレットごとに接続機能を実装します。

ウォレット接続機能

solflare接続

const connectSolflare = async () => {
  try {
    await solflareWallet.connect();
    setWalletType('solflare');
    setWalletConnected(true);
    setWalletAddress(solflareWallet.publicKey?.toString() || null);
    console.log('Solflare Wallet Connected:', solflareWallet.publicKey?.toString());
  } catch (error) {
    console.error('Solflare connection failed:', error);
  }
};

Phantom接続

const connectPhantom = async () => {
  try {
    const provider = window.solana; // Phantomのプロバイダ
    if (!provider?.isPhantom) {
      alert('Please install Phantom Wallet.');
      return;
    }
    await provider.connect();
    setWalletType('phantom');
    setWalletConnected(true);
    setWalletAddress(provider.publicKey?.toString() || null);
    console.log('Phantom Wallet Connected:', provider.publicKey?.toString());
  } catch (error) {
    console.error('Phantom connection failed:', error);
  }
};

MetaMask接続

const connectMetaMask = async () => {
  try {
    const ethereum = window.ethereum; // MetaMaskのプロバイダ
    if (!ethereum) {
      alert('Please install MetaMask.');
      return;
    }
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    setWalletType('metamask');
    setWalletConnected(true);
    setWalletAddress(accounts[0]);
    console.log('MetaMask Wallet Connected:', accounts[0]);
  } catch (error) {
    console.error('MetaMask connection failed:', error);
  }
};

ウォレット選択機能の実装

ユーザーがウォレットを選択できるポップアップを作成します。

ポップアップUI

const WalletPopup: React.FC<{ onConnect: (type: 'solflare' | 'phantom' | 'metamask') => void }> = ({ onConnect }) => {
  return (
    <div className="popup">
      <h2>Select Wallet</h2>
      <button onClick={() => onConnect('solflare')}>Connect Solflare</button>
      <button onClick={() => onConnect('phantom')}>Connect Phantom</button>
      <button onClick={() => onConnect('metamask')}>Connect MetaMask</button>
    </div>
  );
};

// ポップアップの表示ロジック
const [popupVisible, setPopupVisible] = useState(false);

return (
  <header>
    <h1>Wallet Connection</h1>
    <button onClick={() => setPopupVisible(true)}>
      {walletConnected ? 'Switch Wallet' : 'Connect Wallet'}
    </button>
    {popupVisible && (
      <WalletPopup
        onConnect={(type) => {
          setPopupVisible(false);
          if (type === 'solflare') connectSolflare();
          if (type === 'phantom') connectPhantom();
          if (type === 'metamask') connectMetaMask();
        }}
      />
    )}
  </header>
);

ウォレット切断機能🚀

接続したウォレットをログアウトする機能を追加します。

切断機能

const disconnectWallet = () => {
  setWalletConnected(false);
  setWalletAddress(null);
  setWalletType(null);
  console.log('Wallet Disconnected');
};

// UIに切断ボタンを追加
<button onClick={disconnectWallet}>Disconnect Wallet</button>

UIの改善

背景を黒に変更

ポップアップの画面の背景を黒に変更し、スタイルを整えます。

.popup {
  background-color: black;
  color: white;
  padding: 20px;
  border-radius: 10px;
}

終わりに🤶

この記事では、Reactを活用して複数の仮想通貨ウォレット（Solflare、Phantom、MetaMask）への接続機能を実装する方法を解説しました。これらの機能を統合することで、ユーザーは簡単にウォレットを選択・接続し、切断や切り替えもスムーズに行えます。

仮想通貨ウォレットの実装は、Web3プロジェクトにとって重要な基盤となります。この記事が、あなたのプロジェクトの成功に役立つことを願っています。

質問やフィードバックがあれば、ぜひコメント欄でお知らせください。それでは、次回の記事でお会いしましょう！

Discussion