98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Logo } from "@/components/logo";
|
||
|
|
import { useState, useEffect } from "react";
|
||
|
|
|
||
|
|
export function Header() {
|
||
|
|
const [contractAddress, setContractAddress] = useState("Fetching...");
|
||
|
|
const [buttonText, setButtonText] = useState("Fetching...");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchContractAddress = async () => {
|
||
|
|
try {
|
||
|
|
const res = await fetch("https://catools.dev3vds1.link/get/artivate");
|
||
|
|
const data = await res.json();
|
||
|
|
const address = data[0]?.address || "Unavailable";
|
||
|
|
setContractAddress(address);
|
||
|
|
setButtonText(`CA: ${address}`);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error fetching contract address:", error);
|
||
|
|
setContractAddress("Error");
|
||
|
|
setButtonText("CA: Error");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
fetchContractAddress();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleCopy = async () => {
|
||
|
|
try {
|
||
|
|
await navigator.clipboard.writeText(contractAddress);
|
||
|
|
setButtonText("Copied!");
|
||
|
|
setTimeout(() => setButtonText(`CA: ${contractAddress}`), 2000);
|
||
|
|
} catch (err) {
|
||
|
|
console.error("Failed to copy text:", err);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-50">
|
||
|
|
<nav className="container mx-auto px-6 py-4">
|
||
|
|
<div className="hidden md:flex items-center justify-between text-xs font-fk-grotesk-mono">
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex items-center uppercase">
|
||
|
|
<div className="pr-2 relative">
|
||
|
|
<Link
|
||
|
|
href="#features"
|
||
|
|
className="bg-[#1e1a46] px-3 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
|
||
|
|
>
|
||
|
|
Features
|
||
|
|
</Link>
|
||
|
|
<img
|
||
|
|
src="/images/button-separator-header.svg"
|
||
|
|
alt="Separator"
|
||
|
|
className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="pr-2 relative">
|
||
|
|
<Link
|
||
|
|
href="#tokenomics"
|
||
|
|
className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
|
||
|
|
>
|
||
|
|
Tokenomics
|
||
|
|
</Link>
|
||
|
|
<img
|
||
|
|
src="/images/button-separator-header.svg"
|
||
|
|
alt="Separator"
|
||
|
|
className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Link
|
||
|
|
href="#0"
|
||
|
|
className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
|
||
|
|
>
|
||
|
|
Applications
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 flex justify-center">
|
||
|
|
<Logo />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 flex justify-end">
|
||
|
|
<Button
|
||
|
|
className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors uppercase text-xs"
|
||
|
|
onClick={handleCopy}
|
||
|
|
>
|
||
|
|
{buttonText}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|