From e3f54bbf544221fceaff1e5943ed60a72556c718 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Tue, 3 Sep 2024 14:06:05 -0400
Subject: [PATCH] Cleanup

---
 .../src/components/Sep6Deposit.tsx            | 140 ++----------------
 .../src/components/Sep6Withdraw.tsx           |  79 ----------
 2 files changed, 12 insertions(+), 207 deletions(-)

diff --git a/packages/demo-wallet-client/src/components/Sep6Deposit.tsx b/packages/demo-wallet-client/src/components/Sep6Deposit.tsx
index 75afe40b..049737f7 100644
--- a/packages/demo-wallet-client/src/components/Sep6Deposit.tsx
+++ b/packages/demo-wallet-client/src/components/Sep6Deposit.tsx
@@ -13,6 +13,8 @@ import {
 
 import { CSS_MODAL_PARENT_ID } from "demo-wallet-shared/build/constants/settings";
 import { KycField, KycFieldInput } from "components/KycFieldInput";
+import { Sep6PriceModal } from "components/Sep6PriceModal";
+import { Sep6QuoteModal } from "components/Sep6QuoteModal";
 
 import { useRedux } from "hooks/useRedux";
 import { AppDispatch } from "config/store";
@@ -440,59 +442,12 @@ export const Sep6Deposit = () => {
 
   // Show price
   if (sep6Deposit.status === ActionStatus.PRICE && sep6Deposit.data.price) {
-    const { price, sell_amount, buy_amount, total_price, fee } =
-      sep6Deposit.data.price;
-
-    const priceItems = [
-      {
-        label: "Price",
-        value: price,
-      },
-      {
-        label: "Sell amount",
-        value: sell_amount,
-      },
-      {
-        label: "Buy amount",
-        value: buy_amount,
-      },
-      {
-        label: "Total price",
-        value: total_price,
-      },
-      {
-        label: "Fee",
-        value: fee.total,
-      },
-    ];
-
     return (
-      <Modal visible onClose={handleClose} parentId={CSS_MODAL_PARENT_ID}>
-        <Modal.Heading>Price Estimate</Modal.Heading>
-
-        <Modal.Body>
-          <p>
-            These prices are indicative. The actual price will be calculated at
-            conversion time once the Anchor receives the funds.
-          </p>
-
-          <div className="AnchorQuote">
-            {priceItems.map((item) => (
-              <div key={item.label} className="AnchorQuote__item">
-                <label>{item.label}</label>
-                <div className="AnchorQuote__item__value">{item.value}</div>
-              </div>
-            ))}
-          </div>
-        </Modal.Body>
-
-        <Modal.Footer>
-          <Button onClick={handleGetQuote}>Proceed</Button>
-          <Button onClick={handleClose} variant={Button.variant.secondary}>
-            Close
-          </Button>
-        </Modal.Footer>
-      </Modal>
+      <Sep6PriceModal
+        priceItem={sep6Deposit.data.price}
+        onClose={handleClose}
+        onProceed={handleGetQuote}
+      />
     );
   }
 
@@ -501,83 +456,12 @@ export const Sep6Deposit = () => {
     sep6Deposit.status === ActionStatus.ANCHOR_QUOTES &&
     sep6Deposit.data.quote
   ) {
-    const {
-      id,
-      price,
-      expires_at,
-      sell_asset,
-      sell_amount,
-      buy_asset,
-      buy_amount,
-      total_price,
-      fee,
-    } = sep6Deposit.data.quote;
-
-    const quoteItems = [
-      {
-        label: "ID",
-        value: id,
-      },
-      {
-        label: "Price",
-        value: price,
-      },
-      {
-        label: "Expires at",
-        value: expires_at,
-      },
-      {
-        label: "Sell asset",
-        value: sell_asset,
-      },
-      {
-        label: "Sell amount",
-        value: sell_amount,
-      },
-      {
-        label: "Buy asset",
-        value: buy_asset,
-      },
-      {
-        label: "Buy amount",
-        value: buy_amount,
-      },
-      {
-        label: "Total price",
-        value: total_price,
-      },
-      {
-        label: "Fee",
-        value: fee.total,
-      },
-    ];
-
     return (
-      <Modal visible onClose={handleClose} parentId={CSS_MODAL_PARENT_ID}>
-        <Modal.Heading>SEP-6 Deposit Quote</Modal.Heading>
-        <Modal.Body>
-          <p>
-            These prices are indicative. The actual price will be calculated at
-            conversion time once the Anchor receives the funds.
-          </p>
-
-          <div className="AnchorQuote">
-            {quoteItems.map((item) => (
-              <div key={item.label} className="AnchorQuote__item">
-                <label>{item.label}</label>
-                <div className="AnchorQuote__item__value">{item.value}</div>
-              </div>
-            ))}
-          </div>
-        </Modal.Body>
-
-        <Modal.Footer>
-          <Button onClick={handleSubmitWithQuote}>Submit</Button>
-          <Button onClick={handleClose} variant={Button.variant.secondary}>
-            Cancel
-          </Button>
-        </Modal.Footer>
-      </Modal>
+      <Sep6QuoteModal
+        quote={sep6Deposit.data.quote}
+        onClose={handleClose}
+        onSubmit={handleSubmitWithQuote}
+      />
     );
   }
 
diff --git a/packages/demo-wallet-client/src/components/Sep6Withdraw.tsx b/packages/demo-wallet-client/src/components/Sep6Withdraw.tsx
index 819882b9..b56d3616 100644
--- a/packages/demo-wallet-client/src/components/Sep6Withdraw.tsx
+++ b/packages/demo-wallet-client/src/components/Sep6Withdraw.tsx
@@ -507,85 +507,6 @@ export const Sep6Withdraw = () => {
         onSubmit={handleSubmitWithQuote}
       />
     );
-
-    // const {
-    //   id,
-    //   price,
-    //   expires_at,
-    //   sell_asset,
-    //   sell_amount,
-    //   buy_asset,
-    //   buy_amount,
-    //   total_price,
-    //   fee,
-    // } = sep6Withdraw.data.quote;
-
-    // const quoteItems = [
-    //   {
-    //     label: "ID",
-    //     value: id,
-    //   },
-    //   {
-    //     label: "Price",
-    //     value: price,
-    //   },
-    //   {
-    //     label: "Expires at",
-    //     value: expires_at,
-    //   },
-    //   {
-    //     label: "Sell asset",
-    //     value: sell_asset,
-    //   },
-    //   {
-    //     label: "Sell amount",
-    //     value: sell_amount,
-    //   },
-    //   {
-    //     label: "Buy asset",
-    //     value: buy_asset,
-    //   },
-    //   {
-    //     label: "Buy amount",
-    //     value: buy_amount,
-    //   },
-    //   {
-    //     label: "Total price",
-    //     value: total_price,
-    //   },
-    //   {
-    //     label: "Fee",
-    //     value: fee.total,
-    //   },
-    // ];
-
-    // return (
-    //   <Modal visible onClose={handleClose} parentId={CSS_MODAL_PARENT_ID}>
-    //     <Modal.Heading>SEP-6 Deposit Quote</Modal.Heading>
-    //     <Modal.Body>
-    //       <p>
-    //         These prices are indicative. The actual price will be calculated at
-    //         conversion time once the Anchor receives the funds.
-    //       </p>
-
-    //       <div className="AnchorQuote">
-    //         {quoteItems.map((item) => (
-    //           <div key={item.label} className="AnchorQuote__item">
-    //             <label>{item.label}</label>
-    //             <div className="AnchorQuote__item__value">{item.value}</div>
-    //           </div>
-    //         ))}
-    //       </div>
-    //     </Modal.Body>
-
-    //     <Modal.Footer>
-    //       <Button onClick={handleSubmitWithQuote}>Submit</Button>
-    //       <Button onClick={handleClose} variant={Button.variant.secondary}>
-    //         Cancel
-    //       </Button>
-    //     </Modal.Footer>
-    //   </Modal>
-    // );
   }
 
   if (sep6Withdraw.status === ActionStatus.CAN_PROCEED) {