[WIP] Voting delegation

src/modules/common/SmallButton.tsx

@@ -7,6 +7,8 @@ export const SmallButton = styled(Button)({
   "transition": ".15s ease-out",
   "textTransform": "capitalize",
   "borderRadius": 8,
+  "backgroundColor": "#81feb7 !important",
+  "color": "#1c1f23",
 
   "&$disabled": {
     boxShadow: "none"

src/modules/explorer/components/ResponsiveDialog.tsx

@@ -13,6 +13,7 @@ const TitleText = styled(Typography)(({ theme }) => ({
   fontWeight: 550,
   lineHeight: ".80",
   textTransform: "capitalize",
+  fontSize: 20,
   [theme.breakpoints.down("sm")]: {
     fontSize: 18
   }

src/modules/explorer/components/UserBalances.tsx

@@ -111,7 +111,6 @@ export const UserBalances: React.FC<{ daoId: string }> = ({ daoId, children }) =
     userBalances.available.balance = userLedger.available_balance.dp(10, 1).toString()
     userBalances.pending.balance = userLedger.pending_balance.dp(10, 1).toString()
     userBalances.staked.balance = userLedger.staked.dp(10, 1).toString()
-
     return userBalances
   }, [account, ledger])
 

src/modules/explorer/pages/User/components/DelegationBanner.tsx

@@ -0,0 +1,141 @@
+import React, { Fragment, useEffect, useState } from "react"
+import { 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"
+import { useDelegationStatus } from "services/contracts/token/hooks/useDelegationStatus"
+import { useTezos } from "services/beacon/hooks/useTezos"
+import { useDelegationVoteWeight } from "services/contracts/token/hooks/useDelegationVoteWeight"
+import BigNumber from "bignumber.js"
+import { parseUnits } from "services/contracts/utils"
+
+export enum DelegationsType {
+  ACCEPTING_DELEGATION = "ACCEPTING_DELEGATION",
+  NOT_ACCEPTING_DELEGATION = "NOT_ACCEPTING_DELEGATION",
+  DELEGATING = "DELEGATING"
+}
+
+const DelegationBox = styled(Grid)(({ theme }: { theme: Theme }) => ({
+  minHeight: "178px",
+  padding: "46px 55px",
+  background: theme.palette.primary.main,
+  boxSizing: "border-box",
+  borderRadius: 8,
+  boxShadow: "none",
+  gap: 32
+}))
+
+const Subtitle = styled(Typography)({
+  fontWeight: 200,
+  color: "#fff",
+  fontSize: 16
+})
+
+const Balance = styled(Typography)({
+  fontSize: 24,
+  fontWeight: 200
+})
+
+export const matchTextToStatus = (value: DelegationsType | undefined) => {
+  switch (value) {
+    case DelegationsType.ACCEPTING_DELEGATION:
+      return "Accepting delegations"
+    case DelegationsType.NOT_ACCEPTING_DELEGATION:
+      return "Not currently accepting delegations or delegating"
+    case DelegationsType.DELEGATING:
+      return "Delegating to "
+    default:
+      return
+  }
+}
+
+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 [openModal, setOpenModal] = useState(false)
+  const { data: delegateVoteBalances } = useDelegationVoteWeight(dao?.data.token.contract)
+  const [voteWeight, setVoteWeight] = useState(new BigNumber(0))
+  console.log("voteWeight: ", voteWeight.toString())
+
+  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])
+
+  useEffect(() => {
+    let totalVoteWeight = new BigNumber(0)
+    delegateVoteBalances?.forEach(delegatedVote => {
+      const balance = new BigNumber(delegatedVote.balance)
+      totalVoteWeight = totalVoteWeight.plus(balance)
+    })
+    setVoteWeight(totalVoteWeight)
+  }, [delegateVoteBalances])
+
+  return (
+    <DelegationBox container direction="column">
+      <Grid container style={{ gap: 12 }} direction="column">
+        <Typography variant="h4" color="textPrimary">
+          Off-chain Delegation
+        </Typography>
+        <Subtitle variant="body1">These settings only affect your participation in off-chain polls</Subtitle>
+      </Grid>
+      {dao && (
+        <Grid container style={{ gap: 12 }} direction="column">
+          <Typography color="textPrimary">Voting Weight</Typography>
+          <Balance color="secondary">
+            {!voteWeight || voteWeight.eq(new BigNumber(0)) ? (
+              "-"
+            ) : (
+              <>{`${parseUnits(voteWeight, dao.data.token.decimals).toString()} ${dao.data.token.symbol}`}</>
+            )}
+          </Balance>
+        </Grid>
+      )}
+      <Grid container style={{ gap: 12 }} direction="column">
+        <Grid container direction="row" justifyContent="space-between" alignItems="center">
+          <Grid item xs={6}>
+            <Typography color="textPrimary">Delegation Status</Typography>
+          </Grid>
+          <Grid
+            item
+            container
+            direction="row"
+            xs={6}
+            alignItems="center"
+            justifyContent="flex-end"
+            style={{ gap: 4, cursor: "pointer" }}
+          >
+            <Edit color="secondary" fontSize="small" onClick={() => setOpenModal(true)} />
+            <Typography color="secondary" onClick={() => setOpenModal(true)}>
+              Edit
+            </Typography>
+          </Grid>
+        </Grid>
+        <Subtitle variant="body1">
+          {matchTextToStatus(delegationStatus)}
+          {delegationStatus === DelegationsType.DELEGATING ? delegatedTo : null}
+        </Subtitle>
+      </Grid>
+      <DelegationDialog
+        open={openModal}
+        onClose={onCloseAction}
+        status={delegationStatus}
+        setDelegationStatus={setDelegationStatus}
+        delegationStatus={delegationStatus}
+        delegatedTo={delegatedTo}
+      />
+    </DelegationBox>
+  )
+}

src/modules/explorer/pages/User/components/DelegationModal.tsx

@@ -0,0 +1,171 @@
+import { Grid, Radio, TextField, Typography, styled } from "@material-ui/core"
+import React, { useEffect, useState } from "react"
+import { DelegationsType, matchTextToStatus } from "./DelegationBanner"
+import { ResponsiveDialog } from "modules/explorer/components/ResponsiveDialog"
+import { SmallButton } from "modules/common/SmallButton"
+import { useTokenDelegate } from "services/contracts/token/hooks/useTokenDelegate"
+import { useDAO } from "services/services/dao/hooks/useDAO"
+import { useDAOID } from "../../DAO/router"
+import { useTezos } from "services/beacon/hooks/useTezos"
+
+const AddressTextField = styled(TextField)({
+  "backgroundColor": "#2f3438",
+  "borderRadius": 8,
+  "height": 56,
+  "padding": "0px 24px",
+  "alignItems": "flex-start",
+  "boxSizing": "border-box",
+  "justifyContent": "center",
+  "display": "flex",
+  "& .MuiInputBase-root": {
+    "width": "100%",
+    "& input": {
+      textAlign: "initial"
+    }
+  }
+})
+
+export enum ActionTypes {
+  ACCEPT_DELEGATIONS = "ACCEPT_DELEGATIONS",
+  DELEGATE = "DELEGATE",
+  CHANGE_DELEGATE = "CHANGE_DELEGATE",
+  STOP_ACCEPTING_DELEGATIONS = "STOP_ACCEPTING_DELEGATIONS",
+  STOP_DELEGATING = "STOP_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"
+    default:
+      return
+  }
+}
+
+export const DelegationDialog: React.FC<{
+  open: boolean
+  onClose: () => void
+  status: DelegationsType | undefined
+  setDelegationStatus: (value: DelegationsType) => void
+  delegationStatus: DelegationsType
+  delegatedTo: string | null | undefined
+}> = ({ status, onClose, open, setDelegationStatus, delegationStatus, delegatedTo }) => {
+  const [options, setOptions] = useState<ActionTypes[]>([])
+  const [selectedOption, setSelectedOption] = useState()
+  const { mutate: delegateToken } = useTokenDelegate()
+  const daoId = useDAOID()
+  const { data, cycleInfo } = useDAO(daoId)
+  const { tezos, connect, network, account } = useTezos()
+  const [newDelegate, setNewDelegate] = useState("")
+
+  useEffect(() => {
+    getOptionsByStatus(status)
+  }, [status])
+
+  const closeDialog = () => {
+    setSelectedOption(undefined)
+    onClose()
+  }
+
+  const saveInfo = () => {
+    updateStatus()
+    closeDialog()
+  }
+
+  const updateStatus = () => {
+    if (selectedOption === ActionTypes.DELEGATE || selectedOption === ActionTypes.CHANGE_DELEGATE) {
+      if (newDelegate && data?.data.token.contract) {
+        delegateToken({ tokenAddress: data?.data.token.contract, delegateAddress: newDelegate })
+      }
+    } else if (
+      selectedOption === ActionTypes.STOP_ACCEPTING_DELEGATIONS ||
+      selectedOption === ActionTypes.STOP_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 })
+      }
+    }
+  }
+
+  const getOptionsByStatus = (status: DelegationsType | undefined) => {
+    switch (status) {
+      case DelegationsType.NOT_ACCEPTING_DELEGATION:
+        const optionsOne = [ActionTypes.ACCEPT_DELEGATIONS, ActionTypes.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)
+        break
+    }
+  }
+
+  return (
+    <ResponsiveDialog open={open} onClose={closeDialog} title={"Delegation Status"}>
+      <Grid container direction={"column"} style={{ gap: 20 }}>
+        <Grid item style={{ gap: 8 }} container direction="column">
+          <Typography color="textPrimary">Current Status</Typography>
+          <Typography color="secondary" style={{ fontWeight: 200 }}>
+            {matchTextToStatus(status)} {delegationStatus === DelegationsType.DELEGATING ? delegatedTo : null}
+          </Typography>
+        </Grid>
+
+        {options.map(item => {
+          return (
+            <>
+              <Grid
+                key={item}
+                item
+                style={{ gap: 8 }}
+                container
+                direction="row"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                <Typography color="textPrimary">{matchTextToAction(item)}</Typography>
+                <Radio
+                  checked={selectedOption === item}
+                  onChange={(e: any) => setSelectedOption(e.target.value)}
+                  value={item}
+                  name="radio-buttons"
+                  inputProps={{ "aria-label": "A" }}
+                />
+                {item === selectedOption &&
+                (selectedOption === ActionTypes.DELEGATE || selectedOption === ActionTypes.CHANGE_DELEGATE) ? (
+                  <AddressTextField
+                    onChange={e => {
+                      setNewDelegate(e.target.value)
+                    }}
+                    type="text"
+                    placeholder="Enter Address"
+                    InputProps={{ disableUnderline: true }}
+                  />
+                ) : null}
+              </Grid>
+            </>
+          )
+        })}
+
+        <Grid container direction="row" justifyContent="flex-end">
+          <SmallButton onClick={saveInfo}>Submit</SmallButton>
+        </Grid>
+      </Grid>
+    </ResponsiveDialog>
+  )
+}

