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 1/2] 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`}
             />
           </>
         )}

From 57b3e47927db9eb0407cdbf44e77277cc5a5cdcd Mon Sep 17 00:00:00 2001
From: brightiron <95196612+brightiron@users.noreply.github.com>
Date: Fri, 8 Dec 2023 10:11:46 -0600
Subject: [PATCH 2/2] add debt balance check and insufficient funds message if
 not enough funds (#3037)

---
 .../Lending/Cooler/positions/CreateOrRepayLoan.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx b/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
index 14b02f08c5..5b870534d3 100644
--- a/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
+++ b/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
@@ -62,14 +62,18 @@ export const CreateOrRepayLoan = ({
   const [paymentAmount, setPaymentAmount] = useState(new DecimalBigNumber("0"));
   const [collateralAmount, setCollateralAmount] = useState(new DecimalBigNumber("0"));
   const { data: collateralBalance } = useBalance({ [networks.MAINNET]: collateralAddress || "" })[networks.MAINNET];
+  const { data: debtBalance } = useBalance({ [networks.MAINNET]: debtAddress || "" })[networks.MAINNET];
 
   const collateralValue = Number(loanToCollateral) * Number(collateralBalance || 0);
-  const maxYouCanBorrow = Math.min(Number(capacity), collateralValue);
 
   const loanPayable = new DecimalBigNumber(
     loan?.principal.add(loan?.interestDue || BigNumber.from("0")) || BigNumber.from("0"),
     18,
   );
+
+  const maxYouCanBorrow = loan
+    ? Math.min(Number(loanPayable), Number(debtBalance))
+    : Math.min(Number(capacity), collateralValue);
   const interestRepaid = loan?.collateral.isZero() || false;
   //if collateral minus principal is greater than interest... then calculate on collateral amount.
   const daiCard = (
@@ -124,7 +128,7 @@ export const CreateOrRepayLoan = ({
         <SwapCollection UpperSwapCard={loan ? daiCard : gOHMCard} LowerSwapCard={loan ? gOHMCard : daiCard} />
         <Box display="flex" justifyContent="space-between" fontSize="12px" mt="9px" lineHeight="15px">
           <Box>Max you Can {loan ? "Repay" : "Borrow"}</Box>
-          <Box fontWeight="500">{formatNumber(loan ? Number(loanPayable.toString()) : maxYouCanBorrow, 2)} DAI</Box>
+          <Box fontWeight="500">{formatNumber(maxYouCanBorrow, 2)} DAI</Box>
         </Box>
         <Box mt="18px" mb="21px">
           <Divider />
@@ -237,9 +241,7 @@ export const CreateOrRepayLoan = ({
                         );
                   }}
                   disabled={
-                    (loan
-                      ? Number(paymentAmount) > Number(loanPayable)
-                      : Number(paymentAmount.toString()) > maxYouCanBorrow) ||
+                    Number(paymentAmount.toString()) > maxYouCanBorrow ||
                     Number(paymentAmount.toString()) === 0 ||
                     createLoan.isLoading ||
                     repayLoan.isLoading
@@ -250,6 +252,8 @@ export const CreateOrRepayLoan = ({
                   {loan
                     ? Number(paymentAmount) > Number(loanPayable)
                       ? `Payback Amount exceeds Loan`
+                      : Number(paymentAmount.toString()) > Number(maxYouCanBorrow)
+                      ? `Insufficient Funds for Repayment`
                       : `Repay Loan`
                     : Number(paymentAmount.toString()) > maxYouCanBorrow
                     ? `Amount requested exceeds capacity`