leumas-private-shared/src/LeumasWallet/LeumasWallet.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

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import { useAuthUser } from "react-auth-kit";
import PurchaseToken from './PurchaseToken'; // Assuming this is the path to your PurchaseToken component
import LeumasTokenABI from "../../../assets/LeumasToken.json"; // Adjust path as needed

// Assuming you have environment variables set for these or define them directly
const TOKEN_ADDRESS = import.meta.env.REACT_APP_LEUMAS_TOKEN_ADDRESS;

const LeumasWallet = () => {
  const [web3, setWeb3] = useState(null);
  const [account, setAccount] = useState(null);
  const [tokenContract, setTokenContract] = useState(null);
  const [userBalance, setUserBalance] = useState(0);
  const [loading, setLoading] = useState(false);

  const auth = useAuthUser();
  const userToken = auth()?.token;

  useEffect(() => {
    const loadBlockchainData = async () => {
      if (window.ethereum) {
        setLoading(true);
        const web3 = new Web3(window.ethereum);
        setWeb3(web3);

        const accounts = await window.ethereum.request({ method: 'eth_accounts' });
        setAccount(accounts[0]);

        const contract = new web3.eth.Contract(LeumasTokenABI, TOKEN_ADDRESS);
        setTokenContract(contract);

        const balance = await contract.methods.balanceOf(accounts[0]).call();
        setUserBalance(web3.utils.fromWei(balance, 'ether'));

        setLoading(false);
      } else {
        alert('Please install MetaMask to use this feature.');
      }
    };

    loadBlockchainData();
  }, [userToken]);

  return (
    <div className="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
      <h2 className="text-2xl font-bold mb-4">Leumas Wallet</h2>
      {loading ? (
        <p>Loading wallet information...</p>
      ) : (
        <>
          <div className="mb-4">
            <p>Account: {account}</p>
            <p>Balance: {userBalance} LMS Tokens</p>
          </div>
          <PurchaseToken web3={web3} account={account} tokenContract={tokenContract} onBalanceUpdate={setUserBalance} />
        </>
      )}
    </div>
  );
};

export default LeumasWallet;