0.1.7 • Published 11 months ago

@phoenix-wallet/wallet-adapter v0.1.7

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

Phoenix Wallet

A powerful React library for seamlessly connecting to multiple blockchain wallets with a unified interface.

Demo: https://phoenix-wallet-adapter-demo.pages.dev/

Installation

npm install @phoenix-wallet/wallet-adapter
# or
yarn add @phoenix-wallet/wallet-adapter
# or
pnpm add @phoenix-wallet/wallet-adapter

Why Phoenix Wallet?

Key Features

  • Simultaneous Multi-Wallet Connections: Connect to multiple wallet extensions at the same time without disconnecting - the only library that maintains all wallet sessions simultaneously
  • Multi-Chain Support: Connect to Ethereum, Polygon, Arbitrum, Optimism, Base, Solana, and more
  • Multiple Wallet Connectors: Support for MetaMask, Phantom, Rainbow, OKX, TrustWallet, Binance Wallet, MagicEden, and Coinbase
  • Unified Interface: Consistent API across different wallets and chains
  • React Integration: Custom hooks and context for seamless React integration
  • TypeScript Support: Full type definitions for enhanced developer experience
  • Contract Interaction: Simplified interface for interacting with smart contracts

Quick Start

import React from 'react';
import {
  WalletProvider,
  MetamaskEvmConnector,
  PhantomEvmConnector,
  SolanaConnector,
  SolanaCluster,
} from '@phoenix-wallet/wallet';
import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';

// Define your dapp metadata
const dappMetadata = {
  name: 'My Web3 App',
  url: 'https://example.com',
};

// Set up your connectors
const connectors = [
  new MetamaskEvmConnector(dappMetadata),
  new PhantomEvmConnector(dappMetadata),
  // For Solana, you need to provide a wallet adapter
  new SolanaConnector(dappMetadata, new PhantomWalletAdapter(), SolanaCluster.MAINNET),
];

function App() {
  return (
    <WalletProvider connectors={connectors} reconnect="auto">
      <YourApp />
    </WalletProvider>
  );
}

export default App;

Core Concepts

1. Simultaneous Multi-Wallet Connections

Unlike other wallet libraries that only allow one active connection at a time, Phoenix Wallet lets you maintain multiple active wallet connections simultaneously:

import { useWallet } from '@phoenix-wallet/wallet';

function MultiWalletExample() {
  // Connect to multiple wallets simultaneously
  const metamask = useWallet('metamask');
  const phantom = useWallet('phantomevm');
  const binance = useWallet('binanceevm');

  return (
    <div>
      <div className="wallet-section">
        <h3>MetaMask</h3>
        {metamask.isConnected ? (
          <div>
            <p>Connected: {metamask.address}</p>
            <button onClick={metamask.disconnect}>Disconnect MetaMask</button>
          </div>
        ) : (
          <button onClick={metamask.connect}>Connect MetaMask</button>
        )}
      </div>

      <div className="wallet-section">
        <h3>Phantom</h3>
        {phantom.isConnected ? (
          <div>
            <p>Connected: {phantom.address}</p>
            <button onClick={phantom.disconnect}>Disconnect Phantom</button>
          </div>
        ) : (
          <button onClick={phantom.connect}>Connect Phantom</button>
        )}
      </div>

      {/* All connections are maintained independently */}
      {metamask.isConnected && phantom.isConnected && (
        <div className="cross-chain-actions">
          <h3>Cross-Chain Actions</h3>
          <button onClick={() => performCrossChainAction(metamask.wallet, phantom.wallet)}>
            Perform Cross-Chain Action
          </button>
        </div>
      )}
    </div>
  );
}

2. Chain Configuration

Configure multiple blockchain networks:

import { ChainType, WalletProvider } from '@phoenix-wallet/wallet';

