feat: connect wallet modal initial

This commit is contained in:
Gustavo Mauricio 2022-09-08 07:23:02 +01:00
parent f9249c0f28
commit 5169643e8c
5 changed files with 708 additions and 591 deletions

View 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;

View File

@ -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;

View File

@ -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",

View File

@ -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>
);

1095
yarn.lock

File diff suppressed because it is too large Load Diff