feat: connect wallet modal initial

components/ConnectModal.tsx

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

components/Navigation.tsx

@@ -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 = () => (
+const Navigation = () => {
-  <div>
+  const [showConnectModal, setShowConnectModal] = useState(false);
-    {/* Main navigation bar */}
+
-    <div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
+  return (
-      <Link href="/" passHref>
+    <div>
-        <a>
+      {/* Main navigation bar */}
-          <img src="/logo.svg" alt="mars" />
+      <div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
-        </a>
+        <Link href="/" passHref>
-      </Link>
+          <a>
-      <div className="flex px-12 gap-5 text-white/40">
+            <img src="/logo.svg" alt="mars" />
-        <NavLink href="/trade">Trade</NavLink>
+          </a>
-        <NavLink href="/yield">Yield</NavLink>
+        </Link>
-        <NavLink href="/borrow">Borrow</NavLink>
+        <div className="flex px-12 gap-5 text-white/40">
-        <NavLink href="/portfolio">Portfolio</NavLink>
+          <NavLink href="/trade">Trade</NavLink>
-        <NavLink href="/council">Council</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
+      {/* Sub navigation bar */}
-        className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
+      <div className="flex justify-between px-6 py-3 text-sm text-white/40">
-        onClick={() => alert("TODO")}
+        <div className="flex items-center">
-      >
+          <SearchInput />
-        Connect Wallet
+          {mockedAccounts.map((account, index) => (
-      </button>
+            <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;

package.json

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

pages/portfolio.tsx

@@ -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>
+        {mockedAccounts.map((account) => (
-        <Container>Subaccount 2</Container>
+          <Container key={account.id}>{account.label}</Container>
-        <Container>Subaccount 3</Container>
+        ))}
-        <Container>Subaccount 4</Container>
       </div>
     </div>
   );