Spaces:
Sleeping
Sleeping
File size: 2,750 Bytes
65bffa4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import '../styles/Header.css';
import logo from '../assets/GXS-BlueCarbon5-logo.png';
function Header() {
const [account, setAccount] = useState(null);
const [showModal, setShowModal] = useState(false); // state untuk kontrol modal
const connectWallet = async () => {
console.log('Tombol Connect Wallet di-click!');
if (typeof window.ethereum !== 'undefined') {
try {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
setAccount(accounts[0]);
console.log('Connected account:', accounts[0]);
} catch (error) {
console.error('Error connecting wallet:', error);
}
} else {
alert('MetaMask not found. Please install it!');
}
};
const disconnectWallet = () => {
setAccount(null); // Reset account ke null
setShowModal(false); // Menutup modal setelah disconnect
console.log('Wallet disconnected');
};
const openModal = () => {
setShowModal(true); // Menampilkan modal saat wallet address di-click
};
const closeModal = () => {
setShowModal(false); // Menutup modal jika cancel
};
return (
<header className="header">
<div className="header-content">
<div className="logo">
<Link to="/">
<img src={logo} alt="ocarbn Logo" />
</Link>
</div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/project">Project</Link></li>
<li><Link to="/about">About Us</Link></li>
</ul>
</nav>
<div>
{account ? (
<div>
<span className="wallet-address" onClick={openModal}>
{`${account.slice(0, 6)}...${account.slice(-4)}`}
</span>
{showModal && (
<div className="overlay">
<div className="modal">
<h2>Disconnect Wallet</h2>
<p>Are you sure you want to disconnect?</p>
<div className="modal-buttons">
<button className="modal-confirm" onClick={disconnectWallet}>Yes, Disconnect</button>
<button className="modal-cancel" onClick={closeModal}>Cancel</button>
</div>
</div>
</div>
)}
</div>
) : (
<button className="connect-wallet" onClick={connectWallet}>
Connect Wallet
</button>
)}
</div>
</div>
</header>
);
}
export default Header; |