Feat : Bring Back Old Dao and Disable VeDao, VeLock, Liquidity Bootstrap

packages/boba/gateway/.env.example

@@ -12,3 +12,9 @@ REACT_APP_GA4_MEASUREMENT_ID=
 REACT_APP_SENTRY_DSN=
 REACT_APP_ENABLE_LOCK_PAGE= # values can be 0 and 1
 REACT_APP_ZENDESK_KEY= ## KEY for the zendesk widget.
+
+################
+### Ve Dao #####
+################
+# to disable the veDoa set below flat to 1.
+REACT_APP_DISABLE_VE_DAO=1

packages/boba/gateway/src/components/mainMenu/menuItems/MenuItems.js

@@ -3,10 +3,10 @@ import { useSelector } from 'react-redux'
 import { useTheme } from '@mui/material'
 
 import { selectMonster } from 'selectors/setupSelector'
-
-import { menuItems } from '../menuItems'
+import { menuItems } from './menuList'
 
 import * as S from './MenuItems.styles'
+import { DISABLE_VE_DAO } from 'util/constant'
 
 const MenuItems = () => {
 
@@ -36,6 +36,9 @@ const MenuItems = () => {
   return (
     <S.Nav>
       {menuList.map((item) => {
+        if (!!Number(DISABLE_VE_DAO) && (['Lock','Vote&Dao'].includes(item.key))) {
+          return null;
+        }
         return (
           <S.MenuItem
             style={({ isActive }) => {

packages/boba/gateway/src/components/mainMenu/menuItems.js → packages/boba/gateway/src/components/mainMenu/menuItems/menuList.js

@@ -41,14 +41,20 @@ export const menuItems = [
     key: 'Lock',
     icon: "LockIcon",
     title: "Lock",
-    url: "/lock",
+    url: ROUTES_PATH.LOCK,
   },
   {
-    key: 'Vote',
+    key: 'Vote&Dao',
     icon: "VoteIcon",
     title: "Vote&Dao",
     url: ROUTES_PATH.VOTE_DAO
   },
+  {
+    key: 'DAO',
+    icon: "VoteIcon",
+    title: "Dao",
+    url: ROUTES_PATH.DAO
+  },
   {
     key: 'LinksToBobaChains',
     icon: "LinksToBobaChainsIcon",

packages/boba/gateway/src/containers/VoteAndDao/Dao/Dao.js

@@ -35,6 +35,7 @@ import { selectLockRecords } from 'selectors/veBobaSelector'
 
 import {DividerLine} from 'containers/Global.styles'
 import * as S from './Dao.styles'
+import { setConnectBOBA } from 'actions/setupAction'
 
 const PROPOSAL_STATES = [
   { value: 'All', label: 'All' },
@@ -48,9 +49,7 @@ const PROPOSAL_STATES = [
   { value: 'Executed', label: 'Executed' }
 ]
 
-function DAO({
-  connectToBOBA
-}) {
+function DAO() {
 
   const dispatch = useDispatch()
 
@@ -80,6 +79,10 @@ function DAO({
   }, [ accountEnabled, nftRecords ]);
 
 
+  async function connectToBOBA() {
+    dispatch(setConnectBOBA(true))
+  }
+
   return (
     <S.DaoPageContent>
       <S.DaoWalletContainer>

packages/boba/gateway/src/containers/dao/OldDao.js

@@ -0,0 +1,183 @@
+/*
+Copyright 2021-present Boba Network.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { Box, Typography } from '@mui/material'
+import { openError, openModal } from 'actions/uiAction'
+import { orderBy } from 'lodash'
+
+import Button from 'components/button/Button'
+import ListProposal from 'components/listProposal/listProposal'
+
+import Select from 'components/select/Select'
+
+import { selectDaoBalance, selectDaoBalanceX, selectDaoVotes, selectDaoVotesX, selectProposals, selectProposalThreshold } from 'selectors/daoSelector'
+import { selectLoading } from 'selectors/loadingSelector'
+import { selectAccountEnabled, selectLayer } from 'selectors/setupSelector'
+
+import * as G from 'containers/Global.styles'
+import * as S from './OldDao.styles'
+import PageTitle from 'components/pageTitle/PageTitle'
+import Connect from 'containers/connect/Connect'
+
+const PROPOSAL_STATES = [
+  { value: 'All', label: 'All' },
+  { value: 'Pending', label: 'Pending' },
+  { value: 'Active', label: 'Active' },
+  { value: 'Canceled', label: 'Canceled' },
+  { value: 'Defeated', label: 'Defeated' },
+  { value: 'Succeeded', label: 'Succeeded' },
+  { value: 'Queued', label: 'Queued' },
+  { value: 'Expired', label: 'Expired' },
+  { value: 'Executed', label: 'Executed' }
+]
+
+function OldDao() {
+
+  const dispatch = useDispatch()
+
+  const accountEnabled = useSelector(selectAccountEnabled())
+  const layer = useSelector(selectLayer());
+  const loading = useSelector(selectLoading([ 'PROPOSALS/GET' ]))
+
+  let proposals = useSelector(selectProposals)
+  proposals = orderBy(proposals, i => i.startTimestamp, 'desc')
+
+  const balance = useSelector(selectDaoBalance)
+  const balanceX = useSelector(selectDaoBalanceX)
+  const votes = useSelector(selectDaoVotes)
+  const votesX = useSelector(selectDaoVotesX)
+  const proposalThreshold = useSelector(selectProposalThreshold)
+
+  const [ selectedState, setSelectedState ] = useState(PROPOSAL_STATES[ 0 ])
+
+  return (
+    <S.DaoPageContainer>
+      <PageTitle title={'Dao'} />
+      <Connect
+        userPrompt={'Please connect to Boba to vote and propose'}
+        accountEnabled={accountEnabled}
+        connectToBoba={true}
+        layer={layer}
+      />
+      <S.DaoPageContent>
+        <S.DaoWalletContainer>
+          <Box sx={{ padding: '24px 0px' }}>
+            <Typography variant="h4">Balances</Typography>
+            <Typography variant="body1" style={{ opacity: '0.5' }}>BOBA:</Typography>
+            <Typography variant="h4" >{!!layer ? Math.round(Number(balance)) : '--'}</Typography>
+            <Typography variant="body1" style={{ opacity: '0.5' }}>xBOBA:</Typography>
+            <Typography variant="h4" >{!!layer ? Math.round(Number(balanceX)) : '--'}</Typography>
+          </Box>
+          <G.DividerLine />
+          <Box sx={{ padding: '24px 0px' }}>
+            <Typography variant="h4">Votes</Typography>
+            <Typography variant="body1" style={{ opacity: '0.5' }}>Boba:</Typography>
+            <Typography variant="h4" >{!!layer ? Math.round(Number(votes)) : '--'}</Typography>
+            <Typography variant="body1" style={{ opacity: '0.5' }}>xBoba:</Typography>
+            <Typography variant="h4" >{!!layer ? Math.round(Number(votesX)) : '--'}</Typography>
+            <Typography variant="body1" style={{ opacity: '0.5' }}>Total:</Typography>
+            <Typography variant="h4" >{!!layer ? Math.round(Number(votes) + Number(votesX)) : '--'}</Typography>
+            {layer === 'L2' &&
+              <S.DaoWalletAction>
+                <Button
+                  color="primary"
+                  variant="outlined"
+                  onClick={() => { dispatch(openModal('delegateDaoModal')) }}
+                  disabled={!accountEnabled}
+                >
+                  Delegate BOBA
+                </Button>
+                <Button
+                  color="primary"
+                  variant="outlined"
+                  onClick={() => { dispatch(openModal('delegateDaoXModal')) }}
+                  disabled={!accountEnabled}
+                >
+                  Delegate xBOBA
+                </Button>
+              </S.DaoWalletAction>
+            }
+            <Box sx={{ padding: '12px 0px' }}>
+              <Typography variant="body3">Only votes delegated BEFORE the start of the active voting period are counted in your vote</Typography>
+            </Box>
+          </Box>
+          <G.DividerLine />
+          <Box sx={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+            padding: '24px 0px'
+          }}>
+            <Button
+              fullWidth={true}
+              color="neutral"
+              variant="outlined"
+              disabled={!accountEnabled}
+              onClick={() => {
+                if (Number(votes + votesX) < Number(proposalThreshold)) {
+                  dispatch(openError(`Insufficient BOBA to create a new proposal. You need at least ${proposalThreshold} BOBA + xBOBA to create a proposal.`))
+                } else {
+                  dispatch(openModal('newProposalModal'))
+                }
+              }}
+            >
+              Create new proposal
+            </Button>
+            <Box sx={{ padding: '12px 0px' }}>
+              <Typography variant="body3">At least {proposalThreshold} BOBA + xBOBA are needed to create a new proposal</Typography>
+            </Box>
+          </Box>
+        </S.DaoWalletContainer>
+        <S.DaoProposalContainer>
+          <S.DaoProposalHead>
+            <Typography variant="h3">Proposals</Typography>
+            <Select
+              options={PROPOSAL_STATES}
+              onSelect={(e) => {
+                setSelectedState(e)
+              }}
+              sx={{ marginBottom: '20px' }}
+              value={selectedState}
+              newSelect={true}
+            ></Select>
+          </S.DaoProposalHead>
+          <G.DividerLine />
+          <S.DaoProposalListContainer>
+            {!!loading && !proposals.length ? <Typography>Loading...</Typography> : null}
+            {proposals
+              // eslint-disable-next-line array-callback-return
+              .filter((p) => {
+                if (selectedState.value === 'All') {
+                  return true;
+                }
+                return selectedState.value === p.state;
+              })
+              .map((p, index) => {
+                return <React.Fragment key={index}>
+                  <ListProposal proposal={p} />
+                </React.Fragment>
+              })}
+          </S.DaoProposalListContainer>
+        </S.DaoProposalContainer>
+      </S.DaoPageContent>
+    </S.DaoPageContainer>
+  )
+}
+
+export default React.memo(OldDao)

packages/boba/gateway/src/containers/dao/OldDao.styles.js

@@ -0,0 +1,103 @@
+import { styled } from '@mui/material/styles'
+import { Box } from "@mui/material"
+
+export const DaoPageContainer = styled(Box)(({ theme }) => ({
+  margin: '0px auto',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-around',
+  padding: '10px',
+  paddingTop: '0px',
+  width: '70%',
+  gap: '10px',
+  [theme.breakpoints.between('md', 'lg')]: {
+    width: '90%',
+    padding: '0px',
+  },
+  [theme.breakpoints.between('sm', 'md')]: {
+    width: '90%',
+    padding: '0px',
+  },
+  [theme.breakpoints.down('sm')]: {
+    width: '100%',
+    padding: '0px',
+  },
+
+}));
+
+export const DaoPageContent = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  paddingTop: '0px',
+  gap: '10px',
+  [theme.breakpoints.down('sm')]: {
+    flexDirection: 'column'
+  },
+}));
+
+export const DaoWalletContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '0px 20px',
+  minHeight: '700px',
+  width: '30%',
+  gap: '10px',
+  borderRadius: theme.palette.primary.borderRadius,
+  background: theme.palette.background.secondary,
+  [theme.breakpoints.down('sm')]: {
+    width: '100%',
+  },
+}));
+
+export const DaoProposalContainer = styled(Box)(({ theme }) => ({
+  width: '70%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  padding: '0 32px',
+  minHeight: '500px',
+  borderRadius: theme.palette.primary.borderRadius,
+  background: theme.palette.background.secondary,
+  [theme.breakpoints.down('sm')]: {
+    width: '100%',
+    padding: '0 20px',
+  },
+}));
+
+export const DaoProposalHead = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  alignSelf: 'flex-start',
+  justifyContent: 'space-between',
+  padding: '15px 0px',
+  width: '100%',
+  margin: '5px',
+  [theme.breakpoints.down('sm')]: {
+    padding: '0px',
+  },
+}))
+
+export const DaoProposalListContainer = styled(Box)(({ theme }) => ({
+  overflowY: 'auto',
+  margin: '10px auto',
+  borderRadius: '8px',
+  padding: '20px 10px',
+  width: '100%',
+  height: '600px',
+  '.loadingContainer' : {
+    padding: '10px auto',
+  },
+  [theme.breakpoints.down('sm')]: {
+    padding: '0px',
+  },
+}))
+
+export const DaoWalletAction = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  width: '100%',
+  margin: '10px auto',
+  gap: '10px',
+}));

packages/boba/gateway/src/containers/home/Home.js

@@ -68,7 +68,7 @@ import FarmDepositModal from 'containers/modals/farm/FarmDepositModal'
 import FarmWithdrawModal from 'containers/modals/farm/FarmWithdrawModal'
 import DelegateDaoModal from 'containers/modals/dao/DelegateDaoModal'
 import DelegateDaoXModal from 'containers/modals/dao/DelegateDaoXModal'
-import NewProposalModal from 'containers/modals/dao/NewProposalModal'
+import NewProposalModal from 'containers/modals/dao/old/NewProposalModalOldDao'
 import CastVoteModal from 'containers/modals/dao/CastVoteModal'
 import TokenPickerModal from 'containers/modals/tokenPicker/TokenPickerModal'
 import TransferPendingModal from 'containers/modals/transferPending/TransferPending'