Rebrand banner in Desktop App. Closes #2004

main/utils.js

@@ -21,7 +21,9 @@ const allowedURLs = [
   'https://filstation.app/',
   'https://github.com/filecoin-station/spark',
   'https://beryx.io',
-  'https://pl-strflt.notion.site/Station-Terms-Conditions-e97da76bb89f49e280c2897aebe4c41f?pvs=4'
+  'https://pl-strflt.notion.site/Station-Terms-Conditions-e97da76bb89f49e280c2897aebe4c41f?pvs=4',
+  'https://checker.network',
+  'https://blog.checker.network/posts/why-web3-needs-the-checker-network'
 ].map(str => new URL(str))
 
 const allowedURLsRegEx = [

renderer/src/components/Layout.tsx

@@ -3,12 +3,14 @@ import Sidebar from 'src/components/Sidebar'
 import UpdateBanner from 'src/components/UpdateBanner'
 import WalletWidget from 'src/components/WalletWidget'
 import DraggableArea from 'src/components/DraggableArea'
+import RebrandBanner from 'src/components/RebrandBanner'
 
 const Layout = ({ children }: {children: ReactNode}) => {
   return (
     <div className='h-screen w-screen overflow-x-hidden flex relative app-bg'>
       <DraggableArea />
       <Sidebar />
+      <RebrandBanner />
       <WalletWidget />
       <div className='w-full flex flex-wrap justify-end absolute'>
         <UpdateBanner />

renderer/src/components/RebrandBanner.tsx

@@ -0,0 +1,36 @@
+import Text from './Text'
+import { useState } from 'react'
+import CloseIcon from 'src/assets/img/icons/close.svg?react'
+import { openExternalURL } from 'src/lib/station-config'
+import { useLocation } from 'react-router'
+import { ROUTES } from 'src/lib/routes'
+
+const RebrandBanner = () => {
+  const { pathname } = useLocation()
+  const [visible, setVisible] = useState<boolean>(true)
+
+  if (!visible) {
+    return null
+  }
+
+  if (pathname === ROUTES.wallet) {
+    return null
+  }
+
+  return (
+    <div className='absolute top-0 left-0 pl-28 pt-6 flex'>
+      <div className='bg-primary ml-1 p-6 pr-12 left-40 flex gap-5 rounded-lg'>
+        <Text font='mono' size='xs' className="text-white">🚨 Filecoin Station is becoming the Checker Network. <button onClick={() => openExternalURL('https://blog.checker.network/posts/why-web3-needs-the-checker-network')}><Text font='mono' size='xs' bold className="text-white underline" >Read more</Text></button></Text>
+        <button
+          className="absolute top-8 right-2"
+          onClick={() => setVisible(false)}
+        >
+          <CloseIcon color="white" />
+        </button>
+      </div>
+
+    </div>
+  )
+}
+
+export default RebrandBanner