adding next-example

Examples/NEXTJS-TV-Example/README.md

@@ -0,0 +1,46 @@
+# Pendax/TV example
+
+in this example we implemented a tradingview UI using next js as a frontend and node js as a backend
+.
+
+## Run Locally
+
+Clone the project
+
+```bash
+  git clone https://github.com/CompendiumFi/PENDAX-SDK
+```
+
+Go to the example directory
+
+```bash
+  cd PENDAX-SDK/examples/NEXTJS-TV-EXAMPLE
+```
+
+Go to front end directory and install dependencies using
+
+```bash
+  npm install
+```
+
+Go to backend directory and install dependencies using
+
+```bash
+  npm install
+```
+
+Start the front end using
+
+```bash
+  npm run dev
+```
+
+Start the backend using
+
+```bash
+  npm start
+```
+
+## Support
+
+For support, email [email protected] or join our Discord server https://discord.gg/64r2xtqczs.

Examples/NEXTJS-TV-Example/next-front-end/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Examples/NEXTJS-TV-Example/next-front-end/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

Examples/NEXTJS-TV-Example/next-front-end/components/ActiveMarkets/index.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Button, Card, Table, StyledTableRow } from "@nextui-org/react";
+import { useMarket } from "../../providers/market";
+import { useEffect } from "react";
+const ActiveMarkets = () => {
+  const { selectedMarket, marketList, setSelectedMarket } = useMarket();
+  const handleMarketChange = (marketId) => {
+    setSelectedMarket(marketId);
+  };
+  return (
+    <Card css={{ minWidth: "350px", mb: 10 }}>
+      <Table
+        shadow={false}
+        css={{
+          minWidth: "100%",
+          height: "500px",
+          thead: {
+            display: "table",
+            width: "100%",
+            tableLayout: "fixed",
+          },
+        }}
+      >
+        <Table.Header>
+          <Table.Column>TYPE</Table.Column>
+          <Table.Column>NAME</Table.Column>
+          <Table.Column>LAST SIZE</Table.Column>
+          <Table.Column>ACTION</Table.Column>
+        </Table.Header>
+        <Table.Body
+          css={{
+            height: "100%",
+            display: "block",
+            overflow: "auto",
+            pb: "$14",
+            [`& ${StyledTableRow}`]: {
+              display: "table",
+              width: "100%",
+              tableLayout: "fixed",
+            },
+          }}
+        >
+          {marketList.map((elm) => (
+            <Table.Row key={elm.instId}>
+              <Table.Cell>{elm.instType}</Table.Cell>
+              <Table.Cell>{elm.instId}</Table.Cell>
+              <Table.Cell>{elm.lastSz}</Table.Cell>
+              <Table.Cell>
+                {selectedMarket !== elm.instId ? (
+                  <Button onClick={(e) => handleMarketChange(elm.instId)}>
+                    Select
+                  </Button>
+                ) : (
+                  <Button isDisabled color={"error"}>
+                    Selected
+                  </Button>
+                )}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </Card>
+  );
+};
+
+export default ActiveMarkets;

Examples/NEXTJS-TV-Example/next-front-end/components/Header/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Navbar, Button, Link, Text, Card, Image } from "@nextui-org/react";
+const Header = () => {
+  return (
+    <Navbar
+      css={{
+        m: 10,
+        alignSelf: "center",
+        backgroundColor: "transparent",
+        shadow: "$xl",
+        borderRadius: "$md",
+      }}
+      borderWeight="bold"
+    >
+      <Navbar.Brand css={{ justifyContent: "space-between", gap: "$10" }}>
+        <Image src="/images/pendax.jpg" width={60} height={60} />
+        <Text b color="inherit" hideIn="xs">
+          Pendax Trading View
+        </Text>
+      </Navbar.Brand>
+    </Navbar>
+  );
+};
+
+export default Header;

Examples/NEXTJS-TV-Example/next-front-end/components/RecentTradesTable/index.jsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from "react";
+import { Card, Table, StyledTableRow } from "@nextui-org/react";
+import { getApi, postApi } from "../../utils/apiHelpers";
+import { useMarket } from "../../providers/market";
+const RecentTradesTable = () => {
+  const { selectedMarket } = useMarket();
+  const [orderList, setOrderList] = useState([]);
+  const getMarkets = async () => {
+    try {
+      let { data } = await getApi(
+        `okx/orders?instId=${selectedMarket.replace("/", "-")}`
+      );
+      console.log("Result", data);
+      if (data) {
+        setOrderList(data);
+      }
+    } catch (error) {}
+  };
+  useEffect(() => {
+    getMarkets();
+  }, [selectedMarket]);
+  return (
+    <Card css={{ minWidth: "350px", mb: 10 }}>
+      <Table
+        shadow={false}
+        css={{
+          minWidth: "100%",
+          height: "500px",
+          thead: {
+            display: "table",
+            width: "100%",
+            tableLayout: "fixed",
+          },
+        }}
+      >
+        <Table.Header>
+          <Table.Column>TIME</Table.Column>
+          <Table.Column>SIDE</Table.Column>
+          <Table.Column>{`PRICE(${
+            selectedMarket.replace("/", "-").split("-")[1]
+          })`}</Table.Column>
+          <Table.Column>
+            {`AMOUNT(${selectedMarket.replace("/", "-").split("-")[0]})`}
+          </Table.Column>
+          <Table.Column>{`TOTAL(${
+            selectedMarket.replace("/", "-").split("-")[1]
+          })`}</Table.Column>
+        </Table.Header>
+        <Table.Body
+          css={{
+            height: "100%",
+            display: "block",
+            overflow: "auto",
+            pb: "$14",
+            [`& ${StyledTableRow}`]: {
+              display: "table",
+              width: "100%",
+              tableLayout: "fixed",
+            },
+          }}
+        >
+          {orderList.map((elm) => (
+            <Table.Row key={elm.ts}>
+              <Table.Cell
+                css={{ color: elm.side == "sell" ? "$error" : "$success" }}
+              >
+                {new Date(Number(elm.ts)).toDateString()}
+              </Table.Cell>
+              <Table.Cell
+                css={{ color: elm.side == "sell" ? "$error" : "$success" }}
+              >
+                {elm.side}
+              </Table.Cell>
+              <Table.Cell
+                css={{ color: elm.side == "sell" ? "$error" : "$success" }}
+              >
+                {elm.px}
+              </Table.Cell>
+              <Table.Cell
+                css={{ color: elm.side == "sell" ? "$error" : "$success" }}
+              >
+                {elm.sz}
+              </Table.Cell>
+              <Table.Cell
+                css={{ color: elm.side == "sell" ? "$error" : "$success" }}
+              >
+                {Number(elm.sz) * Number(elm.px)}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </Card>
+  );
+};
+
+export default RecentTradesTable;

Examples/NEXTJS-TV-Example/next-front-end/components/RecentTradesTable/trades.module.css

@@ -0,0 +1,3 @@
+.nextui-c-hWZRae-gikTHb-shadow-true {
+  box-shadow: none !important;
+}