feat: End of life page

src/App.js

@@ -2,8 +2,9 @@ import { useEffect } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 import { useWalletConnect } from '@provenanceio/walletconnect-js';
+import EOL from './Pages/EOL';
 import { useAssets, useColorScheme, useApp } from '../src/redux/hooks';
-import { Navigation, Footer, SpriteSheet, BaseStyle } from '../src/Components';
+import { Footer, SpriteSheet, BaseStyle, Navigation } from '../src/Components';
 import { GlobalStyle } from '../src/theme';
 import { isProd } from '../src/consts';
 import { isEmpty } from '../src/utils';
@@ -72,9 +73,13 @@ const App = () => {
         <BaseStyle>
           <Navigation />
           <Switch>
-            <Route exact path="/">
-              <Redirect to="/dashboard" />
-            </Route>
+            {isProd ? (
+              <Route exact path="/" component={EOL} />
+            ) : (
+              <Route exact path="/">
+                <Redirect to="/dashboard" />
+              </Route>
+            )}
             <Route path="/accounts/:addressId" component={Accounts} />
             <Route path="/announcement/:announcementId" component={Announcement} />
             <Route path="/announcements" component={Announcements} />

src/Components/Navigation/Components/NavMini.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Link as BaseLink, useLocation } from 'react-router-dom';
-import { Links, Path } from '../../../consts';
+import { isProd, Links, Path } from '../../../consts';
 // Direct import to prevent import order issues
 import SearchBar from '../../SearchBar';
 import Sprite from '../../Sprite';
@@ -170,10 +170,10 @@ const NavMini = () => {
   };
 
   return (
-    <>
-      <EOLBanner />
-      <NavigationWrapper>
-        <InnerWrapper>
+    <NavigationWrapper>
+      <InnerWrapper>
+        <div />
+        {!isProd && (
           <Hamburger>
             <Sprite
               icon="MENU"
@@ -182,49 +182,56 @@ const NavMini = () => {
               color={showMenu ? 'ICON_PRIMARY' : 'ICON_WHITE'}
             />
           </Hamburger>
+        )}
+        {isProd ? (
+          <Sprite icon="LOGO" height="32px" />
+        ) : (
           <LogoLink to={Path.HOME_URL} title="Provenance Blockchain Explorer | Home">
             <Sprite icon="LOGO" height="32px" />
           </LogoLink>
+        )}
+        <div />
+        {!isProd && (
           <Sprite
             icon="SEARCH"
             onClick={toggleSearch}
             size="1.875rem"
             color={showSearch ? 'ICON_PRIMARY' : 'ICON_WHITE'}
           />
-        </InnerWrapper>
+        )}
+      </InnerWrapper>
 
-        <DropdownContainer show={showMenu}>
-          <CloseIcon
-            icon="CLOSE"
-            onClick={() => {
-              setShowMenu(false);
-            }}
-            size="0.875rem"
-            color="ICON_WHITE"
-          />
-          <LinkWrapper>
-            <ATag href="https://www.provenance.io/pulse" target="_blank" rel="noopener noreferrer">
-              Pulse
-            </ATag>
-          </LinkWrapper>
-          {buildLinks()}
-          <AnnouncementMenu onClick={() => setShowMenu(false)} />
-          <UserAccount isMobile />
-        </DropdownContainer>
+      <DropdownContainer show={showMenu}>
+        <CloseIcon
+          icon="CLOSE"
+          onClick={() => {
+            setShowMenu(false);
+          }}
+          size="0.875rem"
+          color="ICON_WHITE"
+        />
+        <LinkWrapper>
+          <ATag href="https://www.provenance.io/pulse" target="_blank" rel="noopener noreferrer">
+            Pulse
+          </ATag>
+        </LinkWrapper>
+        {buildLinks()}
+        <AnnouncementMenu onClick={() => setShowMenu(false)} />
+        <UserAccount isMobile />
+      </DropdownContainer>
 
-        <SearchContainer show={showSearch}>
-          <SearchClose
-            icon="CLOSE"
-            onClick={() => {
-              setShowSearch(false);
-            }}
-            size="0.875rem"
-            color="ICON_WHITE"
-          />
-          <SearchBar />
-        </SearchContainer>
-      </NavigationWrapper>
-    </>
+      <SearchContainer show={showSearch}>
+        <SearchClose
+          icon="CLOSE"
+          onClick={() => {
+            setShowSearch(false);
+          }}
+          size="0.875rem"
+          color="ICON_WHITE"
+        />
+        <SearchBar />
+      </SearchContainer>
+    </NavigationWrapper>
   );
 };
 

src/Components/Navigation/Components/NavStandard.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { Link } from 'react-router-dom';
-import { Path } from '../../../consts';
+import { isProd, Path } from '../../../consts';
 import { useApp, useColorScheme } from '../../../redux/hooks';
 // Direct import to prevent import order issues
 import Sprite from '../../Sprite';
@@ -10,11 +9,11 @@ import Toggle from '../../Toggle';
 import UserAccount from '../../UserAccount';
 import AnnouncementMenu from '../../AnnouncementMenu';
 import NavHeaders from './NavHeaders';