// Define chain configurations
const chainConfigs = [
  {
    id: '1',
    name: 'Ethereum',
    publicRpcUrl: 'https://eth.llamarpc.com',
    privateRpcUrl: 'https://eth.llamarpc.com',
    explorerUrl: 'https://etherscan.io',
    chainId: 1,
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
    chainType: ChainType.EVM,
  },
  {
    id: '137',
    name: 'Polygon',
    publicRpcUrl: 'https://polygon-rpc.com',
    privateRpcUrl: 'https://polygon-rpc.com',
    explorerUrl: 'https://polygonscan.com',
    chainId: 137,
    nativeCurrency: { name: 'Polygon', symbol: 'MATIC', decimals: 18 },
    chainType: ChainType.EVM,
  },
  {
    id: 'solana_mainnet_beta',
    name: 'Solana',
    publicRpcUrl: 'https://api.mainnet-beta.solana.com',
    privateRpcUrl: 'https://api.mainnet-beta.solana.com',
    explorerUrl: 'https://explorer.solana.com',
    chainId: 101,
    nativeCurrency: { name: 'Solana', symbol: 'SOL', decimals: 9 },
    chainType: ChainType.SOLANA,
  },
];

function App() {
  return (
    <WalletProvider connectors={yourConnectors} chainConfigs={chainConfigs} reconnect="auto">
      <YourApp />
    </WalletProvider>
  );
}

Basic Usage

Connecting a Wallet

import { useWallet } from '@phoenix-wallet/wallet';

function WalletConnect() {
  // You need to specify the connector ID
  const { connect, disconnect, wallet, isConnected, isConnecting, address, chainId, isInstalled } =
    useWallet('metamask');

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <p>Chain ID: {chainId}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return (
    <button onClick={connect} disabled={isConnecting || isInstalled === false}>
      {isConnecting ? 'Connecting...' : 'Connect MetaMask'}
    </button>
  );
}

Switching Chains

import { useWallet } from '@phoenix-wallet/wallet';

function ChainSwitcher() {
  const { switchChain, chainId } = useWallet('metamask');

  return (
    <div>
      <p>Current Chain: {chainId}</p>
      <button onClick={() => switchChain('0x1')}>Switch to Ethereum Mainnet</button>
      <button onClick={() => switchChain('0x89')}>Switch to Polygon</button>
      <button onClick={() => switchChain('0xa')}>Switch to Optimism</button>
    </div>
  );
}

Checking Wallet Balance

import { useWallet } from '@phoenix-wallet/wallet';
import { useEffect, useState } from 'react';

function WalletBalance() {
  const { wallet, isConnected } = useWallet('metamask');
  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (wallet && isConnected) {
      fetchBalance();
    }
  }, [wallet, isConnected]);

  const fetchBalance = async () => {
    try {
      const result = await wallet.getBalance();
      setBalance(result);
    } catch (error) {
      console.error('Failed to fetch balance:', error);
    }
  };

  if (!isConnected || !balance) return <p>Connect wallet to see balance</p>;

  return (
    <div>
      <p>
        Balance: {balance.uiAmount} {balance.symbol}
      </p>
      <button onClick={fetchBalance}>Refresh</button>
    </div>
  );
}

Advanced Features

Signing Messages and Transactions

import { useWallet } from '@phoenix-wallet/wallet';

function SigningExample() {
  const { wallet, isConnected } = useWallet('metamask');

  const signMessage = async () => {
    if (!wallet) return;

    try {
      const signature = await wallet.signMessage('Hello, Web3!');
      console.log('Message signature:', signature);
    } catch (error) {
      console.error('Signing failed:', error);
    }
  };

  const sendTransaction = async () => {
    if (!wallet) return;

    try {
      const transaction = {
        to: '0xRecipientAddress',
        value: '0.01', // ETH amount
        data: '0x', // Optional data
      };

      const txHash = await wallet.sendTransaction(transaction);
      console.log('Transaction hash:', txHash);
    } catch (error) {
      console.error('Transaction failed:', error);
    }
  };

  return (
    <div>
      <button onClick={signMessage} disabled={!isConnected}>
        Sign Message
      </button>
      <button onClick={sendTransaction} disabled={!isConnected}>
        Send Transaction
      </button>
    </div>
  );
}

Working with Smart Contracts

import { useWallet, EvmContract, ChainType } from '@phoenix-wallet/wallet';
import { createPublicClient, http } from 'viem';
import { useEffect, useState } from 'react';

