Spend Approval Improvements, Redirects, Tooltips (#3033)

* spend amount check on repayment * redirect lending to /lending/cooler * adjust labels on range chart
OlympusDAO · Dec 6, 2023 · b1f23c2 · b1f23c2
1 parent 052aa27
commit b1f23c2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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`}
             />
           </>
         )}