From a972081060899e4a65c79348386beb1ce875a4eb Mon Sep 17 00:00:00 2001
From: Zak <zmooney@hotmail.co.uk>
Date: Mon, 3 Jun 2024 12:06:05 +0100
Subject: [PATCH] feat: return missing debt repay guide

---
 src/components/vault/BorrowModal.jsx  |   7 +-
 src/components/vault/EurosCompare.jsx | 167 +++++++++++++-------------
 src/components/vault/RepayModal.jsx   | 153 ++++++++++++-----------
 3 files changed, 168 insertions(+), 159 deletions(-)

diff --git a/src/components/vault/BorrowModal.jsx b/src/components/vault/BorrowModal.jsx
index 8c83b5e..a3915d3 100644
--- a/src/components/vault/BorrowModal.jsx
+++ b/src/components/vault/BorrowModal.jsx
@@ -125,7 +125,7 @@ const BorrowModal = (props) => {
           </div>
         </Modal>
       </>
-    )
+    );
   }
     
   return (
@@ -210,10 +210,7 @@ const BorrowModal = (props) => {
               </Button>
             </div>
           </div>
-          <div class="divider md:divider-horizontal" />
-          <div className="flex-1">
-            <EurosCompare />
-          </div>
+          <EurosCompare />
         </div>
       </Modal>
     </>
diff --git a/src/components/vault/EurosCompare.jsx b/src/components/vault/EurosCompare.jsx
index e8fc0b8..b257b5e 100644
--- a/src/components/vault/EurosCompare.jsx
+++ b/src/components/vault/EurosCompare.jsx
@@ -80,88 +80,93 @@ const EurosCompare = () => {
 
   if (currentDiscount < 0) {
     return (
-      <div>
-        <div className="mb-2">
-          <Typography
-            variant="h2"
-            className="mb-1"
-          >
-            Repay Your Debt for a Discount
-          </Typography>
-          <Typography
-            variant="p"
-          >
-            Take advantage of market conditions to reduce your EUROs debt.
-            <br/>
-            When the EUROs Value dips below the FX market price of EUR, you have the opportunity to repay your debt at discount. Act swiftly to lock in your savings and strengthen your financial position.
-          </Typography>
-        </div>
-    
-        <div className="mb-2">
-          <Typography
-            variant="h3"
-          >
-            Current Savings Opportunity:
-          </Typography>
-          <div
-            className="flex justify-between align-center"
-          >
-            <Typography
-              variant="p"
-              className="flex-1"
-            >
-              EUR FX market price (USD):
-            </Typography>
-            <Typography
-              variant="p"
-              className="flex-1"
-            >
-              ${chainPrice}
-            </Typography>
-          </div>
-  
-          <div
-            className="flex justify-between align-center"
-          >
-            <Typography
-              variant="p"
-              className="flex-1"
-            >
-              EUROs price (USD):
-            </Typography>
-            <Typography
-              variant="p"
-              className="flex-1"
-            >
-              ${poolPrice}
-            </Typography>
-          </div>
-  
-          <div
-            className="flex justify-between align-center"
-          >
-            <Typography
-              variant="p"
-              className="flex-1"
-            >
-              Current discount %:
-            </Typography>
-            <Typography
-              variant="p"
-              className="flex-1"
-            >
-              {showDiscount.toFixed(2)}%
-            </Typography>
+      <div className="flex flex-col md:flex-row flex-1">
+        <div className="flex flex-col md:flex-row">
+          <div class="divider md:divider-horizontal" />
+          <div>
+            <div className="mb-2">
+              <Typography
+                variant="h2"
+                className="mb-1"
+              >
+                Repay Your Debt for a Discount
+              </Typography>
+              <Typography
+                variant="p"
+              >
+                Take advantage of market conditions to reduce your EUROs debt.
+                <br/>
+                When the EUROs Value dips below the FX market price of EUR, you have the opportunity to repay your debt at discount. Act swiftly to lock in your savings and strengthen your financial position.
+              </Typography>
+            </div>
+        
+            <div className="mb-2">
+              <Typography
+                variant="h3"
+              >
+                Current Savings Opportunity:
+              </Typography>
+              <div
+                className="flex justify-between align-center"
+              >
+                <Typography
+                  variant="p"
+                  className="flex-1"
+                >
+                  EUR FX market price (USD):
+                </Typography>
+                <Typography
+                  variant="p"
+                  className="flex-1"
+                >
+                  ${chainPrice}
+                </Typography>
+              </div>
+      
+              <div
+                className="flex justify-between align-center"
+              >
+                <Typography
+                  variant="p"
+                  className="flex-1"
+                >
+                  EUROs price (USD):
+                </Typography>
+                <Typography
+                  variant="p"
+                  className="flex-1"
+                >
+                  ${poolPrice}
+                </Typography>
+              </div>
+      
+              <div
+                className="flex justify-between align-center"
+              >
+                <Typography
+                  variant="p"
+                  className="flex-1"
+                >
+                  Current discount %:
+                </Typography>
+                <Typography
+                  variant="p"
+                  className="flex-1"
+                >
+                  {showDiscount.toFixed(2)}%
+                </Typography>
+              </div>
+      
+            </div>
+      
+            <div>
+              <Typography
+                variant="h3"
+              >
+                Act Now: Save {showDiscount.toFixed(2)}% on Repayment
+              </Typography>
+            </div>
           </div>
-  
-        </div>
-  
-        <div>
-          <Typography
-            variant="h3"
-          >
-            Act Now: Save {showDiscount.toFixed(2)}% on Repayment
-          </Typography>
         </div>
       </div>
     );  
diff --git a/src/components/vault/RepayModal.jsx b/src/components/vault/RepayModal.jsx
index 257adc3..eba501d 100644
--- a/src/components/vault/RepayModal.jsx
+++ b/src/components/vault/RepayModal.jsx
@@ -5,6 +5,7 @@ import {
 } from '@heroicons/react/24/outline';
 
 import VaultHealth from "./VaultHealth";
+import EurosCompare from "./EurosCompare";
 
 import Modal from "../ui/Modal";
 import Button from "../ui/Button";
@@ -157,91 +158,97 @@ const RepayModal = (props) => {
       <Modal
         open={open}
         closeModal={closeModal}
+        wide={true}
       >
-        <Typography variant="h2" className="card-title">
-          <ArrowUpCircleIcon className="mr-2 h-6 w-6 inline-block"/>
-          Repaying EUROs
-        </Typography>
+        <div className="flex flex-col md:flex-row">
+          <div className="flex flex-col flex-1">
+            <Typography variant="h2" className="card-title">
+              <ArrowUpCircleIcon className="mr-2 h-6 w-6 inline-block"/>
+              Repaying EUROs
+            </Typography>
 
-        <div className="flex justify-between">
-          <Typography
-            variant="p"
-          >
-            Repay Amount
-          </Typography>
-          <Typography
-            variant="p"
-            className="text-right"
-          >
-            Remaining: {getInputMax()}
-          </Typography>
-        </div>
-        <div
-          className="join"
-        >
-          <Input
-            className="join-item w-full"
-            placeholder="Amount of EUROs you want to repay"
-            type="number"
-            onChange={(e) => handleAmount(e, 'REPAY')}
-            disabled={isPending}
-            useRef={inputRef}
-          />
-
-          <Button
-            className="join-item"
-            variant="outline"
-            onClick={() => handleInputMax('REPAY')}
-            disabled={isPending}
-          >
-            Max
-          </Button>
-        </div>
-
-        <div className="mt-4">
-          <VaultHealth currentVault={currentVault}/>
-        </div>
-
-        <div>
-          {repayValues.map((item) => (
-            <div
-              className="flex justify-between align-center"
-              key={item.key}
-            >
+            <div className="flex justify-between">
               <Typography
                 variant="p"
-                className="flex-1"
               >
-                {item.key}
+                Repay Amount
               </Typography>
               <Typography
                 variant="p"
-                className="flex-1"
+                className="text-right"
               >
-                {item.value || '0'}
+                Remaining: {getInputMax()}
               </Typography>
             </div>
-          ))}
-        </div>
+            <div
+              className="join"
+            >
+              <Input
+                className="join-item w-full"
+                placeholder="Amount of EUROs you want to repay"
+                type="number"
+                onChange={(e) => handleAmount(e, 'REPAY')}
+                disabled={isPending}
+                useRef={inputRef}
+              />
 
-        <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
-          <Button
-            className="w-full lg:w-auto"
-            color="ghost"
-            onClick={closeModal}
-            disabled={isPending}
-          >
-            Close
-          </Button>
-          <Button
-            className="w-full lg:w-64"
-            color="success"
-            disabled={!amount || isPending}
-            onClick={() => handleDebtAction('REPAY')}
-            loading={isPending}
-          >
-            Repay
-          </Button>
+              <Button
+                className="join-item"
+                variant="outline"
+                onClick={() => handleInputMax('REPAY')}
+                disabled={isPending}
+              >
+                Max
+              </Button>
+            </div>
+
+            <div className="mt-4">
+              <VaultHealth currentVault={currentVault}/>
+            </div>
+
+            <div>
+              {repayValues.map((item) => (
+                <div
+                  className="flex justify-between align-center"
+                  key={item.key}
+                >
+                  <Typography
+                    variant="p"
+                    className="flex-1"
+                  >
+                    {item.key}
+                  </Typography>
+                  <Typography
+                    variant="p"
+                    className="flex-1"
+                  >
+                    {item.value || '0'}
+                  </Typography>
+                </div>
+              ))}
+            </div>
+
+            <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
+              <Button
+                className="w-full lg:w-auto"
+                color="ghost"
+                onClick={closeModal}
+                disabled={isPending}
+              >
+                Close
+              </Button>
+              <Button
+                className="w-full lg:w-64"
+                color="success"
+                disabled={!amount || isPending}
+                onClick={() => handleDebtAction('REPAY')}
+                loading={isPending}
+              >
+                Repay
+              </Button>
+            </div>
+          </div>
+          <EurosCompare />
         </div>
       </Modal>
     </>