delegation options & status updates

dOrgTech · Jul 30, 2023 · 33225a6 · 33225a6
1 parent 5ff5106
commit 33225a6
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 59 deletions.
diff --git a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx
@@ -32,7 +32,8 @@ const Container = styled(Grid)(({ theme }: { theme: Theme }) => ({
   },
 
   ["@media (max-width:1155px)"]: {
-    minHeight: 123
+    minHeight: 123,
+    maxWidth: 480
   },
 
   ["@media (max-width:1030px)"]: {},

diff --git a/src/modules/explorer/pages/User/components/DelegationBanner.tsx b/src/modules/explorer/pages/User/components/DelegationBanner.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { Fragment, useEffect, useState } from "react"
-import { Grid, Theme, Typography, styled } from "@material-ui/core"
+import { CircularProgress, Grid, Theme, Typography, styled } from "@material-ui/core"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { Edit } from "@material-ui/icons"
 import { DelegationDialog } from "./DelegationModal"
@@ -10,8 +11,7 @@ import BigNumber from "bignumber.js"
 import { parseUnits } from "services/contracts/utils"
 
 export enum DelegationsType {
-  ACCEPTING_DELEGATION = "ACCEPTING_DELEGATION",
-  NOT_ACCEPTING_DELEGATION = "NOT_ACCEPTING_DELEGATION",
+  NOT_DELEGATING = "NOT_DELEGATING",
   DELEGATING = "DELEGATING"
 }
 
@@ -38,9 +38,7 @@ const Balance = styled(Typography)({
 
 export const matchTextToStatus = (value: DelegationsType | undefined) => {
   switch (value) {
-    case DelegationsType.ACCEPTING_DELEGATION:
-      return "Accepting delegations"
-    case DelegationsType.NOT_ACCEPTING_DELEGATION:
+    case DelegationsType.NOT_DELEGATING:
       return "Not currently accepting delegations or delegating"
     case DelegationsType.DELEGATING:
       return "Delegating to "
@@ -53,26 +51,35 @@ export const Delegation: React.FC<{ daoId: string }> = ({ daoId }) => {
   const { data: dao } = useDAO(daoId)
   const { network, tezos, account, connect } = useTezos()
 
-  const { data: delegatedTo } = useDelegationStatus(dao?.data.token.contract)
-  const [delegationStatus, setDelegationStatus] = useState<DelegationsType>(DelegationsType.NOT_ACCEPTING_DELEGATION)
+  const { data: delegatedTo, isLoading, refetch } = useDelegationStatus(dao?.data.token.contract)
+  const [delegationStatus, setDelegationStatus] = useState<DelegationsType>(DelegationsType.NOT_DELEGATING)
   const [openModal, setOpenModal] = useState(false)
   const { data: delegateVoteBalances } = useDelegationVoteWeight(dao?.data.token.contract)
   const [voteWeight, setVoteWeight] = useState(new BigNumber(0))
-  console.log("voteWeight: ", voteWeight.toString())
+  // console.log("voteWeight: ", voteWeight.toString())
+
+  useEffect(() => {
+    refetch()
+
+    setTimeout(() => {
+      if (delegatedTo === account) {
+        setDelegationStatus(DelegationsType.DELEGATING)
+      } else if (delegatedTo && delegatedTo !== account) {
+        setDelegationStatus(DelegationsType.DELEGATING)
+      } else {
+        setDelegationStatus(DelegationsType.NOT_DELEGATING)
+      }
+    }, 2000)
+  }, [])
 
   const onCloseAction = () => {
     setOpenModal(false)
   }
 
   useEffect(() => {
-    if (delegatedTo === account) {
-      setDelegationStatus(DelegationsType.ACCEPTING_DELEGATION)
-    } else if (delegatedTo && delegatedTo !== account) {
-      setDelegationStatus(DelegationsType.DELEGATING)
-    } else {
-      setDelegationStatus(DelegationsType.NOT_ACCEPTING_DELEGATION)
-    }
-  }, [delegatedTo, account])
+    refetch()
+    console.log(delegatedTo)
+  }, [delegationStatus, setDelegationStatus])
 
   useEffect(() => {
     let totalVoteWeight = new BigNumber(0)
@@ -124,8 +131,14 @@ export const Delegation: React.FC<{ daoId: string }> = ({ daoId }) => {
           </Grid>
         </Grid>
         <Subtitle variant="body1">
-          {matchTextToStatus(delegationStatus)}
-          {delegationStatus === DelegationsType.DELEGATING ? delegatedTo : null}
+          {isLoading ? (
+            <CircularProgress color="secondary" />
+          ) : (
+            <>
+              {matchTextToStatus(delegationStatus)}
+              {delegationStatus === DelegationsType.DELEGATING ? delegatedTo : null}
+            </>
+          )}
         </Subtitle>
       </Grid>
       <DelegationDialog

diff --git a/src/modules/explorer/pages/User/components/DelegationModal.tsx b/src/modules/explorer/pages/User/components/DelegationModal.tsx
@@ -26,25 +26,16 @@ const AddressTextField = styled(TextField)({
 })
 
 export enum ActionTypes {
-  ACCEPT_DELEGATIONS = "ACCEPT_DELEGATIONS",
-  DELEGATE = "DELEGATE",
-  CHANGE_DELEGATE = "CHANGE_DELEGATE",
-  STOP_ACCEPTING_DELEGATIONS = "STOP_ACCEPTING_DELEGATIONS",
-  STOP_DELEGATING = "STOP_DELEGATING"
+  SET_DELEGATE = "SET_DELEGATE",
+  NOT_DELEGATING = "NOT_DELEGATING"
 }
 
 const matchTextToAction = (value: ActionTypes) => {
   switch (value) {
-    case ActionTypes.ACCEPT_DELEGATIONS:
-      return "Accept Delegations"
-    case ActionTypes.DELEGATE:
-      return "Delegate"
-    case ActionTypes.CHANGE_DELEGATE:
-      return "Change Delegate"
-    case ActionTypes.STOP_ACCEPTING_DELEGATIONS:
-      return "Stop Accepting Delegations"
-    case ActionTypes.STOP_DELEGATING:
-      return "Stop Delegating"
+    case ActionTypes.SET_DELEGATE:
+      return "Enter delegate address"
+    case ActionTypes.NOT_DELEGATING:
+      return "I want to own my voting power"
     default:
       return
   }
@@ -58,9 +49,9 @@ export const DelegationDialog: React.FC<{
   delegationStatus: DelegationsType
   delegatedTo: string | null | undefined
 }> = ({ status, onClose, open, setDelegationStatus, delegationStatus, delegatedTo }) => {
-  const [options, setOptions] = useState<ActionTypes[]>([])
+  const [options, setOptions] = useState<ActionTypes[]>([ActionTypes.NOT_DELEGATING, ActionTypes.SET_DELEGATE])
   const [selectedOption, setSelectedOption] = useState()
-  const { mutate: delegateToken } = useTokenDelegate()
+  const { mutate: delegateToken, data: tokenData } = useTokenDelegate()
   const daoId = useDAOID()
   const { data, cycleInfo } = useDAO(daoId)
   const { tezos, connect, network, account } = useTezos()
@@ -81,37 +72,39 @@ export const DelegationDialog: React.FC<{
   }
 
   const updateStatus = () => {
-    if (selectedOption === ActionTypes.DELEGATE || selectedOption === ActionTypes.CHANGE_DELEGATE) {
+    if (selectedOption === ActionTypes.SET_DELEGATE) {
       if (newDelegate && data?.data.token.contract) {
-        delegateToken({ tokenAddress: data?.data.token.contract, delegateAddress: newDelegate })
+        delegateToken(
+          { tokenAddress: data?.data.token.contract, delegateAddress: newDelegate },
+          { onSuccess: () => setDelegationStatus(DelegationsType.DELEGATING) }
+        )
+        return
       }
-    } else if (
-      selectedOption === ActionTypes.STOP_ACCEPTING_DELEGATIONS ||
-      selectedOption === ActionTypes.STOP_DELEGATING
-    ) {
+    } else if (selectedOption === ActionTypes.NOT_DELEGATING) {
       if (data?.data.token.contract) {
-        delegateToken({ tokenAddress: data?.data.token.contract, delegateAddress: null })
-      }
-    } else if (selectedOption === ActionTypes.ACCEPT_DELEGATIONS) {
-      if (data?.data.token.contract && account) {
-        delegateToken({ tokenAddress: data?.data.token.contract, delegateAddress: account })
+        delegateToken(
+          { tokenAddress: data?.data.token.contract, delegateAddress: null },
+          {
+            onSuccess: () => {
+              setDelegationStatus(DelegationsType.NOT_DELEGATING)
+              return
+            }
+          }
+        )
       }
+      return
     }
   }
 
   const getOptionsByStatus = (status: DelegationsType | undefined) => {
     switch (status) {
-      case DelegationsType.NOT_ACCEPTING_DELEGATION:
-        const optionsOne = [ActionTypes.ACCEPT_DELEGATIONS, ActionTypes.DELEGATE]
+      case DelegationsType.NOT_DELEGATING:
+        const optionsOne = [ActionTypes.SET_DELEGATE]
         setOptions(optionsOne)
         break
-      case DelegationsType.ACCEPTING_DELEGATION:
-        const optionsTwo = [ActionTypes.STOP_ACCEPTING_DELEGATIONS]
-        setOptions(optionsTwo)
-        break
       case DelegationsType.DELEGATING:
-        const optionsThree = [ActionTypes.CHANGE_DELEGATE, ActionTypes.STOP_DELEGATING, ActionTypes.ACCEPT_DELEGATIONS]
-        setOptions(optionsThree)
+        const optionsTwo = [ActionTypes.NOT_DELEGATING]
+        setOptions(optionsTwo)
         break
     }
   }
@@ -146,8 +139,7 @@ export const DelegationDialog: React.FC<{
                   name="radio-buttons"
                   inputProps={{ "aria-label": "A" }}
                 />
-                {item === selectedOption &&
-                (selectedOption === ActionTypes.DELEGATE || selectedOption === ActionTypes.CHANGE_DELEGATE) ? (
+                {item === selectedOption && selectedOption === ActionTypes.SET_DELEGATE ? (
                   <AddressTextField
                     onChange={e => {
                       setNewDelegate(e.target.value)
@@ -163,7 +155,9 @@ export const DelegationDialog: React.FC<{
         })}
 
         <Grid container direction="row" justifyContent="flex-end">
-          <SmallButton onClick={saveInfo}>Submit</SmallButton>
+          <SmallButton disabled={selectedOption === undefined} onClick={saveInfo}>
+            Submit
+          </SmallButton>
         </Grid>
       </Grid>
     </ResponsiveDialog>