Deprecation Banner for Goerli based DAOs (#1220)

* depreciation banner added

* hide update banner in goerli based daos

* resolve comments

.env.development

@@ -21,6 +21,8 @@ VITE_FEATURE_FLAG_CONNECT_ANY_DAPP=true
 # Enable gasless plugin on DAO creation
 VITE_FEATURE_FLAG_GASLESS_PLUGIN=true
 
+VITE_FEATURE_FLAG_DEPRECATE_GOERLI=true
+
 VITE_VOCDONI_ENV='stg'
 
 VITE_GATEWAY_URL=https://app.gwstg.aragon.in

.env.production

@@ -20,6 +20,8 @@ VITE_FEATURE_FLAG_CONNECT_ANY_DAPP=false
 # Enable gasless plugin on DAO creation
 VITE_FEATURE_FLAG_GASLESS_PLUGIN=false
 
+VITE_FEATURE_FLAG_DEPRECATE_GOERLI=false
+
 VITE_VOCDONI_ENV='stg'
 
 VITE_GATEWAY_URL=https://app.gwprod.aragon.in

.env.staging

@@ -21,6 +21,8 @@ VITE_FEATURE_FLAG_CONNECT_ANY_DAPP=true
 # Enable gasless plugin on DAO creation
 VITE_FEATURE_FLAG_GASLESS_PLUGIN=true
 
+VITE_FEATURE_FLAG_DEPRECATE_GOERLI=true
+
 VITE_VOCDONI_ENV='stg'
 
 VITE_GATEWAY_URL=https://app.gwstg.aragon.in

src/app.tsx

@@ -37,6 +37,7 @@ import {ProposalSettingsFormData} from 'utils/types';
 import {GatingMenu} from 'containers/gatingMenu';
 import {DelegationGatingMenu} from 'containers/delegationGatingMenu';
 import UpdateBanner from 'containers/navbar/updateBanner';
+import DeprecationBanner from 'containers/navbar/deprecationBanner';
 import {ActionsProvider} from './context/actions';
 
 export const App: React.FC = () => {
@@ -198,6 +199,7 @@ const DaoWrapper: React.FC = () => {
 
   return (
     <GovTokensWrappingProvider>
+      <DeprecationBanner />
       <UpdateBanner />
       <Navbar />
       <div className="min-h-screen">

src/containers/navbar/deprecationBanner.tsx

@@ -0,0 +1,83 @@
+import {ButtonText} from '@aragon/ods-old';
+import React, {useState} from 'react';
+import {useLocation} from 'react-router-dom';
+import styled from 'styled-components';
+import {Icon, IconType} from '@aragon/ods';
+
+import {useNetwork} from 'context/network';
+import {featureFlags} from 'utils/featureFlags';
+import {GOERLI_BASED_NETWORKS} from 'utils/constants';
+
+const DeprecationBanner: React.FC = () => {
+  const [bannerHidden, setBannerHidden] = useState(false);
+
+  const location = useLocation();
+
+  const {network} = useNetwork();
+
+  const daoDeprecationWarningEnabled =
+    featureFlags.getValue('VITE_FEATURE_FLAG_DEPRECATE_GOERLI') === 'true';
+
+  const showBanner = GOERLI_BASED_NETWORKS.includes(network) || !bannerHidden;
+
+  if (
+    location.pathname.includes('create') ||
+    showBanner === false ||
+    !daoDeprecationWarningEnabled
+  )
+    return null;
+
+  return (
+    <UpdateContainer>
+      <DummyElement />
+      <MessageWrapper>
+        <TextWrapper>
+          <Icon icon={IconType.WARNING} className="text-warning-500" />
+          <span className="font-semibold text-warning-800 ft-text-base">
+            This DAO will no longer be available once the Goerli testnet is shut
+            down in early 2024.
+          </span>
+        </TextWrapper>
+        <ButtonText
+          label="Learn more"
+          size="small"
+          bgWhite
+          mode={'secondary'}
+          onClick={() =>
+            window.open(
+              'https://blog.ethereum.org/2023/11/30/goerli-lts-update',
+              '_blank'
+            )
+          }
+        />
+      </MessageWrapper>
+      <Icon
+        icon={IconType.CLOSE}
+        className="cursor-pointer justify-self-end text-neutral-0"
+        onClick={() => {
+          setBannerHidden(true);
+        }}
+      />
+    </UpdateContainer>
+  );
+};
+
+const DummyElement = styled.div.attrs({
+  className: 'md:block hidden',
+})``;
+
+const UpdateContainer = styled.div.attrs({
+  className:
+    'flex justify-between items-center py-2 px-6 bg-warning-100' as string,
+})``;
+
+const TextWrapper = styled.div.attrs({
+  className: 'flex items-center gap-x-2' as string,
+})``;
+
+const MessageWrapper = styled.div.attrs({
+  className:
+    'block md:flex md:items-center md:space-x-6 md:space-y-0 space-y-2' as string,
+})``;
+
+export default DeprecationBanner;

src/containers/navbar/updateBanner.tsx

@@ -19,6 +19,7 @@ import {useIsMember} from 'services/aragon-sdk/queries/use-is-member';
 import {featureFlags} from 'utils/featureFlags';
 import {NewProposal} from 'utils/paths';
 import {ProposalTypes} from 'utils/types';
+import {GOERLI_BASED_NETWORKS} from 'utils/constants';
 
 const UpdateBanner: React.FC = () => {
   const [bannerHidden, setBannerHidden] = useState(false);
@@ -42,6 +43,8 @@ const UpdateBanner: React.FC = () => {
   const daoUpdateEnabled =
     featureFlags.getValue('VITE_FEATURE_FLAG_OSX_UPDATES') === 'true';
 
+  const isDeprecationAlertShown = GOERLI_BASED_NETWORKS.includes(network);
+
   const showBanner = !!(
     !bannerHidden &&
     isMember &&
@@ -53,7 +56,8 @@ const UpdateBanner: React.FC = () => {
     location.pathname.includes('new-proposal') ||
     location.pathname.includes('settings') ||
     location.pathname.includes('create') ||
-    showBanner === false
+    showBanner === false ||
+    isDeprecationAlertShown
   )
     return null;
 

src/utils/constants/chains.ts

@@ -41,6 +41,13 @@ const SUPPORTED_NETWORKS = [
   'sepolia',
 ] as const;
 
+export const GOERLI_BASED_NETWORKS: SupportedNetworks[] = [
+  'goerli',
+  'base-goerli',
+  'arbitrum-goerli',
+  'mumbai',
+];
+
 export type SupportedNetworks =
   | (typeof SUPPORTED_NETWORKS)[number]
   | 'unsupported';