28c53b1e59
* keplr/metamask integration initial commit * chains settings and type definitions. notifications prototype * fix: dom nested buttons * address copied toast * react-toastify colors * wallet store and initial queries setup. zustand and react query dependencies added * _app code cleanup * remove obsolete WalletContext * unused import * walletStore initial commit * leftover component reference removed * fix: react hydration mismatch wallet component * metamask conditional click handler * connect modal minor tweaks and wallet installation urls added
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
|
|
import SearchInput from "components/SearchInput";
|
|
import Wallet from "./Wallet";
|
|
|
|
const mockedAccounts = [
|
|
{
|
|
label: "Subaccount 1",
|
|
},
|
|
{
|
|
label: "Subaccount 2",
|
|
},
|
|
{
|
|
label: "Subaccount 3",
|
|
},
|
|
{
|
|
label: "Subaccount 4",
|
|
},
|
|
];
|
|
|
|
const NavLink = ({ href, children }: { href: string; children: string }) => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<Link href={href} passHref>
|
|
<a
|
|
className={`${
|
|
router.pathname === href ? "text-white" : ""
|
|
} hover:text-white`}
|
|
>
|
|
{children}
|
|
</a>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
const Navigation = () => {
|
|
return (
|
|
<div>
|
|
{/* Main navigation bar */}
|
|
<div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
|
|
<Link href="/" passHref>
|
|
<a>
|
|
<img src="/logo.svg" alt="mars" />
|
|
</a>
|
|
</Link>
|
|
<div className="flex px-12 gap-5 text-white/40">
|
|
<NavLink href="/trade">Trade</NavLink>
|
|
<NavLink href="/yield">Yield</NavLink>
|
|
<NavLink href="/borrow">Borrow</NavLink>
|
|
<NavLink href="/portfolio">Portfolio</NavLink>
|
|
<NavLink href="/council">Council</NavLink>
|
|
</div>
|
|
<Wallet />
|
|
</div>
|
|
{/* Sub navigation bar */}
|
|
<div className="flex justify-between px-6 py-3 text-sm text-white/40">
|
|
<div className="flex items-center">
|
|
<SearchInput />
|
|
{mockedAccounts.map((account, index) => (
|
|
<div key={index} className="px-4 hover:text-white cursor-pointer">
|
|
{account.label}
|
|
</div>
|
|
))}
|
|
<div className="px-3">More</div>
|
|
<div className="px-3">Manage</div>
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<p>$: 2500</p>
|
|
<div>Lvg Gauge</div>
|
|
<div>Risk Gauge</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|