src/modules/explorer/pages/User/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Grid, Theme, Typography, styled } from "@material-ui/core"
 import dayjs from "dayjs"
 import { useDAOID } from "modules/explorer/pages/DAO/router"
-import React, { useCallback, useEffect, useMemo } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { useHistory } from "react-router"
 import { useAgoraTopic } from "services/agora/hooks/useTopic"
 import { useTezos } from "services/beacon/hooks/useTezos"
@@ -18,6 +18,7 @@ import { UserBalances } from "../../components/UserBalances"
 import { UserProfileName } from "../../components/UserProfileName"
 import { DropButton } from "../Proposals"
 import { usePolls } from "modules/lite/explorer/hooks/usePolls"
+import { Delegation } from "./components/DelegationBanner"
 
 const ContentBlockItem = styled(Grid)({
   padding: "35px 52px",
@@ -103,9 +104,6 @@ export const User: React.FC = () => {
   const { data, cycleInfo } = useDAO(daoId)
   const { data: proposals } = useProposals(daoId)
   const history = useHistory()
-  const { data: activeProposals } = useProposals(daoId, ProposalStatus.ACTIVE)
-  const { data: executableProposals } = useProposals(daoId, ProposalStatus.EXECUTABLE)
-  const { data: expiredProposals } = useProposals(daoId, ProposalStatus.EXPIRED)
   const { data: executedProposals } = useProposals(daoId, ProposalStatus.EXECUTED)
   const { data: droppedProposals } = useProposals(daoId, ProposalStatus.DROPPED)
   const { mutate: unstakeFromAllProposals } = useUnstakeFromAllProposals()
@@ -208,6 +206,8 @@ export const User: React.FC = () => {
             </Grid>
           </UserBalances>
         </BalancesHeader>
+
+        <Delegation daoId={daoId} />
         <Grid item>
           {proposalsCreated && cycleInfo && (
             <ProposalsList