Realtimechange

.gitignore

@@ -0,0 +1,12 @@
+./week-2/engine/node_modules
+./week-2/engine/dist
+./week-2/engine/snapshot.json
+./week-2/engine/coverage
+./week-2/db/node_modules
+./week-2/db/dist
+./week-2/ws/node_modules
+./week-2/ws/dist
+./week-2/api/node_modules
+./week-2/api/dist
+./week-2/mm/node_modules
+./week-2/mm/dist

week-1/day-1/src/index.ts

@@ -2,7 +2,7 @@ import express from "express";
 import { OrderInputSchema } from "./types";
 import { orderbook, bookWithQuantity } from "./orderbook";
 
-const BASE_ASSET = 'BTC';
+const BASE_ASSET = 'BTC' ;
 const QUOTE_ASSET = 'USD';
 
 const app = express();

week-1/day-1/src/redisClient.ts

@@ -5,4 +5,4 @@ const client = createClient();
 
 client.connect();
 
-export default client;
+export default client;

week-1/day-2/binance-frontend-realtime/README.md

@@ -2,4 +2,4 @@
  - Add realtime depth data
  - Add a tab to see the latest trades in realtime
  - Add the Markets and Landing page
- - Remove hardcoded images
+ - Remove hardcoded images

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

@@ -1,32 +1,51 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { PrimaryButton, SuccessButton } from "./core/Button"
+import { PrimaryButton, SuccessButton } from "./core/Button";
 import { useRouter } from "next/navigation";
+import SearchBar from "./SearchBar";
 
 export const Appbar = () => {
-    const route = usePathname();
-    const router = useRouter()
+  const route = usePathname();
+  const router = useRouter();
 
-    return <div className="text-white border-b border-slate-800">
-        <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
-                </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
-                </div>
-                <div className={`text-sm pt-1 flex flex-col justify-center pl-8 cursor-pointer ${route.startsWith('/trade') ? 'text-white' : 'text-slate-500'}`} onClick={() => router.push('/trade/SOL_USDC')}>
-                    Trade
-                </div>
-            </div>
-            <div className="flex">
-                <div className="p-2 mr-2">
-                    <SuccessButton>Deposit</SuccessButton>
-                    <PrimaryButton>Withdraw</PrimaryButton>
-                </div>
-            </div>
+  return (
+    <div className="text-white border-b border-slate-800">
+      <div className="flex justify-between items-center p-2">
+        <div className="flex gap-6">
+          <div
+            className={`text-xl pl-4 flex flex-col justify-center cursor-pointer text-white`}
+            onClick={() => router.push("/")}
+          >
+            Exchange
+          </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
+          </div>
+          <div
+            className={`text-sm pt-1 flex flex-col justify-center pl-8 cursor-pointer ${
+              route.startsWith("/trade") ? "text-white" : "text-slate-500"
+            }`}
+            onClick={() => router.push("/trade/SOL_USDC")}
+          >
+            Trade
+          </div>
+          <div>
+            <SearchBar />
+          </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

@@ -4,79 +4,147 @@ import { Ticker } from "../utils/types";
 import { getTicker } from "../utils/httpClient";
 import { SignalingManager } from "../utils/SignalingManager";
 
-export const MarketBar = ({market}: {market: string}) => {
-    const [ticker, setTicker] = useState<Ticker | null>(null);
+export const MarketBar = ({ market }: { market: string }) => {
+  const [ticker, setTicker] = useState<Ticker | null>(null);
 
-    useEffect(() => {
-        getTicker(market).then(setTicker);
-        SignalingManager.getInstance().registerCallback("ticker", (data: Partial<Ticker>)  =>  setTicker(prevTicker => ({
-            firstPrice: data?.firstPrice ?? prevTicker?.firstPrice ?? '',
-            high: data?.high ?? prevTicker?.high ?? '',
-            lastPrice: data?.lastPrice ?? prevTicker?.lastPrice ?? '',
-            low: data?.low ?? prevTicker?.low ?? '',
-            priceChange: data?.priceChange ?? prevTicker?.priceChange ?? '',
-            priceChangePercent: data?.priceChangePercent ?? prevTicker?.priceChangePercent ?? '',
-            quoteVolume: data?.quoteVolume ?? prevTicker?.quoteVolume ?? '',
-            symbol: data?.symbol ?? prevTicker?.symbol ?? '',
-            trades: data?.trades ?? prevTicker?.trades ?? '',
-            volume: data?.volume ?? prevTicker?.volume ?? '',
-        })), market);
-        SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`ticker.${market}`]}	);
+  useEffect(() => {
+    getTicker(market).then(setTicker);
+    SignalingManager.getInstance().registerCallback(
+      "ticker",
+      (data: Partial<Ticker>) => {
+        setTicker((prevTicker) => ({
+          firstPrice: data?.firstPrice ?? prevTicker?.firstPrice ?? "",
+          high: data?.high ?? prevTicker?.high ?? "",
+          lastPrice: data?.lastPrice ?? prevTicker?.lastPrice ?? "",
+          low: data?.low ?? prevTicker?.low ?? "",
+          priceChange: data?.priceChange ?? prevTicker?.priceChange ?? "",
+          priceChangePercent:
+            data?.priceChangePercent ?? prevTicker?.priceChangePercent ?? "",
+          quoteVolume: data?.quoteVolume ?? prevTicker?.quoteVolume ?? "",
+          symbol: data?.symbol ?? prevTicker?.symbol ?? "",
+          trades: data?.trades ?? prevTicker?.trades ?? "",
+          volume: data?.volume ?? prevTicker?.volume ?? "",
+        }));
 
-        return () => {
-            SignalingManager.getInstance().deRegisterCallback("ticker", market);
-            SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`ticker.${market}`]}	);
-        }
-    }, [market])
-    // 
+        document.title = data?.lastPrice
+          ? `${data.lastPrice}-${market}-Apni Exchange`
+          : "Apni exchange";
+      },
+      market
+    );
+    if (ticker) {
+    }
 
