From 0d628e18dc91c28e430bdd6beae696e659b0e5c7 Mon Sep 17 00:00:00 2001
From: DaveVodrazka <dave.vodrazka@gmail.com>
Date: Wed, 14 Aug 2024 15:06:31 +0200
Subject: [PATCH 1/3] feat: redesign price protection

---
 public/index.html                             |   2 +
 src/App.tsx                                   |   2 +-
 src/components/Header/Header.tsx              |   4 +-
 .../PriceGuard/BuyPriceGuardBox.tsx           | 254 ++++++++++++------
 .../PriceGuard/priceguard.module.css          | 196 +++++++++-----
 src/pages/priceGuard.tsx                      |  23 +-
 src/utils/utils.ts                            |  26 +-
 7 files changed, 339 insertions(+), 168 deletions(-)

diff --git a/public/index.html b/public/index.html
index 54fe89fc..df92fed9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,6 +18,8 @@
   <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">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap"
+    rel="stylesheet">
   <!--GTAG_PLACEHOLDER-->
 </head>
 
diff --git a/src/App.tsx b/src/App.tsx
index 8d2e1fe5..17401232 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -73,7 +73,7 @@ const App = () => {
                 <Route path="/leaderboard" element={<LeaderboardPage />} />
                 <Route path="/rewards" element={<StarknetRewards />} />
                 <Route path="/battlecharts" element={<BattlechartsPage />} />
-                <Route path="/priceguard" element={<PriceGuard />} />
+                <Route path="/priceprotect" element={<PriceGuard />} />
                 <Route path="*" element={<NotFound />} />
               </Routes>
             </Router>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 4b6d3b1c..7dbd989b 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -18,8 +18,8 @@ const navLinks = [
     link: "/staking",
   },
   {
-    title: "Price Guard",
-    link: "/priceguard",
+    title: "Price Protect",
+    link: "/priceprotect",
   },
   {
     title: "Trade",
diff --git a/src/components/PriceGuard/BuyPriceGuardBox.tsx b/src/components/PriceGuard/BuyPriceGuardBox.tsx
index a78f0db8..a64b6a58 100644
--- a/src/components/PriceGuard/BuyPriceGuardBox.tsx
+++ b/src/components/PriceGuard/BuyPriceGuardBox.tsx
@@ -57,7 +57,7 @@ const BuyPriceGuardButton = ({ option, size }: BuyButtonProps) => {
 
   return (
     <button
-      className={buttonStyles.secondary}
+      className={styles.buybutton}
       disabled={txPending}
       onClick={handleButtonClick}
     >
@@ -187,12 +187,12 @@ export const BuyPriceGuardBox = () => {
     }
   };
 
-  const handleStrikeChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setCurrentStrike(parseFloat(event.target.value) as number);
+  const handleStrikeChange = (strike: number) => {
+    setCurrentStrike(strike);
   };
 
-  const handleExpiryChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setExpiry(parseInt(event.target.value) as number);
+  const handleExpiryChange = (exp: number) => {
+    setExpiry(exp);
   };
 
   const handleSizeChange = handleNumericChangeFactory(
@@ -241,91 +241,195 @@ export const BuyPriceGuardBox = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.item}>
+      <div>
         <div className={styles.title}>
-          Asset to protect
+          Asset & Amount
           <InfoIcon msg="This is the asset you want to shield against price drops." />
         </div>
-      </div>
-      <div className={styles.item}>
-        <div className={styles.title}>
-          Amount to protect
-          <InfoIcon msg="Enter the number of STRK tokens you want to protect. This defines the portion of your holdings that will be covered by this plan, shielding them when the market starts dropping." />
-        </div>
-      </div>
-      <div className={styles.item}>
-        <div className={styles.title}>
-          Price to secure
-          <InfoIcon msg="Set the price point for your STRK holdings, ensuring protection if the asset falls below this point." />
+        <div className={styles.assetamount}>
+          <div>
+            <div>
+              <input
+                placeholder="Enter amount"
+                value={textSize}
+                onChange={handleSizeChange}
+              />
+              <select
+                id="currency"
+                value={currency}
+                onChange={handleCurrencyChange}
+              >
+                <option value={TokenKey.STRK}>STRK</option>
+                <option value={TokenKey.ETH}>ETH</option>
+                <option value={TokenKey.BTC}>wBTC</option>
+              </select>
+            </div>
+          </div>
+          <div className={styles.balance}>
+            <span>balance</span>
+            <span>
+              {displayBalance === undefined ? "---" : displayBalance}{" "}
+              {token.symbol}
+            </span>
+          </div>
         </div>
       </div>
-      <div className={styles.item}>
+      <div className={styles.row}>
         <div className={styles.title}>
-          Duration/Until
+          Duration
           <InfoIcon msg="Select how long you want the protection to last. This date marks the end of the plan." />
         </div>
+        <div>
+          {expiries.map((exp) => {
+            const [date, time] = timestampToPriceGuardDate(exp);
+            const className =
+              exp === expiry
+                ? `${styles.datetime} ${styles.active}`
+                : styles.datetime;
+            return (
+              <button className={className}>
+                <div onClick={() => handleExpiryChange(exp)}>
+                  <span>{date}</span>
+                  <span>{time}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
       </div>
-      <div className={styles.item}>
+      <div className={styles.row}>
         <div className={styles.title}>
-          Total coverage price
-          <InfoIcon msg="This is the total STRK cost for your protection plan, calculated based on your selections." />
+          Protection price
+          <InfoIcon msg="Set the price point for your STRK holdings, ensuring protection if the asset falls below this point." />
         </div>
-      </div>
-      <div className={styles.item}>
-        <select id="currency" value={currency} onChange={handleCurrencyChange}>
-          <option value={TokenKey.STRK}>STRK</option>
-          <option value={TokenKey.ETH}>ETH</option>
-          <option value={TokenKey.BTC}>wBTC</option>
-        </select>
-      </div>
-      <div className={styles.item}>
-        <div className={styles.column}>
-          <input placeholder="0" value={textSize} onChange={handleSizeChange} />
-          {displayBalance && (
-            <span>
-              Available: {displayBalance} {token.symbol}{" "}
-              <button onClick={handleAll}>All</button>
-            </span>
-          )}
-          {displayBalance === undefined && <span>Loading...</span>}
+        <div>
+          {strikes.map((strike) => {
+            const className =
+              strike === currentStrike
+                ? `${styles.datetime} ${styles.active}`
+                : styles.datetime;
+            return (
+              <button
+                onClick={() => handleStrikeChange(strike)}
+                className={className}
+              >
+                ${strike}
+              </button>
+            );
+          })}
         </div>
       </div>
-      <div className={styles.item}>
-        <select id="strike" value={currentStrike} onChange={handleStrikeChange}>
-          {strikes.map((strike, i) => (
-            <option key={i} value={strike}>
-              $ {strike}
-            </option>
-          ))}
-        </select>
-      </div>
-      <div className={styles.item}>
-        <select id="maturity" value={expiry} onChange={handleExpiryChange}>
-          {expiries.map((exp, i) => (
-            <option key={i} value={exp}>
-              {timestampToPriceGuardDate(exp * 1000)}
-            </option>
-          ))}
-        </select>
+      <div className={styles.divider}></div>
+      <div className={styles.coverage}>
+        <span className={styles.title}>Final coverage price</span>
+        <span className={styles.finalprice}>
+          {priceLoading || price === undefined ? "---" : "$" + price.toFixed(3)}
+        </span>
       </div>
-      <div className={styles.item}>
-        <div className={styles.buy}>
-          {priceLoading || price === undefined
-            ? "Loading..."
-            : `$${price.toFixed(2)}`}
-          {account === undefined && (
-            <button
-              className={buttonStyles.secondary}
-              onClick={openWalletConnectDialog}
-            >
-              Connect wallet
-            </button>
-          )}
-          {!priceLoading && account && (
-            <BuyPriceGuardButton option={pickedOption} size={size} />
-          )}
-        </div>
+      <div>
+        {account === undefined ? (
+          <button
+            className={styles.buybutton}
+            onClick={openWalletConnectDialog}
+          >
+            Connect wallet
+          </button>
+        ) : price === undefined ? (
+          <button className={styles.buybutton}>loading</button>
+        ) : (
+          <BuyPriceGuardButton option={pickedOption} size={size} />
+        )}
       </div>
     </div>
   );
+
+  // return (
+  //   <div className={styles.container}>
+  //     <div className={styles.item}>
+  //       <div className={styles.title}>
+  //         Asset to protect
+  //         <InfoIcon msg="This is the asset you want to shield against price drops." />
+  //       </div>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <div className={styles.title}>
+  //         Amount to protect
+  //         <InfoIcon msg="Enter the number of STRK tokens you want to protect. This defines the portion of your holdings that will be covered by this plan, shielding them when the market starts dropping." />
+  //       </div>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <div className={styles.title}>
+  //         Price to secure
+  //         <InfoIcon msg="Set the price point for your STRK holdings, ensuring protection if the asset falls below this point." />
+  //       </div>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <div className={styles.title}>
+  //         Duration/Until
+  //         <InfoIcon msg="Select how long you want the protection to last. This date marks the end of the plan." />
+  //       </div>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <div className={styles.title}>
+  //         Total coverage price
+  //         <InfoIcon msg="This is the total STRK cost for your protection plan, calculated based on your selections." />
+  //       </div>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <select id="currency" value={currency} onChange={handleCurrencyChange}>
+  //         <option value={TokenKey.STRK}>STRK</option>
+  //         <option value={TokenKey.ETH}>ETH</option>
+  //         <option value={TokenKey.BTC}>wBTC</option>
+  //       </select>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <div className={styles.column}>
+  //         <input placeholder="0" value={textSize} onChange={handleSizeChange} />
+  //         {displayBalance && (
+  //           <span>
+  //             Available: {displayBalance} {token.symbol}{" "}
+  //             <button onClick={handleAll}>All</button>
+  //           </span>
+  //         )}
+  //         {displayBalance === undefined && <span>Loading...</span>}
+  //       </div>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <select id="strike" value={currentStrike} onChange={handleStrikeChange}>
+  //         {strikes.map((strike, i) => (
+  //           <option key={i} value={strike}>
+  //             $ {strike}
+  //           </option>
+  //         ))}
+  //       </select>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <select id="maturity" value={expiry} onChange={handleExpiryChange}>
+  //         {expiries.map((exp, i) => (
+  //           <option key={i} value={exp}>
+  //             {timestampToPriceGuardDate(exp * 1000)}
+  //           </option>
+  //         ))}
+  //       </select>
+  //     </div>
+  //     <div className={styles.item}>
+  //       <div className={styles.buy}>
+  //         {priceLoading || price === undefined
+  //           ? "Loading..."
+  //           : `$${price.toFixed(2)}`}
+  //         {account === undefined && (
+  //           <button
+  //             className={buttonStyles.secondary}
+  //             onClick={openWalletConnectDialog}
+  //           >
+  //             Connect wallet
+  //           </button>
+  //         )}
+  //         {!priceLoading && account && (
+  //           <BuyPriceGuardButton option={pickedOption} size={size} />
+  //         )}
+  //       </div>
+  //     </div>
+  //   </div>
+  // );
 };
diff --git a/src/components/PriceGuard/priceguard.module.css b/src/components/PriceGuard/priceguard.module.css
index f843a4df..7ff3bdd1 100644
--- a/src/components/PriceGuard/priceguard.module.css
+++ b/src/components/PriceGuard/priceguard.module.css
@@ -1,10 +1,126 @@
 .container {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(2, 100px);
+  display: flex;
+  flex-flow: column;
+  gap: 18px;
+  max-width: 812px;
+  font-family: "IBM Plex Sans Condensed", sans;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 23.4px;
+  margin: 50px auto;
+}
+
+.container button {
+  transition: 0s;
+  border-color: var(--LIGHT-GREY);
+  color: var(--LIGHT-GREY);
+  height: 25px;
+  padding: 3px 18px;
+  min-width: 0;
+}
+
+.container button.active {
+  background: var(--GOLD);
+  color: black;
+  border-color: var(--GOLD);
+}
+
+.container button span {
+  border-color: var(--LIGHT-GREY);
+  color: var(--LIGHT-GREY);
+}
+
+.container button.active span {
+  background: var(--GOLD);
+  color: black;
+}
+
+.assetamount {
+  display: flex;
+  flex-flow: column;
+}
+
+.assetamount>div>div {
+  display: flex;
+  flex-flow: row;
+  height: 65px;
+  background: #1A1A1A;
+  margin: 8px 0;
+}
+
+.assetamount>div>div>input {
   width: 100%;
-  padding: 20px;
-  box-sizing: border-box;
+  font-size: 24px;
+  border: none;
+}
+
+.assetamount>div>div>select {
+  border: none;
+}
+
+.row {
+  display: flex;
+}
+
+.row>div:first-child {
+  width: 180px;
+}
+
+.row>div:nth-child(2) {
+  display: flex;
+  gap: 15px;
+}
+
+.balance {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.balance span {
+  font-size: 15px;
+}
+
+.balance span:first-child {
+  text-transform: uppercase;
+  font-size: 12px;
+  color: var(--LIGHT-GREY);
+}
+
+.datetime>div {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.datetime>div>span {
+  font-size: 15px;
+}
+
+.datetime>div>span:first-child {
+  font-size: 18px;
+}
+
+.divider {
+  height: 1px;
+  border-top: 1px solid var(--LIGHT-GREY);
+}
+
+.coverage {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+button.buybutton {
+  width: 100%;
+  height: 36px;
+  text-align: center;
+  background: var(--GOLD);
+  border: none;
+  color: black;
 }
 
 .column {
@@ -37,8 +153,7 @@
 }
 
 .info {
-  width: 20px;
-  height: 20px;
+  display: flex;
 }
 
 .info svg {
@@ -49,9 +164,14 @@
 .title {
   display: flex;
   align-items: center;
+  font-size: 15px;
   gap: 5px;
 }
 
+.finalprice {
+  font-size: 20px;
+}
+
 .container select {
   background: none;
   border: 2px solid var(--GOLD);
@@ -83,66 +203,4 @@
 
 .container input:focus {
   outline: 1px solid var(--GOLD);
-}
-
-
-.item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@media (min-width: 781px) {
-  .item:nth-child(-n + 5) {
-    border-bottom: solid 2px white;
-  }
-
-  .item:nth-child(-n+4) {
-    border-right: solid 2px white;
-  }
-
-  .item:nth-child(n+6):nth-child(-n+9) {
-    border-right: solid 2px white;
-  }
-}
-
-@media (max-width: 780px) {
-  .container {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(5, 100px);
-  }
-
-  .item:nth-child(1) {
-    grid-row: 1;
-    grid-column: 1;
-    border-right: solid 2px white;
-  }
-
-  .item:nth-child(2) {
-    grid-row: 2;
-    grid-column: 1;
-    border-right: solid 2px white;
-  }
-
-  .item:nth-child(3) {
-    grid-row: 3;
-    grid-column: 1;
-    border-right: solid 2px white;
-  }
-
-  .item:nth-child(4) {
-    grid-row: 4;
-    grid-column: 1;
-    border-right: solid 2px white;
-  }
-
-  .item:nth-child(5) {
-    grid-row: 5;
-    grid-column: 1;
-    border-right: solid 2px white;
-  }
-
-  .item:nth-child(n) {
-    border-bottom: solid 2px white;
-  }
 }
\ No newline at end of file
diff --git a/src/pages/priceGuard.tsx b/src/pages/priceGuard.tsx
index 4bdfbc7b..3d5869e8 100644
--- a/src/pages/priceGuard.tsx
+++ b/src/pages/priceGuard.tsx
@@ -10,17 +10,23 @@ const PriceGuard = () => {
   return (
     <Layout>
       <Helmet>
-        <title>Price Guard | Carmine Options AMM</title>
+        <title>Price Protect | Carmine Options AMM</title>
         <meta
           name="description"
-          content="Guard the price of your crypto assets"
+          content="Protect the price of your crypto assets"
         />
       </Helmet>
       <CrmBanner />
-      <h3>Price Guard</h3>
+      <h3>Price Protect</h3>
       <p>
-        Choose how much of your STRK holdings you'd like to protect, set your
-        safety threshold, and select a duration for your coverage.
+        Safeguard your holdings from major price movement.{" "}
+        <a
+          rel="noopener nofollow noreferrer"
+          target="_blank"
+          href="https://docs.carmine.finance/carmine-options-amm/use-cases"
+        >
+          Learn more
+        </a>
       </p>
       <BuyPriceGuardBox />
       <div className={styles.container}>
@@ -33,13 +39,6 @@ const PriceGuard = () => {
           <ClaimPriceGuard />
         </div>
       </div>
-      <p>
-        Note: This feature is designed to help manage the risk of STRK price
-        volatility by allowing you to set a protective value. It offers a way to
-        safeguard your holdings from significant declines but does not eliminate
-        all risks or guarantee against losses. This is not an insurance product,
-        but a tool for managing potential downside exposure.
-      </p>
     </Layout>
   );
 };
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e9e782d2..2ecbf5e3 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -54,16 +54,24 @@ export const timestampToShortTimeDate = (ts: number): string =>
     day: "numeric",
   }).format(ts);
 
-export const timestampToPriceGuardDate = (ts: number): string =>
-  new Intl.DateTimeFormat("en-US", {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
+export const timestampToPriceGuardDate = (ts: number): [string, string] => {
+  const date = new Date(ts * 1000);
+
+  const day = date.getDate();
+  const month = date.toLocaleString("en-US", { month: "short" });
+  const year = date.getFullYear();
+
+  const formattedDate = `${day} ${month}, ${year}`;
+
+  // Format the time as "2:30 PM"
+  const formattedTime = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
     hour12: true,
-  }).format(ts);
+  });
+
+  return [formattedDate, formattedTime];
+};
 
 export const timestampToDateAndTime = (ts: number): [string, string] => {
   const date = new Intl.DateTimeFormat("default", {

From df0947276ccd4bf91e9d41cb8641baed674c8c77 Mon Sep 17 00:00:00 2001
From: DaveVodrazka <dave.vodrazka@gmail.com>
Date: Wed, 14 Aug 2024 18:05:54 +0200
Subject: [PATCH 2/3] feat: add my price protect

---
 src/App.tsx                                   |   4 +-
 .../{BuyPriceGuardBox.tsx => PriceGuard.tsx}  |  93 +----------
 src/components/PriceGuard/UserPriceGuard.tsx  | 152 ++++++++++++++++++
 src/components/PriceGuard/index.ts            |   4 +
 .../PriceGuard/priceguard.module.css          |   2 +-
 .../PriceGuard/user_priceguard.module.css     | 117 ++++++++++++++
 src/pages/priceGuard.tsx                      |  22 +--
 7 files changed, 282 insertions(+), 112 deletions(-)
 rename src/components/PriceGuard/{BuyPriceGuardBox.tsx => PriceGuard.tsx} (73%)
 create mode 100644 src/components/PriceGuard/UserPriceGuard.tsx
 create mode 100644 src/components/PriceGuard/index.ts
 create mode 100644 src/components/PriceGuard/user_priceguard.module.css

diff --git a/src/App.tsx b/src/App.tsx
index 17401232..4a5fff5c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,7 +29,7 @@ import StakingExplainedPage from "./pages/stakeInfo";
 import LeaderboardPage from "./pages/leaderboard";
 import StarknetRewards from "./pages/starknetRewards";
 import BattlechartsPage from "./pages/battlecharts";
-import PriceGuard from "./pages/priceGuard";
+import PriceGuardPage from "./pages/priceGuard";
 
 import "./style/base.css";
 
@@ -73,7 +73,7 @@ const App = () => {
                 <Route path="/leaderboard" element={<LeaderboardPage />} />
                 <Route path="/rewards" element={<StarknetRewards />} />
                 <Route path="/battlecharts" element={<BattlechartsPage />} />
-                <Route path="/priceprotect" element={<PriceGuard />} />
+                <Route path="/priceprotect" element={<PriceGuardPage />} />
                 <Route path="*" element={<NotFound />} />
               </Routes>
             </Router>
diff --git a/src/components/PriceGuard/BuyPriceGuardBox.tsx b/src/components/PriceGuard/PriceGuard.tsx
similarity index 73%
rename from src/components/PriceGuard/BuyPriceGuardBox.tsx
rename to src/components/PriceGuard/PriceGuard.tsx
index a64b6a58..4b92c4b5 100644
--- a/src/components/PriceGuard/BuyPriceGuardBox.tsx
+++ b/src/components/PriceGuard/PriceGuard.tsx
@@ -23,7 +23,6 @@ import { ToastType } from "../../redux/reducers/ui";
 import { Option } from "../../classes/Option";
 import { useTxPending } from "../../hooks/useRecentTxs";
 import { TransactionAction } from "../../redux/reducers/transactions";
-import buttonStyles from "../../style/button.module.css";
 import { Token, TokenKey } from "../../classes/Token";
 import { getPremia } from "../../calls/getPremia";
 import { math64toDecimal } from "../../utils/units";
@@ -76,7 +75,7 @@ const InfoIcon = ({ msg }: { msg: string }) => {
   );
 };
 
-export const BuyPriceGuardBox = () => {
+export const PriceGuard = () => {
   const account = useAccount();
   const [currency, setCurrency] = useState<TokenKey>(TokenKey.STRK);
   const token = Token.byKey(currency);
@@ -342,94 +341,4 @@ export const BuyPriceGuardBox = () => {
       </div>
     </div>
   );
-
-  // return (
-  //   <div className={styles.container}>
-  //     <div className={styles.item}>
-  //       <div className={styles.title}>
-  //         Asset to protect
-  //         <InfoIcon msg="This is the asset you want to shield against price drops." />
-  //       </div>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <div className={styles.title}>
-  //         Amount to protect
-  //         <InfoIcon msg="Enter the number of STRK tokens you want to protect. This defines the portion of your holdings that will be covered by this plan, shielding them when the market starts dropping." />
-  //       </div>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <div className={styles.title}>
-  //         Price to secure
-  //         <InfoIcon msg="Set the price point for your STRK holdings, ensuring protection if the asset falls below this point." />
-  //       </div>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <div className={styles.title}>
-  //         Duration/Until
-  //         <InfoIcon msg="Select how long you want the protection to last. This date marks the end of the plan." />
-  //       </div>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <div className={styles.title}>
-  //         Total coverage price
-  //         <InfoIcon msg="This is the total STRK cost for your protection plan, calculated based on your selections." />
-  //       </div>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <select id="currency" value={currency} onChange={handleCurrencyChange}>
-  //         <option value={TokenKey.STRK}>STRK</option>
-  //         <option value={TokenKey.ETH}>ETH</option>
-  //         <option value={TokenKey.BTC}>wBTC</option>
-  //       </select>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <div className={styles.column}>
-  //         <input placeholder="0" value={textSize} onChange={handleSizeChange} />
-  //         {displayBalance && (
-  //           <span>
-  //             Available: {displayBalance} {token.symbol}{" "}
-  //             <button onClick={handleAll}>All</button>
-  //           </span>
-  //         )}
-  //         {displayBalance === undefined && <span>Loading...</span>}
-  //       </div>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <select id="strike" value={currentStrike} onChange={handleStrikeChange}>
-  //         {strikes.map((strike, i) => (
-  //           <option key={i} value={strike}>
-  //             $ {strike}
-  //           </option>
-  //         ))}
-  //       </select>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <select id="maturity" value={expiry} onChange={handleExpiryChange}>
-  //         {expiries.map((exp, i) => (
-  //           <option key={i} value={exp}>
-  //             {timestampToPriceGuardDate(exp * 1000)}
-  //           </option>
-  //         ))}
-  //       </select>
-  //     </div>
-  //     <div className={styles.item}>
-  //       <div className={styles.buy}>
-  //         {priceLoading || price === undefined
-  //           ? "Loading..."
-  //           : `$${price.toFixed(2)}`}
-  //         {account === undefined && (
-  //           <button
-  //             className={buttonStyles.secondary}
-  //             onClick={openWalletConnectDialog}
-  //           >
-  //             Connect wallet
-  //           </button>
-  //         )}
-  //         {!priceLoading && account && (
-  //           <BuyPriceGuardButton option={pickedOption} size={size} />
-  //         )}
-  //       </div>
-  //     </div>
-  //   </div>
-  // );
 };
diff --git a/src/components/PriceGuard/UserPriceGuard.tsx b/src/components/PriceGuard/UserPriceGuard.tsx
new file mode 100644
index 00000000..4038d882
--- /dev/null
+++ b/src/components/PriceGuard/UserPriceGuard.tsx
@@ -0,0 +1,152 @@
+import { LoadingAnimation } from "../Loading/Loading";
+import { useQuery } from "react-query";
+import { QueryKeys } from "../../queries/keys";
+import { useAccount } from "../../hooks/useAccount";
+import { AccountInterface } from "starknet";
+import { fetchPositions } from "../PositionTable/fetchPositions";
+import { OptionWithPosition } from "../../classes/Option";
+import { openCloseOptionDialog, setCloseOption } from "../../redux/actions";
+import { useTxPending } from "../../hooks/useRecentTxs";
+import { TransactionAction } from "../../redux/reducers/transactions";
+import styles from "./user_priceguard.module.css";
+import { openWalletConnectDialog } from "../ConnectWallet/Button";
+import { ReactNode, useState } from "react";
+import { TokenKey } from "../../classes/Token";
+import { timestampToPriceGuardDate } from "../../utils/utils";
+
+const PriceGuardDisplay = ({ option }: { option: OptionWithPosition }) => {
+  const txPending = useTxPending(option.optionId, TransactionAction.TradeClose);
+  const symbol = option.baseToken.symbol;
+  const [date, time] = timestampToPriceGuardDate(option.maturity);
+  const status = option.isFresh
+    ? "active"
+    : option.isInTheMoney
+    ? "claimable"
+    : "expired";
+
+  const handleButtonClick = () => {
+    setCloseOption(option);
+    openCloseOptionDialog();
+  };
+  return (
+    <div className={styles.tableitem}>
+      <div>{symbol}</div>
+      <div>
+        {option.size} {symbol}
+      </div>
+      <div>${option.strike}</div>
+      <div className={styles.datetime}>
+        <div>
+          <span>{date}</span>
+          <span>{time}</span>
+        </div>
+      </div>
+      <div className={styles[status]}>{status}</div>
+      <div>
+        {status === "claimable" && (
+          <button onClick={handleButtonClick}>Claim</button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const WithAccount = ({ account }: { account: AccountInterface }) => {
+  const { isLoading, isError, data } = useQuery(
+    [QueryKeys.position, account.address],
+    fetchPositions
+  );
+  const [asset, setAsset] = useState<TokenKey | "all">("all");
+
+  const Header = ({ children }: { children: ReactNode }) => {
+    return (
+      <div className={styles.wrapper}>
+        <h3>My Price Protect</h3>
+        <div className={styles.buttons}>
+          <button
+            className={asset === "all" ? styles.active : ""}
+            onClick={() => setAsset("all")}
+          >
+            All
+          </button>
+          <button
+            className={asset === TokenKey.STRK ? styles.active : ""}
+            onClick={() => setAsset(TokenKey.STRK)}
+          >
+            STRK
+          </button>
+          <button
+            className={asset === TokenKey.ETH ? styles.active : ""}
+            onClick={() => setAsset(TokenKey.ETH)}
+          >
+            ETH
+          </button>
+          <button
+            className={asset === TokenKey.BTC ? styles.active : ""}
+            onClick={() => setAsset(TokenKey.BTC)}
+          >
+            wBTC
+          </button>
+        </div>
+        <div className={styles.tableheader}>
+          <div>asset</div>
+          <div>amount</div>
+          <div>price secured</div>
+          <div>duration</div>
+          <div>status</div>
+          <div></div>
+        </div>
+        {children}
+      </div>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <Header>
+        <LoadingAnimation />
+      </Header>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <Header>
+        <p>Something went wrong, please try again</p>
+      </Header>
+    );
+  }
+
+  const priceGuard = data.filter((o) => o.isPut && o.isLong);
+
+  const currentChoice =
+    asset === "all"
+      ? priceGuard
+      : priceGuard.filter((o) => o.baseToken.id === asset);
+
+  return (
+    <Header>
+      <div className={styles.tablecontent}>
+        {currentChoice.map((o, i) => (
+          <PriceGuardDisplay option={o} key={i} />
+        ))}
+      </div>
+    </Header>
+  );
+};
+
+export const UserPriceGuard = () => {
+  const account = useAccount();
+
+  if (!account) {
+    return (
+      <div className={styles.wrapper}>
+        <h3>My Price Protect</h3>
+        <p>Connect your wallet to voew active & claimable Price Protections</p>
+        <button onClick={openWalletConnectDialog}>Connect Wallet</button>
+      </div>
+    );
+  }
+
+  return <WithAccount account={account} />;
+};
diff --git a/src/components/PriceGuard/index.ts b/src/components/PriceGuard/index.ts
new file mode 100644
index 00000000..7113d275
--- /dev/null
+++ b/src/components/PriceGuard/index.ts
@@ -0,0 +1,4 @@
+import { UserPriceGuard } from "./UserPriceGuard";
+import { PriceGuard } from "./PriceGuard";
+
+export { PriceGuard, UserPriceGuard };
diff --git a/src/components/PriceGuard/priceguard.module.css b/src/components/PriceGuard/priceguard.module.css
index 7ff3bdd1..f95515aa 100644
--- a/src/components/PriceGuard/priceguard.module.css
+++ b/src/components/PriceGuard/priceguard.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-flow: column;
   gap: 18px;
-  max-width: 812px;
+  max-width: 860px;
   font-family: "IBM Plex Sans Condensed", sans;
   font-size: 18px;
   font-weight: 500;
diff --git a/src/components/PriceGuard/user_priceguard.module.css b/src/components/PriceGuard/user_priceguard.module.css
new file mode 100644
index 00000000..7b01b94e
--- /dev/null
+++ b/src/components/PriceGuard/user_priceguard.module.css
@@ -0,0 +1,117 @@
+.wrapper {
+  display: flex;
+  flex-flow: column;
+  gap: 12px;
+  font-family: "IBM Plex Sans Condensed", sans;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 23.4px;
+  max-width: 860px;
+  margin: 50px auto;
+}
+
+.wrapper button {
+  transition: 0s;
+  border-color: var(--LIGHT-GREY);
+  color: var(--LIGHT-GREY);
+  height: 25px;
+  padding: 3px 18px;
+  min-width: 0;
+}
+
+.wrapper button.active {
+  background: var(--GOLD);
+  color: black;
+  border-color: var(--GOLD);
+}
+
+.wrapper button span {
+  border-color: var(--LIGHT-GREY);
+  color: var(--LIGHT-GREY);
+}
+
+.wrapper button.active span {
+  background: var(--GOLD);
+  color: black;
+}
+
+.buttons {
+  display: flex;
+  gap: 8px;
+  margin: 8px 0;
+}
+
+.tableheader {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0;
+  padding: 4px 0;
+  border-top: 1px solid var(--LIGHT-GREY);
+  border-bottom: 1px solid var(--LIGHT-GREY);
+  text-align: left;
+}
+
+.tableheader>div {
+  flex: 1;
+  box-sizing: border-box;
+  color: var(--LIGHT-GREY);
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.tablecontent {
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+}
+
+.tableitem {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0;
+  padding: 4px 0;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: left;
+}
+
+.tableitem>div {
+  flex: 1;
+  text-transform: uppercase;
+}
+
+.datetime>div {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  letter-spacing: -1px;
+}
+
+.datetime>div>span {
+  font-size: 11px;
+}
+
+.datetime>div>span:first-child {
+  font-size: 15px;
+}
+
+.active {
+  line-height: 18px;
+  letter-spacing: 0.04em;
+  text-align: left;
+  color: #37CB4F;
+}
+
+.claimable {
+  line-height: 18px;
+  letter-spacing: 0.04em;
+  text-align: left;
+  color: #EAC12F;
+}
+
+.expired {
+  line-height: 18px;
+  letter-spacing: 0.04em;
+  text-align: left;
+  color: #CB3737;
+}
\ No newline at end of file
diff --git a/src/pages/priceGuard.tsx b/src/pages/priceGuard.tsx
index 3d5869e8..12dc71bb 100644
--- a/src/pages/priceGuard.tsx
+++ b/src/pages/priceGuard.tsx
@@ -1,12 +1,9 @@
 import { Helmet } from "react-helmet";
 import { Layout } from "../components/Layout";
-import { BuyPriceGuardBox } from "../components/PriceGuard/BuyPriceGuardBox";
-import { ActivePriceGuard } from "../components/PriceGuard/ActivePriceGuard";
-import { ClaimPriceGuard } from "../components/PriceGuard/ClaimPriceGuard";
-import styles from "./priceGuard.module.css";
 import { CrmBanner } from "../components/Banner";
+import { UserPriceGuard, PriceGuard } from "../components/PriceGuard";
 
-const PriceGuard = () => {
+const PriceGuardPage = () => {
   return (
     <Layout>
       <Helmet>
@@ -28,19 +25,10 @@ const PriceGuard = () => {
           Learn more
         </a>
       </p>
-      <BuyPriceGuardBox />
-      <div className={styles.container}>
-        <div>
-          <h3>Active Price Guard</h3>
-          <ActivePriceGuard />
-        </div>
-        <div>
-          <h3>Claimable Price Guard</h3>
-          <ClaimPriceGuard />
-        </div>
-      </div>
+      <PriceGuard />
+      <UserPriceGuard />
     </Layout>
   );
 };
 
-export default PriceGuard;
+export default PriceGuardPage;

From cd57b4bf653619822af87d82eeeaab01301d5cb3 Mon Sep 17 00:00:00 2001
From: DaveVodrazka <dave.vodrazka@gmail.com>
Date: Thu, 15 Aug 2024 19:43:51 +0200
Subject: [PATCH 3/3] feat: handle price protect tx state

---
 src/calls/tradeOpen.ts                        |  93 ++++++++-
 src/components/MultiDialog/MultiDialog.tsx    |   6 -
 .../PriceGuard/ActivePriceGuard.tsx           | 111 ----------
 .../PriceGuard/BuyPriceGuardModal.tsx         | 190 ------------------
 src/components/PriceGuard/ClaimPriceGuard.tsx | 113 -----------
 src/components/PriceGuard/PriceGuard.tsx      | 129 +++++++-----
 src/components/PriceGuard/UserPriceGuard.tsx  |  55 ++++-
 .../PriceGuard/priceguard.module.css          |  32 ++-
 .../PriceGuard/user_priceguard.module.css     |   9 +
 src/redux/reducers/transactions.ts            |   1 +
 10 files changed, 250 insertions(+), 489 deletions(-)
 delete mode 100644 src/components/PriceGuard/ActivePriceGuard.tsx
 delete mode 100644 src/components/PriceGuard/BuyPriceGuardModal.tsx
 delete mode 100644 src/components/PriceGuard/ClaimPriceGuard.tsx

diff --git a/src/calls/tradeOpen.ts b/src/calls/tradeOpen.ts
index 5eaba213..e8edfa57 100644
--- a/src/calls/tradeOpen.ts
+++ b/src/calls/tradeOpen.ts
@@ -8,13 +8,11 @@ import { AccountInterface } from "starknet";
 import { Option } from "../classes/Option";
 import { debug } from "../utils/debugger";
 import { getToApprove, shortInteger } from "../utils/computations";
-import AmmAbi from "../abi/amm_abi.json";
-import LpAbi from "../abi/lptoken_abi.json";
 import { afterTransaction } from "../utils/blockchain";
 import { invalidatePositions } from "../queries/client";
 import { TransactionAction } from "../redux/reducers/transactions";
 import { ToastType } from "../redux/reducers/ui";
-import { math64ToInt } from "../utils/units";
+import { math64toDecimal, math64ToInt } from "../utils/units";
 import { apiUrl } from "../api";
 import { isMainnet } from "../constants/amm";
 
@@ -126,3 +124,92 @@ export const approveAndTradeOpen = async (
 
   return true;
 };
+
+export const approveAndTradeOpenNew = async (
+  account: AccountInterface,
+  option: Option,
+  size: number,
+  premiaMath64: bigint,
+  balance: bigint,
+  updateTradeState: (
+    state: "initial" | "processing" | "fail" | "success"
+  ) => void,
+  isPriceGuard = false
+) => {
+  if (size === 0) {
+    showToast("Cannot open position with size 0", ToastType.Warn);
+    return;
+  }
+  updateTradeState("processing");
+  const premiaNum = math64toDecimal(premiaMath64);
+  const premiaTokenCount = math64ToInt(premiaMath64, option.digits);
+  const toApprove = getToApprove(option, size, BigInt(premiaTokenCount));
+  const toApproveNumber = shortInteger(toApprove, option.digits);
+
+  if (balance < toApprove) {
+    const [has, needs] = [
+      shortInteger(balance.toString(10), option.digits),
+      toApproveNumber,
+    ];
+    showToast(
+      `To open this position you need ${option.symbol}\u00A0${Number(
+        needs
+      ).toFixed(4)}, but you only have ${option.symbol}\u00A0${has.toFixed(4)}`,
+      ToastType.Warn
+    );
+    updateTradeState("fail");
+    return;
+  }
+
+  const approve = option.underlying.approveCalldata(toApprove);
+  const tradeOpen = option.tradeOpenCalldata(size, premiaMath64);
+
+  option.sendBeginCheckoutEvent(size, premiaNum, isPriceGuard);
+  const res = await account.execute([approve, tradeOpen]).catch((e) => {
+    debug("Trade open rejected or failed", e.message);
+  });
+
+  if (res === undefined) {
+    updateTradeState("fail");
+    return;
+  }
+
+  option.sendPurchaseEvent(size, premiaNum, isPriceGuard);
+
+  if (isPriceGuard && isMainnet) {
+    const options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        user_address: account.address,
+        calldata: tradeOpen.calldata,
+      }),
+    };
+
+    fetch(apiUrl("priceGuard-event"), options)
+      .then((response) => {
+        debug("PriceGuard event sent", response);
+      })
+      .catch((err) => {
+        debug("PriceGuard event failed", err);
+        console.error(err);
+      });
+  }
+
+  const hash = res.transaction_hash;
+  addTx(hash, option.optionId, TransactionAction.TradeOpen);
+  afterTransaction(
+    hash,
+    () => {
+      markTxAsDone(hash);
+      invalidatePositions();
+      updateTradeState("success");
+      showToast("Successfully opened position", ToastType.Success);
+    },
+    () => {
+      markTxAsFailed(hash);
+      updateTradeState("fail");
+      showToast("Failed to open position", ToastType.Error);
+    }
+  );
+};
diff --git a/src/components/MultiDialog/MultiDialog.tsx b/src/components/MultiDialog/MultiDialog.tsx
index 9d02b24b..ef8f69df 100644
--- a/src/components/MultiDialog/MultiDialog.tsx
+++ b/src/components/MultiDialog/MultiDialog.tsx
@@ -17,7 +17,6 @@ import { Close } from "@mui/icons-material";
 import { ClosePosition } from "../ClosePosition/ClosePosition";
 import { WalletInfo } from "../WalletInfo/WalletInfo";
 import { ReactNode } from "react";
-import { BuyPriceGuardModal } from "../PriceGuard/BuyPriceGuardModal";
 import { TransferDialog } from "../Transfer";
 import { BraavosDialog } from "./BraavosDialog";
 
@@ -171,11 +170,6 @@ export const MultiDialog = () => {
           <ClosePosition />
         </Border>
       )}
-      {dialogContent === DialogContentElem.BuyPriceGuard && (
-        <Border>
-          <BuyPriceGuardModal />
-        </Border>
-      )}
       {dialogContent === DialogContentElem.Account && (
         <Border>
           <WalletInfo />
diff --git a/src/components/PriceGuard/ActivePriceGuard.tsx b/src/components/PriceGuard/ActivePriceGuard.tsx
deleted file mode 100644
index ec9590f3..00000000
--- a/src/components/PriceGuard/ActivePriceGuard.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { LoadingAnimation } from "../Loading/Loading";
-import { Box, Typography } from "@mui/material";
-import { useQuery } from "react-query";
-import { QueryKeys } from "../../queries/keys";
-import { useAccount } from "../../hooks/useAccount";
-import { AccountInterface } from "starknet";
-import { fetchPositions } from "../PositionTable/fetchPositions";
-import { OptionWithPosition } from "../../classes/Option";
-import { openCloseOptionDialog, setCloseOption } from "../../redux/actions";
-import { useTxPending } from "../../hooks/useRecentTxs";
-import { TransactionAction } from "../../redux/reducers/transactions";
-import styles from "../../style/button.module.css";
-
-const PriceGuardDisplay = ({ option }: { option: OptionWithPosition }) => {
-  const txPending = useTxPending(option.optionId, TransactionAction.TradeClose);
-  const symbol = option.baseToken.symbol;
-  const handleButtonClick = () => {
-    setCloseOption(option);
-    openCloseOptionDialog();
-  };
-  return (
-    <Box sx={{ display: "flex", flexFlow: "column" }}>
-      <Typography variant="h6">
-        {symbol} ${option.strike}
-      </Typography>
-      <Box
-        sx={{
-          display: "flex",
-          flexFlow: "row",
-          alignItems: "center",
-          gap: 4,
-        }}
-      >
-        <Typography>
-          Price Guard covers {option.size} {symbol} at price ${option.strike}{" "}
-          and expires {option.dateRich}
-        </Typography>
-        <button
-          className={styles.green}
-          disabled={txPending}
-          onClick={handleButtonClick}
-        >
-          {txPending ? "Processing..." : "Close"}
-        </button>
-      </Box>
-    </Box>
-  );
-};
-
-const WithAccount = ({ account }: { account: AccountInterface }) => {
-  const { isLoading, isError, data } = useQuery(
-    [QueryKeys.position, account.address],
-    fetchPositions
-  );
-
-  if (isLoading) {
-    return <LoadingAnimation />;
-  }
-
-  if (isError || !data) {
-    return (
-      <Typography>
-        We are experiencing difficulties fetching your data. Please try again
-        later.
-      </Typography>
-    );
-  }
-
-  const priceGuard = data.filter((o) => o.isPut && o.isLong && o.isFresh);
-
-  if (priceGuard.length === 0) {
-    // no options for the given currency
-    return (
-      <Box sx={{ display: "flex", flexFlow: "column", gap: 2 }}>
-        <Typography>
-          You currently do not have any active Price Guard
-        </Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexFlow: "column",
-        gap: 2,
-      }}
-    >
-      <Typography>
-        Your Carmine portfolio consists of {priceGuard.length} Long Put option
-        {priceGuard.length > 1 ? "s" : ""} which insures these crypto assets
-      </Typography>
-      {priceGuard.map((o, i) => (
-        <PriceGuardDisplay key={i} option={o} />
-      ))}
-    </Box>
-  );
-};
-
-export const ActivePriceGuard = () => {
-  const account = useAccount();
-
-  if (!account) {
-    return (
-      <Typography>Connect wallet to see your active Price Guard</Typography>
-    );
-  }
-
-  return <WithAccount account={account} />;
-};
diff --git a/src/components/PriceGuard/BuyPriceGuardModal.tsx b/src/components/PriceGuard/BuyPriceGuardModal.tsx
deleted file mode 100644
index a87ce982..00000000
--- a/src/components/PriceGuard/BuyPriceGuardModal.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { Box, Tooltip, Typography } from "@mui/material";
-import { usePremiaQuery } from "../../hooks/usePremiaQuery";
-import { CustomDialogTitle } from "../MultiDialog/MultiDialog";
-import { math64toDecimal } from "../../utils/units";
-import { getPremiaWithSlippage } from "../../utils/computations";
-import { useAccount } from "../../hooks/useAccount";
-import { store } from "../../redux/store";
-import { Option } from "../../classes/Option";
-import { useBuyPriceGuardData } from "../../hooks/useBuyPriceGuardData";
-import { LoadingAnimation } from "../Loading/Loading";
-import { useState } from "react";
-import { TradeState } from "../TradeTable/TradeCard";
-import { approveAndTradeOpen } from "../../calls/tradeOpen";
-import { useUserBalance } from "../../hooks/useUserBalance";
-import buttonStyles from "../../style/button.module.css";
-
-export type BuyPriceGuardModalData = {
-  option: Option;
-  size: number;
-};
-
-type Props = {
-  option: Option;
-  size: number;
-  updateTradeState: ({
-    failed,
-    processing,
-  }: {
-    failed: boolean;
-    processing: boolean;
-  }) => void;
-};
-
-const WithOption = ({ option, size, updateTradeState }: Props) => {
-  const account = useAccount();
-  const balance = useUserBalance(option.underlying.address);
-
-  const {
-    data: premiaMath64,
-    error,
-    isFetching,
-  } = usePremiaQuery(option, size, false);
-
-  if (isFetching || !balance) {
-    // loading...
-    return <LoadingAnimation />;
-  }
-
-  if (typeof premiaMath64 === "undefined" || error) {
-    // no data
-    return (
-      <Typography>
-        Something went wrong while fetching data, please try again
-      </Typography>
-    );
-  }
-
-  const premiaNumber = math64toDecimal(premiaMath64);
-  const premiaWithSlippage = getPremiaWithSlippage(
-    premiaMath64,
-    option.side,
-    false
-  );
-  const displayPremiaWithSlippage = math64toDecimal(premiaWithSlippage);
-  const slippage = store.getState().settings.slippage;
-
-  const handleClick = () =>
-    approveAndTradeOpen(
-      account!,
-      option,
-      size,
-      premiaNumber,
-      premiaWithSlippage,
-      balance,
-      updateTradeState,
-      true
-    );
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexFlow: "column",
-      }}
-    >
-      <Box
-        sx={{
-          my: 3,
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            flexFlow: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <Typography sx={{ fontSize: "1.2rem" }}>PriceGuard price</Typography>
-          <Tooltip title={`$${premiaNumber}`} placement="top">
-            <Typography sx={{ fontSize: "1.2rem" }}>
-              ${premiaNumber.toFixed(2)}
-            </Typography>
-          </Tooltip>
-        </Box>
-        <Box
-          sx={{
-            display: "flex",
-            flexFlow: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <Typography sx={{ fontSize: "1rem" }} variant="caption">
-            Slippage {slippage}% limit
-          </Typography>
-          <Tooltip title={`$${displayPremiaWithSlippage}`}>
-            <Typography sx={{ fontSize: "1rem" }} variant="caption">
-              ${displayPremiaWithSlippage.toFixed(2)}
-            </Typography>
-          </Tooltip>
-        </Box>
-      </Box>
-      <button
-        className={buttonStyles.green}
-        disabled={!account}
-        onClick={handleClick}
-      >
-        Buy PriceGuard
-      </button>
-    </Box>
-  );
-};
-
-export const BuyPriceGuardModal = () => {
-  const data = useBuyPriceGuardData();
-  const [tradeState, updateTradeState] = useState<TradeState>({
-    failed: false,
-    processing: false,
-  });
-
-  const containerSx = { minWidth: "300px", p: 2 };
-
-  if (!data) {
-    return (
-      <Box sx={containerSx}>
-        <CustomDialogTitle title="Buy PriceGuard" />
-        There was a problem, please try again
-      </Box>
-    );
-  }
-
-  if (tradeState.failed) {
-    return (
-      <Box sx={containerSx}>
-        <CustomDialogTitle title="Buy PriceGuard" />
-        <Typography>Transaction failed, please try again</Typography>
-      </Box>
-    );
-  }
-
-  if (tradeState.processing) {
-    return (
-      <Box sx={containerSx}>
-        <CustomDialogTitle title="Buy PriceGuard" />
-        <Typography>
-          Transaction is being processed, you can close this modal.
-        </Typography>
-        <Typography>
-          You can find the transaction in <i>Recent Transactions</i> by clicking
-          wallet button in the top right corner.
-        </Typography>
-      </Box>
-    );
-  }
-
-  const { option, size } = data;
-
-  const title = `Buy Price Guard for ${size} ${option.baseToken.symbol}`;
-
-  return (
-    <Box sx={containerSx}>
-      <CustomDialogTitle title={title} />
-      <Typography>Price Guard will expire on {option.dateRich}</Typography>
-      <WithOption
-        option={option}
-        size={size}
-        updateTradeState={updateTradeState}
-      />
-    </Box>
-  );
-};
diff --git a/src/components/PriceGuard/ClaimPriceGuard.tsx b/src/components/PriceGuard/ClaimPriceGuard.tsx
deleted file mode 100644
index f9569dfd..00000000
--- a/src/components/PriceGuard/ClaimPriceGuard.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { LoadingAnimation } from "../Loading/Loading";
-import { Box, Typography } from "@mui/material";
-import { useQuery } from "react-query";
-import { QueryKeys } from "../../queries/keys";
-import { useAccount } from "../../hooks/useAccount";
-import { AccountInterface } from "starknet";
-import { fetchPositions } from "../PositionTable/fetchPositions";
-import { OptionWithPosition } from "../../classes/Option";
-import { tradeSettle } from "../../calls/tradeSettle";
-import { useTxPending } from "../../hooks/useRecentTxs";
-import { TransactionAction } from "../../redux/reducers/transactions";
-import styles from "../../style/button.module.css";
-
-const ClaimItem = ({
-  option,
-  account,
-}: {
-  option: OptionWithPosition;
-  account: AccountInterface;
-}) => {
-  const txPending = useTxPending(option.optionId, TransactionAction.Settle);
-  const symbol = option.baseToken.symbol;
-
-  const handleButtonClick = () => tradeSettle(account, option);
-
-  return (
-    <Box sx={{ display: "flex", flexFlow: "column" }}>
-      <Typography variant="h6">
-        {symbol} ${option.strike}
-      </Typography>
-      <Box
-        sx={{
-          display: "flex",
-          flexFlow: "row",
-          alignItems: "center",
-          gap: 4,
-        }}
-      >
-        <Typography>
-          You are eligible to claim ${option.value.toFixed(4)}
-        </Typography>
-        <button
-          className={styles.green}
-          onClick={handleButtonClick}
-          disabled={txPending}
-        >
-          {txPending ? "Processing..." : "Claim"}
-        </button>
-      </Box>
-    </Box>
-  );
-};
-
-const WithAccount = ({ account }: { account: AccountInterface }) => {
-  const { isLoading, isError, data } = useQuery(
-    [QueryKeys.position, account.address],
-    fetchPositions
-  );
-
-  if (isLoading) {
-    return <LoadingAnimation />;
-  }
-
-  if (isError || !data) {
-    return (
-      <Typography>
-        We are experiencing difficulties fetching your data. Please try again
-        later.
-      </Typography>
-    );
-  }
-
-  const priceGuard = data.filter((o) => o.isPut && o.isLong && o.isInTheMoney);
-
-  if (priceGuard.length === 0) {
-    // no options for the given currency
-    return (
-      <Box sx={{ display: "flex", flexFlow: "column", gap: 2 }}>
-        <Typography>
-          You currently do not have any claimable Price Guard
-        </Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexFlow: "column",
-        gap: 2,
-      }}
-    >
-      <Typography>
-        You have {priceGuard.length} claimable Price Guard event
-        {priceGuard.length > 1 ? "s" : ""}:
-      </Typography>
-      {priceGuard.map((o, i) => (
-        <ClaimItem key={i} option={o} account={account} />
-      ))}
-    </Box>
-  );
-};
-
-export const ClaimPriceGuard = () => {
-  const account = useAccount();
-
-  if (!account) {
-    return <Typography>Connect wallet to see claimable Price Guard</Typography>;
-  }
-
-  return <WithAccount account={account} />;
-};
diff --git a/src/components/PriceGuard/PriceGuard.tsx b/src/components/PriceGuard/PriceGuard.tsx
index 4b92c4b5..afefacd8 100644
--- a/src/components/PriceGuard/PriceGuard.tsx
+++ b/src/components/PriceGuard/PriceGuard.tsx
@@ -12,17 +12,7 @@ import {
   timestampToPriceGuardDate,
   uniquePrimitiveValues,
 } from "../../utils/utils";
-import { debug } from "../../utils/debugger";
 import { handleNumericChangeFactory } from "../../utils/inputHandling";
-import {
-  openBuyPriceGuardDialog,
-  setBuyPriceGuardModal,
-  showToast,
-} from "../../redux/actions";
-import { ToastType } from "../../redux/reducers/ui";
-import { Option } from "../../classes/Option";
-import { useTxPending } from "../../hooks/useRecentTxs";
-import { TransactionAction } from "../../redux/reducers/transactions";
 import { Token, TokenKey } from "../../classes/Token";
 import { getPremia } from "../../calls/getPremia";
 import { math64toDecimal } from "../../utils/units";
@@ -31,39 +21,7 @@ import { Info } from "@mui/icons-material";
 
 import styles from "./priceguard.module.css";
 import { Tooltip } from "@mui/material";
-
-type BuyButtonProps = {
-  option: Option;
-  size: number;
-};
-
-const BuyPriceGuardButton = ({ option, size }: BuyButtonProps) => {
-  const txPending = useTxPending(option.optionId, TransactionAction.TradeOpen);
-  const handleButtonClick = () => {
-    if (size === 0) {
-      showToast("Please select size greater than 0", ToastType.Warn);
-      return;
-    }
-    if (!option) {
-      showToast("Select a priceGuard first", ToastType.Warn);
-      return;
-    }
-    debug("Buying this option", option, "with size", size);
-    setBuyPriceGuardModal({ option: option, size });
-    option.sendViewEvent(true);
-    openBuyPriceGuardDialog();
-  };
-
-  return (
-    <button
-      className={styles.buybutton}
-      disabled={txPending}
-      onClick={handleButtonClick}
-    >
-      {txPending ? "Processing" : `Protect my ${option.baseToken.symbol}`}
-    </button>
-  );
-};
+import { approveAndTradeOpenNew } from "../../calls/tradeOpen";
 
 const InfoIcon = ({ msg }: { msg: string }) => {
   return (
@@ -80,9 +38,10 @@ export const PriceGuard = () => {
   const [currency, setCurrency] = useState<TokenKey>(TokenKey.STRK);
   const token = Token.byKey(currency);
   const balance = useUserBalance(token.address);
-  const displayBalance = balance
-    ? shortInteger(balance.toString(10), token.decimals).toFixed(4)
-    : undefined;
+  const displayBalance =
+    balance === undefined
+      ? undefined
+      : shortInteger(balance.toString(10), token.decimals).toFixed(4);
   const valueInUsd = useCurrency(currency);
   const { isLoading, isError, data } = useQuery(
     QueryKeys.options,
@@ -92,9 +51,12 @@ export const PriceGuard = () => {
   const [size, setSize] = useState<number>(0);
   const [textSize, setTextSize] = useState<string>("");
   const [expiry, setExpiry] = useState<number>();
-  const [price, setPrice] = useState<number | undefined>();
+  const [priceMath64, setPrice] = useState<bigint | undefined>();
   const [priceLoading, setPriceLoading] = useState(false);
 
+  const price =
+    priceMath64 === undefined ? undefined : math64toDecimal(priceMath64);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const callWithDelay = useCallback(
     debounce((size: number, controller: AbortController) => {
@@ -128,7 +90,7 @@ export const PriceGuard = () => {
             return;
           }
           console.log("PAST CONTROLLER PRICE GUARD", res);
-          setPrice(math64toDecimal(res as bigint));
+          setPrice(res as bigint);
           setPriceLoading(false);
         })
         .catch(() => {
@@ -238,6 +200,56 @@ export const PriceGuard = () => {
     (o) => o.maturity === expiry && o.strike === currentStrike
   )!;
 
+  const BuyPriceGuardButton = () => {
+    const [tradeState, updateTradeState] = useState<
+      "initial" | "processing" | "fail" | "success"
+    >("initial");
+    const handleButtonClick = () => {
+      if (
+        !account ||
+        priceMath64 === undefined ||
+        price === undefined ||
+        balance === undefined
+      ) {
+        return;
+      }
+      const premiaWithSlippage = (priceMath64 * 105n) / 100n; // TODO: slippage 5%, change it to use argument
+
+      approveAndTradeOpenNew(
+        account,
+        pickedOption,
+        size,
+        premiaWithSlippage,
+        balance,
+        updateTradeState,
+        true
+      );
+    };
+
+    const className = `${styles.buybutton} ${styles[tradeState]}`;
+    const disabled = tradeState === "processing";
+    const content =
+      tradeState === "initial" ? (
+        `Protect my ${pickedOption.baseToken.symbol}`
+      ) : tradeState === "processing" ? (
+        <LoadingAnimation size={13} />
+      ) : tradeState === "fail" ? (
+        "Failed"
+      ) : (
+        "Success!"
+      );
+
+    return (
+      <button
+        className={className}
+        disabled={disabled}
+        onClick={handleButtonClick}
+      >
+        {content}
+      </button>
+    );
+  };
+
   return (
     <div className={styles.container}>
       <div>
@@ -264,11 +276,16 @@ export const PriceGuard = () => {
               </select>
             </div>
           </div>
-          <div className={styles.balance}>
+          <div onClick={handleAll} className={styles.balance}>
             <span>balance</span>
             <span>
-              {displayBalance === undefined ? "---" : displayBalance}{" "}
-              {token.symbol}
+              {displayBalance === undefined ? (
+                <div className={styles.balanceloading}>
+                  <LoadingAnimation size={10} /> {token.symbol}
+                </div>
+              ) : (
+                `${displayBalance} ${token.symbol}`
+              )}
             </span>
           </div>
         </div>
@@ -322,7 +339,11 @@ export const PriceGuard = () => {
       <div className={styles.coverage}>
         <span className={styles.title}>Final coverage price</span>
         <span className={styles.finalprice}>
-          {priceLoading || price === undefined ? "---" : "$" + price.toFixed(3)}
+          {priceLoading || price === undefined ? (
+            <LoadingAnimation size={20} />
+          ) : (
+            "$" + price.toFixed(3)
+          )}
         </span>
       </div>
       <div>
@@ -333,10 +354,10 @@ export const PriceGuard = () => {
           >
             Connect wallet
           </button>
-        ) : price === undefined ? (
+        ) : price === undefined || priceMath64 === undefined ? (
           <button className={styles.buybutton}>loading</button>
         ) : (
-          <BuyPriceGuardButton option={pickedOption} size={size} />
+          <BuyPriceGuardButton />
         )}
       </div>
     </div>
diff --git a/src/components/PriceGuard/UserPriceGuard.tsx b/src/components/PriceGuard/UserPriceGuard.tsx
index 4038d882..46cfde81 100644
--- a/src/components/PriceGuard/UserPriceGuard.tsx
+++ b/src/components/PriceGuard/UserPriceGuard.tsx
@@ -5,7 +5,7 @@ import { useAccount } from "../../hooks/useAccount";
 import { AccountInterface } from "starknet";
 import { fetchPositions } from "../PositionTable/fetchPositions";
 import { OptionWithPosition } from "../../classes/Option";
-import { openCloseOptionDialog, setCloseOption } from "../../redux/actions";
+import { showToast } from "../../redux/actions";
 import { useTxPending } from "../../hooks/useRecentTxs";
 import { TransactionAction } from "../../redux/reducers/transactions";
 import styles from "./user_priceguard.module.css";
@@ -13,9 +13,22 @@ import { openWalletConnectDialog } from "../ConnectWallet/Button";
 import { ReactNode, useState } from "react";
 import { TokenKey } from "../../classes/Token";
 import { timestampToPriceGuardDate } from "../../utils/utils";
+import { afterTransaction } from "../../utils/blockchain";
+import { invalidatePositions } from "../../queries/client";
+import { ToastType } from "../../redux/reducers/ui";
 
-const PriceGuardDisplay = ({ option }: { option: OptionWithPosition }) => {
-  const txPending = useTxPending(option.optionId, TransactionAction.TradeClose);
+const PriceGuardDisplay = ({
+  option,
+  account,
+}: {
+  option: OptionWithPosition;
+  account: AccountInterface;
+}) => {
+  const txPending = useTxPending(
+    option.optionId,
+    TransactionAction.TradeSettle
+  );
+  const [_settling, setSettling] = useState(false);
   const symbol = option.baseToken.symbol;
   const [date, time] = timestampToPriceGuardDate(option.maturity);
   const status = option.isFresh
@@ -24,9 +37,25 @@ const PriceGuardDisplay = ({ option }: { option: OptionWithPosition }) => {
     ? "claimable"
     : "expired";
 
+  const settling = txPending || _settling;
+
   const handleButtonClick = () => {
-    setCloseOption(option);
-    openCloseOptionDialog();
+    setSettling(true);
+    account
+      .execute(option.tradeSettleCalldata)
+      .then((res) => {
+        if (res?.transaction_hash) {
+          afterTransaction(res.transaction_hash, () => {
+            invalidatePositions();
+            showToast("Successfully claimed Price Protect", ToastType.Success);
+            setSettling(false);
+          });
+        }
+      })
+      .catch(() => {
+        showToast("Failed claiming Price Protect", ToastType.Error);
+        setSettling(false);
+      });
   };
   return (
     <div className={styles.tableitem}>
@@ -44,7 +73,19 @@ const PriceGuardDisplay = ({ option }: { option: OptionWithPosition }) => {
       <div className={styles[status]}>{status}</div>
       <div>
         {status === "claimable" && (
-          <button onClick={handleButtonClick}>Claim</button>
+          <button
+            disabled={settling}
+            className={styles.active}
+            onClick={handleButtonClick}
+          >
+            {settling ? (
+              <div className={styles.loading}>
+                <LoadingAnimation size={13} />
+              </div>
+            ) : (
+              "Claim"
+            )}
+          </button>
         )}
       </div>
     </div>
@@ -128,7 +169,7 @@ const WithAccount = ({ account }: { account: AccountInterface }) => {
     <Header>
       <div className={styles.tablecontent}>
         {currentChoice.map((o, i) => (
-          <PriceGuardDisplay option={o} key={i} />
+          <PriceGuardDisplay option={o} account={account} key={i} />
         ))}
       </div>
     </Header>
diff --git a/src/components/PriceGuard/priceguard.module.css b/src/components/PriceGuard/priceguard.module.css
index f95515aa..097cef61 100644
--- a/src/components/PriceGuard/priceguard.module.css
+++ b/src/components/PriceGuard/priceguard.module.css
@@ -12,10 +12,11 @@
 
 .container button {
   transition: 0s;
-  border-color: var(--LIGHT-GREY);
+  border: 0.75px solid #727272;
+  border-radius: 3px;
   color: var(--LIGHT-GREY);
-  height: 25px;
-  padding: 3px 18px;
+  height: 29px;
+  padding: 5px 18px;
   min-width: 0;
 }
 
@@ -77,6 +78,7 @@
   justify-content: flex-end;
   align-items: baseline;
   gap: 8px;
+  cursor: pointer;
 }
 
 .balance span {
@@ -89,6 +91,13 @@
   color: var(--LIGHT-GREY);
 }
 
+.balanceloading {
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  gap: 10px;
+}
+
 .datetime>div {
   display: flex;
   align-items: baseline;
@@ -97,6 +106,7 @@
 
 .datetime>div>span {
   font-size: 15px;
+  text-transform: uppercase;
 }
 
 .datetime>div>span:first-child {
@@ -105,7 +115,7 @@
 
 .divider {
   height: 1px;
-  border-top: 1px solid var(--LIGHT-GREY);
+  border-top: 1px solid #727272;
 }
 
 .coverage {
@@ -121,6 +131,10 @@ button.buybutton {
   background: var(--GOLD);
   border: none;
   color: black;
+  font-family: IBM Plex Sans Condensed;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 19.5px;
 }
 
 .column {
@@ -192,7 +206,7 @@ button.buybutton {
   background: none;
   border: 2px solid var(--GOLD);
   font-size: 19px;
-  padding: 5px;
+  padding: 5px 12px;
   min-width: 100px;
   width: auto;
 }
@@ -203,4 +217,12 @@ button.buybutton {
 
 .container input:focus {
   outline: 1px solid var(--GOLD);
+}
+
+button.success {
+  background-color: #37CB4F;
+}
+
+button.fail {
+  background-color: #CB3737;
 }
\ No newline at end of file
diff --git a/src/components/PriceGuard/user_priceguard.module.css b/src/components/PriceGuard/user_priceguard.module.css
index 7b01b94e..0f80feac 100644
--- a/src/components/PriceGuard/user_priceguard.module.css
+++ b/src/components/PriceGuard/user_priceguard.module.css
@@ -41,6 +41,11 @@
   margin: 8px 0;
 }
 
+.buttons button {
+  font-size: 12px;
+  font-weight: 500;
+}
+
 .tableheader {
   display: flex;
   justify-content: space-between;
@@ -114,4 +119,8 @@
   letter-spacing: 0.04em;
   text-align: left;
   color: #CB3737;
+}
+
+.loading {
+  width: 5ch;
 }
\ No newline at end of file
diff --git a/src/redux/reducers/transactions.ts b/src/redux/reducers/transactions.ts
index 5b540ac7..5df2c13b 100644
--- a/src/redux/reducers/transactions.ts
+++ b/src/redux/reducers/transactions.ts
@@ -4,6 +4,7 @@ import { constants } from "starknet";
 export enum TransactionAction {
   TradeOpen = "TradeOpen",
   TradeClose = "TradeClose",
+  TradeSettle = "TradeSettle",
   Stake = "Stake",
   Withdraw = "Withdraw",
   Settle = "Settle",