leumas-private-shared/src/Metamask/Manual.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 from 'react';

const Manual = () => {
  return (
    <div className="max-h-[400px] overflow-y-scroll bg-gray-900 text-gray-100 flex flex-col justify-start items-center p-4">
    <div className="w-full max-w-xl">


        <div className="text-lg mb-4">
            <p>🚀 To purchase Leumas Tokens, follow these steps:</p>
            <ol className="list-decimal pl-5 mt-2">
                <li>
                    <strong>Install MetaMask:</strong> If you don't have it already, install the MetaMask wallet{' '}
                   <a href="https://metamask.io/" className="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer">
                      here
                    </a>
                    .
                </li>
                <li>
                    <strong>Send ETH to this Contract Address:</strong> Use MetaMask to send Ether (ETH) to the following contract address:
                    <div className="relative group">
                        <pre className="text-yellow-300 mt-2">0xe6EFa7f8807ff859ccC2BD2231A34c0CD1C3CF58</pre>
                       <button
                           className="absolute right-0 top-0 mt-1 mr-2 text-gray-500 group-hover:text-gray-300 focus:outline-none"
                           onClick={() => {
                               const el = document.createElement('textarea');
                               el.value = '0xe6EFa7f8807ff859ccC2BD2231A34c0CD1C3CF58';
                               document.body.appendChild(el);
                               el.select();
                               document.execCommand('copy');
                               document.body.removeChild(el);
                           }}
                       >
                           Copy
                       </button>
                   </div>
               </li>
               <li>
                   <strong>Receive Your Leumas Tokens:</strong> After the transaction is confirmed, you'll receive Leumas Tokens in your MetaMask wallet.
               </li>
           </ol>
       </div>

       <details className="text-lg mb-4">
           <summary className="cursor-pointer text-blue-500 hover:underline">FAQ: How to Purchase Leumas Tokens</summary>
           <div className="mt-2">
               <strong>Q1:</strong> What is MetaMask and why do I need it?
               <p>
                   <strong>A1:</strong> MetaMask is a cryptocurrency wallet and gateway to blockchain apps. You need it to interact with Leumas Token and store your tokens securely.
               </p>

               <strong>Q2:</strong> How do I add ETH to my MetaMask wallet?
               <p>
                   <strong>A2:</strong> You can purchase ETH from a cryptocurrency exchange, then send it to your MetaMask wallet by copying your wallet address.
               </p>

               <strong>Q3:</strong> How do I check my Leumas Token balance?
               <p>
                   <strong>A3:</strong> Use the MetaMask wallet to view your token balance. Leumas Tokens will appear alongside your ETH balance.
               </p>

               <strong>Q4:</strong> Can I use Leumas Tokens for something?
               <p>
                   <strong>A4:</strong> Yes, Leumas Tokens have various use cases, including shopping at the Leumas Shop and accessing Leumas tools and services.
               </p>
           </div>
       </details>

       <div className="text-lg">
           <p>🛠️ Leumas Token Use Cases:</p>
           <ul className="list-disc pl-5 mt-2">
               <li>🛒 Leumas Shop: Purchase items and services with Leumas Tokens.</li>
               <li>🔧 Leumas Tools: Access various tools and services such as bulk forging, list launching, chatbots, hosting, and more, all powered by Leumas Tokens.</li>
               <li>🌐 Microtransactions: Perform web3 in-app microtransactions using Leumas Tokens.</li>
           </ul>
       </div>

       <div className="text-lg mt-4">
           <p>📂 Leumas Token Source Code Download:</p>
           <p>
               You can download the source code for Leumas Token from our website. Click the button below to get the contract code.
           </p>
           <button
               className="mt-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded font-bold focus:outline-none focus:ring-2 focus:ring-blue-400"
               onClick={() => {
                   // Add logic to trigger the download of the contract source code.
                   alert("Download source code button clicked.");
               }}
           >
               Download Source Code
           </button>
       </div>
   </div>
</div>
  )
}

export default Manual