From 1c62b93275d696cba0f659caf1862d2ef94baeaa Mon Sep 17 00:00:00 2001 From: brightiron Date: Thu, 7 Sep 2023 20:44:25 -0500 Subject: [PATCH] cooler fixes --- src/views/Lending/Cooler/CreateLoan.tsx | 23 ++++++++--- src/views/Lending/Cooler/ExtendLoan.tsx | 19 ++++++++- src/views/Lending/Cooler/RepayLoan.tsx | 16 ++++++-- .../Lending/Cooler/hooks/useCreateLoan.tsx | 2 + .../Lending/Cooler/hooks/useExtendLoan.tsx | 2 + .../Cooler/hooks/useGetClearingHouse.tsx | 17 +++++--- .../Lending/Cooler/hooks/useRepayLoan.tsx | 2 + src/views/Lending/Cooler/index.tsx | 39 ++++++++++++++++--- 8 files changed, 97 insertions(+), 23 deletions(-) diff --git a/src/views/Lending/Cooler/CreateLoan.tsx b/src/views/Lending/Cooler/CreateLoan.tsx index 798e302e85..115c68a130 100644 --- 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 = ({ /> Max you Can Borrow - {maxYouCanBorrow.toFixed(2)} DAI + {formatNumber(maxYouCanBorrow, 2)} DAI @@ -97,8 +98,18 @@ export const CreateLoan = ({ {interestRate}% - Loan Term - {maturityDate.toLocaleString()} + Maturity Date + + {maturityDate.toLocaleDateString([], { + month: "long", + day: "numeric", + year: "numeric", + }) || ""}{" "} + {maturityDate.toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + })} + Loan To Value per gOHM @@ -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`} ) : ( - Borrow DAI & Open Position + {debtAmount > maxYouCanBorrow ? `Amount requested exceeds max` : `Borrow DAI & Open Position`} )} diff --git a/src/views/Lending/Cooler/ExtendLoan.tsx b/src/views/Lending/Cooler/ExtendLoan.tsx index 2dc111f866..08ff77fa79 100644 --- a/src/views/Lending/Cooler/ExtendLoan.tsx +++ b/src/views/Lending/Cooler/ExtendLoan.tsx @@ -61,12 +61,27 @@ export const ExtendLoan = ({ - + {interestRate && ( diff --git a/src/views/Lending/Cooler/RepayLoan.tsx b/src/views/Lending/Cooler/RepayLoan.tsx index 8f102b16af..48038dcd7d 100644 --- 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"} > - Loan Term + Maturity Date - {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", + }) || ""} @@ -120,7 +127,8 @@ export const RepayLoan = ({ ) } fullWidth - disabled={notEnoughDai} + loading={repayLoan.isLoading} + disabled={notEnoughDai || repayLoan.isLoading} > {notEnoughDai ? "Insufficient DAI for Repayment" : "Repay & Withdraw"} diff --git a/src/views/Lending/Cooler/hooks/useCreateLoan.tsx b/src/views/Lending/Cooler/hooks/useCreateLoan.tsx index 4dd1326358..a8d88a5869 100644 --- 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 index 337a9ccc89..f829ed2574 100644 --- 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 index ff6c49562e..d444e58c03 100644 --- 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 index 43ffc7e8bb..a4f68fa396 100644 --- 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 index 52d5a48460..206ffe671d 100644 --- 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(null); const [repayLoan, setRepayLoan] = useState(null); + const theme = useTheme(); + const mobile = useMediaQuery(theme.breakpoints.down("sm")); return (
- + + + + + + + + + + Cooler Loans + + + + } + /> @@ -93,7 +115,7 @@ export const Cooler = () => { Collateral - Interest Rate + Annual Interest Rate Repayment @@ -129,7 +151,13 @@ export const Cooler = () => { {loan.expiry && ( - {new Date(Number(loan.expiry.toString()) * 1000).toLocaleString()} + + {new Date(Number(loan.expiry.toString()) * 1000).toLocaleDateString([], { + month: "long", + day: "numeric", + year: "numeric", + }) || ""} + )} @@ -144,13 +172,12 @@ export const Cooler = () => { - setCreateLoanModalOpen(true)}>Borrow DAI & Open Position + setCreateLoanModalOpen(true)}>Open Position & Borrow DAI )} )} - {clearingHouse && (