From cd49a010a784472c381ac49d5b9ebc3b5f2ac096 Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:31:24 -0400
Subject: [PATCH] add feature flag for streams

---
 .env                                          |  3 ++
 src/components/pages/Roles/RoleCard.tsx       |  6 ++-
 .../pages/Roles/RolesDetailsDrawer.tsx        |  3 +-
 .../pages/Roles/RolesDetailsDrawerMobile.tsx  |  3 +-
 src/components/pages/Roles/RolesTable.tsx     | 25 +++++++----
 .../pages/Roles/forms/RoleFormTabs.tsx        | 42 ++++++++++---------
 src/constants/common.ts                       |  9 ++++
 7 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/.env b/.env
index 8ae7441dca..853666f44c 100644
--- 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
index 94c3aef0d1..c97a243ab2 100644
--- 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
index b257f63f19..dd70615ee1 100644
--- 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
index dd74a88260..964f6f6880 100644
--- 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
index 6a6b8a60c0..a0ec11d7fb 100644
--- 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
index d037cbfddb..d5ebfbfdd5 100644
--- 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
index a98cd92ff5..7b530a1e25 100644
--- 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;
+  }
+};