Merge pull request #2968 from OlympusDAO/develop

Release: Delegate coolers & repay calc

package.json

@@ -116,7 +116,7 @@
     "husky": "^8.0.3",
     "jsdom": "^21.1.1",
     "less-plugin-npm-import": "^2.1.0",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^14.0.1",
     "node-watch": "^0.7.1",
     "orval": "^6.17.0",
     "os-browserify": "^0.3.0",

src/views/Lending/Cooler/hooks/useDelegateVoting.tsx

@@ -0,0 +1,25 @@
+import { useMutation } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { Cooler__factory } from "src/typechain";
+import { useSigner } from "wagmi";
+
+export const useDelegateVoting = () => {
+  const { data: signer } = useSigner();
+
+  return useMutation(
+    async ({ coolerAddress, delegationAddress }: { coolerAddress: string; delegationAddress: string }) => {
+      if (!signer) throw new Error(`Please connect a wallet`);
+      const coolerContract = Cooler__factory.connect(coolerAddress, signer);
+      const receipt = await coolerContract.delegateVoting(delegationAddress);
+      return receipt;
+    },
+    {
+      onError: (error: Error) => {
+        toast.error(error.message);
+      },
+      onSuccess: async tx => {
+        toast(`Successfully Delegated Voting`);
+      },
+    },
+  );
+};

src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx

@@ -79,13 +79,11 @@ export const CreateOrRepayLoan = ({
       onChange={(e: { target: { value: DecimalBigNumber | string } }) => {
         const value = typeof e.target.value === "string" ? new DecimalBigNumber(e.target.value) : e.target.value;
         setPaymentAmount(value);
-        setCollateralAmount(
-          value.div(
-            loan && !interestRepaid
-              ? new DecimalBigNumber(loanToCollateral).add(new DecimalBigNumber(loan.interestDue, 18))
-              : new DecimalBigNumber(loanToCollateral),
-          ),
-        );
+        const collateralToReceive = value
+          .sub(loan && !interestRepaid ? new DecimalBigNumber(loan.interestDue, 18) : new DecimalBigNumber("0", 18))
+          .div(new DecimalBigNumber(loanToCollateral));
+
+        setCollateralAmount(collateralToReceive);
       }}
       loanBalance={loan?.principal.add(loan?.interestDue)}
     />

src/views/Lending/Cooler/positions/DelegateVoting.tsx

@@ -0,0 +1,71 @@
+import { Box, SvgIcon } from "@mui/material";
+import { Input, Modal, PrimaryButton } from "@olympusdao/component-library";
+import { useState } from "react";
+import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
+import { useDelegateVoting } from "src/views/Lending/Cooler/hooks/useDelegateVoting";
+
+export const DelegateVoting = ({
+  coolerAddress,
+  open,
+  setOpen,
+}: {
+  coolerAddress?: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) => {
+  const [delegationAddress, setDelegationAddress] = useState("");
+  const delegateVoting = useDelegateVoting();
+
+  return (
+    <Modal
+      maxWidth="476px"
+      minHeight="200px"
+      open={open}
+      headerContent={
+        <Box display="flex" alignItems="center" gap="6px">
+          <SvgIcon component={lendAndBorrowIcon} /> <Box fontWeight="500">Delegate Voting</Box>
+        </Box>
+      }
+      onClose={() => setOpen(false)}
+    >
+      {coolerAddress ? (
+        <>
+          <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center"></Box>
+          <Box mt={"16px"} mb="16px">
+            <Input
+              id="delegateAddress"
+              placeholder="Address"
+              value={delegationAddress}
+              onChange={e => {
+                setDelegationAddress(e.target.value);
+              }}
+            />
+          </Box>
+
+          <WalletConnectedGuard fullWidth>
+            <PrimaryButton
+              fullWidth
+              disabled={delegateVoting.isLoading}
+              onClick={() => {
+                delegateVoting.mutate(
+                  { coolerAddress, delegationAddress },
+                  {
+                    onSuccess: () => {
+                      setOpen(false);
+                    },
+                  },
+                );
+              }}
+              loading={delegateVoting.isLoading}
+            >
+              Delegate Voting
+            </PrimaryButton>
+          </WalletConnectedGuard>
+        </>
+      ) : (
+        <></>
+      )}
+    </Modal>
+  );
+};

src/views/Lending/Cooler/positions/Positions.tsx

@@ -19,6 +19,7 @@ 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 { CreateOrRepayLoan } from "src/views/Lending/Cooler/positions/CreateOrRepayLoan";
+import { DelegateVoting } from "src/views/Lending/Cooler/positions/DelegateVoting";
 import { ExtendLoan } from "src/views/Lending/Cooler/positions/ExtendLoan";
 import { LiquidityCTA } from "src/views/Liquidity/LiquidityCTA";
 import { useAccount } from "wagmi";
@@ -43,6 +44,7 @@ export const CoolerPositions = () => {
 
   const [extendLoan, setExtendLoan] = useState<any>(null);
   const [repayLoan, setRepayLoan] = useState<any>(null);
+  const [delegateVoting, setDelegateVoting] = useState<any>(null);
 
   return (
     <div id="cooler-positions">
@@ -182,6 +184,10 @@ export const CoolerPositions = () => {
               </Box>
             </>
           )}
+          <Box display="flex" justifyContent={"center"}>
+            <PrimaryButton onClick={() => setDelegateVoting(true)}>Delegate Voting</PrimaryButton>
+          </Box>
+          <DelegateVoting coolerAddress={coolerAddress} open={delegateVoting} setOpen={setDelegateVoting} />
         </>
       )}