Dac fixes

package.json

@@ -2,9 +2,9 @@
     "name": "host-react",
     "version": "1.0.0",
     "scripts": {
-        "build": "PUBLIC_PATH=https://suite.camino.network/ EXPLORER_PATH=https://suite.camino.network/explorer/ WALLET_PATH=https://suite.camino.network/wallet/ webpack --config webpack.prod.js",
-        "build:dev": "PUBLIC_PATH=https://dev.suite.camino.network/ EXPLORER_PATH=https://dev.suite.camino.network/explorer/ WALLET_PATH=https://dev.suite.camino.network/wallet/ webpack --config webpack.dev.js",
-        "build:stage": "PUBLIC_PATH=https://stage.suite.camino.network/ EXPLORER_PATH=https://stage.suite.camino.network/explorer/ WALLET_PATH=https://stage.suite.camino.network/wallet/ webpack --config webpack.prod.js",
+        "build": "PUBLIC_PATH=https://suite.camino.network/ EXPLORER_PATH=https://suite.camino.network/explorer/ WALLET_PATH=https://suite.camino.network/wallet/ DAC_PATH=https://suite.camino.network/dac/ webpack --config webpack.prod.js",
+        "build:dev": "PUBLIC_PATH=https://dev.suite.camino.network/ EXPLORER_PATH=https://dev.suite.camino.network/explorer/ WALLET_PATH=https://dev.suite.camino.network/wallet/ DAC_PATH=https://suite.camino.network/dac/ webpack --config webpack.dev.js",
+        "build:stage": "PUBLIC_PATH=https://stage.suite.camino.network/ EXPLORER_PATH=https://stage.suite.camino.network/explorer/ WALLET_PATH=https://stage.suite.camino.network/wallet/ DAC_PATH=https://suite.camino.network/dac/ webpack --config webpack.prod.js",
         "build:start": "cd dist && PORT=5001 npx serve",
         "start": "webpack-dev-server --config webpack.local.js",
         "start:live": "webpack-dev-server --open --config webpack.local.js --live-reload",
@@ -32,16 +32,16 @@
         "@emotion/styled": "^11.10.5",
         "@mdi/js": "^7.0.96",
         "@mdi/react": "^1.6.1",
+        "@types/big.js": "^6.2.2",
+        "@types/ethereum-protocol": "^1.0.5",
+        "@reduxjs/toolkit": "^1.8.1",
+        "@testing-library/dom": "^8.19.0",
         "@mui/icons-material": "^5.15.11",
         "@mui/material": "^5.15.11",
         "@mui/system": "^5.15.11",
-        "@reduxjs/toolkit": "^1.8.1",
-        "@testing-library/dom": "^8.19.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.0.1",
         "@testing-library/user-event": "^14.1.1",
-        "@types/big.js": "^6.2.2",
-        "@types/ethereum-protocol": "^1.0.5",
         "@types/jest": "^27.4.1",
         "@types/lodash": "^4.14.189",
         "@types/node": "^17.0.25",
@@ -83,10 +83,10 @@
         "webpack-dev-server": "^4.3.1",
         "webpack-merge": "^5.8.0",
         "yup": "^0.32.11",
-        "ethers": "^6.13.2"
+        "ethers": "^6.13.2",
+        "big.js": "^6.2.1"
     },
     "dependencies": {
-        "big.js": "^6.2.1",
         "react": "^18.2.0",
         "react-circle-flags": "^0.0.18",
         "react-dom": "^18.2.0"

src/components/Animate/DialogAnimate.tsx

@@ -1,5 +1,5 @@
+import { Box, Dialog, DialogProps, Paper, useTheme } from '@mui/material'
 import React from 'react'
-import { Dialog, Box, Paper, DialogProps, useTheme } from '@mui/material'
 
 interface DialogAnimateProps extends DialogProps {
     animate?: object

src/components/Navbar/AddNewNetwork.tsx

@@ -9,15 +9,15 @@ import {
 } from '@mui/material'
 import { Form, FormikProvider, useFormik } from 'formik'
 
-import { AvaNetwork } from 'wallet/AvaNetwork'
 import { Button } from '@mui/material'
-import { Network } from '../../@types/store'
-import React from 'react'
-import { addNetworks } from '../../redux/slices/network'
+import { useStore } from 'Explorer/useStore'
 import axios from 'axios'
+import React from 'react'
+import { AvaNetwork } from 'wallet/AvaNetwork'
 import store from 'wallet/store'
+import { Network } from '../../@types/store'
 import { useAppDispatch } from '../../hooks/reduxHooks'
-import { useStore } from 'Explorer/useStore'
+import { addNetworks } from '../../redux/slices/network'
 
 export default function AddNewNetwork({
     networks,

src/components/Navbar/NetworkSwitcher.tsx

@@ -1,26 +1,25 @@
+import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
 import {
     Box,
     Button,
     Chip,
-    CircularProgress,
     DialogTitle,
     MenuItem,
     MenuList,
     Select,
     Stack,
     Typography,
-    useTheme,
+    useTheme
 } from '@mui/material'
-import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
 import { networkStatusColor, networkStatusName } from '../../utils/networkUtils'
 
-import AddNewNetwork from './AddNewNetwork'
-import DialogAnimate from '../Animate/DialogAnimate'
 import Icon from '@mdi/react'
-import MHidden from '../@material-extend/MHidden'
 import React from 'react'
-import SelectedNetwork from './SelectNetwork'
 import useNetwork from '../../hooks/useNetwork'
+import MHidden from '../@material-extend/MHidden'
+import DialogAnimate from '../Animate/DialogAnimate'
+import AddNewNetwork from './AddNewNetwork'
+import SelectedNetwork from './SelectNetwork'
 
 interface NetworkSwitcherProps {
     handleCloseSidebar?: () => void

src/components/Navbar/SelectNetwork.tsx

@@ -1,5 +1,5 @@
+import { Box, Chip, Typography } from '@mui/material'
 import React from 'react'
-import { Box, Typography, Chip } from '@mui/material'
 import { useAppSelector } from '../../hooks/reduxHooks'
 import { NetworkID, getActiveNetwork, selectNetworkStatus } from '../../redux/slices/network'
 

src/components/Navbar/index.tsx

@@ -1,3 +1,4 @@
+import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
 import {
     AppBar,
     Box,
@@ -8,26 +9,25 @@ import {
     Typography,
     useTheme,
 } from '@mui/material'
-import { DRAWER_WIDTH, TIMEOUT_DURATION } from '../../constants/apps-consts'
 import React, { useState } from 'react'
-import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
+import { DRAWER_WIDTH, TIMEOUT_DURATION } from '../../constants/apps-consts'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
 
-import Account from './Account'
 import Icon from '@mdi/react'
-import LoggedInAccount from './LoggedInAccount'
+import { getActiveNetwork } from '../../redux/slices/network'
 import MHidden from '../@material-extend/MHidden'
 import MIconButton from '../@material-extend/MIconButton'
-import NetworkSwitcher from './NetworkSwitcher'
 import PlatformSwitcher from '../PlatformSwitcher'
+import Account from './Account'
+import LoggedInAccount from './LoggedInAccount'
+import NetworkSwitcher from './NetworkSwitcher'
 import ThemeSwitcher from './ThemeSwitcher'
-import { getActiveNetwork } from '../../redux/slices/network'
 // @ts-ignore
+import { useIdleTimer } from 'react-idle-timer'
+import { useNavigate } from 'react-router-dom'
 import store from 'wallet/store'
 import { updateAccount } from '../../redux/slices/app-config'
 import { updateAuthStatus } from '../../redux/slices/utils'
-import { useIdleTimer } from 'react-idle-timer'
-import { useNavigate } from 'react-router-dom'
 
 export default function Navbar() {
     const theme = useTheme()

src/components/PlatformSwitcher.tsx

@@ -1,27 +1,49 @@
 import { mdiChevronRight } from '@mdi/js'
 import Icon from '@mdi/react'
 import { Box, MenuItem, Select, Typography, useTheme } from '@mui/material'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { useAppSelector } from '../hooks/reduxHooks'
+import useWallet from '../hooks/useWallet'
 import useWidth from '../hooks/useWidth'
 import {
     changeActiveApp,
     getActiveApp,
     getAllApps,
     getAuthStatus,
 } from '../redux/slices/app-config'
+import { getActiveNetwork } from '../redux/slices/network'
+import { isFeatureEnabled } from '../utils/featureFlags/featureFlagUtils'
 
 export default function PlatformSwitcher() {
     const theme = useTheme()
+    const activeNetwork = useAppSelector(getActiveNetwork)
     const navigate = useNavigate()
     const activeApp = useAppSelector(getActiveApp)
     const allApps = useAppSelector(getAllApps)
     const isAuth = useAppSelector(getAuthStatus)
     const themeMode = theme.palette.mode === 'light' ? true : false
     const { isDesktop } = useWidth()
     const dispatch = useDispatch()
+    const { getUpgradePhases } = useWallet()
+
+    const [featureEnabled, setFeatureEnabled] = useState<boolean>(false)
+
+    useEffect(() => {
+        checkFeature()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeNetwork])
+
+    const checkFeature = async () => {
+        try {
+            const phases = await getUpgradePhases()
+            const enabled = await isFeatureEnabled('DACFeature', activeNetwork?.url, phases)
+            setFeatureEnabled(enabled)
+        } catch (error) {
+            setFeatureEnabled(false)
+        }
+    }
 
     return (
         <Box
@@ -82,40 +104,53 @@ export default function PlatformSwitcher() {
                 data-cy="app-selector-menu"
             >
                 {allApps?.map((app, index) => {
-                    if (!app.hidden && (!app.private || isAuth))
-                        return (
-                            <MenuItem
-                                key={index}
-                                value={app.name}
-                                divider
-                                onClick={() => navigate(app.url)}
-                                data-cy={`app-selector-${app.name}`}
-                            >
-                                <Box sx={{ width: '100%' }}>
-                                    <Box
-                                        sx={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                        }}
-                                    >
+                    if (
+                        !app.hidden &&
+                        (!app.private || isAuth) &&
+                        (app.name !== 'DAC' || featureEnabled)
+                    )
+                        if (
+                            !app.hidden &&
+                            (!app.private || isAuth) &&
+                            (app.name !== 'DAC' || featureEnabled)
+                        )
+                            return (
+                                <MenuItem
+                                    key={index}
+                                    value={app.name}
+                                    divider
+                                    onClick={() => navigate(app.url)}
+                                    data-cy={`app-selector-${app.name}`}
+                                >
+                                    <Box sx={{ width: '100%' }}>
+                                        <Box
+                                            sx={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                            }}
+                                        >
+                                            <Typography
+                                                variant="subtitle2"
+                                                component="span"
+                                                noWrap
+                                                fontWeight="500"
+                                                sx={{ color: '#149EED' }}
+                                            >
+                                                {app.name}
+                                            </Typography>
+                                            <Icon path={mdiChevronRight} size={0.9} />
+                                        </Box>
                                         <Typography
-                                            variant="subtitle2"
+                                            variant="caption"
                                             component="span"
-                                            noWrap
-                                            fontWeight="500"
-                                            sx={{ color: '#149EED' }}
+                                            fontWeight="300"
                                         >
-                                            {app.name}
+                                            {app.subText}
                                         </Typography>
-                                        <Icon path={mdiChevronRight} size={0.9} />
                                     </Box>
-                                    <Typography variant="caption" component="span" fontWeight="300">
-                                        {app.subText}
-                                    </Typography>
-                                </Box>
-                            </MenuItem>
-                        )
+                                </MenuItem>
+                            )
                 })}
             </Select>
         </Box>

src/constants/apps-consts.ts

@@ -18,6 +18,12 @@ export const APPS_CONSTS = [
         url: '/explorer',
         private: false,
     },
+    {
+        name: 'DAC',
+        subText: 'Decentralized Autonomous Consortium',
+        url: '/dac',
+        private: false,
+    },
     {
         name: 'Foundation',
         subText: 'Tools for foundation members.',

src/constants/featureFlag-consts.ts

@@ -0,0 +1,13 @@
+// config/featureFlags.ts
+import { FeatureFlag } from '../utils/types/featureFlag-type';
+
+const featureFlags: { [key: string]: FeatureFlag } = {
+    DACFeature: {
+        enabled: true,
+        nodeVersion: '>=1.1.0',
+        requiredUpgradePhase: 'BerlinPhase', // Add the required phase name here
+    },
+    // Add more feature flags as needed
+};
+
+export default featureFlags;

src/hooks/useWallet.ts

@@ -29,7 +29,12 @@ const useWallet = () => {
                 )
         }
     }
-    return { updateStore, getRegisteredNode, getAddress }
+
+    async function getUpgradePhases(): Promise<any> {
+        return await caminoClient.PChain().getUpgradePhases()
+    }
+
+    return { updateStore, getRegisteredNode, getAddress , getUpgradePhases}
 }
 
 export default useWallet