Update AdminDashboard.js

echemmara · Feb 11, 2025 · dc69d75 · dc69d75
1 parent 26d55ad
commit dc69d75
Showing 1 changed file with 98 additions and 38 deletions.
diff --git a/AdminDashboard.js b/AdminDashboard.js
@@ -7,22 +7,33 @@ const AdminDashboard = () => {
     const [contract, setContract] = useState(null);
     const [vendorList, setVendorList] = useState([]);
     const [newVendor, setNewVendor] = useState({ address: "", name: "" });
+    const [loading, setLoading] = useState(true);
 
     const contractAddress = "0xYourContractAddressHere"; // Replace with deployed contract address
 
     // Initialize Web3 and Contract
     useEffect(() => {
         const initWeb3 = async () => {
-            if (window.ethereum) {
-                const web3 = new Web3(window.ethereum);
-                await window.ethereum.request({ method: "eth_requestAccounts" });
-                const accounts = await web3.eth.getAccounts();
-                setAccount(accounts[0]);
+            try {
+                if (window.ethereum) {
+                    const web3 = new Web3(window.ethereum);
+                    await window.ethereum.request({ method: "eth_requestAccounts" });
+                    const accounts = await web3.eth.getAccounts();
+                    setAccount(accounts[0]);
 
-                const contractInstance = new web3.eth.Contract(VendorContractABI, contractAddress);
-                setContract(contractInstance);
-            } else {
-                alert("Please install MetaMask to interact with the blockchain!");
+                    const contractInstance = new web3.eth.Contract(
+                        VendorContractABI,
+                        contractAddress
+                    );
+                    setContract(contractInstance);
+                } else {
+                    alert("Please install MetaMask to interact with the blockchain!");
+                }
+            } catch (error) {
+                console.error("Web3 initialization error:", error);
+                alert("Error connecting to blockchain");
+            } finally {
+                setLoading(false);
             }
         };
 
@@ -33,8 +44,12 @@ const AdminDashboard = () => {
     useEffect(() => {
         const fetchVendors = async () => {
             if (contract) {
-                const vendors = await contract.methods.getAllVendors().call();
-                setVendorList(vendors);
+                try {
+                    const vendors = await contract.methods.getAllVendors().call();
+                    setVendorList(vendors);
+                } catch (error) {
+                    console.error("Error fetching vendors:", error);
+                }
             }
         };
 
@@ -43,40 +58,85 @@ const AdminDashboard = () => {
 
     // Add a new vendor
     const addVendor = async () => {
-        if (contract && newVendor.address && newVendor.name) {
-            await contract.methods.addVendor(newVendor.address, newVendor.name).send({ from: account });
-            alert("Vendor added successfully!");
+        if (!contract || !newVendor.address || !newVendor.name) return;
+
+        try {
+            await contract.methods
+                .addVendor(newVendor.address, newVendor.name)
+                .send({ from: account });
+
+            // Refresh vendor list without page reload
+            const updatedVendors = await contract.methods.getAllVendors().call();
+            setVendorList(updatedVendors);
+
             setNewVendor({ address: "", name: "" });
-            window.location.reload(); // Refresh to show updated vendor list
+            alert("Vendor added successfully!");
+        } catch (error) {
+            console.error("Error adding vendor:", error);
+            alert("Failed to add vendor");
         }
     };
 
+    if (loading) return <div>Loading blockchain connection...</div>;
+
     return (
-        <div>
-            <h1>Admin Dashboard</h1>
-            <p>Connected Account: {account}</p>
+        <div className="admin-dashboard">
+            <h1>Shopify Admin Dashboard</h1>
+            <div className="account-info">
+                <p>Connected Account: {account}</p>
+            </div>
 
-            <h2>Add New Vendor</h2>
-            <input
-                type="text"
-                placeholder="Vendor Address"
-                value={newVendor.address}
-                onChange={(e) => setNewVendor({ ...newVendor, address: e.target.value })}
-            />
-            <input
-                type="text"
-                placeholder="Vendor Name"
-                value={newVendor.name}
-                onChange={(e) => setNewVendor({ ...newVendor, name: e.target.value })}
-            />
-            <button onClick={addVendor}>Add Vendor</button>
+            <div className="add-vendor-form">
+                <h2>Add New Vendor</h2>
+                <div className="form-group">
+                    <label>Vendor Address:</label>
+                    <input
+                        type="text"
+                        value={newVendor.address}
+                        onChange={(e) => setNewVendor({ ...newVendor, address: e.target.value })}
+                        placeholder="0x..."
+                    />
+                </div>
+                <div className="form-group">
+                    <label>Vendor Name:</label>
+                    <input
+                        type="text"
+                        value={newVendor.name}
+                        onChange={(e) => setNewVendor({ ...newVendor, name: e.target.value })}
+                        placeholder="Vendor Business Name"
+                    />
+                </div>
+                <button 
+                    onClick={addVendor}
+                    disabled={!newVendor.address || !newVendor.name}
+                >
+                    Add Vendor
+                </button>
+            </div>
 
-            <h2>Vendor List</h2>
-            <ul>
-                {vendorList.map((vendor, index) => (
-                    <li key={index}>{vendor}</li>
-                ))}
-            </ul>
+            <div className="vendor-list">
+                <h2>Registered Vendors</h2>
+                {vendorList.length === 0 ? (
+                    <p>No vendors registered yet</p>
+                ) : (
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Address</th>
+                                <th>Name</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {vendorList.map((vendor, index) => (
+                                <tr key={index}>
+                                    <td>{vendor.address}</td>
+                                    <td>{vendor.name}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
+            </div>
         </div>
     );
 };