Add my Trading page

burrowHQ · Feb 27, 2024 · 5c4adeb · 5c4adeb
1 parent ab86417
commit 5c4adeb
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 39 deletions.
diff --git a/pages/trading.tsx b/pages/trading.tsx
@@ -1,3 +1,3 @@
-import TradingPage from "../screens/Trading";
+import TradingPage from "../screens/TradingDetail";
 
 export default TradingPage;
diff --git a/screens/MarginTrading/components/Icon.tsx b/screens/MarginTrading/components/Icon.tsx
@@ -34,6 +34,54 @@ export function ArrowDownIcon({ fill, ...props }) {
   );
 }
 
+export function AddCollateral({ ...props }) {
+  return (
+    <svg
+      {...props}
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        opacity="0.5"
+        x="1"
+        y="1"
+        width="16"
+        height="16"
+        rx="4"
+        stroke="#D2FF3A"
+        strokeWidth="1.2"
+      />
+      <path
+        d="M8.22533 12.8756V9.68961H5.11133V8.28561H8.22533V5.09961H9.77333V8.28561H12.8873V9.68961H9.77333V12.8756H8.22533Z"
+        fill="#D2FF3A"
+      />
+    </svg>
+  );
+}
+
+export function Export({ ...props }) {
+  return (
+    <svg
+      {...props}
+      width="11"
+      height="11"
+      viewBox="0 0 11 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.31579 1H1V10H10V6.85"
+        stroke="#C0C4E9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 export function TestNearIcon({ ...props }) {
   return (
     <svg

diff --git a/screens/MarginTrading/components/Market.tsx → ...arginTrading/components/MarketTrading.tsx b/screens/MarginTrading/components/Market.tsx → ...arginTrading/components/MarketTrading.tsx
@@ -2,19 +2,10 @@ import React from "react";
 import Link from "next/link";
 import { ArrowDownIcon, ArrowUpIcon, TestNearIcon } from "./Icon";
 
-const DataItem = ({ title, value }) => (
-  <div className="flex flex-1 justify-center">
-    <div>
-      <p className="text-gray-300 text-sm">{title}</p>
-      <h2 className="text-h2">{value}</h2>
-    </div>
-  </div>
-);
-
 const MarketMarginTrading = () => {
   return (
     <div className="flex flex-col items-center justify-center w-full">
-      <div className="flex justify-between items-center w-full h-[100px] border border-dark-50 bg-gray-800 rounded-xl mb-8">
+      <div className="flex justify-between items-center w-full h-[100px] border border-dark-50 bg-gray-800 rounded-md mb-8">
         <DataItem title="Total Volume" value="$16.96M" />
         <DataItem title="24H Volume" value="$3.85K" />
         <DataItem title="Long Open Interest" value="$12.91M" />
@@ -26,6 +17,15 @@ const MarketMarginTrading = () => {
   );
 };
 
+const DataItem = ({ title, value }) => (
+  <div className="flex flex-1 justify-center">
+    <div>
+      <p className="text-gray-300 text-sm">{title}</p>
+      <h2 className="text-h2">{value}</h2>
+    </div>
+  </div>
+);
+
 function SortButton({ sort, color }: { sort?: "asc" | "desc"; color: string }) {
   return (
     <div className="flex flex-col items-center gap-0.5 ml-1.5">

diff --git a/screens/MarginTrading/components/My/MyPage.tsx b/screens/MarginTrading/components/My/MyPage.tsx
diff --git a/screens/MarginTrading/components/MyTrading/MyTradingPage.tsx b/screens/MarginTrading/components/MyTrading/MyTradingPage.tsx
@@ -0,0 +1,189 @@
+import React, { useState } from "react";
+import { AddCollateral, Export } from "../Icon";
+
+const MyMarginTradingPage = () => {
+  const [selectedTab, setSelectedTab] = useState("positions");
+
+  const handleTabClick = (tabNumber) => {
+    setSelectedTab(tabNumber);
+  };
+  return (
+    <div className="flex flex-col items-center justify-center w-full">
+      <div className="flex justify-between items-center w-full h-[100px] border border-dark-50 bg-gray-800 rounded-md mb-7">
+        <div className="flex flex-1 justify-center">
+          <div>
+            <p className="text-gray-300 text-sm">Long Open Interest</p>
+            <h2 className="text-h2">$298.70</h2>
+          </div>
+        </div>
+        <div className="flex flex-1 justify-center">
+          <div>
+            <p className="text-gray-300 text-sm">Short Open Interest</p>
+            <h2 className="text-h2">$100.05</h2>
+          </div>
+        </div>
+        <div className="flex flex-1 justify-center">
+          <div>
+            <p className="text-gray-300 text-sm">Collateral</p>
+            <h2 className="text-h2 border-b border-dashed border-dark-800">$200</h2>
+          </div>
+        </div>
+        <div className="flex flex-1 justify-center">
+          <div>
+            <p className="text-gray-300 text-sm">PLN</p>
+            <h2 className="text-h2">+$0.16</h2>
+          </div>
+        </div>
+      </div>
+      <div className="w-full border border-dark-50 bg-gray-800 rounded-md">
+        <div className="w-full border-b border-dark-50 flex">
+          <Tab
+            tabName="Positions"
+            isSelected={selectedTab === "positions"}
+            onClick={() => handleTabClick("positions")}
+          />
+          <Tab
+            tabName="History"
+            isSelected={selectedTab === "history"}
+            onClick={() => handleTabClick("history")}
+          />
+        </div>
+        <div className="py-4">
+          {selectedTab === "positions" && (
+            <table className="w-full text-left">
+              <thead>
+                <tr className="text-gray-300 text-sm font-normal">
+                  <th className="pl-5">Market</th>
+                  <th>Size</th>
+                  <th>Net Value</th>
+                  <th>Collateral</th>
+                  <th>Entry Price</th>
+                  <th>Index Price</th>
+                  <th>Liq. Price</th>
+                  <th>PLN & ROE</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="text-base hover:bg-dark-100 cursor-pointer font-normal">
+                  <td className="py-5 pl-5 ">
+                    NEAR/USDC.e <span className="text-primary text-xs">Long 1.5X</span>
+                  </td>
+                  <td>$149.35</td>
+                  <td>$100</td>
+                  <td>
+                    <div className="flex items-center">
+                      <p className="mr-2.5"> 100 USDC.e </p>
+                      <AddCollateral />
+                    </div>
+                  </td>
+                  <td>$3.25</td>
+                  <td>$3.24</td>
+                  <td>$1.23</td>
+                  <td>
+                    <div className="flex items-center">
+                      <p className="text-gray-1000"> +$0.2248</p>
+                      <span className="text-gray-400 text-xs">(+0.01%)</span>
+                    </div>
+                  </td>
+                  <td className="pr-5">
+                    <div className="text-gray-300 text-sm border border-dark-300 text-center h-6 rounded flex justify-center items-center">
+                      Close
+                    </div>
+                  </td>
+                </tr>
+                <tr className="text-base hover:bg-dark-100 cursor-pointer font-normal">
+                  <td className="py-5 pl-5 ">
+                    NEAR/USDC.e <span className="text-red-50 text-xs">Short 1.5X</span>
+                  </td>
+                  <td>$149.35</td>
+                  <td>$100</td>
+                  <td>
+                    <div className="flex items-center">
+                      <p className="mr-2.5"> 100 USDC.e </p>
+                      <AddCollateral />
+                    </div>
+                  </td>
+                  <td>$3.25</td>
+                  <td>$3.24</td>
+                  <td>$1.23</td>
+                  <td>
+                    <div className="flex items-center">
+                      <p className="text-red-150"> -$0.0689</p>
+                      <span className="text-gray-400 text-xs">(-2.01%)</span>
+                    </div>
+                  </td>
+                  <td className="pr-5">
+                    <div className="text-gray-300 text-sm border border-dark-300 text-center h-6 rounded flex justify-center items-center">
+                      Close
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          )}
+          {selectedTab === "history" && (
+            <table className="w-full text-left">
+              <thead>
+                <tr className="text-gray-300 text-sm font-normal">
+                  <th className="pl-5">Market</th>
+                  <th>Operation</th>
+                  <th>Side</th>
+                  <th>Price</th>
+                  <th>Amount</th>
+                  <th>Fee</th>
+                  <th>Realized PNL & ROE</th>
+                  <th>Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="text-base hover:bg-dark-100 cursor-pointer font-normal">
+                  <td className="py-5 pl-5 ">NEAR/USDC.e</td>
+                  <td>Open Short</td>
+                  <td className="text-red-50">Sell</td>
+                  <td>$3.24</td>
+                  <td>100 NEAR</td>
+                  <td>$1.80</td>
+                  <td>--</td>
+                  <td className="pr-5">
+                    <div>
+                      2024-01-16, 13:23
+                      {/* <Export /> */}
+                    </div>
+                  </td>
+                </tr>
+                <tr className="text-base hover:bg-dark-100 cursor-pointer font-normal">
+                  <td className="py-5 pl-5 ">NEAR/USDC.e</td>
+                  <td>Open Short</td>
+                  <td className="text-primary">Buy</td>
+                  <td>$3.24</td>
+                  <td>45.2435 NEAR</td>
+                  <td>$0.89</td>
+                  <td>--</td>
+                  <td className="pr-5">
+                    <div>
+                      2024-01-16, 13:23
+                      {/* <Export /> */}
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+const Tab = ({ tabName, isSelected, onClick }) => (
+  <div
+    className={`pt-6 pl-10 pb-4 pr-7 text-gray-300 text-lg cursor-pointer ${
+      isSelected ? "border-b-2 border-primary text-white" : ""
+    }`}
+    onClick={onClick}
+  >
+    {tabName}
+  </div>
+);
+
+export default MyMarginTradingPage;
diff --git a/...ens/MarginTrading/components/My/index.tsx → ...ginTrading/components/MyTrading/index.tsx b/...ens/MarginTrading/components/My/index.tsx → ...ginTrading/components/MyTrading/index.tsx
@@ -3,7 +3,7 @@ import { useAccountId, usePortfolioAssets } from "../../../../hooks/hooks";
 import { isMobileDevice } from "../../../../helpers/helpers";
 import { ConnectWalletButton } from "../../../../components/Header/WalletButton";
 import BookTokenSvg from "../../../../public/svg/Group 74.svg";
-import MyMarginTradingPage from "./MyPage";
+import MyMarginTradingPage from "./MyTradingPage";
 
 const MyMarginTrading = () => {
   const accountId = useAccountId();

diff --git a/screens/MarginTrading/index.tsx b/screens/MarginTrading/index.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { useAppDispatch } from "../../redux/hooks";
 import { LayoutBox } from "../../components/LayoutContainer/LayoutContainer";
-import MyMarginTrading from "./components/My";
-import MarketMarginTrading from "./components/Market";
+import MyMarginTrading from "./components/MyTrading";
+import MarketMarginTrading from "./components/MarketTrading";
 
 const MarginTrading = () => {
   const dispatch = useAppDispatch();

diff --git a/screens/Trading/components/index.tsx → screens/TradingDetail/components/index.tsx b/screens/Trading/components/index.tsx → screens/TradingDetail/components/index.tsx
diff --git a/screens/Trading/index.tsx → screens/TradingDetail/index.tsx b/screens/Trading/index.tsx → screens/TradingDetail/index.tsx
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -75,6 +75,7 @@ module.exports = {
         red: {
           50: "#FF6BA9",
           100: "#FF68A7",
+          150: "#EA3F68",
         },
         yellow: {
           50: "#F3BA2F",
@@ -91,6 +92,7 @@ module.exports = {
           800: "#23253A",
           900: "#0f101c",
           950: "#2F324B",
+          1000: "#6FA300",
         },
         toolTipBoxBorderColor: "#D2FF3A",
         toolTipBoxBgColor: "rgba(35,37,58,0.8)",