From b1f23c298f60433ac9198502c81afbeeed12fd4b Mon Sep 17 00:00:00 2001
From: brightiron <95196612+brightiron@users.noreply.github.com>
Date: Wed, 6 Dec 2023 09:30:54 -0600
Subject: [PATCH] Spend Approval Improvements, Redirects, Tooltips (#3033)

* spend amount check on repayment

* redirect lending to /lending/cooler

* adjust labels on range chart
---
 src/App.tsx                                   |  1 +
 .../Cooler/positions/CreateOrRepayLoan.tsx    |  6 ++-
 src/views/Range/RangeChart.tsx                | 37 ++++++++++++-------
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ece322fc78..a1ff35bee4 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -247,6 +247,7 @@ function App() {
                   <Route path="/dashboard/*" element={<TreasuryDashboard />} />
                   <Route path="/range/*" element={<Range />} />
                   <Route path="/liquidity/vaults/:id" element={<Vault />} />
+                  <Route path="/lending" element={<Navigate to="/lending/cooler" />} />
                   <Route path="/lending/cooler" element={<Cooler />} />
                   <Route path="/utility" element={<Utility />} />
 
diff --git a/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx b/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
index 8a59ddc875..14b02f08c5 100644
--- a/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
+++ b/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
@@ -197,7 +197,11 @@ export const CreateOrRepayLoan = ({
                     approve Olympus DAO to use your <b>{loan ? "DAI" : "gOHM"}</b> for borrowing.
                   </>
                 }
-                spendAmount={new DecimalBigNumber(collateralAmount.toString(), 18)}
+                spendAmount={
+                  loan
+                    ? new DecimalBigNumber(paymentAmount.toString(), 18)
+                    : new DecimalBigNumber(collateralAmount.toString(), 18)
+                }
               >
                 <PrimaryButton
                   onClick={() => {
diff --git a/src/views/Range/RangeChart.tsx b/src/views/Range/RangeChart.tsx
index 6d68233b39..2b563e677d 100644
--- a/src/views/Range/RangeChart.tsx
+++ b/src/views/Range/RangeChart.tsx
@@ -1,4 +1,4 @@
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Typography } from "@mui/material";
 import { styled, useTheme } from "@mui/material/styles";
 import { DataRow, Paper } from "@olympusdao/component-library";
 import {
@@ -124,34 +124,43 @@ const RangeChart = (props: {
     return (
       <Paper className={`ohm-card tooltip-container`} sx={{ minWidth: "250px" }}>
         <DataRow title="Time" balance={timestamp}></DataRow>
-        <DataRow title="Price" balance={formatCurrency(price ? price : currentPrice, 2, reserveSymbol)} />
+        <Typography fontSize="15px" fontWeight={600} mt="33px">
+          Price
+        </Typography>
+        <DataRow title="Market Price" balance={formatCurrency(price ? price : currentPrice, 2, reserveSymbol)} />
         {label === "now" && (
           <>
             <DataRow title="Target Price" balance={`${formatCurrency(targetPrice, 2, reserveSymbol)}`} />
             <DataRow title="30 Day MA" balance={`${formatCurrency(movingAverage.movingAverage, 2, reserveSymbol)}`} />
+            <Typography fontSize="15px" fontWeight={600} mt="33px">
+              Lower Range
+            </Typography>
             <DataRow
-              title="Upper Capacity"
-              balance={`${capacityFormatter.format(parseBigNumber(rangeData.high.capacity, 9))} OHM`}
+              title="Cushion"
+              balance={formatCurrency(parseBigNumber(rangeData.low.cushion.price, 18), 2, reserveSymbol)}
             />
             <DataRow
-              title="Upper Cushion"
-              balance={formatCurrency(parseBigNumber(rangeData.high.cushion.price, 18), 2, reserveSymbol)}
+              title="Wall"
+              balance={formatCurrency(parseBigNumber(rangeData.low.wall.price, 18), 2, reserveSymbol)}
             />
             <DataRow
-              title="Upper Wall"
-              balance={formatCurrency(parseBigNumber(rangeData.high.wall.price, 18), 2, reserveSymbol)}
+              title="Capacity"
+              balance={`${capacityFormatter.format(parseBigNumber(rangeData.low.capacity, 18))} ${reserveSymbol} `}
             />
+            <Typography fontSize="15px" fontWeight={600} mt="33px">
+              Upper Range
+            </Typography>
             <DataRow
-              title="Lower Capacity"
-              balance={`${capacityFormatter.format(parseBigNumber(rangeData.low.capacity, 18))} ${reserveSymbol} `}
+              title="Cushion"
+              balance={formatCurrency(parseBigNumber(rangeData.high.cushion.price, 18), 2, reserveSymbol)}
             />
             <DataRow
-              title="Lower Cushion"
-              balance={formatCurrency(parseBigNumber(rangeData.low.cushion.price, 18), 2, reserveSymbol)}
+              title="Wall"
+              balance={formatCurrency(parseBigNumber(rangeData.high.wall.price, 18), 2, reserveSymbol)}
             />
             <DataRow
-              title="Lower Wall"
-              balance={formatCurrency(parseBigNumber(rangeData.low.wall.price, 18), 2, reserveSymbol)}
+              title="Capacity"
+              balance={`${capacityFormatter.format(parseBigNumber(rangeData.high.capacity, 9))} OHM`}
             />
           </>
         )}