Merge pull request #2329 from decentdao/release/v0.3.1

Release/v0.3.1

.env

@@ -54,3 +54,6 @@ VITE_APP_SITE_URL="https://app.dev.decentdao.org"
 
 # WalletConnect Cloud Project ID
 VITE_APP_WALLET_CONNECT_PROJECT_ID=""
+
+# FEATURE FLAGS (Must equal "ON")
+VITE_APP_FLAG_STREAMS=""

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decent-interface",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.1",

src/components/pages/Roles/RoleCard.tsx

@@ -3,6 +3,7 @@ import { CaretCircleRight, CaretRight } from '@phosphor-icons/react';
 import { formatDuration, intervalToDuration } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { getAddress, zeroAddress } from 'viem';
+import { isFeatureEnabled } from '../../../constants/common';
 import { useGetDAOName } from '../../../hooks/DAO/useGetDAOName';
 import useAvatar from '../../../hooks/utils/useAvatar';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
@@ -61,7 +62,7 @@ export function AvatarAndRoleName({
         >
           {wearerAddress ? accountDisplayName : t('unassigned')}
         </Text>
-        {paymentsCount !== undefined && (
+        {isFeatureEnabled('STREAMS') && paymentsCount !== undefined && (
           <Flex
             mt="1rem"
             gap="0.25rem"
@@ -230,7 +231,8 @@ export function RoleCardEdit({
           />
         </Flex>
       </Flex>
-      {payments &&
+      {isFeatureEnabled('STREAMS') &&
+        payments &&
         payments.map((payment, index) => (
           <Payment
             key={index}

src/components/pages/Roles/RolesDetailsDrawer.tsx

@@ -12,6 +12,7 @@ import {
 import { List, PencilLine, User, X } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Hex, getAddress } from 'viem';
+import { isFeatureEnabled } from '../../../constants/common';
 import { useGetDAOName } from '../../../hooks/DAO/useGetDAOName';
 import useAvatar from '../../../hooks/utils/useAvatar';
 import { useFractal } from '../../../providers/App/AppProvider';
@@ -154,7 +155,7 @@ export default function RolesDetailsDrawer({
               </Text>
             </GridItem>
           </Grid>
-          {roleHat.payments && (
+          {isFeatureEnabled('STREAMS') && roleHat.payments && (
             <>
               <Divider
                 variant="darker"

src/components/pages/Roles/RolesDetailsDrawerMobile.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Icon, IconButton, Text } from '@chakra-ui/react';
 import { PencilLine } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { getAddress, Hex } from 'viem';
+import { isFeatureEnabled } from '../../../constants/common';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useRolesStore } from '../../../store/roles';
 import DraggableDrawer from '../../ui/containers/DraggableDrawer';
@@ -85,7 +86,7 @@ export default function RolesDetailsDrawerMobile({
         px="1rem"
         mb="1.5rem"
       >
-        {roleHat.payments && (
+        {isFeatureEnabled('STREAMS') && roleHat.payments && (
           <>
             <Divider
               variant="darker"

src/components/pages/Roles/RolesTable.tsx

@@ -3,6 +3,7 @@ import { PencilLine } from '@phosphor-icons/react';
 import { useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Address, Hex, getAddress, zeroAddress } from 'viem';
+import { isFeatureEnabled } from '../../../constants/common';
 import { useGetDAOName } from '../../../hooks/DAO/useGetDAOName';
 import useAvatar from '../../../hooks/utils/useAvatar';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
@@ -37,13 +38,15 @@ function RolesHeader() {
           {t('role')}
         </Th>
         <Th width="60%">{t('member')}</Th>
-        <Th
-          width="15%"
-          minWidth="140px"
-          textAlign="center"
-        >
-          {t('activePayments')}
-        </Th>
+        {isFeatureEnabled('STREAMS') && (
+          <Th
+            width="15%"
+            minWidth="140px"
+            textAlign="center"
+          >
+            {t('activePayments')}
+          </Th>
+        )}
       </Tr>
     </Thead>
   );
@@ -191,7 +194,7 @@ export function RolesRow({
         {name}
       </Td>
       <MemberColumn wearerAddress={wearerAddress} />
-      <PaymentsColumn paymentsCount={paymentsCount} />
+      {isFeatureEnabled('STREAMS') && <PaymentsColumn paymentsCount={paymentsCount} />}
     </Tr>
   );
 }
@@ -221,7 +224,11 @@ export function RolesRowEdit({
         editStatus={editStatus}
       />
       <MemberColumn wearerAddress={wearerAddress} />
-      <PaymentsColumn paymentsCount={payments?.filter(p => p.isStreaming()).length || undefined} />
+      {isFeatureEnabled('STREAMS') && (
+        <PaymentsColumn
+          paymentsCount={payments?.filter(p => p.isStreaming()).length || undefined}
+        />
+      )}
     </Tr>
   );
 }

src/components/pages/Roles/forms/RoleFormTabs.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Hex } from 'viem';
-import { TOOLTIP_MAXW } from '../../../../constants/common';
+import { isFeatureEnabled, TOOLTIP_MAXW } from '../../../../constants/common';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
@@ -67,30 +67,32 @@ export default function RoleFormTabs({
       <Tabs variant="twoTone">
         <TabList>
           <Tab>{t('roleInfo')}</Tab>
-          <Tab
-            isDisabled={!hatsTree}
-            cursor={!hatsTree ? 'not-allowed' : 'pointer'}
-            ref={paymentsTooltipRef}
-          >
-            {!hatsTree ? (
-              <ModalTooltip
-                containerRef={paymentsTooltipRef}
-                label={t('tipPaymentsDisabled')}
-                placement="right"
-                maxW={TOOLTIP_MAXW}
-              >
-                {t('payments')}
-              </ModalTooltip>
-            ) : (
-              t('payments')
-            )}
-          </Tab>
+          {isFeatureEnabled('STREAMS') && (
+            <Tab
+              isDisabled={!hatsTree}
+              cursor={!hatsTree ? 'not-allowed' : 'pointer'}
+              ref={paymentsTooltipRef}
+            >
+              {!hatsTree ? (
+                <ModalTooltip
+                  containerRef={paymentsTooltipRef}
+                  label={t('tipPaymentsDisabled')}
+                  placement="right"
+                  maxW={TOOLTIP_MAXW}
+                >
+                  {t('payments')}
+                </ModalTooltip>
+              ) : (
+                t('payments')
+              )}
+            </Tab>
+          )}
         </TabList>
         <TabPanels my="1.75rem">
           <TabPanel>
             <RoleFormInfo />
           </TabPanel>
-          {!!hatsTree && (
+          {isFeatureEnabled('STREAMS') && !!hatsTree && (
             <TabPanel>
               <RoleFormPaymentStreams />
             </TabPanel>

src/components/ui/page/Navigation/NavigationLinks.tsx

@@ -7,7 +7,7 @@ import {
   Question,
   Scroll,
   SquaresFour,
-  // UsersThree,
+  UsersThree,
 } from '@phosphor-icons/react';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { URL_CHAT, URL_DOCS, URL_FAQ } from '../../../../constants/url';
@@ -97,14 +97,14 @@ function InternalLinks({ closeDrawer }: { closeDrawer?: () => void }) {
           scope="internal"
           closeDrawer={closeDrawer}
         />
-        {/* <NavigationLink
+        <NavigationLink
           href={DAO_ROUTES.roles.relative(addressPrefix, daoAddress)}
           labelKey="roles"
           testId="navigation-rolesLink"
           NavigationIcon={UsersThree}
           scope="internal"
           closeDrawer={closeDrawer}
-        /> */}
+        />
         <NavigationLink
           href={DAO_ROUTES.hierarchy.relative(addressPrefix, daoAddress)}
           labelKey="nodes"

src/constants/common.ts

@@ -46,3 +46,12 @@ export const ADDRESS_MULTISIG_METADATA = '0xdA0000000000000000000000000000000000
 export const SIDEBAR_WIDTH = '4.25rem';
 
 export const MAX_CONTENT_WIDTH = '80rem';
+
+export const isFeatureEnabled = (feature: string) => {
+  const featureStatus = import.meta.env[`VITE_APP_FLAG_${feature}`];
+  if (featureStatus === 'ON') {
+    return true;
+  } else {
+    return false;
+  }
+};

src/router.tsx

@@ -17,10 +17,10 @@ import ProposalsPage from './pages/daos/[daoAddress]/proposals';
 import ProposalDetailsPage from './pages/daos/[daoAddress]/proposals/[proposalId]';
 import ProposalCreatePage from './pages/daos/[daoAddress]/proposals/new';
 import SablierProposalCreatePage from './pages/daos/[daoAddress]/proposals/new/sablier';
-// import Roles from './pages/daos/[daoAddress]/roles';
-// import RoleDetails from './pages/daos/[daoAddress]/roles/details';
-// import RolesEdit from './pages/daos/[daoAddress]/roles/edit';
-// import RoleEditDetails from './pages/daos/[daoAddress]/roles/edit/details';
+import Roles from './pages/daos/[daoAddress]/roles';
+import RoleDetails from './pages/daos/[daoAddress]/roles/details';
+import RolesEdit from './pages/daos/[daoAddress]/roles/edit';
+import RoleEditDetails from './pages/daos/[daoAddress]/roles/edit/details';
 import EditProposalSummary from './pages/daos/[daoAddress]/roles/edit/summary';
 import Treasury from './pages/daos/[daoAddress]/treasury';
 import HomePage from './pages/home/HomePage';
@@ -72,30 +72,30 @@ export const router = (addressPrefix: string) =>
               path: DAO_ROUTES.hierarchy.path,
               element: <HierarchyPage />,
             },
-            // {
-            //   path: DAO_ROUTES.roles.path,
-            //   element: <Roles />,
-            //   children: [
-            //     {
-            //       path: 'details',
-            //       element: <RoleDetails />,
-            //     },
-            //   ],
-            // },
-            // {
-            //   path: DAO_ROUTES.rolesEdit.path,
-            //   element: <RolesEdit />,
-            //   children: [
-            //     {
-            //       path: 'details',
-            //       element: <RoleEditDetails />,
-            //     },
-            //     {
-            //       path: 'summary',
-            //       element: <EditProposalSummary />,
-            //     },
-            //   ],
-            // },
+            {
+              path: DAO_ROUTES.roles.path,
+              element: <Roles />,
+              children: [
+                {
+                  path: 'details',
+                  element: <RoleDetails />,
+                },
+              ],
+            },
+            {
+              path: DAO_ROUTES.rolesEdit.path,
+              element: <RolesEdit />,
+              children: [
+                {
+                  path: 'details',
+                  element: <RoleEditDetails />,
+                },
+                {
+                  path: 'summary',
+                  element: <EditProposalSummary />,
+                },
+              ],
+            },
             {
               path: 'new/*',
               element: <SubDaoCreate />,