add feature flag for streams

decentdao · Aug 29, 2024 · cd49a01 · cd49a01
1 parent 3204082
commit cd49a01
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 33 deletions.
diff --git a/.env b/.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=""
diff --git a/src/components/pages/Roles/RoleCard.tsx b/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}

diff --git a/src/components/pages/Roles/RolesDetailsDrawer.tsx b/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"

diff --git a/src/components/pages/Roles/RolesDetailsDrawerMobile.tsx b/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"

diff --git a/src/components/pages/Roles/RolesTable.tsx b/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>
   );
 }

diff --git a/src/components/pages/Roles/forms/RoleFormTabs.tsx b/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>

diff --git a/src/constants/common.ts b/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;
+  }
+};