create quote details page

ahmedivy · Aug 23, 2023 · 97860a1 · 97860a1
1 parent c82b7bd
commit 97860a1
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 2 deletions.
diff --git a/app/(portal)/quotes/[symbol]/page.jsx b/app/(portal)/quotes/[symbol]/page.jsx
@@ -0,0 +1,106 @@
+import Link from "next/link";
+import { HiPlus } from "react-icons/hi";
+
+import { Button } from "@/components/ui/button";
+import { authOptions } from "@/lib/auth";
+import { getServerSession } from "next-auth";
+import prisma from "@/lib/db";
+import { getSymbolDetails } from "@/lib/meta-api/account";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableRow,
+} from "@/components/ui/table";
+import { timeSince } from "@/lib/utils";
+
+async function Page({ params }) {
+  const { symbol } = params;
+  const session = await getServerSession(authOptions);
+  const data = await getSymbolDetails(symbol, session.user.accountId);
+
+  const rows = [
+    {
+      name: "Ask Price",
+      value: data.ask,
+    },
+    {
+      name: "Bid Price",
+      value: data.bid,
+    },
+    {
+      name: "Loss Tick Value",
+      value: Math.round(data.lossTickValue, 4),
+    },
+    {
+      name: "Profit Tick Value",
+      value: Math.round(data.profitTickValue, 4),
+    },
+    {
+      name: "Initial Margin",
+      value: data.initialMargin,
+    },
+    {
+      name: "Maintenance Margin",
+      value: data.maintenanceMargin,
+    },
+    {
+      name: "Tick Size",
+      value: data.tickSize,
+    },
+    {
+      name: "Min Volume",
+      value: data.minVolume,
+    },
+    {
+      name: "Max Volume",
+      value: data.maxVolume,
+    },
+    {
+      name: "Volume Step",
+      value: data.volumeStep,
+    },
+    {
+      name: "Margin Currency",
+      value: data.marginCurrency,
+    },
+    {
+      name: "Profit Currency",
+      value: data.profitCurrency,
+    },
+  ];
+
+  return (
+    <main className="w-full lg:pl-6 pt-4 flex flex-col gap-4">
+      <div className="flex flex-col md:flex-row md:items-center justify-between w-full gap-4">
+        <div className="flex flex-col gap-3">
+          <h1 className="text-3xl font-black">{symbol}</h1>
+          <p className="text-muted-foreground text-xl">{data.description}</p>
+        </div>
+        <Button className="font-bold text-md" size="lg">
+          <HiPlus className="w-5 h-5 mr-2" />
+          Place Order
+        </Button>
+      </div>
+
+      <Table>
+        <TableCaption>Updated {timeSince(data.time)} ago</TableCaption>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.name}>
+              <TableCell>{row.name}</TableCell>
+              <TableCell className="text-right font-bold">
+                {row.value}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+    </main>
+  );
+}
+
+export default Page;
diff --git a/components/quote-card.jsx b/components/quote-card.jsx
@@ -32,7 +32,7 @@ function QuoteCard({
   const bidColor = bidPriceIncreased ? "text-blue-500" : "text-red-500";
 
   return (
-    <Link href={`/trades/${symbol}`} passHref>
+    <Link href={`/quotes/${symbol}`} passHref>
       <Card className="shadow-none rounded-lg border-0 lg:border lg:hover:bg-accent cursor-pointer">
         <CardContent className="w-full flex justify-between py-6 lg:py-8 px-0 lg:px-8 items-center">
           <p className="text-lg lg:text-2xl font-semibold lg:font-bold">

diff --git a/lib/meta-api/account.js b/lib/meta-api/account.js
@@ -107,3 +107,33 @@ export async function getSymbolsPrices(symbols, id) {
 
   return prices;
 }
+
+// /users/current/accounts/:accountId/symbols/:symbol/specification
+export async function getSymbolSpecification(symbol, id) {
+  const res = await fetch(
+    `${URL}/users/current/accounts/${id}/symbols/${symbol}/specification`,
+    {
+      method: "GET",
+      headers: getApiHeaders(),
+    }
+  );
+
+  if (res.status !== 200) {
+    throw new Error("Failed to get symbol specification");
+  }
+
+  const data = await res.json();
+  return data;
+}
+
+export async function getSymbolDetails(symbol, id) {
+  const [price, specification] = await Promise.all([
+    getSymbolPrice(symbol, id),
+    getSymbolSpecification(symbol, id),
+  ]);
+
+  return {
+    ...price,
+    ...specification,
+  };
+}
diff --git a/lib/utils.js b/lib/utils.js
@@ -19,4 +19,30 @@ export function getApiHeaders() {
     "Content-Type": "application/json",
     "auth-token": process.env.META_API_TOKEN,
   };
-}
+}
+
+export function timeSince(time) {
+  const seconds = Math.floor((new Date() - new Date(time)) / 1000);
+  let interval = seconds / 31536000;
+
+  if (interval > 1) {
+    return `${Math.floor(interval)}y`;
+  }
+  interval = seconds / 2592000;
+  if (interval > 1) {
+    return `${Math.floor(interval)}m`;
+  }
+  interval = seconds / 86400;
+  if (interval > 1) {
+    return `${Math.floor(interval)}d`;
+  }
+  interval = seconds / 3600;
+  if (interval > 1) {
+    return `${Math.floor(interval)}h`;
+  }
+  interval = seconds / 60;
+  if (interval > 1) {
+    return `${Math.floor(interval)}m`;
+  }
+  return `${Math.floor(seconds)}s`;
+}