cooler fixes

OlympusDAO · Sep 8, 2023 · 1c62b93 · 1c62b93
1 parent 45a15c7
commit 1c62b93
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 23 deletions.
diff --git a/src/views/Lending/Cooler/CreateLoan.tsx b/src/views/Lending/Cooler/CreateLoan.tsx
@@ -5,6 +5,7 @@ import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBor
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { COOLER_CLEARING_HOUSE_ADDRESSES } from "src/constants/addresses";
+import { formatNumber } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useBalance } from "src/hooks/useBalance";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
@@ -87,7 +88,7 @@ export const CreateLoan = ({
         />
         <Box display="flex" justifyContent="space-between" fontSize="12px" mt="9px" lineHeight="15px">
           <Box>Max you Can Borrow</Box>
-          <Box fontWeight="500">{maxYouCanBorrow.toFixed(2)} DAI</Box>
+          <Box fontWeight="500">{formatNumber(maxYouCanBorrow, 2)} DAI</Box>
         </Box>
         <Box mt="18px" mb="21px">
           <Divider />
@@ -97,8 +98,18 @@ export const CreateLoan = ({
           <Box fontWeight="500">{interestRate}%</Box>
         </Box>
         <Box display="flex" justifyContent="space-between" fontSize="12px" mt="9px" lineHeight="15px">
-          <Box>Loan Term</Box>
-          <Box fontWeight="500">{maturityDate.toLocaleString()}</Box>
+          <Box>Maturity Date</Box>
+          <Box fontWeight="500">
+            {maturityDate.toLocaleDateString([], {
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            }) || ""}{" "}
+            {maturityDate.toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </Box>
         </Box>
         <Box display="flex" justifyContent="space-between" fontSize="12px" mt="9px" lineHeight="15px">
           <Box>Loan To Value per gOHM</Box>
@@ -117,9 +128,9 @@ export const CreateLoan = ({
                   })
                 }
                 loading={createCooler.isLoading}
-                disabled={createCooler.isLoading}
+                disabled={createCooler.isLoading || debtAmount > maxYouCanBorrow || debtAmount === 0}
               >
-                Create Cooler
+                {debtAmount > maxYouCanBorrow ? `Amount requested exceeds max` : `Create Cooler`}
               </PrimaryButton>
             ) : (
               <TokenAllowanceGuard
@@ -155,7 +166,7 @@ export const CreateLoan = ({
                   loading={createLoan.isLoading}
                   fullWidth
                 >
-                  Borrow DAI & Open Position
+                  {debtAmount > maxYouCanBorrow ? `Amount requested exceeds max` : `Borrow DAI & Open Position`}
                 </PrimaryButton>
               </TokenAllowanceGuard>
             )}

diff --git a/src/views/Lending/Cooler/ExtendLoan.tsx b/src/views/Lending/Cooler/ExtendLoan.tsx
@@ -61,12 +61,27 @@ export const ExtendLoan = ({
             <Box display="flex" flexDirection="column">
               <Metric
                 label="Current Term"
-                metric={new Date(Number(loan.expiry.toString()) * 1000).toLocaleDateString() || ""}
+                metric={
+                  new Date(Number(loan.expiry.toString()) * 1000).toLocaleDateString([], {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  }) || ""
+                }
               />
             </Box>
             <Icon sx={{ transform: "rotate(-90deg)" }} name="caret-down" />
             <Box display="flex" flexDirection="column">
-              <Metric label="New Term" metric={newMaturityDate.toLocaleDateString()} />
+              <Metric
+                label="New Term"
+                metric={
+                  newMaturityDate.toLocaleDateString([], {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  }) || ""
+                }
+              />
             </Box>
           </Box>
           {interestRate && (

diff --git a/src/views/Lending/Cooler/RepayLoan.tsx b/src/views/Lending/Cooler/RepayLoan.tsx
@@ -79,11 +79,18 @@ export const RepayLoan = ({
             mb={"9px"}
             mt={"21px"}
           >
-            <Typography sx={{ fontSize: "15px", lineHeight: "21px" }}>Loan Term</Typography>
+            <Typography sx={{ fontSize: "15px", lineHeight: "21px" }}>Maturity Date</Typography>
             <Box display="flex" flexDirection="column" textAlign="right">
               <Typography sx={{ fontSize: "15px", lineHeight: "21px" }}>
-                {new Date(Number(loan.expiry.toString()) * 1000).toLocaleDateString() || ""}{" "}
-                {new Date(Number(loan.expiry.toString()) * 1000).toLocaleTimeString() || ""}
+                {new Date(Number(loan.expiry.toString()) * 1000).toLocaleDateString([], {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric",
+                }) || ""}{" "}
+                {new Date(Number(loan.expiry.toString()) * 1000).toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                }) || ""}
               </Typography>
             </Box>
           </Box>
@@ -120,7 +127,8 @@ export const RepayLoan = ({
                 )
               }
               fullWidth
-              disabled={notEnoughDai}
+              loading={repayLoan.isLoading}
+              disabled={notEnoughDai || repayLoan.isLoading}
             >
               {notEnoughDai ? "Insufficient DAI for Repayment" : "Repay & Withdraw"}
             </PrimaryButton>

diff --git a/src/views/Lending/Cooler/hooks/useCreateLoan.tsx b/src/views/Lending/Cooler/hooks/useCreateLoan.tsx
@@ -25,6 +25,8 @@ export const useCreateLoan = () => {
       },
       onSuccess: async tx => {
         queryClient.invalidateQueries({ queryKey: ["getCoolerLoans"] });
+        queryClient.invalidateQueries({ queryKey: [["useBalance"]] });
+        queryClient.invalidateQueries({ queryKey: [["useContractAllowances"]] });
         toast(`Loan Successful`);
       },
     },

diff --git a/src/views/Lending/Cooler/hooks/useExtendLoan.tsx b/src/views/Lending/Cooler/hooks/useExtendLoan.tsx
@@ -24,6 +24,8 @@ export const useExtendLoan = () => {
       },
       onSuccess: async tx => {
         queryClient.invalidateQueries({ queryKey: ["getCoolerLoans"] });
+        queryClient.invalidateQueries({ queryKey: [["useBalance"]] });
+        queryClient.invalidateQueries({ queryKey: [["useContractAllowances"]] });
         toast(`Successfully Extended Loan`);
       },
     },

diff --git a/src/views/Lending/Cooler/hooks/useGetClearingHouse.tsx b/src/views/Lending/Cooler/hooks/useGetClearingHouse.tsx
@@ -18,16 +18,23 @@ export const useGetClearingHouse = () => {
     const collateralAddress = await contract.gOHM();
     const debtAddress = await contract.dai();
     const sdai = await contract.sdai();
-    const treasury = await contract.TRSRY();
     const sdaiContract = ERC4626__factory.connect(sdai, provider);
     const sdaiBalanceClearingHouse = await sdaiContract.balanceOf(contract.address); //shares held by clearinghouse
-    const sdaiBalanceTreasury = await sdaiContract.balanceOf(treasury); //shares held by treasury
+    // const sdaiBalanceTreasury = await sdaiContract.balanceOf(treasury); //shares held by treasury
     const daiBalanceClearingHouse = await sdaiContract.convertToAssets(sdaiBalanceClearingHouse);
-    const daiBalanceTreasury = await sdaiContract.convertToAssets(sdaiBalanceTreasury);
+    // const daiBalanceTreasury = await sdaiContract.convertToAssets(sdaiBalanceTreasury);
 
-    const daiBalance = daiBalanceClearingHouse.add(daiBalanceTreasury);
+    // const daiBalance = daiBalanceClearingHouse.add(daiBalanceTreasury);
 
-    return { interestRate, duration, loanToCollateral, factory, collateralAddress, debtAddress, capacity: daiBalance };
+    return {
+      interestRate,
+      duration,
+      loanToCollateral,
+      factory,
+      collateralAddress,
+      debtAddress,
+      capacity: daiBalanceClearingHouse,
+    };
   });
   return { data, isFetched, isLoading };
 };
diff --git a/src/views/Lending/Cooler/hooks/useRepayLoan.tsx b/src/views/Lending/Cooler/hooks/useRepayLoan.tsx
@@ -24,6 +24,8 @@ export const useRepayLoan = () => {
       },
       onSuccess: async tx => {
         queryClient.invalidateQueries({ queryKey: ["getCoolerLoans"] });
+        queryClient.invalidateQueries({ queryKey: [["useBalance"]] });
+        queryClient.invalidateQueries({ queryKey: [["useContractAllowances"]] });
         toast(`Successfully Repaid Loan`);
       },
     },

diff --git a/src/views/Lending/Cooler/index.tsx b/src/views/Lending/Cooler/index.tsx
@@ -1,5 +1,7 @@
+import { ArrowBack } from "@mui/icons-material";
 import {
   Box,
+  Link,
   Paper,
   Skeleton,
   Table,
@@ -9,10 +11,13 @@ import {
   TableHead,
   TableRow,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import { Metric, PrimaryButton, SecondaryButton, Token } from "@olympusdao/component-library";
 import { ethers } from "ethers";
 import { useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import PageTitle from "src/components/PageTitle";
 import { formatCurrency } from "src/helpers";
 import { CreateLoan } from "src/views/Lending/Cooler/CreateLoan";
@@ -21,7 +26,6 @@ import { useGetClearingHouse } from "src/views/Lending/Cooler/hooks/useGetCleari
 import { useGetCoolerForWallet } from "src/views/Lending/Cooler/hooks/useGetCoolerForWallet";
 import { useGetCoolerLoans } from "src/views/Lending/Cooler/hooks/useGetCoolerLoans";
 import { RepayLoan } from "src/views/Lending/Cooler/RepayLoan";
-import { LiquidityCTA } from "src/views/Liquidity/LiquidityCTA";
 import { useAccount } from "wagmi";
 
 export const Cooler = () => {
@@ -44,10 +48,28 @@ export const Cooler = () => {
 
   const [extendLoan, setExtendLoan] = useState<any>(null);
   const [repayLoan, setRepayLoan] = useState<any>(null);
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   return (
     <div id="stake-view">
-      <PageTitle name="Cooler Loans" />
+      <PageTitle
+        name={
+          <Box display="flex" flexDirection="row" alignItems="center" mt={mobile ? "50px" : "0px"}>
+            <Link component={RouterLink} to="/lending">
+              <Box display="flex" flexDirection="row">
+                <ArrowBack />
+                <Typography fontWeight="500" marginLeft="9.5px" marginRight="18px"></Typography>
+              </Box>
+            </Link>
+            <Box display="flex" flexDirection="column" ml={1} justifyContent="center" alignItems="center">
+              <Typography fontSize="32px" fontWeight={500}>
+                Cooler Loans
+              </Typography>
+            </Box>
+          </Box>
+        }
+      />
       <Box width="97%" maxWidth="974px">
         <Box display="flex" flexDirection="row" justifyContent="center">
           <Box display="flex" flexDirection="row" width={["100%", "70%"]} mt="24px" flexWrap={"wrap"}>
@@ -93,7 +115,7 @@ export const Cooler = () => {
                       <TableRow>
                         <TableCell sx={{ fontSize: "15px", padding: "9px" }}>Collateral</TableCell>
                         <TableCell sx={{ fontSize: "15px", padding: "9px" }} align="right">
-                          Interest Rate
+                          Annual Interest Rate
                         </TableCell>
                         <TableCell sx={{ fontSize: "15px", padding: "9px" }} align="right">
                           Repayment
@@ -129,7 +151,13 @@ export const Cooler = () => {
                           </TableCell>
                           <TableCell align="right" sx={{ padding: "9px" }}>
                             {loan.expiry && (
-                              <Box>{new Date(Number(loan.expiry.toString()) * 1000).toLocaleString()}</Box>
+                              <Box>
+                                {new Date(Number(loan.expiry.toString()) * 1000).toLocaleDateString([], {
+                                  month: "long",
+                                  day: "numeric",
+                                  year: "numeric",
+                                }) || ""}
+                              </Box>
                             )}
                           </TableCell>
                           <TableCell align="right" sx={{ padding: "9px" }}>
@@ -144,13 +172,12 @@ export const Cooler = () => {
                   </Table>
                 </TableContainer>
                 <Box display="flex" justifyContent={"center"}>
-                  <PrimaryButton onClick={() => setCreateLoanModalOpen(true)}>Borrow DAI & Open Position</PrimaryButton>
+                  <PrimaryButton onClick={() => setCreateLoanModalOpen(true)}>Open Position & Borrow DAI</PrimaryButton>
                 </Box>
               </>
             )}
           </>
         )}
-        <LiquidityCTA />
       </Box>
 
       {clearingHouse && (