Tailwind custom classes init

e --onto df8b6c6155805c0c1729192fc9556ac2ead5ef9e 8e696263d5b727f87c2e75880ab7bf650c5a8e48^

@@ -0,0 +1,71 @@
+commit 8e696263d5b727f87c2e75880ab7bf650c5a8e48 (HEAD -> main)
+Author: RitikBora <[email protected]>
+Date:   Wed Jul 24 16:05:29 2024 +0530
+
+    removed nodemoduels
+
+commit f274fcd3cd75a7ea02481be3d2cea3a03122a389
+Author: RitikBora <[email protected]>
+Date:   Wed Jul 24 16:03:21 2024 +0530
+
+    deployment ready
+
+commit df8b6c6155805c0c1729192fc9556ac2ead5ef9e (origin/main, origin/HEAD)
+Author: RitikBora <[email protected]>
+Date:   Wed Jul 24 14:55:23 2024 +0530
+
+    frontend completed
+
+commit 146da1531c99ea9ab5d967203c10bfeb8a2a73d2
+Author: RitikBora <[email protected]>
+Date:   Mon Jul 1 17:00:44 2024 +0530
+
+    added market data
+
+commit 1d89ab6f2649b672f21372ad63fa41c2daad77b3
+Author: RitikBora <[email protected]>
+Date:   Fri Jun 28 00:21:29 2024 +0530
+
+    live trades added
+
+commit 213f2f9f16ddb0b6f2bce90b4533c40c3d9d6b88
+Author: RitikBora <[email protected]>
+Date:   Thu Jun 27 09:44:39 2024 +0530
+
+    Realtime deapth added
+
+commit c4dce0946d17af63d2e26bf5adc95bd9b894115b
+Author: RitikBora <[email protected]>
+Date:   Mon Jun 24 14:58:54 2024 +0530
+
+    Tailwind custom classes init
+
+commit a211bad173f906fd40d13867e8d0984f114e2989
+Author: harkirat <[email protected]>
+Date:   Sun Jun 23 18:41:03 2024 +0530
+
+    Updated readme
+
+commit 5732d4a3fda44e62d45d4ecc8fd2146c136a0256
+Author: harkirat <[email protected]>
+Date:   Sun Jun 23 18:31:14 2024 +0530
+
+    Added border
+
+commit fc2126a98259c92ee0e645ad809613e05bfbb7ad
+Author: harkirat <[email protected]>
+Date:   Sun Jun 23 18:27:07 2024 +0530
+
+    Renamed fodlers
+
+commit 4486b4018b2232c79ca1787b3c9bf6f833347844
+Author: harkirat <[email protected]>
+Date:   Sun Jun 23 18:22:40 2024 +0530
+
+    Day 2 added
+
+commit c69a0f9db91c1a8edf4199c1e6a199190227557e
+Author: harkirat <[email protected]>
+Date:   Sat Jun 22 18:13:07 2024 +0530
+
+    Basic orderbook

week-1/day-2/binance-frontend-realtime/.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react-hooks/exhaustive-deps": "off",
+    "react/jsx-key": "off",
+    "@next/next/no-img-element": "off",
+    "jsx-a11y/alt-text": "off"
+  }
 }

week-1/day-2/binance-frontend-realtime/app/components/Appbar.tsx

