ajaymahadeven · ajaymahadeven · Apr 18, 2024 · Apr 18, 2024 · Apr 18, 2024 · Apr 18, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
         "next": "^14.2.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hot-toast": "^2.4.1",
         "server-only": "^0.0.1",
         "superjson": "^2.2.1",
         "tailwind-merge": "^2.2.2",

diff --git a/.../migrations/20240417125213_/migration.sql → .../migrations/20240418124724_/migration.sql b/.../migrations/20240417125213_/migration.sql → .../migrations/20240418124724_/migration.sql
@@ -11,11 +11,11 @@ CREATE TABLE "Post" (
 -- CreateTable
 CREATE TABLE "OrderBookData" (
     "id" SERIAL NOT NULL,
-    "timestamp" BIGINT NOT NULL,
+    "timestamp" DOUBLE PRECISION NOT NULL,
     "exchange" TEXT NOT NULL,
     "coin" TEXT NOT NULL,
-    "bids" JSONB NOT NULL,
-    "asks" JSONB NOT NULL,
+    "bids" TEXT NOT NULL,
+    "asks" TEXT NOT NULL,
     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "updatedAt" TIMESTAMP(3) NOT NULL,
 

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -24,8 +24,8 @@ model OrderBookData {
   timestamp Float
   exchange  String
   coin      String
-  bids      Json
-  asks      Json
+  bids      String
+  asks      String
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
@@ -19,13 +19,13 @@ export default function Page() {
     const { refetch: latestDataRefetch } = api.orderBook.getOrderBook.useQuery(
         undefined,
         {
-            refetchInterval: 5000,
+            refetchInterval: 500,
         },
     );
 
     const { data: storageOrderBookData, isError } =
         api.orderBook.getStorageOrderBookData.useQuery(undefined, {
-            refetchInterval: 5500,
+            refetchInterval: 510,
         });
 
     if (!storageOrderBookData) {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,5 @@
+import { Toaster } from 'react-hot-toast';
+
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 
@@ -45,6 +47,7 @@ export default function RootLayout({
             </head>
 
             <body className={`font-sans ${inter.className}`}>
+                <Toaster />
                 <DevelopmentBanner />
                 <DesktopNav />
                 <MobileNav />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -22,7 +22,7 @@ export default function Home() {
         refetch,
         isError,
     } = api.orderBook.getOrderBook.useQuery(undefined, {
-        refetchInterval: 5000,
+        refetchInterval: 1000,
     });
 
     console.log('orderBookData', orderBookData);

diff --git a/src/app/watchlist/page.tsx b/src/app/watchlist/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Page() {
+    return (
+        <div>
+            <h1>Watchlist</h1>
+        </div>
+    );
+}
diff --git a/src/components/order-table/DesktopTable.tsx b/src/components/order-table/DesktopTable.tsx
@@ -1,6 +1,10 @@
+import React, { useState } from 'react';
+
 import Link from 'next/link';
 
+import { Binoculars } from '@phosphor-icons/react';
 import { Table, Tag } from 'antd';
+import { Modal } from 'antd';
 // import { orderBookData } from '~/data/fakeData/fakeData';
 import type { OrderBookData } from '~/types/interfaces/orderBookData';
 import { getLastUpdatedTime } from '~/utils/lastUpdated';
@@ -18,6 +22,20 @@ export default function DesktopTable({
     orderBookData: OrderBookData[];
     refetch: () => void;
 }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const showModal = () => {
+        setIsModalOpen(true);
+    };
+
+    const handleOk = () => {
+        setIsModalOpen(false);
+    };
+
+    const handleCancel = () => {
+        setIsModalOpen(false);
+    };
+
     return (
         <div className="mt-10 hidden w-full flex-col items-center justify-center lg:flex">
             {
@@ -157,9 +175,31 @@ export default function DesktopTable({
                             dataIndex: 'details',
 
                             render: () => (
-                                <Button className="bg-[#105a37]   text-base font-semibold text-white hover:bg-black">
-                                    Details
-                                </Button>
+                                <>
+                                    <Button
+                                        className="bg-[#105a37]   text-base font-semibold text-white hover:bg-black"
+                                        onClick={showModal}
+                                    >
+                                        Details
+                                    </Button>
+                                    <Modal
+                                        title="Basic Modal"
+                                        open={isModalOpen}
+                                        onOk={handleOk}
+                                        onCancel={handleCancel}
+                                    >
+                                        <div className="flex w-full  flex-row justify-end">
+                                            <Button className="flex  flex-row  rounded-full bg-green-500 hover:bg-green-600">
+                                                <Binoculars
+                                                    size={25}
+                                                    weight="bold"
+                                                    className="mx-1"
+                                                />
+                                                <span>Add to Watchlist</span>
+                                            </Button>
+                                        </div>
+                                    </Modal>
+                                </>
                             ),
                         },
                         {

diff --git a/src/server/api/routers/orderbookDBRetrieve.md b/src/server/api/routers/orderbookDBRetrieve.md
@@ -0,0 +1,63 @@
+import { createTRPCRouter, publicProcedure } from '~/server/api/trpc';
+import { connectToWebSocket } from '~/server/trpc/ws';
+import { OrderBookSchema } from '~/types/schemas/OrderBookSchema';
+
+export const orderBookRouter = createTRPCRouter({
+getOrderBook: publicProcedure.query(async ({ ctx }) => {
+await connectToWebSocket(ctx);
+const data = await ctx.db.orderBookData.findMany({
+orderBy: {
+timestamp: 'desc',
+},
+select: {
+id: true,
+timestamp: true,
+exchange: true,
+coin: true,
+asks: true,
+bids: true,
+},
+take: 1,
+});
+
+        const formattedOrderBookData = data.map((item) => ({
+            id: item.id,
+            timestamp: item.timestamp,
+            exchange: item.exchange,
+            coin: item.coin,
+            asks: typeof item.asks === 'string' ? JSON.parse(item.asks) : [],
+            bids: typeof item.bids === 'string' ? JSON.parse(item.bids) : [],
+        }));
+
+        return formattedOrderBookData;
+    }),
+
+    getStorageOrderBookData: publicProcedure.query(async ({ ctx }) => {
+        const orderBookData = await ctx.db.orderBookData.findMany({
+            orderBy: {
+                timestamp: 'desc',
+            },
+            select: {
+                id: true,
+                timestamp: true,
+                exchange: true,
+                coin: true,
+                asks: true,
+                bids: true,
+            },
+            take: 10,
+        });
+
+        const formattedOrderBookData = orderBookData.map((item) => ({
+            id: item.id,
+            timestamp: item.timestamp,
+            exchange: item.exchange,
+            coin: item.coin,
+            asks: typeof item.asks === 'string' ? JSON.parse(item.asks) : [],
+            bids: typeof item.bids === 'string' ? JSON.parse(item.bids) : [],
+        }));
+
+        return formattedOrderBookData;
+    }),
+
+});
diff --git a/src/server/trpc/wsdbpush.md b/src/server/trpc/wsdbpush.md
@@ -0,0 +1,54 @@
+import type { inferRouterContext } from '@trpc/server';
+import { WebSocket } from 'ws';
+import type { AppRouter } from '~/server/api/root';
+import type { OrderBookData } from '~/types/interfaces/orderBookData';
+import { OrderBookSchema } from '~/types/schemas/OrderBookSchema';
+
+export async function connectToWebSocket(ctx: inferRouterContext<AppRouter>) {
+await new Promise<void>((resolve, reject) => {
+const ws = new WebSocket(process.env.WS_URL as string);
+
+        ws.on('open', () => {
+            console.log('WebSocket connection established');
+        });
+
+        ws.on('message', (data: OrderBookData) => {
+            try {
+                const orderBookData: OrderBookData = JSON.parse(
+                    data.toString(),
+                );
+                const validatedData = OrderBookSchema.parse(orderBookData);
+
+                // Store the data in the db
+                ctx.db.orderBookData
+                    .create({
+                        data: {
+                            exchange: validatedData.exchange,
+                            coin: validatedData.coin,
+                            timestamp: validatedData.timestamp,
+                            bids: JSON.stringify(validatedData.bids),
+                            asks: JSON.stringify(validatedData.asks),
+                        },
+                    })
+                    .then(() => {
+                        console.log('Data stored in the db successfully');
+                    })
+                    .catch((error) => {
+                        console.error('Error storing data in the db:', error);
+                    });
+            } catch (error) {
+                console.error('Error parsing data:', error);
+            }
+        });
+
+        ws.on('error', (error: string) => {
+            reject(error);
+        });
+
+        ws.on('close', () => {
+            console.log('WebSocket connection closed');
+            resolve();
+        });
+    });
+
+}