provenance-io · jarrydallison · Apr 24, 2026 · Apr 24, 2026 · Apr 24, 2026 · Apr 24, 2026
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="./favicon.ico" />
+    <link rel="icon" href="./favicon-light.svg" type="image/png" media="(prefers-color-scheme: light)"/>
+    <link rel="icon" href="./favicon-dark.svg" type="image/png" media="(prefers-color-scheme: dark)"/>
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -15,10 +16,10 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="./manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <base href="/">
     <title>Provenance Explorer</title>
-    <script type="module" crossorigin src="./assets/index-Djhw4wJH.js"></script>
+    <script type="module" crossorigin src="./assets/index-B_xkc0W-.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-CE4YnRrd.css">
   </head>
   <body>

@@ -7,7 +7,7 @@ import CopyValue from '../CopyValue';
 
 const HeaderContainer = styled.div`
   position: absolute;
-  top: 110px;
+  top: 136px;
   left: 0;
   display: flex;
   width: 100%;
@@ -20,11 +20,11 @@ const HeaderContainer = styled.div`
 
   @media ${breakpoints.down('lg')} {
     padding: 14px 4%;
-    top: 110px;
+    top: 134px;
   }
   @media ${breakpoints.down('md')} {
     padding: 10px;
-    top: 52px;
+    top: 92px;
   }
 `;
 const Title = styled.h2`
@@ -55,14 +55,7 @@ interface HeaderProps {
   children?: any;
 }
 
-const Header = ({ 
-  title, 
-  copyValue, 
-  copyTitle, 
-  value, 
-  valueLink, 
-  children 
-}: HeaderProps) => {
+const Header = ({ title, copyValue, copyTitle, value, valueLink, children }: HeaderProps) => {
   const showLine = value || children;
 
   const renderValueContainer = () => (

@@ -8,10 +8,10 @@ const PageWrapper = styled.div<{ noHeader: boolean }>`
   background-color: transparent;
   font-size: 0.875rem;
   @media ${breakpoints.down('lg')} {
-    padding: ${({ noHeader }) => (noHeader ? '126px 4%' : '110px 4%')};
+    padding: ${({ noHeader }) => (noHeader ? '156px 4%' : '136px 4%')};
   }
   @media ${breakpoints.down('md')} {
-    padding: ${({ noHeader }) => (noHeader ? '96px 4%' : '110px 4%')};
+    padding: ${({ noHeader }) => (noHeader ? '96px 4%' : '140px 4%')};
   }
 `;
 
@@ -24,4 +24,4 @@ const Wrapper = ({ children = null, noHeader = false }: WrapperProps) => (
   <PageWrapper noHeader={noHeader}>{children}</PageWrapper>
 );
 
-export default Wrapper;
+export default Wrapper;
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { breakpoints, isProd } from '../../../consts';
+
+const NavigationWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: white;
+  height: 100%;
+  width: 100%;
+  min-height: 1.5rem;
+  padding: 0 10% 0 9%;
+  background: ${({ theme }) => theme.CHART_PIE_L};
+  border: ${({ theme }) => theme.BACKGROUND_NAV};
+  @media ${breakpoints.down('lg')} {
+    padding: 0 4% 0 2%;
+  }
+  @media ${breakpoints.down('md')} {
+    min-height: 40px;
+  }
+`;
+
+const EOLBanner = () => (
+  <NavigationWrapper>
+    <span style={{ fontSize: '0.7rem' }}>
+      Provenance Explorer End of Life will be 22 May 2026. Please begin moving to{' '}
+      <a
+        href={`https://zonescan.io/${isProd ? 'provenance' : 'provenancetestnet'}/overview`}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecoration: 'underline', textAlign: 'center', color: 'white' }}
+      >
+        Zonescan
+      </a>
+      .
+    </span>
+  </NavigationWrapper>
+);
+
+export default EOLBanner;
@@ -7,6 +7,7 @@ import SearchBar from '../../SearchBar';
 import Sprite from '../../Sprite';
 import UserAccount from '../../UserAccount';
 import AnnouncementMenu from '../../AnnouncementMenu';
+import EOLBanner from './EOLBanner';
 
 const NavigationWrapper = styled.div`
   display: flex;
@@ -169,58 +170,61 @@ const NavMini = () => {
   };
 
   return (
-    <NavigationWrapper>
-      <InnerWrapper>
-        <Hamburger>
+    <>
+      <EOLBanner />
+      <NavigationWrapper>
+        <InnerWrapper>
+          <Hamburger>
+            <Sprite
+              icon="MENU"
+              onClick={toggleMenu}
+              size="1.875rem"
+              color={showMenu ? 'ICON_PRIMARY' : 'ICON_WHITE'}
+            />
+          </Hamburger>
+          <LogoLink to={Path.HOME_URL} title="Provenance Blockchain Explorer | Home">
+            <Sprite icon="LOGO" height="32px" />
+          </LogoLink>
           <Sprite
-            icon="MENU"
-            onClick={toggleMenu}
+            icon="SEARCH"
+            onClick={toggleSearch}
             size="1.875rem"
-            color={showMenu ? 'ICON_PRIMARY' : 'ICON_WHITE'}
+            color={showSearch ? 'ICON_PRIMARY' : 'ICON_WHITE'}
           />
-        </Hamburger>
-        <LogoLink to={Path.HOME_URL} title="Provenance Blockchain Explorer | Home">
-          <Sprite icon="LOGO" height="32px" />
-        </LogoLink>
-        <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>
+    </>
   );
 };
 

@@ -10,7 +10,7 @@ import Toggle from '../../Toggle';
 import UserAccount from '../../UserAccount';
 import AnnouncementMenu from '../../AnnouncementMenu';
 import NavHeaders from './NavHeaders';
-import Button from '../../Button';
+import EOLBanner from './EOLBanner';
 
 const NavigationWrapper = styled.div`
   display: flex;
@@ -59,6 +59,7 @@ const NavStandard = () => {
 
   return (
     <>
+      <EOLBanner />
       <NavigationWrapper>
         <Link to={Path.HOME_URL} title="Provenance Blockchain Explorer | Home">
           <Sprite icon="LOGO" height="32px" />