@@ -12,7 +12,7 @@ export const Appbar = () => {
         <div className="flex justify-between items-center p-2">
             <div className="flex">
                 <div className={`text-xl pl-4 flex flex-col justify-center cursor-pointer text-white`} onClick={() => router.push('/')}>
-                    Exchange
+                    XChange
                 </div>
                 <div className={`text-sm pt-1 flex flex-col justify-center pl-8 cursor-pointer ${route.startsWith('/markets') ? 'text-white' : 'text-slate-500'}`} onClick={() => router.push('/markets')}>
                     Markets
@@ -21,12 +21,7 @@ export const Appbar = () => {
                     Trade
                 </div>
             </div>
-            <div className="flex">
-                <div className="p-2 mr-2">
-                    <SuccessButton>Deposit</SuccessButton>
-                    <PrimaryButton>Withdraw</PrimaryButton>
-                </div>
-            </div>
+
         </div>
     </div>
 }

week-1/day-2/binance-frontend-realtime/app/components/MarketBar.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
+// @ts-ignore
 import { Ticker } from "../utils/types";
 import { getTicker } from "../utils/httpClient";
 import { SignalingManager } from "../utils/SignalingManager";
@@ -37,22 +38,22 @@ export const MarketBar = ({market}: {market: string}) => {
                     <div className="flex items-center flex-row space-x-8 pl-4">
                         <div className="flex flex-col h-full justify-center">
                             <p className={`font-medium tabular-nums text-greenText text-md text-green-500`}>${ticker?.lastPrice}</p>
-                            <p className="font-medium text-sm text-sm tabular-nums">${ticker?.lastPrice}</p>
+                            <p className="font-medium text-sm text-sm text-baseTextHighEmphasis tabular-nums">${ticker?.lastPrice}</p>
                         </div>
                         <div className="flex flex-col">
                             <p className={`font-medium text-xs text-slate-400 text-sm`}>24H Change</p>
                             <p className={` text-sm font-medium tabular-nums leading-5 text-sm text-greenText ${Number(ticker?.priceChange) > 0 ? "text-green-500" : "text-red-500"}`}>{Number(ticker?.priceChange) > 0 ? "+" : ""} {ticker?.priceChange} {Number(ticker?.priceChangePercent)?.toFixed(2)}%</p></div><div className="flex flex-col">
                                 <p className="font-medium text-xs text-slate-400 text-sm">24H High</p>
-                                <p className="text-sm font-medium tabular-nums leading-5 text-sm ">{ticker?.high}</p>
+                                <p className="text-sm font-medium tabular-nums leading-5 text-sm  text-baseTextHighEmphasis ">{ticker?.high}</p>
                                 </div>
                                 <div className="flex flex-col">
                                     <p className="font-medium text-xs text-slate-400 text-sm">24H Low</p>
-                                    <p className="text-sm font-medium tabular-nums leading-5 text-sm ">{ticker?.low}</p>
+                                    <p className="text-sm font-medium tabular-nums leading-5 text-sm text-baseTextHighEmphasis">{ticker?.low}</p>
                                 </div>
                             <button type="button" className="font-medium transition-opacity hover:opacity-80 hover:cursor-pointer text-base text-left" data-rac="">
                                 <div className="flex flex-col">
-                                    <p className="font-medium text-xs text-slate-400 text-sm">24H Volume</p>
-                                    <p className="mt-1 text-sm font-medium tabular-nums leading-5 text-sm ">{ticker?.volume}
+                                    <p className="font-medium text-xs text-slate-400 text-sm ">24H Volume</p>
+                                    <p className="mt-1 text-sm font-medium tabular-nums leading-5 text-sm text-baseTextHighEmphasis">{ticker?.volume}
                                 </p>
                             </div>
                         </button>
@@ -71,7 +72,7 @@ function Ticker({market}: {market: string}) {
         </div>
     <button type="button" className="react-aria-Button" data-rac="">
         <div className="flex items-center justify-between flex-row cursor-pointer rounded-lg p-3 hover:opacity-80">
-            <div className="flex items-center flex-row gap-2 undefined">
+            <div className="flex items-center flex-row gap-2 text-baseTextHighEmphasis undefined">
                 <div className="flex flex-row relative">
                     <p className="font-medium text-sm undefined">{market.replace("_", " / ")}</p>
                 </div>

week-1/day-2/binance-frontend-realtime/app/components/SwapUI.tsx

@@ -1,11 +1,46 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { Ticker } from "../utils/types";
+import { SignalingManager } from "../utils/SignalingManager";
+import { Bounce, ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 export function SwapUI({ market }: {market: string}) {
     const [amount, setAmount] = useState('');
     const [activeTab, setActiveTab] = useState('buy');
     const [type, setType] = useState('limit');
+    const [lastPrice , setLastPrice] = useState(0);
 
+    const showAlert = () =>
+    {
+        toast.warn('Application for Trade license pending! Inconvenience regretted.', {
+            position: "top-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+            transition: Bounce,
+            });
+    }
+
+    useEffect(() =>
+    {
+        SignalingManager.getInstance().registerCallback("ticker", (data: Partial<Ticker>)  =>  {
+            // @ts-ignore
+            setLastPrice(data.lastPrice);
+        } , market);
+        SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`ticker.${market}`]}	);
+
+        return(() =>
+        {
+            SignalingManager.getInstance().deRegisterCallback("ticker", market);
+            SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`ticker.${market}`]}	);
+
+        })
+    } , []);
     return <div>
         <div className="flex flex-col">
             <div className="flex flex-row h-[60px]">
