Merge pull request #243 from CarmineOptions/fix/btc-option-size

fix: show bitcoin size 0.1
CarmineOptions · Oct 18, 2024 · 8e428e0 · 8e428e0
2 parents ee4ae83 + e9c18ab
commit 8e428e0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 20 deletions.
diff --git a/src/components/CryptoGraph/profitGraphData.ts b/src/components/CryptoGraph/profitGraphData.ts
@@ -14,6 +14,9 @@ const getStep = (option: Option): number => {
   if (option.baseToken.id === TokenKey.STRK) {
     return 0.001;
   }
+  if (option.baseToken.id === TokenKey.BTC) {
+    return 0.5;
+  }
   return 0.1;
 };
 

diff --git a/src/components/Sidebar/OptionSidebar.tsx b/src/components/Sidebar/OptionSidebar.tsx
@@ -36,8 +36,15 @@ export const OptionSidebar = ({ option }: Props) => {
   const account = useAccount();
   const price = useCurrency(option.underlying.id);
   const balanceRaw = useUserBalance(option.underlying.address);
-  const [amount, setAmount] = useState<number>(1);
-  const [amountText, setAmountText] = useState<string>("1");
+  const defaultAmount =
+    option.baseToken.id === TokenKey.BTC ||
+    option.quoteToken.id === TokenKey.BTC
+      ? 0.1
+      : 1;
+  const [amount, setAmount] = useState<number>(defaultAmount);
+  const [amountText, setAmountText] = useState<string>(
+    defaultAmount.toString()
+  );
   const [loading, setLoading] = useState<boolean>(false);
   const [sizeOnePremia, setSizeOnePremia] = useState<number>();
   const [premiaUsd, setPremiaUsd] = useState<number>();
@@ -122,12 +129,11 @@ export const OptionSidebar = ({ option }: Props) => {
   }, [amount, option.optionId]);
 
   useEffect(() => {
-    return () => {
-      setAmount(1);
-      setAmountText("1");
-      setTxState(TransactionState.Initial);
-    };
-  }, [option.optionId]);
+    // sets default amounts when option changes
+    setAmount(defaultAmount);
+    setAmountText(defaultAmount.toString());
+    setTxState(TransactionState.Initial);
+  }, [defaultAmount, option.optionId]);
 
   const balance =
     balanceRaw === undefined

diff --git a/src/components/TradeTable/OptionsTable.tsx b/src/components/TradeTable/OptionsTable.tsx
@@ -8,6 +8,7 @@ import { ReactComponent as PlusIcon } from "./plus.svg";
 import styles from "./table.module.css";
 import { openSidebar, setSidebarContent } from "../../redux/actions";
 import { OptionSidebar } from "../Sidebar";
+import { TokenKey } from "../../classes/Token";
 
 type Props = {
   options: OptionWithPremia[];
@@ -70,6 +71,9 @@ const OptionsTable = ({ options, tokenPair, side }: Props) => {
             return null;
           }
 
+          const isBtc =
+            o.baseToken.id === TokenKey.BTC || o.quoteToken.id === TokenKey.BTC;
+
           return (
             <>
               {priceReady && index !== false && index === i && (
@@ -90,28 +94,19 @@ const OptionsTable = ({ options, tokenPair, side }: Props) => {
                     onClick={() => handleOptionClick(o)}
                   >
                     {o.premia.toFixed(3)} {o.symbol}{" "}
+                    {isBtc && <span className="l2">size 0.1</span>}
                     <div className={styles.square}>
                       <PlusIcon />
                     </div>
                   </div>
                 )}
-                {side === OptionSide.Short && (
+                {(side === OptionSide.Short || side === "all") && (
                   <div
                     className={`${styles.premiacontainer} ${styles.short}`}
                     onClick={() => handleOptionClick(o)}
                   >
                     {o.premia.toFixed(3)} {o.symbol}{" "}
-                    <div className={styles.square}>
-                      <PlusIcon />
-                    </div>
-                  </div>
-                )}
-                {side === "all" && (
-                  <div
-                    className={`${styles.premiacontainer} ${styles.short}`}
-                    onClick={() => handleOptionClick(short!)}
-                  >
-                    {short!.premia.toFixed(3)} {o.symbol}{" "}
+                    {isBtc && <span className="l2">size 0.1</span>}
                     <div className={styles.square}>
                       <PlusIcon />
                     </div>