-    return <div>
-        <div className="flex items-center flex-row relative w-full overflow-hidden border-b border-slate-800">
-            <div className="flex items-center justify-between flex-row no-scrollbar overflow-auto pr-4">
-                    <Ticker market={market} />
-                    <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>
-                        </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>
-                                </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>
-                                </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>
-                            </div>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
+    SignalingManager.getInstance().sendMessage({
+      method: "SUBSCRIBE",
+      params: [`ticker.${market}`],
+    });
 
-}
+    return () => {
+      SignalingManager.getInstance().deRegisterCallback("ticker", market);
+      SignalingManager.getInstance().sendMessage({
+        method: "UNSUBSCRIBE",
+        params: [`ticker.${market}`],
+      });
+    };
+  }, [market]);
+  //
 
-function Ticker({market}: {market: string}) {
-    return <div className="flex h-[60px] shrink-0 space-x-4">
-        <div className="flex flex-row relative ml-2 -mr-4">
-            <img alt="SOL Logo" loading="lazy" decoding="async" data-nimg="1" className="z-10 rounded-full h-6 w-6 mt-4 outline-baseBackgroundL1"  src="/sol.webp" />
-            <img alt="USDC Logo" loading="lazy"decoding="async" data-nimg="1" className="h-6 w-6 -ml-2 mt-4 rounded-full" src="/usdc.webp" />
+  return (
+    <div>
+      <div className="flex items-center flex-row relative w-full overflow-hidden border-b border-slate-800">
+        <div className="flex items-center justify-between flex-row no-scrollbar overflow-auto pr-4">
+          <Ticker market={market} />
+          <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 tabular-nums">
+                ${ticker?.lastPrice}
+              </p>
+            </div>
+            <div className="flex flex-col">
+              <p className={`font-medium  text-slate-400 text-sm`}>
+                24H Change
+              </p>
+              <p
+                className={` 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-slate-400 text-sm">24H High</p>
+              <p className="font-medium tabular-nums leading-5 text-sm ">
+                {ticker?.high}
+              </p>
+            </div>
+            <div className="flex flex-col">
+              <p className="font-medium  text-slate-400 text-sm">24H Low</p>
+              <p className="font-medium tabular-nums leading-5 text-sm ">
+                {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-slate-400 text-sm">24H Volume</p>
+                <p className="mt-1 font-medium tabular-nums leading-5 text-sm ">
+                  {ticker?.volume}
+                </p>
+              </div>
+            </button>
+          </div>
         </div>
-    <button type="button" className="react-aria-Button" data-rac="">
+      </div>
+    </div>
+  );
+};
+
+function Ticker({ market }: { market: string }) {
+  return (
+    <div className="flex h-[60px] shrink-0 space-x-4">
+      <div className="flex flex-row relative ml-2 -mr-4">
+        <img
+          alt="SOL Logo"
+          loading="lazy"
+          decoding="async"
+          data-nimg="1"
+          className="z-10 rounded-full h-6 w-6 mt-4 outline-baseBackgroundL1"
+          src="/sol.webp"
+        />
+        <img
+          alt="USDC Logo"
+          loading="lazy"
+          decoding="async"
+          data-nimg="1"
+          className="h-6 w-6 -ml-2 mt-4 rounded-full"
+          src="/usdc.webp"
+        />
+      </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 flex-row relative">
-                    <p className="font-medium text-sm undefined">{market.replace("_", " / ")}</p>
-                </div>
+          <div className="flex items-center flex-row gap-2 undefined">
+            <div className="flex flex-row relative">
+              <p className="font-medium text-sm undefined">
+                {market.replace("_", " / ")}
+              </p>
             </div>
+          </div>
         </div>
-    </button>
+      </button>
     </div>
-}
+  );
+}