From 81e6333139df9dad13cf48d3000ace986b607aed Mon Sep 17 00:00:00 2001 From: Sepehr Sanaei <46657145+sepehr2github@users.noreply.github.com> Date: Mon, 12 Feb 2024 14:10:14 +0330 Subject: [PATCH] Deprecation Banner for Goerli based DAOs (#1220) * depreciation banner added * hide update banner in goerli based daos * resolve comments --- .env.development | 2 + .env.production | 2 + .env.staging | 2 + src/app.tsx | 2 + src/containers/navbar/deprecationBanner.tsx | 83 +++++++++++++++++++++ src/containers/navbar/updateBanner.tsx | 6 +- src/utils/constants/chains.ts | 7 ++ 7 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 src/containers/navbar/deprecationBanner.tsx diff --git a/.env.development b/.env.development index 57fc6ea34..3abf37029 100644 --- a/.env.development +++ b/.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 diff --git a/.env.production b/.env.production index de7e37a05..9ce6beb4e 100644 --- a/.env.production +++ b/.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 diff --git a/.env.staging b/.env.staging index 57fc6ea34..3abf37029 100644 --- a/.env.staging +++ b/.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 diff --git a/src/app.tsx b/src/app.tsx index ecca0b53d..6e55c610b 100644 --- a/src/app.tsx +++ b/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 ( +
diff --git a/src/containers/navbar/deprecationBanner.tsx b/src/containers/navbar/deprecationBanner.tsx new file mode 100644 index 000000000..07e988ee0 --- /dev/null +++ b/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 ( + + + + + + + This DAO will no longer be available once the Goerli testnet is shut + down in early 2024. + + + + window.open( + 'https://blog.ethereum.org/2023/11/30/goerli-lts-update', + '_blank' + ) + } + /> + + { + setBannerHidden(true); + }} + /> + + ); +}; + +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; diff --git a/src/containers/navbar/updateBanner.tsx b/src/containers/navbar/updateBanner.tsx index 4ace8fb35..10e21825a 100644 --- a/src/containers/navbar/updateBanner.tsx +++ b/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; diff --git a/src/utils/constants/chains.ts b/src/utils/constants/chains.ts index 9eb5c560b..728831337 100644 --- a/src/utils/constants/chains.ts +++ b/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';