-import EOLBanner from './EOLBanner';
 
 const NavigationWrapper = styled.div`
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   align-items: center;
   top: 0;
   left: 0;
@@ -59,22 +58,26 @@ const NavStandard = () => {
 
   return (
     <>
-      <EOLBanner />
       <NavigationWrapper>
         <Link to={Path.HOME_URL} title="Provenance Blockchain Explorer | Home">
           <Sprite icon="LOGO" height="32px" />
         </Link>
-        <ExternalLink
-          href="https://www.provenance.io/pulse"
-          target="_blank"
-          rel="noopener noreferrer"
-          color="primary"
-        >
-          Pulse
-        </ExternalLink>
-        <SearchBar />
-        <AnnouncementMenu />
-        <UserAccount />
+        <div />
+        {!isProd && (
+          <>
+            <ExternalLink
+              href="https://www.provenance.io/pulse"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="primary"
+            >
+              Pulse
+            </ExternalLink>
+            <SearchBar />
+            <AnnouncementMenu />
+            <UserAccount />
+          </>
+        )}
         <Toggle
           active={themeName === 'night'}
           optionA={{
@@ -104,7 +107,7 @@ const NavStandard = () => {
           }}
         />
       </NavigationWrapper>
-      <NavHeaders />
+      {!isProd && <NavHeaders />}
     </>
   );
 };

src/Pages/EOL/index.tsx

@@ -0,0 +1,100 @@
+import { Helmet } from 'react-helmet';
+import styled from 'styled-components';
+import { breakpoints } from '../../consts';
+import { Wrapper } from '../../Components';
+
+const TitleDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 1.5rem;
+  font-weight: bold;
+  padding-bottom: 2rem;
+  text-align: center;
+`;
+
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding-bottom: 2rem;
+  gap: 1rem;
+  @media ${breakpoints.up('md')} {
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+  }
+`;
+
+const ExternalLink = styled.a`
+  align-items: center;
+  color: ${({ theme, color }) => theme[`BUTTON_${color}_FONT`]};
+  background: ${({ theme, color }) => theme[`BUTTON_${color}`]};
+  border-radius: 4px;
+  border: 1px solid ${({ theme, color }) => theme[`BUTTON_${color}`]};
+  padding: 6px 12px;
+  font-size: 0.875rem;
+  width: fit-content;
+  cursor: pointer;
+  &:focus {
+    background: ${({ theme, color }) => theme[`BUTTON_${color}_FOCUS`]};
+    border-color: ${({ theme, color }) => theme[`BUTTON_${color}_FOCUS`]};
+  }
+  &:hover {
+    background: ${({ theme, color }) => theme[`BUTTON_${color}_HOVER`]};
+    border-color: ${({ theme, color }) => theme[`BUTTON_${color}_FOCUS`]};
+  }
+  &:active {
+    background: ${({ theme, color }) => theme[`BUTTON_${color}_ACTIVE`]};
+    border-color: ${({ theme, color }) => theme[`BUTTON_${color}_FOCUS`]};
+  }
+  &:disabled {
+    background: ${({ theme }) => theme.BUTTON_DISABLED};
+    cursor: not-allowed;
+    border-color: ${({ theme }) => theme.BUTTON_DISABLED};
+  }
+`;
+
+export default function EOL() {
+  return (
+    <Wrapper noHeader>
+      <Helmet>
+        <title>Provenance Blockchain Explorer - End of Life Announcement</title>
+      </Helmet>
+      <TitleDiv>Provenance Explorer has reached its End of Life</TitleDiv>
+      <Div>
+        Explorer services are now provided by Zonescan
+        <br />
+        and Provenance Pulse
+      </Div>
+      <Div>
+        <ExternalLink
+          href="https://zonescan.io/provenance/overview"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="primary"
+        >
+          Visit Zonescan
+        </ExternalLink>
+        <ExternalLink
+          href="https://www.provenance.io/pulse"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="primary"
+        >
+          Visit Pulse
+        </ExternalLink>
+      </Div>
+      <Div style={{ paddingTop: '1rem', display: 'flex', flexDirection: 'column' }}>
+        Governance and Delegations actions remain
+        <br /> supported through Provenance Pulse
+      </Div>
+    </Wrapper>
+  );
+}

src/consts/urls.js

@@ -1,13 +1,13 @@
-export const isProd = import.meta.env.VITE_APP_ENV === 'production';
+export const isProd = import.meta.env.VITE_APP_ENV !== 'production';
 
 export const BASE_URL = `https://${import.meta.env.VITE_APP_SERVER_HOSTNAME}/api/v2`;
 export const BASE_URL_V3 = `https://${import.meta.env.VITE_APP_SERVER_HOSTNAME}/api/v3`;
 
 export const FAUCET_URL = import.meta.env.VITE_APP_FAUCET_HOSTNAME;
 
 // Wallets
-export const FIGURE_WALLET_URL = import.meta.env.VITE_APP_FIGURE_WALLET_URL
-export const PROVENANCE_WALLET_URL = import.meta.env.VITE_APP_PROVENANCE_WALLET_URL
+export const FIGURE_WALLET_URL = import.meta.env.VITE_APP_FIGURE_WALLET_URL;
+export const PROVENANCE_WALLET_URL = import.meta.env.VITE_APP_PROVENANCE_WALLET_URL;
 
 // Actual API URLs
 // -- Accounts
@@ -68,7 +68,7 @@ export const SOCIAL_GITHUB_URL = 'https://github.com/provenance-io/explorer-fron
 export const SOCIAL_SLACK_URL =
   'https://join.slack.com/t/provenanceio/shared_invite/zt-vysymaqb-VqgW3frXoNNXNlyOiP7mog';
 export const SOCIAL_PROVENANCE_URL = 'https://provenance.io/';
-export const SOCIAL_DISCORD_URL = 'https://discord.com/invite/kNZC8nwCFP';
+export const SOCIAL_DISCORD_URL = 'http://discord.gg/provenance';
 // --Staking
 export const STAKING_DELEGATE_URL = `${BASE_URL_V3}/staking/delegate`;
 export const STAKING_REDELEGATE_URL = `${BASE_URL_V3}/staking/redelegate`;