feat: add battlecharts

public/index.html

@@ -13,6 +13,11 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
+    rel="stylesheet">
   <!--GTAG_PLACEHOLDER-->
 </head>
 

src/App.tsx

@@ -16,7 +16,6 @@ import { Controller } from "./Controller";
 import APYInfoPage from "./pages/apyInfo";
 import TradeDashboardPage from "./pages/dashboard";
 import Governance from "./pages/governance";
-import PriceGuard from "./pages/priceGuard";
 import NotFound from "./pages/notFound";
 import Portfolio from "./pages/portfolio";
 import Settings from "./pages/settings";
@@ -30,6 +29,7 @@ import { isCookieSet } from "./utils/cookies";
 import "./style/base.css";
 import LeaderboardPage from "./pages/leaderboard";
 import StarknetRewards from "./pages/starknetRewards";
+import BattlechartsPage from "./pages/battlecharts";
 
 const App = () => {
   const [check, rerender] = useState(false);
@@ -70,6 +70,7 @@ const App = () => {
                 <Route path="/governance/:target?" element={<Governance />} />
                 <Route path="/leaderboard" element={<LeaderboardPage />} />
                 <Route path="/rewards" element={<StarknetRewards />} />
+                <Route path="/battlecharts" element={<BattlechartsPage />} />
                 <Route path="*" element={<NotFound />} />
               </Routes>
             </Router>

src/components/Header/Header.tsx

@@ -37,6 +37,10 @@ const navLinks = [
     title: "Rewards",
     link: "/rewards",
   },
+  {
+    title: "Battlecharts",
+    link: "/battlecharts",
+  },
 ] as NavLinkProps[];
 
 const RewardsTitle = () => (
@@ -45,6 +49,12 @@ const RewardsTitle = () => (
   </div>
 );
 
+const NewTitle = ({ title }: { title: string }) => (
+  <div className={styles.rewardsheader}>
+    <div className={styles.badge}>NEW</div> {title}
+  </div>
+);
+
 const navLink = ({ title, link }: NavLinkProps, i: number): ReactNode => (
   <NavLink
     className={(p) => {
@@ -61,7 +71,13 @@ const navLink = ({ title, link }: NavLinkProps, i: number): ReactNode => (
     to={link}
     key={i}
   >
-    {title === "Rewards" ? <RewardsTitle /> : title}
+    {title === "Rewards" ? (
+      <RewardsTitle />
+    ) : title === "Battlecharts" ? (
+      <NewTitle title={title} />
+    ) : (
+      title
+    )}
   </NavLink>
 );
 

src/components/Header/header.module.css

@@ -7,14 +7,19 @@
 
 .navlink {
   color: white;
-  margin: 1em 1.5em;
+  margin: 1em 1.2em;
   text-decoration: none;
+  font-size: 18px;
 }
 
 .active {
   color: rgba(255, 255, 255, 0.6);
 }
 
+.active div {
+  color: rgba(255, 255, 255, 0.6);
+}
+
 .navlinkcontainer {
   display: flex;
   flex-flow: row;
@@ -27,13 +32,20 @@
 .logo {
   display: flex;
   margin-right: auto;
-  padding-right: 4rem;
 }
 
 .rewardsheader {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 10px;
+}
+
+.badge {
+  background: #FAB000;
+  color: black;
+  font-size: 12px;
+  padding: 0 5px;
+  border-radius: 3px;
 }
 
 @media (max-width: 720px) {

src/components/Leaderboard/Leaderboard.tsx

@@ -0,0 +1,88 @@
+import { addressElision } from "../../utils/utils";
+import { ReactComponent as BlackWalletIcon } from "./wallet.svg";
+import { ReactComponent as WalletIcon } from "./whiteWallet.svg";
+
+import styles from "./leaderboard.module.css";
+
+export type ItemProps = {
+  position: number;
+  address: string;
+  data: (string | JSX.Element)[];
+  className?: string;
+};
+
+type Props = {
+  header: string[];
+  items: ItemProps[];
+  user?: ItemProps;
+};
+
+const LeaderboardItem = ({ position, address, data, className }: ItemProps) => {
+  return (
+    <tr className={className ?? ""}>
+      <td>{position}</td>
+      <td>
+        <div className={styles.wallet}>
+          {position === 1 && <BlackWalletIcon />}
+          {position === 2 && <BlackWalletIcon />}
+          {position > 2 && <WalletIcon />}
+          {addressElision(address)}
+        </div>
+      </td>
+      {data.map((v) => (
+        <td>{v}</td>
+      ))}
+      {className === styles.user && <div className={styles.badge}>YOU</div>}
+    </tr>
+  );
+};
+
+export const Leaderboard = ({ header, items, user }: Props) => {
+  const positionToClassName = (position: number) => {
+    if (position > 3 || position < 1) {
+      return;
+    }
+    if (position === 1) {
+      return styles.first;
+    }
+    if (position === 2) {
+      return styles.second;
+    }
+    if (position === 3) {
+      return styles.third;
+    }
+    // unreachable
+    return;
+  };
+
+  return (
+    <table className={styles.leaderboard}>
+      <thead>
+        <tr>
+          {header.map((h, i) => (
+            <th key={i}>{h}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {user && (
+          <LeaderboardItem
+            className={styles.user}
+            position={user.position}
+            address={user.address}
+            data={user.data}
+          />
+        )}
+        {items.map(({ position, address, data }, i) => (
+          <LeaderboardItem
+            className={positionToClassName(position)}
+            position={position}
+            address={address}
+            data={data}
+            key={i}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+};

src/components/Leaderboard/index.ts

@@ -0,0 +1,3 @@
+import { Leaderboard } from "./Leaderboard";
+
+export { Leaderboard };

src/components/Leaderboard/leaderboard.module.css

@@ -0,0 +1,115 @@
+.leaderboard {
+  margin: 0 auto;
+  border-collapse: separate;
+  width: 100%;
+  font-family: "IBM Plex Sans", sans-serif;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.leaderboard thead th {
+  text-align: left;
+  color: #969696;
+  text-transform: uppercase;
+}
+
+.leaderboard thead tr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.leaderboard tbody tr {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  margin-bottom: 12px;
+  border-radius: 2px;
+}
+
+.wallet {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.user {
+  border: solid 1px var(--LIGHT-GREY);
+}
+
+.badge {
+  background: #FAB000;
+  color: black;
+  font-size: 12px;
+  padding: 0 5px;
+  border-radius: 3px;
+  position: absolute;
+  top: -10px;
+  left: 9px;
+}
+
+.first {
+  background: #FFC640;
+}
+
+.first td {
+  color: black;
+}
+
+.first td span {
+  color: black;
+}
+
+.first td div {
+  color: black;
+}
+
+.second {
+  background: #E1E1E1;
+  color: black;
+}
+
+.second td {
+  color: black;
+}
+
+.second td span {
+  color: black;
+}
+
+.second td div {
+  color: black;
+}
+
+
+.third {
+  background: #381E0F;
+}
+
+.leaderboard thead th {
+  width: 150px;
+}
+
+.leaderboard thead th:nth-child(1) {
+  width: 50px;
+}
+
+.leaderboard thead th:nth-child(2) {
+  width: 250px;
+}
+
+.leaderboard td {
+  width: 150px;
+}
+
+.leaderboard td:nth-child(1) {
+  width: 50px;
+}
+
+.leaderboard td:nth-child(2) {
+  width: 250px;
+}

src/components/PnL/NotionalVolumeLeaderboard.tsx

@@ -0,0 +1,52 @@
+import { useQuery } from "react-query";
+import { tradeLeaderboardDataQuery } from "./getTrades";
+import { Leaderboard } from "../Leaderboard";
+import { useAccount } from "../../hooks/useAccount";
+
+export const NotionalVolumeLeaderboard = () => {
+  const account = useAccount();
+  const { isLoading, isError, data } = useQuery(
+    ["notional-volume-leaderboard", account?.address],
+    tradeLeaderboardDataQuery
+  );
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (isError || !data) {
+    return <div>Something went wrong</div>;
+  }
+
+  const [leaderboardUsers, currentUser] = data;
+
+  const header = ["Rank", "Trader", "Profit/Loss", "Volume"];
+
+  const parseData = (pnl: number, vol: number): [JSX.Element, JSX.Element] => {
+    const isPnlNegative = pnl < 0;
+    const PnlElem = (
+      <span style={{ color: isPnlNegative ? "#CB3737" : "#37CB4F" }}>
+        {isPnlNegative && "-"}${Math.abs(pnl).toFixed(2)}
+      </span>
+    );
+    const VolElem = <span>${vol.toFixed(2)}</span>;
+
+    return [PnlElem, VolElem];
+  };
+
+  const items = leaderboardUsers.map(
+    ({ address, notionalVolume, pnl, position }) => ({
+      position,
+      address,
+      data: parseData(pnl, notionalVolume),
+    })
+  );
+
+  const user = currentUser && {
+    position: currentUser.position,
+    address: account!.address,
+    data: parseData(currentUser.pnl, currentUser.notionalVolume),
+  };
+
+  return <Leaderboard header={header} items={items} user={user} />;
+};