@@ -32,7 +67,7 @@ export function SwapUI({ market }: {market: string}) {
                                 Price
                             </p>
                             <div className="flex flex-col relative">
-                                <input step="0.01" placeholder="0" className="h-12 rounded-lg border-2 border-solid border-baseBorderLight bg-[var(--background)] pr-12 text-right text-2xl leading-9 text-[$text] placeholder-baseTextMedEmphasis ring-0 transition focus:border-accentBlue focus:ring-0" type="text" value="134.38" />
+                                <input step="0.01" placeholder="0" className="h-12 rounded-lg border-2 border-solid border-baseBorderLight bg-[var(--background)] pr-12 text-right text-2xl leading-9 text-[$text] placeholder-baseTextMedEmphasis ring-0 transition focus:border-accentBlue focus:ring-0" type="text" value={lastPrice} />
                                 <div className="flex flex-row absolute right-1 top-1 p-2">
                                     <div className="relative">
                                         <img src="/usdc.webp" className="w-6 h-6" />
@@ -41,7 +76,7 @@ export function SwapUI({ market }: {market: string}) {
                             </div>
                         </div>
                     </div>
-                    <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-2" onClick={showAlert}>
                         <p className="text-xs font-normal text-baseTextMedEmphasis">
                             Quantity
                         </p>
@@ -57,36 +92,42 @@ export function SwapUI({ market }: {market: string}) {
                             <p className="font-medium pr-2 text-xs text-baseTextMedEmphasis">≈ 0.00 USDC</p>
                         </div>
                         <div className="flex justify-center flex-row mt-2 gap-3">
-                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3">
+                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3 text-baseTextHighEmphasis">
                                 25%
                             </div>
-                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3">
+                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3 text-baseTextHighEmphasis">
                                 50%
                             </div>
-                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3">
+                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3 text-baseTextHighEmphasis">
                                 75%
                             </div>
-                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3">
+                            <div className="flex items-center justify-center flex-row rounded-full px-[16px] py-[6px] text-xs cursor-pointer bg-baseBackgroundL2 hover:bg-baseBackgroundL3 text-baseTextHighEmphasis">
                                 Max
                             </div>
                         </div>
                     </div>
-                    <button type="button" className="font-semibold  focus:ring-blue-200 focus:none focus:outline-none text-center h-12 rounded-xl text-base px-4 py-2 my-4 bg-greenPrimaryButtonBackground text-greenPrimaryButtonText active:scale-98" data-rac="">Buy</button>
+                    {activeTab === 'buy' ? <button type="button" className="font-semibold  focus:ring-blue-200 focus:none focus:outline-none text-center h-12 rounded-xl text-base px-4 py-2 my-4 bg-greenPrimaryButtonBackground text-greenPrimaryButtonText active:scale-98" onClick={showAlert} data-rac="">Buy</button> :
+                    <button type="button" className="font-semibold  focus:ring-blue-200 focus:none focus:outline-none text-center h-12 rounded-xl text-base px-4 py-2 my-4 bg-redPrimaryButtonBackground text-redPrimaryButtonText active:scale-98" onClick={showAlert} data-rac="">Sell</button>
+                    }
+
+
                     <div className="flex justify-between flex-row mt-1">
                         <div className="flex flex-row gap-2">
                             <div className="flex items-center">
                                 <input className="form-checkbox rounded border border-solid border-baseBorderMed bg-base-950 font-light text-transparent shadow-none shadow-transparent outline-none ring-0 ring-transparent checked:border-baseBorderMed checked:bg-base-900 checked:hover:border-baseBorderMed focus:bg-base-900 focus:ring-0 focus:ring-offset-0 focus:checked:border-baseBorderMed cursor-pointer h-5 w-5" id="postOnly" type="checkbox" data-rac="" />
-                                <label className="ml-2 text-xs">Post Only</label>
+                                <label className="ml-2 text-xs text-baseTextHighEmphasis">Post Only</label>
                             </div>
                             <div className="flex items-center">
                                 <input className="form-checkbox rounded border border-solid border-baseBorderMed bg-base-950 font-light text-transparent shadow-none shadow-transparent outline-none ring-0 ring-transparent checked:border-baseBorderMed checked:bg-base-900 checked:hover:border-baseBorderMed focus:bg-base-900 focus:ring-0 focus:ring-offset-0 focus:checked:border-baseBorderMed cursor-pointer h-5 w-5" id="ioc" type="checkbox" data-rac="" />
-                                <label className="ml-2 text-xs">IOC</label>
+                                <label className="ml-2 text-xs text-baseTextHighEmphasis">IOC</label>
                             </div>
                         </div>
                 </div>
             </div>
         </div>
     </div>
+    <ToastContainer
+        />
 </div>
 }
 

week-1/day-2/binance-frontend-realtime/app/components/Trades.tsx

@@ -0,0 +1,52 @@
+import { Trade } from "../utils/types";
+
+export const Trades = ({trades} : { trades : Trade[]}) =>
+{
+
+
+    return (
+        <div>
+            <div className="flex flex-row border-b-1 border-b-borderColor w-full flex-1">
+                <p className="w-[33.3%] px-1 text-left text-xs font-semibold text-baseTextMedEmphasis">Price (USDC)</p>
+                <p className="w-[33.3%] px-1 text-right text-xs font-semibold text-baseTextMedEmphasis">Qty (SOL)</p>
+            </div>
+        <div className="flex flex-col">
+            {trades.map((trade : Trade) => {
+                return <TradeRow isBuyerMaker={trade.isBuyerMaker} price={trade.price} quantity={trade.quantity}
+                timestamp = {trade.timestamp}/>
+            })}
+        </div>
+        </div>
+    )
+}
+
+function TradeRow({isBuyerMaker , price , quantity , timestamp} : {isBuyerMaker: Boolean , price : string , quantity: string , timestamp : number}) {
+    return(
+            <div className="flex flex-row w-full cursor-default bg-transparent hover:bg-white/7">
+                <div className="flex items-center flex-row py-2 w-[33.3%] !py-1">
+                    <div className={`w-full text-sm font-normal capitalize tabular-nums px-1 text-left ${isBuyerMaker === false ? "text-greenText": "text-redText "}`}>
+                        {price}
+                    </div>
+                </div>
+                <div className="flex items-center flex-row py-2 w-[33.3%] !py-1">
+                    <div className="w-full text-sm font-normal capitalize tabular-nums text-baseTextHighEmphasis/90 text-right ">
+                        {quantity}
+                    </div>
+                </div>
+                <div className="flex items-center flex-row py-2 w-[33.3%] !py-1">
+                    <div className="w-full text-sm font-normal capitalize tabular-nums text-baseTextHighEmphasis/90 text-right text-baseTextMedEmphasis">
+                        {convertTimestampToTime(timestamp)}
+                    </div>
+                </div>
+        </div>
+    )
+}
+
+function convertTimestampToTime(timestamp : number) {
+    const date = new Date(timestamp);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+}
+

week-1/day-2/binance-frontend-realtime/app/components/core/Button.tsx

@@ -1,14 +1,17 @@
+import { on } from "events"
 
 export const PrimaryButton = ({ children, onClick }: { children: string, onClick?: () => void }) => {
-    return <button type="button" className="text-center font-semibold rounded-lg focus:ring-blue-200 focus:none focus:outline-none hover:opacity-90 disabled:opacity-80 disabled:hover:opacity-80 relative overflow-hidden h-[32px] text-sm px-3 py-1.5 mr-4 ">
+    return <button type="button" className="text-center font-semibold rounded-lg focus:ring-blue-200 focus:none focus:outline-none hover:opacity-90 disabled:opacity-80 disabled:hover:opacity-80 relative overflow-hidden h-[60px] w-[128px]  px-3 py-1.5 mr-4 
+    " onClick={onClick} style={{fontSize : '1.3rem'}}>
         <div className="absolute inset-0 bg-blue-500 opacity-[16%]"></div>
         <div className="flex flex-row items-center justify-center gap-4"><p className="text-blue-500">{children}</p></div>
     </button>
 
 } 
 
 export const SuccessButton = ({ children, onClick }: { children: string, onClick?: () => void }) => {
-    return <button type="button" className="text-center font-semibold rounded-lg focus:ring-green-200 focus:none focus:outline-none hover:opacity-90 disabled:opacity-80 disabled:hover:opacity-80 relative overflow-hidden h-[32px] text-sm px-3 py-1.5 mr-4 ">
+    return <button type="button" className="text-center font-semibold rounded-lg focus:ring-green-200 focus:none focus:outline-none hover:opacity-90 disabled:opacity-80 disabled:hover:opacity-80 relative overflow-hidden h-[60px] w-[150px] px-3 py-1.5 mr-4 "
+    onClick={onClick} style={{fontSize : '1.3rem'}}>
         <div className="absolute inset-0 bg-green-500 opacity-[16%]"></div>
         <div className="flex flex-row items-center justify-center gap-4"><p className="text-green-500">{children}</p></div>
     </button>