// Token contract ABI (for ERC20 tokens)
const tokenAbi = [
  {
    constant: true,
    inputs: [{ name: '_owner', type: 'address' }],
    name: 'balanceOf',
    outputs: [{ name: 'balance', type: 'uint256' }],
    type: 'function',
  },
  {
    constant: false,
    inputs: [
      { name: '_to', type: 'address' },
      { name: '_value', type: 'uint256' },
    ],
    name: 'transfer',
    outputs: [{ name: '', type: 'bool' }],
    type: 'function',
  },
];

function TokenInteraction() {
  const { wallet, isConnected } = useWallet('metamask');
  const [contract, setContract] = useState(null);
  const [balance, setBalance] = useState(null);

  useEffect(() => {
    if (!isConnected || !wallet) return;

    // For EVM chains
    if (wallet.chain.chainType === ChainType.EVM) {
      // Create a public client for the chain
      const publicClient = createPublicClient({
        chain: {
          id: wallet.chain.chainId,
          name: wallet.chain.name,
          nativeCurrency: wallet.chain.nativeCurrency,
          rpcUrls: {
            default: { http: [wallet.chain.privateRpcUrl] },
          },
        },
        transport: http(wallet.chain.privateRpcUrl),
      });

      // Create the contract instance
      const contractInstance = new EvmContract(
        publicClient,
        '0xTokenAddress', // Your token contract address
        tokenAbi
      );

      // Assign the wallet to the contract to enable write operations
      contractInstance.wallet = wallet;

      setContract(contractInstance);
    }
  }, [wallet, isConnected]);

  const getBalance = async () => {
    if (!contract || !wallet) return;

    try {
      const balanceWei = await contract.contract.read.balanceOf([wallet.address]);
      setBalance(balanceWei.toString());
    } catch (error) {
      console.error('Failed to get balance:', error);
    }
  };

  const sendTokens = async () => {
    if (!contract || !wallet) return;

    try {
      const tx = await contract.contract.write.transfer(
        ['0xRecipientAddress', BigInt('1000000000000000000')], // 1 token with 18 decimals
        { account: wallet.address }
      );

      // Wait for transaction confirmation
      const receipt = await contract.waitTransaction(tx);
      console.log('Transaction confirmed:', receipt);
    } catch (error) {
      console.error('Transfer failed:', error);
    }
  };

  return (
    <div>
      <button onClick={getBalance} disabled={!contract}>
        Get Token Balance
      </button>
      {balance && <p>Balance: {balance}</p>}
      <button onClick={sendTokens} disabled={!contract}>
        Send Tokens
      </button>
    </div>
  );
}

Reference

Supported Wallet Connectors

  • MetaMask (MetamaskEvmConnector)
  • Phantom EVM (PhantomEvmConnector)
  • Phantom Solana (SolanaConnector with PhantomWalletAdapter)
  • Rainbow (RainbowEvmConnector)
  • OKX Wallet (OkxEvmConnector)
  • TrustWallet (TrustWalletEvmConnector)
  • Binance Wallet (BinanceEvmConnector)
  • MagicEden (MagicEdenEvmConnector)
  • Coinbase (CoinbaseEvmConnector)

Custom Chain Creation

import { EvmChain, SolanaChain, ChainType } from '@phoenix-wallet/wallet';

// Create an EVM chain
const ethereumChain = new EvmChain('Ethereum', {
  id: '1',
  name: 'Ethereum',
  publicRpcUrl: 'https://eth.llamarpc.com',
  privateRpcUrl: 'https://eth.llamarpc.com',
  explorerUrl: 'https://etherscan.io',
  chainId: 1,
  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
  chainType: ChainType.EVM,
});

License

MIT

walletblockchainethereumsolanaweb3react
@binance/w3w-ethereum-provider@metamask/sdk@solana/web3.js@solana/wallet-adapter-baseethersreactviem@mysten/sui
0.1.7

11 months ago

0.1.6

11 months ago

0.1.5

11 months ago

0.1.4

11 months ago

0.1.3

11 months ago

0.1.2

11 months ago

0.1.1

11 months ago

0.1.0

11 months ago