feat: portfolio page

app/layout.tsx

@@ -7,11 +7,16 @@ import { WrongNetworkAlertDialog } from "@/components/stateful/dialogs/wrong-net
 import { RootProvider } from "@/providers/root"
 
 import "./globals.css"
+import { Metadata } from "next"
 
 const toastClasses =
   "!border !border-dark-green !text-sm !font-axiforma !text-white !bg-gray-scale-700 !font-normal"
 const titleClasses = "!font-medium"
 
+export const metadata: Metadata = {
+  title: "Mangrove DEX",
+}
+
 export default function RootLayout({
   children,
 }: {

app/points/_components/animals.tsx

@@ -205,7 +205,7 @@ function Level3(props: React.ComponentProps<"svg">) {
       viewBox="0 0 189 165"
       {...props}
     >
-      <g clip-path="url(#a)">
+      <g clipPath="url(#a)">
         <path
           fill="#F1F7F6"
           d="M36.363 35.362c1.129 1.177 1.386.78 2.988 1.102 2.618.523 4.455-1.035 5.988-1.61.955-.358 1.59-.572 2.492.358.608.623.633 1.645.234 2.415-.4.77-1.12 1.316-1.85 1.786-1.91 1.224-4.116 2.089-6.386 2.084-2.27-.005-4.603-.969-5.923-2.813l2.462-3.32-.005-.002ZM155.199 94.807c.079-.271.407-1.846.197-2.034-2.47-2.219-4.46-5.066-6.576-8.205-1.888-2.796-3.015-7.095-4.302-10.217 3.429 1.4 6.536-.325 8.533-3.01 1.763.71 4.599-.6 5.184-2.407l-.711-.72a8.543 8.543 0 0 1-1.787-5.309c.023-1.448-1.278-3.746.052-4.321 3.777-1.655-5.405-5.51-5.531-5.56-1.3-.533-2.401-1.512-3.851-1.708 0 0-1.663.542-2.8 1.252-1.481.925-2.144 2.699-2.764 4.336a86.032 86.032 0 0 1-5.773 12.228c-1.033 1.804-2.135 3.579-2.887 5.517-.753 1.939-1.138 4.08-.67 6.106.638 2.783 2.796 4.991 5.197 6.541 2.401 1.55 5.092 2.585 7.582 3.983 3.047 1.715 5.996 4.042 9.488 4.179.56.022 1.256-.111 1.417-.646l.002-.005Z"

app/portfolio/_components/history/history-detail-sheet.tsx

@@ -0,0 +1,159 @@
+import React from "react"
+
+import { TokenPair } from "@/components/token-pair"
+import { Text } from "@/components/typography/text"
+import { CircularProgressBar } from "@/components/ui/circle-progress-bar"
+import * as SheetRoot from "@/components/ui/sheet"
+import useMarket from "@/providers/market"
+import { cn } from "@/utils"
+import Big from "big.js"
+import { Ban, Check } from "lucide-react"
+import { Fill } from "@/app/trade/_components/tables/fills/schema"
+
+type SheetLineProps = {
+  title: string
+  item: React.ReactNode
+  secondaryItem?: React.ReactNode
+}
+
+const SheetLine = ({ title, item, secondaryItem }: SheetLineProps) => (
+  <div className="flex justify-between items-center">
+    <Text className="text-muted-foreground whitespace-nowrap">{title}:</Text>
+    <div className="grid justify-items-end max-w-60">
+      {item}
+      {secondaryItem}
+    </div>
+  </div>
+)
+
+type HistoryDetailSheetProps = {
+  onClose: () => void
+  orderInfo?: Fill | null
+}
+
+export default function HistoryDetailSheet({
+  orderInfo,
+  onClose,
+}: HistoryDetailSheetProps) {
+  if (!orderInfo) return null
+  const order = orderInfo
+  const {
+    creationDate,
+    status,
+    isMarketOrder,
+    initialWants,
+    takerGot,
+    isBid,
+    price,
+  } = order
+  const isFilled = status === "FILLED"
+  const { market } = useMarket()
+
+  const baseSymbol = market?.base.symbol
+  const quoteSymbol = market?.quote.symbol
+  const symbol = isBid ? baseSymbol : quoteSymbol
+  const displayDecimals = isBid
+    ? market?.base.displayedDecimals
+    : market?.quote.displayedDecimals
+
+  const amount = Big(initialWants).toFixed(displayDecimals)
+  const filled = Big(takerGot).toFixed(displayDecimals)
+  const progress = Math.min(
+    Math.round(
+      Big(filled)
+        .mul(100)
+        .div(Big(amount).eq(0) ? 1 : amount)
+        .toNumber(),
+    ),
+    100,
+  )
+
+  return (
+    <SheetRoot.Sheet open={!!order} onOpenChange={onClose}>
+      <SheetRoot.SheetContent className="space-y-0">
+        <SheetRoot.SheetHeader>
+          <SheetRoot.SheetTitle>Order Details</SheetRoot.SheetTitle>
+        </SheetRoot.SheetHeader>
+
+        <SheetRoot.SheetBody>
+          <div className="flex items-center space-x-2">
+            <TokenPair
+              titleProps={{
+                variant: "title3",
+                className: "text-sm text-current font-normal",
+                as: "span",
+              }}
+              tokenClasses="h-8 w-8"
+              baseToken={market?.base}
+              quoteToken={market?.quote}
+            />
+          </div>
+          <SheetLine
+            title="Status"
+            item={
+              <div
+                className={cn(
+                  "capitalize flex items-center space-x-1 px-2 py-0.5 rounded",
+                  isFilled
+                    ? "text-green-caribbean bg-primary-dark-green"
+                    : "text-red-100 bg-red-950 ",
+                )}
+              >
+                {isFilled ? <Check size={15} /> : <Ban size={15} />}
+                <span className="pt-0.5">
+                  {isFilled ? "Filled" : status.toLowerCase()}
+                </span>
+              </div>
+            }
+          />
+
+          {creationDate && (
+            <SheetLine
+              title="Order Date"
+              item={<Text>{new Date(creationDate).toDateString()}</Text>}
+              secondaryItem={
+                <Text className="text-muted-foreground">
+                  {new Date(creationDate).toLocaleTimeString()}
+                </Text>
+              }
+            />
+          )}
+
+          <SheetLine
+            title="Side"
+            item={<Text className={"text-green-caribbean"}>Buy</Text>}
+          />
+
+          <SheetLine
+            title="Type"
+            item={<Text>{isMarketOrder ? "Market" : "Limit"}</Text>}
+          />
+
+          <SheetLine
+            title="Filled/Amount"
+            item={
+              <div className={cn("flex items-center")}>
+                <span className="text-sm text-muted-foreground">
+                  {filled}
+                  &nbsp;/
+                </span>
+                <span className="">
+                  &nbsp;
+                  {amount} {symbol}
+                </span>
+              </div>
+            }
+            secondaryItem={
+              <Text className="text-muted-foreground flex items-center space-x-2">
+                <CircularProgressBar progress={progress} className="ml-3" />
+                <Text>{progress}%</Text>
+              </Text>
+            }
+          />
+
+          <SheetLine title="Price" item={<Text>{price}</Text>} />
+        </SheetRoot.SheetBody>
+      </SheetRoot.SheetContent>
+    </SheetRoot.Sheet>
+  )
+}

app/portfolio/_components/sidebar.tsx

@@ -0,0 +1,119 @@
+"use client"
+import { cn } from "@/utils"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+export default function Sidebar() {
+  const currentRoute = usePathname()
+  const getIsCurrentRoute = (route: string) => currentRoute === route
+
+  return (
+    <div className="space-y-4 text-sm m-2">
+      <Link
+        href="/portfolio"
+        className={cn("flex items-center space-x-2 py-2 px-4 rounded-xl", {
+          "bg-muted": getIsCurrentRoute("/portfolio"),
+        })}
+      >
+        {getIsCurrentRoute("/portfolio") && (
+          <div className="bg-green-caribbean size-2 rounded-full" />
+        )}
+        <span>Overview</span>
+      </Link>
+      <Link
+        href="/portfolio/orders"
+        className={cn("flex items-center space-x-2 py-2 px-4 rounded-xl", {
+          "bg-muted": getIsCurrentRoute("/portfolio/orders"),
+        })}
+      >
+        {getIsCurrentRoute("/portfolio/orders") && (
+          <div className="bg-green-caribbean size-2 rounded-full" />
+        )}
+        <span>Open Orders</span>
+      </Link>
+      <Link
+        href="/portfolio/strategies"
+        className={cn("flex items-center space-x-2 py-2 px-4 rounded-xl", {
+          "bg-muted": getIsCurrentRoute("/portfolio/strategies"),
+        })}
+      >
+        {getIsCurrentRoute("/portfolio/strategies") && (
+          <div className="bg-green-caribbean size-2 rounded-full" />
+        )}
+        <span className="whitespace-nowrap">My Strategies</span>
+      </Link>
+      <Link
+        href="/portfolio/history"
+        className={cn("flex items-center space-x-2 py-2 px-4 rounded-xl", {
+          "bg-muted": getIsCurrentRoute("/portfolio/history"),
+        })}
+      >
+        {getIsCurrentRoute("/portfolio/history") && (
+          <div className="bg-green-caribbean size-2 rounded-full" />
+        )}
+        <span>History</span>
+      </Link>
+
+      <style jsx global>{`
+        body {
+          display: grid;
+          grid-template:
+            "header" var(--bar-height)
+            "main" minmax(0, 1fr);
+          overflow: hidden;
+        }
+      `}</style>
+      <style jsx>{`
+        main {
+          display: grid;
+          grid-area: main;
+          grid-template-columns: 12rem minmax(0, 1fr);
+          grid-template-rows: 1fr var(--history-table-height);
+          grid-template-areas:
+            "trade content"
+            "trade tables";
+        }
+
+        .tables-section {
+          grid-area: tables;
+        }
+
+        .portfolio-section {
+          grid-area: trade;
+        }
+
+        .book-and-chart {
+          display: grid;
+          grid-area: content;
+          grid-template-areas: "book chart";
+          grid-template-columns: 20.5rem minmax(0, 1fr);
+          grid-template-rows: var(--book-chart-height);
+        }
+
+        @media (max-height: 800px) {
+          main {
+            grid-template-rows: 50% 50%;
+          }
+
+          .book-and-chart {
+            grid-template-rows: calc(50vh - var(--bar-height) + 38px);
+          }
+        }
+      `}</style>
+      <style global jsx>{`
+        .market-chart-container div[role="tabpanel"] {
+          height: calc(100% - var(--bar-height) * 2);
+        }
+        .book-container div[role="tabpanel"] {
+          height: calc(100% - var(--bar-height));
+        }
+
+        @media (max-height: 800px) {
+          :root {
+            --history-table-content-height: calc(50vh - var(--bar-height) * 2);
+          }
+        }
+      `}</style>
+    </div>
+  )
+}

app/portfolio/_components/tables/balance/schema.ts

@@ -0,0 +1,6 @@
+import { z } from "zod"
+
+const balanceSchema = z.object({
+  address: z.string(),
+})
+export type Balance = z.infer<typeof balanceSchema>