Add Margin Trading page

burrowHQ · Feb 26, 2024 · ab86417 · ab86417
1 parent 0b45cc4
commit ab86417
Show file tree

Hide file tree

Showing 8 changed files with 311 additions and 7 deletions.
diff --git a/screens/MarginTrading/components/Icon.tsx b/screens/MarginTrading/components/Icon.tsx
diff --git a/screens/MarginTrading/components/Market.tsx b/screens/MarginTrading/components/Market.tsx
@@ -0,0 +1,160 @@
+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">
+        <DataItem title="Total Volume" value="$16.96M" />
+        <DataItem title="24H Volume" value="$3.85K" />
+        <DataItem title="Long Open Interest" value="$12.91M" />
+        <DataItem title="Short Open Interest" value="$4.05M" />
+      </div>
+      <TableHead />
+      <TableBody />
+    </div>
+  );
+};
+
+function SortButton({ sort, color }: { sort?: "asc" | "desc"; color: string }) {
+  return (
+    <div className="flex flex-col items-center gap-0.5 ml-1.5">
+      <ArrowUpIcon
+        fill={color}
+        className={`text-black ${sort === "asc" ? "" : "text-opacity-30"}`}
+      />
+      <ArrowDownIcon
+        fill={color}
+        className={`text-black ${sort === "desc" ? "" : "text-opacity-30"}`}
+      />
+    </div>
+  );
+}
+
+function TableHead() {
+  return (
+    <div className="w-full grid grid-cols-5 h-12">
+      <div className="grid grid-cols-3 col-span-3 border border-dark-50 bg-gray-800 rounded-t-2xl items-center text-sm text-gray-300">
+        <div className="col-span-1 flex items-center cursor-pointer pl-6 xl:pl-14 whitespace-nowrap">
+          Market
+        </div>
+        <div className="col-span-1 flex items-center cursor-pointer pl-6 xl:pl-14 whitespace-nowrap">
+          Total Volume <SortButton color="#C0C4E9" />
+        </div>
+        <div className="col-span-1 flex items-center cursor-pointer pl-6 xl:pl-14 whitespace-nowrap">
+          24H Volume
+          <SortButton color="#C0C4E9" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 col-span-1 bg-primary rounded-t-2xl items-center text-sm text-black">
+        <div className="col-span-1 flex items-center cursor-pointer pl-6 xl:pl-14 whitespace-nowrap">
+          Long Position
+          <SortButton color="#000000" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 col-span-1 bg-red-50 rounded-t-2xl items-center text-sm text-black">
+        <div className="col-span-1 flex items-center cursor-pointer pl-6 xl:pl-14 whitespace-nowrap">
+          Short Position
+          <SortButton color="#000000" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TableBody() {
+  return (
+    <>
+      <Link href="https://burrow.finance/">
+        <div className="w-full grid grid-cols-5 bg-gray-800 hover:bg-dark-100 cursor-pointer mt-0.5 h-[60px]">
+          <div className="relative col-span-1 flex items-center justify-self-start pl-14">
+            <TestNearIcon />
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">USDC</div>
+              <span className="text-xs text-gray-300">$3.742</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">1.10M</div>
+              <span className="text-xs text-gray-300">$4.11M</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">357.63K</div>
+              <span className="text-xs text-gray-300">$1.34M</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">561.25K</div>
+              <span className="text-xs text-gray-300">$785.76K</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">561.25K</div>
+              <span className="text-xs text-gray-300">$785.76K</span>
+            </div>
+          </div>
+        </div>
+      </Link>
+      <Link href="https://burrow.finance/">
+        <div className="w-full grid grid-cols-5 bg-gray-800 hover:bg-dark-100 cursor-pointer mt-0.5 h-[60px]">
+          <div className="relative col-span-1 flex items-center justify-self-start pl-14">
+            <TestNearIcon />
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">
+                USDC
+                <span
+                  style={{ zoom: 0.85 }}
+                  className="text-gray-300 italic text-xs transform -translate-y-0.5 ml-0.5"
+                >
+                  Native
+                </span>
+              </div>
+              <span className="text-xs text-gray-300">$3.742</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">1.10M</div>
+              <span className="text-xs text-gray-300">$4.11M</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">357.63K</div>
+              <span className="text-xs text-gray-300">$1.34M</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">561.25K</div>
+              <span className="text-xs text-gray-300">$785.76K</span>
+            </div>
+          </div>
+          <div className="col-span-1 flex flex-col justify-center pl-6 xl:pl-14 whitespace-nowrap">
+            <div className="flex flex-col items-start ml-3">
+              <div className="flex items-end">561.25K</div>
+              <span className="text-xs text-gray-300">$785.76K</span>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </>
+  );
+}
+
+export default MarketMarginTrading;
diff --git a/screens/MarginTrading/components/My/MyPage.tsx b/screens/MarginTrading/components/My/MyPage.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+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 MyMarginTradingPage = () => {
+  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">
+        <DataItem title="Long Open Interest" value="$298.70" />
+        <DataItem title="Short Open Interest" value="$100.05" />
+        <DataItem title="Collateral" value="$200" />
+        <DataItem title="PLN" value="+$0.16" />
+      </div>
+    </div>
+  );
+};
+
+export default MyMarginTradingPage;
diff --git a/screens/MarginTrading/components/My/index.tsx b/screens/MarginTrading/components/My/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+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";
+
+const MyMarginTrading = () => {
+  const accountId = useAccountId();
+  const [suppliedRows, borrowedRows, totalSuppliedUSD, totalBorrowedUSD, borrowed_LP, borrowedAll] =
+    usePortfolioAssets();
+  const isMobile = isMobileDevice();
+
+  let overviewNode;
+  if (accountId) {
+    overviewNode = <MyMarginTradingPage />;
+  } else {
+    overviewNode = (
+      <div className="bg-gray-800 border border-dark-50 w-full flex p-4 mb-4 rounded justify-end items-center">
+        <div className="text-center">
+          <div className="h3 mb-2">Connect your wallet</div>
+          <div className="mb-9 text-gray-300 h4">
+            Please connect your wallet to see your open positions.
+          </div>
+          <div className="w-full md-w-auto">
+            <ConnectWalletButton accountId={accountId} />
+          </div>
+        </div>
+        <div className="hidden md:block" style={{ margin: "-20px 0 -40px" }}>
+          <BookTokenSvg />
+        </div>
+      </div>
+    );
+  }
+  return <div className="flex flex-col items-center justify-center w-full">{overviewNode}</div>;
+};
+
+export default MyMarginTrading;
diff --git a/screens/MarginTrading/components/index.tsx b/screens/MarginTrading/components/index.tsx
diff --git a/screens/MarginTrading/index.tsx b/screens/MarginTrading/index.tsx
@@ -1,11 +1,36 @@
+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";
 
 const MarginTrading = () => {
   const dispatch = useAppDispatch();
+  const [activeTab, setActiveTab] = useState("market");
+
+  const getTabClassName = (tabName) => {
+    const baseClass = "py-2.5 px-24 text-base";
+    const activeClass = "bg-primary rounded-md text-dark-200";
+    return activeTab === tabName ? `${baseClass} ${activeClass}` : baseClass;
+  };
+
   return (
-    <LayoutBox className="flex flex-col items-center justify-center">
-      maring trading list page
+    <LayoutBox className="flex flex-col items-center justify-center mt-14">
+      <div className="flex space-x-4 bg-gray-800 mb-6 text-gray-300 rounded-md py-0.5 px-0.5">
+        <button
+          type="button"
+          className={getTabClassName("market")}
+          onClick={() => setActiveTab("market")}
+        >
+          Market
+        </button>
+        <button type="button" className={getTabClassName("my")} onClick={() => setActiveTab("my")}>
+          Yours
+        </button>
+      </div>
+
+      {activeTab === "market" && <MarketMarginTrading />}
+      {activeTab === "my" && <MyMarginTrading />}
     </LayoutBox>
   );
 };

diff --git a/screens/MarginTrading/svg.tsx b/screens/MarginTrading/svg.tsx
diff --git a/screens/Trading/svg.tsx b/screens/Trading/svg.tsx