feat: connect wallet modal initial
This commit is contained in:
parent
f9249c0f28
commit
5169643e8c
60
components/ConnectModal.tsx
Normal file
60
components/ConnectModal.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import React, { Fragment } from "react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const ConnectModal = ({ isOpen, onClose }: Props) => {
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={onClose}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-40" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900"
|
||||
>
|
||||
Connect your wallet
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-500">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
||||
Obcaecati suscipit alias itaque dolores, accusamus eius rem
|
||||
reiciendis optio in ducimus? Nulla hic, ut cupiditate totam
|
||||
culpa sed ratione dignissimos sunt.
|
||||
</p>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConnectModal;
|
@ -1,8 +1,9 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import SearchInput from "components/SearchInput";
|
||||
import ConnectModal from "./ConnectModal";
|
||||
|
||||
const mockedAccounts = [
|
||||
{
|
||||
@ -35,48 +36,56 @@ const NavLink = ({ href, children }: { href: string; children: string }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const Navigation = () => (
|
||||
<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>
|
||||
const Navigation = () => {
|
||||
const [showConnectModal, setShowConnectModal] = useState(false);
|
||||
|
||||
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>
|
||||
<button
|
||||
className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
|
||||
onClick={() => setShowConnectModal(true)}
|
||||
>
|
||||
Connect Wallet
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
|
||||
onClick={() => alert("TODO")}
|
||||
>
|
||||
Connect Wallet
|
||||
</button>
|
||||
{/* 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>
|
||||
<ConnectModal
|
||||
isOpen={showConnectModal}
|
||||
onClose={() => setShowConnectModal(false)}
|
||||
/>
|
||||
</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;
|
||||
|
@ -9,6 +9,7 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.0",
|
||||
"@sentry/nextjs": "^7.12.1",
|
||||
"next": "12.2.5",
|
||||
"react": "18.2.0",
|
||||
|
@ -1,15 +1,57 @@
|
||||
import React from "react";
|
||||
import Container from "components/Container";
|
||||
|
||||
const mockedAccounts = [
|
||||
{
|
||||
id: 1,
|
||||
label: "Subaccount 1",
|
||||
networth: 100000,
|
||||
totalPositionValue: 150000,
|
||||
debt: 50000,
|
||||
profit: 25000,
|
||||
leverage: 3,
|
||||
maxLeverage: 5,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Subaccount 2",
|
||||
networth: 100000,
|
||||
totalPositionValue: 150000,
|
||||
debt: 50000,
|
||||
profit: 25000,
|
||||
leverage: 3,
|
||||
maxLeverage: 5,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "Subaccount 3",
|
||||
networth: 100000,
|
||||
totalPositionValue: 150000,
|
||||
debt: 50000,
|
||||
profit: 25000,
|
||||
leverage: 3,
|
||||
maxLeverage: 5,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "Subaccount 4",
|
||||
networth: 100000,
|
||||
totalPositionValue: 150000,
|
||||
debt: 50000,
|
||||
profit: 25000,
|
||||
leverage: 3,
|
||||
maxLeverage: 5,
|
||||
},
|
||||
];
|
||||
|
||||
const Portfolio = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Container className="flex-1">Portfolio Module</Container>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Container>Subaccount 1</Container>
|
||||
<Container>Subaccount 2</Container>
|
||||
<Container>Subaccount 3</Container>
|
||||
<Container>Subaccount 4</Container>
|
||||
{mockedAccounts.map((account) => (
|
||||
<Container key={account.id}>{account.label}</Container>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user