leumas-private-shared/src/Metamask/MetaMaskButton.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

// MetaMaskButton.jsx
import React from 'react';

import { useState , useEffect } from 'react';
import { BsFillTrashFill } from 'react-icons/bs';  // Importing the trashcan icon
import connectMetaMask from './Helpers/connectMetaMask';
import useMetaMaskEffect from './Helpers/useMetaMaskEffect';
import CoinSvg from '../assets/SharedSVG/Debit card.svg'; // Adjust path as needed

const MetaMaskButton = ({ onDataChange }) => {
  const [account, setAccount] = useState(null);
  const [web3, setWeb3] = useState(null);
  const [tokenContract, setTokenContract] = useState(null);
  const [userBalance, setUserBalance] = useState(0);

  useMetaMaskEffect(account, tokenContract, setUserBalance, onDataChange, web3);

  useEffect(() => {
    if (account && onDataChange) {
      onDataChange(account);
    }
  }, [account]);

  const initiateConnection = () => connectMetaMask(setWeb3, setAccount, setTokenContract);

  const disconnectMetaMask = () => {
    setAccount(null);
  };

  return (
    <div className="flex justify-between items-center w-full">
      <button 
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
        onClick={account ? disconnectMetaMask : initiateConnection}
      >
        {account ? `Connected: ${account.substring(0, 6)}...${account.substring(account.length - 4)}` : 'Connect with MetaMask'}
      </button>

      <div className="flex flex-col items-end">
        {account && (
          <div className="relative inline-flex items-center ">
            <img src={CoinSvg} alt="Coin" className="h-10 w-10" />
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 rounded-full p-1 flex flex-col items-center justify-between">
              <span className="text-xs text-white">
                {web3.utils.fromWei(userBalance, 'ether')}
              </span>
            </div>
          </div>
        )}
        {account && (
          <BsFillTrashFill className="cursor-pointer hover:text-red-900" onClick={disconnectMetaMask} title="Disconnect from MetaMask" />
        )}
      </div>
    </div>
  );
};

export default MetaMaskButton;