fix: price protect graph switching

CarmineOptions · Dec 11, 2024 · e37564c · e37564c
1 parent 6aceda5
commit e37564c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/src/components/CryptoGraph/SingleTokenGraph.tsx b/src/components/CryptoGraph/SingleTokenGraph.tsx
@@ -2,21 +2,10 @@ import { memo, useEffect, useRef } from "react";
 import { TokenKey } from "../../classes/Token";
 
 type Props = {
-  token: TokenKey;
-};
-
-const tokenKeyTickerMap: {
-  [key in TokenKey]: string;
-} = {
-  [TokenKey.ETH]: "BINANCE:ETHUSD",
-  [TokenKey.BTC]: "BINANCE:wBTCUSD",
-  [TokenKey.STRK]: "BINANCE:STRKUSD",
-  [TokenKey.USDC]: "",
-  [TokenKey.EKUBO]: "",
+  ticker: string;
 };
 
-export const SingleTokenGraph = memo(({ token }: Props) => {
-  const ticker = tokenKeyTickerMap[token];
+export const SingleTokenGraph = memo(({ ticker }: Props) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -41,7 +30,7 @@ export const SingleTokenGraph = memo(({ token }: Props) => {
       containerRef.current.appendChild(script);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token]);
+  }, []);
 
   return (
     <div className="tradingview-widget-container" ref={containerRef}>
@@ -58,3 +47,26 @@ export const SingleTokenGraph = memo(({ token }: Props) => {
     </div>
   );
 });
+
+type SingleTokenMultichartProps = {
+  token: TokenKey;
+};
+
+export const SingleTokenMultichart = ({
+  token,
+}: SingleTokenMultichartProps) => {
+  const show = token === TokenKey.STRK ? 1 : token === TokenKey.BTC ? 2 : 3;
+  return (
+    <div className="h-full">
+      <div className={`h-full${show === 1 ? "" : " hidden"}`}>
+        <SingleTokenGraph ticker="BINANCE:STRKUSD" />
+      </div>
+      <div className={`h-full${show === 2 ? "" : " hidden"}`}>
+        <SingleTokenGraph ticker="BINANCE:wBTCUSD" />
+      </div>
+      <div className={`h-full${show === 3 ? "" : " hidden"}`}>
+        <SingleTokenGraph ticker="BINANCE:ETHUSD" />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/PriceGuard/SidebarContent.tsx b/src/components/PriceGuard/SidebarContent.tsx
@@ -27,7 +27,7 @@ import CogIcon from "./cog.svg?react";
 import { TransactionState } from "../../types/network";
 import { useOptions } from "../../hooks/useOptions";
 import { Button, Divider, H5, H6, P3, P4 } from "../common";
-import { SingleTokenGraph } from "../CryptoGraph/SingleTokenGraph";
+import { SingleTokenMultichart } from "../CryptoGraph/SingleTokenGraph";
 import { TokenSelect } from "../TokenPairSelect";
 import CaretDown from "./CaretDown.svg?react";
 import LightBulb from "./LightBulb.svg?react";
@@ -186,7 +186,7 @@ export const SidebarContent = ({ initialTokenKey }: Props) => {
     .filter((o) => o.maturity === expiry)
     .map((o) => o.strike)
     .filter(uniquePrimitiveValues)
-    .sort();
+    .sort((a, b) => a - b);
 
   if (
     longPuts.length > 0 &&
@@ -273,7 +273,7 @@ export const SidebarContent = ({ initialTokenKey }: Props) => {
     : ["--", "--"];
 
   const graphData =
-    price === undefined || size === 0
+    price === undefined || size === 0 || !pickedOption
       ? undefined
       : getProfitGraphData(pickedOption, price, size);
 
@@ -299,7 +299,7 @@ export const SidebarContent = ({ initialTokenKey }: Props) => {
               <Divider className="grow" />
             </div>
             <div className="max-w-[536px] h-[245px]">
-              <SingleTokenGraph token={token.id} />
+              <SingleTokenMultichart token={token.id} />
             </div>
           </div>
           <div className="flex flex-col gap-3">