WalletMenu

The WalletMenu component provides an interactive UI for managing a Web3 wallet. Users can view their wallet address, copy it, or switch to a different wallet.

Installation

Ensure you have napui-kit installed in your project:

npm install napui-kit

Usage

Basic Wallet Menu

App.tsx

import { useState, useEffect } from "react";
import Web3 from "web3";
import { WalletMenu } from "napui-kit";

export default function WalletIntegration() {
  const [walletAddress, setWalletAddress] = useState<string | null>(null);

  useEffect(() => {
    const loadWallet = async () => {
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum);
        try {
          const accounts = await web3.eth.getAccounts();
          if (accounts.length > 0) {
            setWalletAddress(accounts[0]);
          }
        } catch (error) {
          console.error("Erreur lors de la récupération du compte :", error);
        }
      }
    };
    loadWallet();
  }, []);

  const handleCopyAddress = () => {
    if (walletAddress) {
      navigator.clipboard.writeText(walletAddress);
      alert("Adresse copiée : " + walletAddress);
    } else {
      alert("Aucune adresse trouvée.");
    }
  };

  const handleChangeWallet = async () => {
    if (window.ethereum) {
      try {
        const accounts = (await window.ethereum.request({
          method: "eth_requestAccounts",
        })) as string[];
        setWalletAddress(accounts[0]);
        alert("Portefeuille changé : " + accounts[0]);
      } catch (error) {
        console.error("Erreur lors du changement de portefeuille :", error);
        alert("Changement de portefeuille annulé.");
      }
    } else {
      alert("Aucun fournisseur Web3 détecté.");
    }
  };

  return (
    <WalletMenu
      walletAddress={walletAddress}
      onCopy={handleCopyAddress}
      onChangeWallet={handleChangeWallet}
    />
  );
}

Props

Prop	Type	Description
walletAddress	string \| null	The currently connected wallet address
onCopy	() => void	Function to copy the wallet address to clipboard
onChangeWallet	() => void	Function to trigger wallet switching
label	string	Optional label text

Behavior

• Clicking the button displays the connected wallet address.
• Users can copy the wallet address to the clipboard.
• Users can switch wallets by interacting with MetaMask or another Web3 provider.

This component ensures a seamless Web3 wallet experience. 🚀