fix: pail price select

CarmineOptions · Nov 19, 2024 · 5d660f5 · 5d660f5
1 parent 625cbf1
commit 5d660f5
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 17 deletions.
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -131,6 +131,13 @@ export const Navigation = () => {
                 badge={<NewBadge />}
                 isActive={current === "battlecharts"}
               />
+              <Nav
+                title="PAIL"
+                path="pail"
+                icon={ShieldPlus}
+                badge={<NewBadge />}
+                isActive={current === "pail"}
+              />
             </ul>
           </nav>
         </div>

diff --git a/src/components/PAIL/Buy.tsx b/src/components/PAIL/Buy.tsx
@@ -6,7 +6,7 @@ import {
 import { Pair } from "../../classes/Pair";
 import { PAIL_ADDRESS } from "../../constants/amm";
 import { LoadingAnimation } from "../Loading/Loading";
-import { math64toDecimal } from "../../utils/units";
+import { decimalToMath64, math64toDecimal } from "../../utils/units";
 import { longInteger } from "../../utils/computations";
 import toast from "react-hot-toast";
 import { TokenBadge } from "../TokenBadge";
@@ -15,16 +15,17 @@ type Props = {
   tokenPair: Pair;
   expiry: number;
   notional: bigint;
+  priceAt: number;
 };
 
-export const Buy = ({ tokenPair, expiry, notional }: Props) => {
+export const Buy = ({ tokenPair, expiry, notional, priceAt }: Props) => {
   const { provider } = useProvider();
   const args = [
     notional.toString(10),
     tokenPair.quoteToken.address,
     tokenPair.baseToken.address,
     expiry.toString(10),
-    0,
+    decimalToMath64(priceAt),
     0,
   ];
   const { isLoading, isError, error, data } = useReadContract({
@@ -124,7 +125,6 @@ export const Buy = ({ tokenPair, expiry, notional }: Props) => {
       ],
     };
 
-    console.log(call);
     await sendAsync([approveQuote, approveBase, call])
       .then(({ transaction_hash }) => {
         toast.promise(provider.waitForTransaction(transaction_hash), {

diff --git a/src/components/PAIL/Owned.tsx b/src/components/PAIL/Owned.tsx
@@ -12,6 +12,7 @@ export const Owned = () => {
   if (isLoading) {
     return <LoadingAnimation />;
   }
+
   if (isError || !data) {
     console.error(error);
     return <p>Something went wrong</p>;
@@ -48,7 +49,7 @@ export const Owned = () => {
   return (
     <div style={{ display: "flex", flexFlow: "column" }}>
       <h3>Live</h3>
-      {data.live.length === 0 ? (
+      {data?.live?.length === 0 ? (
         <p>No live PAIL</p>
       ) : (
         data.live.map((id, i) => (
@@ -67,7 +68,7 @@ export const Owned = () => {
         ))
       )}
       <h3>Expired</h3>
-      {data.expired.length === 0 ? (
+      {data?.expired?.length === 0 ? (
         <p>No expired PAIL</p>
       ) : (
         data.expired.map((id, i) => (

diff --git a/src/components/PAIL/Pail.tsx b/src/components/PAIL/Pail.tsx
@@ -27,6 +27,9 @@ export const Pail = () => {
   const [amountText, setAmountText] = useState<string>("1");
   const tokenPair = Pair.pairByKey(pair);
 
+  const [priceAt, setPriceAt] = useState<number>(0);
+  const [priceAtCurrent, setPriceAtCurrent] = useState<boolean>(true);
+
   const handlePairChange = (event: SelectChangeEvent) => {
     setPair(event.target.value as PairKey);
   };
@@ -39,6 +42,13 @@ export const Pail = () => {
     }
   );
 
+  const handlePriceAtChange = (e: any) => {
+    try {
+      const parsed = parseFloat(e?.target?.value);
+      setPriceAt(parsed);
+    } catch {}
+  };
+
   if (isLoading) {
     return <LoadingAnimation />;
   }
@@ -75,13 +85,16 @@ export const Pail = () => {
   const minPut = puts.at(0);
 
   const priceRange =
-    !!maxCall && !!minPut ? minPut.strike + " - " + maxCall.strike : undefined;
+    !!maxCall && !!minPut ? [minPut.strike, maxCall.strike] : undefined;
 
   const formatTimestamp = (timestamp: number) => {
     const date = new Date(timestamp * 1000);
     return date.toLocaleDateString("en-US", { day: "numeric", month: "short" });
   };
 
+  const isPriceWithinRange =
+    priceRange && priceAt >= priceRange[0] && priceAt <= priceRange[1];
+
   return (
     <div className={styles.container}>
       <div>
@@ -131,7 +144,7 @@ export const Pail = () => {
       </div>
       <div>
         <div>
-          <span>size</span>
+          <h3>Size</h3>
         </div>
         <div>
           <input
@@ -142,14 +155,64 @@ export const Pail = () => {
           />
         </div>
       </div>
-      {!!priceRange && <h4>Price range: {priceRange}</h4>}
-      {!!tokenPair && !!maturity && (
-        <Buy
-          tokenPair={Pair.pairByKey(pair)}
-          expiry={maturity}
-          notional={longInteger(amount, tokenPair.baseToken.decimals)}
-        />
-      )}
+      <div>
+        <div
+          style={{
+            display: "flex",
+            flexFlow: "column",
+            gap: "5px",
+          }}
+        >
+          <h3>Price at</h3>
+          <p>Price at which you want to protect against impermanent loss.</p>
+          <p>
+            If you check current, price at the time of execution will be used.
+          </p>
+          {!!priceRange && (
+            <h4>
+              Price range: {priceRange[0]} - {priceRange[1]}
+            </h4>
+          )}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={priceAtCurrent}
+            onChange={() => setPriceAtCurrent((prev) => !prev)}
+          />
+          <input
+            onChange={handlePriceAtChange}
+            type="number"
+            placeholder="price at"
+            value={priceAt}
+            style={{
+              border:
+                priceRange &&
+                (priceAt < priceRange[0] || priceAt > priceRange[1])
+                  ? "2px solid red"
+                  : "",
+            }}
+          />
+        </div>
+      </div>
+
+      {!!tokenPair &&
+        !!maturity &&
+        (priceAtCurrent || isPriceWithinRange ? (
+          <Buy
+            tokenPair={Pair.pairByKey(pair)}
+            expiry={maturity}
+            notional={longInteger(amount, tokenPair.baseToken.decimals)}
+            priceAt={priceAtCurrent ? 0 : priceAt}
+          />
+        ) : (
+          <p>Either check current price or use price withing range</p>
+        ))}
       <div className={"divider"} />
       <Owned />
     </div>

diff --git a/src/hooks/usePailTokenIds.ts b/src/hooks/usePailTokenIds.ts
@@ -85,7 +85,7 @@ export const usePailTokenIds = () => {
   const { address } = useAccount();
 
   return useQuery({
-    queryKey: [QueryKeys.position, address],
+    queryKey: [QueryKeys.pail, address],
     queryFn: async () => getUserPailTokens(address!),
     enabled: !!address,
   });

diff --git a/src/queries/keys.ts b/src/queries/keys.ts
@@ -21,4 +21,5 @@ export enum QueryKeys {
   userDomain = "USER_DOMAIN",
   poolData = "POOL_DATA",
   apy = "APY",
+  pail = "PAIL",
 }