Merge pull request #3137 from OlympusDAO/governancePageTooltip

add tooltip. add balance. change labels
OlympusDAO · Jan 23, 2024 · 8c0fe74 · 8c0fe74
2 parents 6b53bb7 + 22e31d1
commit 8c0fe74
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/src/views/Governance/Governance.tsx b/src/views/Governance/Governance.tsx
@@ -10,7 +10,7 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
-import { PrimaryButton } from "@olympusdao/component-library";
+import { InfoNotification, PrimaryButton } from "@olympusdao/component-library";
 import { useState } from "react";
 import { InPageConnectButton } from "src/components/ConnectButton/ConnectButton";
 import PageTitle from "src/components/PageTitle";
@@ -22,7 +22,7 @@ import { GovernanceTableRow } from "src/views/Governance/GovernanceTableRow";
 import { useCheckDelegation } from "src/views/Governance/hooks/useCheckDelegation";
 import { useGetClearingHouse } from "src/views/Lending/Cooler/hooks/useGetClearingHouse";
 import { useGetCoolerForWallet } from "src/views/Lending/Cooler/hooks/useGetCoolerForWallet";
-import { useAccount } from "wagmi";
+import { useAccount, useBalance } from "wagmi";
 
 export const Governance = () => {
   const { address, isConnected } = useAccount();
@@ -47,7 +47,20 @@ export const Governance = () => {
   });
   const { data: coolerV1DelegationAddress } = useCheckDelegation({ address: coolerAddressV1 });
   const { data: coolerV2DelegationAddress } = useCheckDelegation({ address: coolerAddressV2 });
+  const { data: gohmCoolerV2Balance } = useBalance({
+    address: coolerAddressV2 as `0x${string}`,
+    token: GOHM_ADDRESSES[networks.MAINNET] as `0x${string}`,
+  });
+  const { data: gohmCoolerV1Balance } = useBalance({
+    address: coolerAddressV1 as `0x${string}`,
+    token: GOHM_ADDRESSES[networks.MAINNET] as `0x${string}`,
+  });
+  const { data: gohmBalance } = useBalance({
+    address: address as `0x${string}`,
+    token: GOHM_ADDRESSES[networks.MAINNET] as `0x${string}`,
+  });
 
+  console.log(gohmCoolerV2Balance, "balance");
   const [delegateVoting, setDelegateVoting] = useState<
     { delegatorAddress: string; currentDelegatedToAddress?: string } | undefined
   >(undefined);
@@ -59,9 +72,11 @@ export const Governance = () => {
         <Typography variant="h4" sx={{ fontWeight: "500", mb: "24px" }}>
           Proposals
         </Typography>
-        <Link href="https://snapshot.org/#/olympusdao.eth" target="_blank" rel="noopener noreferrer">
-          <PrimaryButton>View Proposals on Snapshot</PrimaryButton>
-        </Link>
+        <Box display="flex" justifyContent="center">
+          <Link href="https://snapshot.org/#/olympusdao.eth" target="_blank" rel="noopener noreferrer">
+            <PrimaryButton>View Proposals on Snapshot</PrimaryButton>
+          </Link>
+        </Box>
         <Box mt="60px">
           <Typography variant="h4" sx={{ fontWeight: "500", mb: "24px" }}>
             Delegate Voting
@@ -74,11 +89,18 @@ export const Governance = () => {
             </Box>
           ) : (
             <>
+              {(coolerAddressV1 || coolerAddressV2) && (
+                <InfoNotification>
+                  To make gOHM in Cooler Loans votable, you must delegate it to yourself
+                </InfoNotification>
+              )}
+
               <TableContainer component={Paper}>
                 <Table sx={{ minWidth: 650 }} aria-label="simple table">
                   <TableHead>
                     <TableRow>
                       <TableCell sx={{ fontSize: "15px", padding: "9px" }}>Address</TableCell>
+                      <TableCell sx={{ fontSize: "15px", padding: "9px" }}>Amount</TableCell>
                       <TableCell sx={{ fontSize: "15px", padding: "9px" }} align="right">
                         Delegation Status
                       </TableCell>
@@ -88,26 +110,29 @@ export const Governance = () => {
                   <TableBody>
                     {address && (
                       <GovernanceTableRow
-                        tokenName={`Connected Wallet: ${truncateEthereumAddress(address)}`}
+                        tokenName={`gOHM in Connected Wallet (${truncateEthereumAddress(address)})`}
                         delegatorAddress={GOHM_ADDRESSES[networks.MAINNET]}
                         delegationAddress={gOHMDelegationAddress}
                         setDelegateVoting={setDelegateVoting}
+                        balance={gohmBalance?.formatted}
                       />
                     )}
                     {coolerAddressV1 && (
                       <GovernanceTableRow
                         delegatorAddress={coolerAddressV1}
-                        tokenName={`Cooler for Clearinghouse V1: ${truncateEthereumAddress(coolerAddressV1)} `}
+                        tokenName={`gOHM in Cooler for Clearinghouse V1`}
                         setDelegateVoting={setDelegateVoting}
                         delegationAddress={coolerV1DelegationAddress}
+                        balance={gohmCoolerV1Balance?.formatted}
                       />
                     )}
                     {coolerAddressV2 && (
                       <GovernanceTableRow
                         delegatorAddress={coolerAddressV2}
-                        tokenName={`Cooler for Clearinghouse V2: ${truncateEthereumAddress(coolerAddressV2)}`}
+                        tokenName={`gOHM in Cooler for Clearinghouse V2`}
                         setDelegateVoting={setDelegateVoting}
                         delegationAddress={coolerV2DelegationAddress}
+                        balance={gohmCoolerV2Balance?.formatted}
                       />
                     )}
                   </TableBody>

diff --git a/src/views/Governance/GovernanceTableRow.tsx b/src/views/Governance/GovernanceTableRow.tsx
@@ -9,6 +9,7 @@ export const GovernanceTableRow = ({
   delegationAddress,
   delegatorAddress,
   setDelegateVoting,
+  balance,
 }: {
   tokenName: string;
   delegationAddress?: string;
@@ -22,6 +23,7 @@ export const GovernanceTableRow = ({
       | undefined
     >
   >;
+  balance?: string;
 }) => {
   const delegateVoting = useDelegateVoting();
 
@@ -30,9 +32,13 @@ export const GovernanceTableRow = ({
       <TableCell component="th" scope="row" sx={{ padding: "9px" }}>
         {tokenName}
       </TableCell>
+      <TableCell align="right" sx={{ padding: "9px" }}>
+        {Number(balance || 0).toFixed(2)} gOHM
+      </TableCell>
       <TableCell align="right" sx={{ padding: "9px" }}>
         {delegationAddress ? `Delegated to ${truncateEthereumAddress(delegationAddress)} ` : "Undelegated"}
       </TableCell>
+
       <TableCell align="right" sx={{ padding: "9px" }}>
         <Box display="flex" flexDirection="row" justifyContent="flex-end" gap="8px">
           <Box flexGrow={1}>