ojaylu · IngridSin · Feb 6, 2023 · Feb 25, 2023 · Mar 7, 2023 · Mar 7, 2023
diff --git a/components/AuthProvider.js b/components/AuthProvider.js
@@ -15,7 +15,7 @@ const AuthContext = createContext();
 
 function AuthProvider({ children }) {
     const [user, setUser] = useState(auth.currentUser);
-    const [isAuthenticated, setAuthenticated] = useState(false);
+    const [isAuthenticated, setAuthenticated] = useState(true);
     const [isLoading, setLoading] = useState(true);
     const router = useRouter();
 

diff --git a/components/DynamicTable.js b/components/DynamicTable.js
@@ -5,9 +5,9 @@ import styles from "public/styles/dynamic_table.module.scss";
 // cols: [String] as the titles
 // body: [{ data: [[String]], style: [{ style_for_col_1 }, ...] }, ...]
 // for style, enter a falsy value to use default style, leave empty if no styling if needed for all cols
-export default function DynamicTable({ cols, body= [] }) {
+export default function DynamicTable({ cols, body = [] }) {
     const lenPerCol = 100 / cols.length;
-    const {currentTheme} = useThemeSwitcher();
+    const { currentTheme } = useThemeSwitcher();
 
     return (
         <div
@@ -41,29 +41,29 @@ export default function DynamicTable({ cols, body= [] }) {
             </div>
             {body.map(({data, style}) => (
                 data.map((row, index) => (
-                        <div
-                            style={{
-                                flex: "1 1",
-                                display: "flex",
-                                backgroundColor: currentTheme == "light"? "rgb(255, 255, 255)": "rgb(38, 38, 38)",
-                            }}
-                            key={index}
-                            className={styles.body_row + " " +  (currentTheme == "light"? styles.light_row: styles.dark_row)}
-                        >
-                            {row.map((col, index) => (
-                                <div
-                                    style={{
-                                        flex: `0 0 ${lenPerCol}%`,
-                                        backgroundColor: "inherit",
-                                        paddingLeft: "5px",
-                                        whiteSpace: "nowrap",
-                                        overflow: "hidden",
-                                        ...(style && style[index])
-                                    }}
-                                    key={index}
-                                >{col}</div>
-                            ))}
-                        </div>
+                    <div
+                        style={{
+                            flex: "1 1",
+                            display: "flex",
+                            backgroundColor: currentTheme == "light"? "rgb(255, 255, 255)": "rgb(38, 38, 38)",
+                        }}
+                        key={index}
+                        className={styles.body_row + " " +  (currentTheme == "light"? styles.light_row: styles.dark_row)}
+                    >
+                        {row.map((col, index) => (
+                            <div
+                                style={{
+                                    flex: `0 0 ${lenPerCol}%`,
+                                    backgroundColor: "inherit",
+                                    paddingLeft: "5px",
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    ...(style && style[index])
+                                }}
+                                key={index}
+                            >{col}</div>
+                        ))}
+                    </div>
                 ))
             ))}
         </div>

diff --git a/components/PrivateRoute.js b/components/PrivateRoute.js
@@ -44,15 +44,6 @@ export default function PrivateRoute({ /* protectedRoutes,*/ children, symbolsHa
             .then(res => res.json())
             .then(data => {
               // symbolsHandler(data.symbols); // testing
-              symbolsHandler([
-                'BNBBUSD', 'BTCBUSD', 'ETHBUSD',
-                'LTCBUSD', 'TRXBUSD', 'XRPBUSD',
-                'BNBUSDT', 'BTCUSDT', 'ETHUSDT',
-                'LTCUSDT', 'TRXUSDT', 'XRPUSDT',
-                'BNBBTC',  'ETHBTC',  'LTCBTC',
-                'TRXBTC',  'XRPBTC',  'LTCBNB',
-                'TRXBNB',  'XRPBNB'
-              ]);
             });
         }
       }

diff --git a/components/logged-in/Asset.js b/components/logged-in/Asset.js
diff --git a/components/logged-in/OrderBook.js b/components/logged-in/OrderBook.js
@@ -1,27 +1,17 @@
 import { useQuery } from '@apollo/client';
 import { GET_ORDER_BOOK } from 'gql/queries';
-import { useEffect } from 'react';
 import DynamicTable from 'components/DynamicTable';
 import _ from "lodash";
+import { useBinData } from 'utils/binanceHooks';
 
+// symbol must be lower case
 export default function OrderBook({ symbol, pollingInterval = 1000 }) {
-    const { error, data, startPolling, stopPolling } = useQuery(GET_ORDER_BOOK, {
-        variables: {symbol: symbol},
-        fetchPolicy: 'network-only'
-    });
+    const data = useBinData({ symbol, stream: "depth10", defaultValue: undefined });
+    const reversedAsks = data? [...data?.asks].reverse(): [];
+    const bestAsk = data?.asks[0][0];
 
-    useEffect(() => {
-        startPolling(pollingInterval);
-        return () => {
-            stopPolling();
-        };
-    }, [symbol]);
-
-    const reversedAsks = data? [...data?.orderBook.asks].reverse(): [];
-    const bestAsk = data?.orderBook.asks[0][0];
-
-    const bids = data?.orderBook.bids;
-    const bestBid = data?.orderBook.bids[0][0];
+    const bids = data?.bids;
+    const bestBid = data?.bids[0][0];
 
     return (
         <DynamicTable cols={["Price", "Quantity"]} body={data && [{data: reversedAsks, style: [{color: "rgb(14, 203, 129)"}]}, {data: [[`Spread: ${_.round(bestAsk - bestBid, 3)}`, undefined]]}, {data: bids, style: [{color: "rgb(246, 70, 93)"}]}]} />

diff --git a/components/logged-in/Plot.js b/components/logged-in/Plot.js
diff --git a/components/logged-in/RecentTrades.js b/components/logged-in/RecentTrades.js
@@ -1,24 +1,32 @@
 import { useQuery } from '@apollo/client';
 import { GET_TRADE_RECORD } from 'gql/queries';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import DynamicTable from 'components/DynamicTable';
+import { useBinData } from 'utils/binanceHooks';
 
-export default function RecentTrades({ symbol, pollingInterval = 500 }) {
-    const { error, data, startPolling, stopPolling } = useQuery(GET_TRADE_RECORD, {
-        variables: {symbol: symbol},
-        fetchPolicy: "network-only"
-    });
+const binanceApi = "https://api.binance.com/api/v3/trades";
+const limit = 20;
+
+async function replaceTrade(e) {
+    await e?.data.json();
+}
 
+export default function RecentTrades({ symbol, pollingInterval = 500 }) {
+    const [trades, setTrades] = useState([]);
+    const data = useBinData({ symbol, stream: "trade", defaultValue: undefined, onMessage: replaceTrade});
+    const upperSymbol = symbol.toUpperCase();
+
     useEffect(() => {
-        startPolling(pollingInterval);
-        return () => {
-            stopPolling();
-        };
-    }, [symbol]);
+        fetch(`${binanceApi}?symbol=${upperSymbol}&limit=${limit}`)
+            .then(res => res.json())
+            .then(result => setTrades(result));
+    }, []);
+
+    const newTrades = [] // trades.length != 0 && data? replaceTrade([...trades], {price: data.p, qty: data.q, time: data.time}): [];
 
-    const newToOld = data && [...data?.tradeRecord].reverse();
+    // const newToOld = data && [...data].reverse();
 
     return (
-        <DynamicTable cols={["Price", "Quantity", "Time"]} body={ newToOld && [{data: newToOld.map(record => [_.round(record.price, 5), _.round(record.qty, 5), new Date(record.time).toLocaleTimeString('it-IT')])}] } />
+        <DynamicTable cols={["Price", "Quantity", "Time"]} body={ [{data: newTrades.map(record => [record.price, record.qty, new Date(record.time).toLocaleTimeString('it-IT')])}] } />
     )
 }
diff --git a/components/logged-in/UserAssets.js b/components/logged-in/UserAssets.js
@@ -1,6 +1,4 @@
 import { Table } from "antd";
-import { useQuery } from '@apollo/client';
-import { GET_USER_ASSET } from 'gql/queries';
 
 const columns = [
     {
@@ -23,23 +21,30 @@ const columns = [
         title: "Withdrawing",
         dataIndex: "withdrawing"
     },
+    {
+        title: "IPOable",
+        dataIndex: "ipoable"
+    },
+    {
+        title: "Total",
+        dataIndex: "total"
+    },
     {
         title: "Btc Valuation",
         dataIndex: "btcValuation"
     },
 ];
 
-export default function UserAssets({ className }) {
-    const { loading, error, data, refetch } = useQuery(GET_USER_ASSET, {
-        fetchPolicy: "network-only"
-    });
+export default function UserAssets({ className, loading, data }) {
+
+    console.log("data:", data)
 
     return (
         <Table 
             columns={ columns }
             rowKey="asset"
             loading={ loading }
-            dataSource={ data?.userAssets }
+            dataSource={ data }
             style={{
                 width: "100%"
             }}

diff --git a/components/logged-in/UserOrders.js b/components/logged-in/UserOrders.js
@@ -16,6 +16,8 @@ export default function UserOrders({ symbol, pollingInterval = 500, pagination }
     //     };
     // }, [symbol]);
 
+    console.log("orders:", orders)
+
     const columns =[
         {
             title: "Order ID",

diff --git a/gql/queries.js b/gql/queries.js
@@ -3,12 +3,17 @@ import { gql } from '@apollo/client';
 export const GET_USER_ASSET = gql`
     query GetUserAsset {
         userAssets {
-            asset
-            free
-            locked
-            freeze
-            withdrawing
-            btcValuation
+            assetList
+            assets {
+                asset
+                free
+                locked
+                freeze
+                withdrawing
+                ipoable
+                btcValuation
+                total
+            }
         }
     }
 `;

diff --git a/layouts/logged-in/MainLayout.js b/layouts/logged-in/MainLayout.js
@@ -15,7 +15,7 @@ import { useRouter } from "next/router";
 const { Sider, Content } = Layout;
 const { Item } = Breadcrumb;
 
-export default function MainLayout({ children }) {
+export default function MainLayout({ children, style }) {
     const [collapsed, setCollapsed] = useState(false);
     const { currentTheme } = useThemeSwitcher();
     const router = useRouter();
@@ -25,6 +25,7 @@ export default function MainLayout({ children }) {
       {label: "Assets", path: "/usr/assets"},
       {label: "Trade", path: "/usr/trade"},
       {label: "History", path: "/usr/history-overview"},
+      {label: "Chart", path: "/usr/chart"}
     ]
 
     return (
@@ -54,6 +55,7 @@ export default function MainLayout({ children }) {
                     padding: 0,
                     minHeight: "auto",
                     backgroundColor: currentTheme == "light"? "rgb(255, 255, 255)": "rgb(38, 38, 38)",
+                    ...style
                 }}
             >
               { children }