commit

2026-09-11 01:08:07 +00:00 · 2025-10-03 15:28:16 +08:00
parent d5c4b04746
commit fcb83bd16b
925 changed files with 165721 additions and 4 deletions
@@ -0,0 +1,6 @@
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
@@ -0,0 +1,46 @@
+import ccxt, { Balances } from 'ccxt'
+
+// This is for showcase purposes in prod move this to environment variable like process.env.BINANCEUSDM_API_KEY
+const apiKey = ""
+const secret = ""
+
+export async function getServerSideProps () {
+  const exchange = new ccxt.kraken({ apiKey, secret })
+  const balances = await exchange.fetchBalance()
+  // remove undefined values to prevent serializing error
+  Object.keys(balances).forEach(key => balances[key] === undefined && delete balances[key])
+  return {
+    props: {
+      balances,
+    },
+  }
+}
+
+export default function Balance({balances}: {balances: Balances}) {
+  return (
+    <main className={`flex min-h-screen flex-col items-center justify-between p-24`}>
+      <table>
+        <thead>
+          <tr>
+            <th>Currency</th>
+            <th>Free</th>
+            <th>Used</th>
+            <th>Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(balances).map((currency: string) => (
+            balances[currency].free !== undefined && (
+              <tr key={currency}>
+                <td>{currency}</td>
+                <td>{balances[currency].free}</td>
+                <td>{balances[currency].used}</td>
+                <td>{balances[currency].total}</td>
+              </tr>
+            )
+          ))}
+        </tbody>
+      </table>
+    </main>
+  )
+}
@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <main className={`flex min-h-screen flex-col items-center space-y-10`}>
+        <a className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 w-120 m-4" href="/balance">Balance - Using Server Side calls</a>
+        <a className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 w-120 m-4" href="/tickers">Tickers - Using Client Side websockets</a>
+    </main>
+  )
+}
@@ -0,0 +1,61 @@
+import ccxt, { Exchange, Ticker } from 'ccxt'
+import { useEffect, useState } from 'react';
+
+const exchangeIds = ['binance', 'bitget', 'bybit', 'cryptocom']
+
+export default function Home() {
+  const [exchanges, setExchanges] = useState<Record<string, Exchange>>({});
+  const [tickers, setTickers] = useState<Record<string, Ticker>>({});
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    console.log('starting exchanges...');
+    const newExchanges: Record<string, Exchange> = exchangeIds.reduce((acc: any, exchangeId) => {
+      acc[exchangeId] = new (ccxt.pro as any)[exchangeId];
+      return acc;
+    }, {});
+    setExchanges(newExchanges);
+  }, []);
+
+  useEffect(() => {
+    const fetchTickers = async () => {
+      for (const exchangeId in exchanges) {
+        try {
+          const newTicker = await exchanges[exchangeId].watchTicker('BTC/USDT');
+          setTickers(tickers => ({ ...tickers, [exchangeId]: newTicker }));
+        } catch (e) {
+          setError(exchangeId + ': ' + JSON.stringify(e) + '\n')
+        }
+      };
+    };
+    fetchTickers();
+  }, [tickers, exchanges, error]);
+
+  return (
+    <main
+      className={`flex min-h-screen flex-col items-center justify-between p-24`}
+    >
+      <div className="z-10 max-w-5xl w-full font-mono text-sm lg:flex justify-between">
+        {exchangeIds.map((exchangeId) => (
+          <div key={exchangeId} className="flex-1">
+            <h3>{exchangeId}</h3>
+            <ul>
+              <li>{`last: ${tickers[exchangeId]?.last}`}</li>
+              <li>{`high: ${tickers[exchangeId]?.high}`}</li>
+              <li>{`low: ${tickers[exchangeId]?.low}`}</li>
+              <li>{`bid: ${tickers[exchangeId]?.bid}`}</li>
+              <li>{`ask: ${tickers[exchangeId]?.ask}`}</li>
+              <li>{`ask volume: ${tickers[exchangeId]?.askVolume}`}</li>
+              <li>{`bid volume: ${tickers[exchangeId]?.bidVolume}`}</li>
+              <li>{`close: ${tickers[exchangeId]?.close}`}</li>
+            </ul>
+          </div>
+        ))}
+      </div>
+      <div>
+        <h3>Last error:</h3>
+        <p>{error ? error : "None"}</p>
+      </div>
+    </main>
+  )
+}
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}