Merge pull request #818 from pangolindex/fix/header-apr

fix(header): apr warning

src/layout/index.tsx

@@ -1,12 +1,28 @@
 import React, { useState } from 'react'
 import { Outlet } from 'react-router-dom'
-import Header from './Header'
-import Sidebar from './Sidebar'
-import { Wrapper, MainContent, AppContent } from './styled'
-import Footer from './Footer'
+import HederaPoolWarning from 'src/components/Header/HederaPoolWarning'
 import URLWarning from 'src/components/Header/URLWarning'
+import styled from 'styled-components'
+import Footer from './Footer'
+import Header from './Header'
 import MobileMenu from './Header/MobileMenu'
-import HederaPoolWarning from 'src/components/Header/HederaPoolWarning'
+import Sidebar from './Sidebar'
+import { AppContent, MainContent, Wrapper } from './styled'
+
+const APRWarning = styled.div`
+  background-color: ${({ theme }) => theme.primary};
+  color: ${({ theme }) => theme.black};
+  padding: 10px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+`
+
+const APRWarningLink = styled.a`
+  color: ${({ theme }) => theme.black};
+  font-weight: 700;
+  text-decoration: underline;
+`
 
 const Layout: React.FC<unknown> = () => {
   const [isDrawerCollapsed, setIsDrawerCollapsed] = useState(true)
@@ -25,6 +41,14 @@ const Layout: React.FC<unknown> = () => {
     <Wrapper>
       <Sidebar collapsed={isDrawerCollapsed} onCollapsed={value => setIsDrawerCollapsed(value)} />
       <MainContent collapsed={isDrawerCollapsed}>
+        <APRWarning>
+          Please be advised that $PNG farming rewards have ceased and the APRs shown are inaccurate. Pangolin V3 will be
+          launching soon.{' '}
+          <APRWarningLink href="https://x.com/pangolindex/status/1788647901607985647" target="_blank" rel="noreferrer">
+            See more details here
+          </APRWarningLink>
+          .
+        </APRWarning>
         <URLWarning />
         <HederaPoolWarning />
         <Header activeMobileMenu={activeMobileMenu} handleMobileMenu={handleMobileMenu} />