From 17e72ccd8fd0221925c3a278b99a6f5ebcb8fb0f Mon Sep 17 00:00:00 2001
From: JP <jp@k-f.co>
Date: Mon, 25 Sep 2023 09:09:02 -0500
Subject: [PATCH] chore: add centrifuge banner (#37)

---
 .../components/ExploreCentrifugeBanner.tsx    | 18 +++++++++++++++++
 tinlake-ui/components/Header/index.tsx        |  6 ++++++
 tinlake-ui/pages/index.tsx                    | 20 +------------------
 3 files changed, 25 insertions(+), 19 deletions(-)
 create mode 100644 tinlake-ui/components/ExploreCentrifugeBanner.tsx

diff --git a/tinlake-ui/components/ExploreCentrifugeBanner.tsx b/tinlake-ui/components/ExploreCentrifugeBanner.tsx
new file mode 100644
index 000000000..2b4733a63
--- /dev/null
+++ b/tinlake-ui/components/ExploreCentrifugeBanner.tsx
@@ -0,0 +1,18 @@
+import { Anchor, Box, Card, Paragraph } from 'grommet'
+
+export const ExploreCentrifugeBanner = () => (
+  <Card
+    margin={{ top: 'medium' }}
+    pad={{ top: 'xsmall', bottom: 'xsmall', left: 'medium', right: 'medium' }}
+    style={{
+      backgroundColor: '#cde5ff',
+    }}
+  >
+    <Box>
+      <Paragraph>
+        Tinlake is no longer supported. Please proceed to the new Centrifuge app at{' '}
+        <Anchor href="https://app.centrifuge.io" label="app.centrifuge.io" />.
+      </Paragraph>
+    </Box>
+  </Card>
+)
diff --git a/tinlake-ui/components/Header/index.tsx b/tinlake-ui/components/Header/index.tsx
index cc2f19227..c46a1ee18 100644
--- a/tinlake-ui/components/Header/index.tsx
+++ b/tinlake-ui/components/Header/index.tsx
@@ -18,6 +18,7 @@ import { useCFGRewards } from '../../utils/useCFGRewards'
 import { usePool } from '../../utils/usePool'
 import { usePortfolio } from '../../utils/usePortfolio'
 import { ClientOnlyRender } from '../ClientOnlyRender'
+import { ExploreCentrifugeBanner } from '../ExploreCentrifugeBanner'
 import { RewardsBanner } from '../RewardsBanner'
 import { useTinlake } from '../TinlakeProvider'
 import { Tooltip } from '../Tooltip'
@@ -257,6 +258,11 @@ const Header: React.FC<Props> = (props: Props) => {
         </MobileNav>
       </HeaderBar>
       {!props.hideRewardsBanner && <RewardsBanner />}
+      <Box justify="center" direction="row">
+        <Box width="xlarge">
+          <ExploreCentrifugeBanner />
+        </Box>
+      </Box>
     </ClientOnlyRender>
   )
 }
diff --git a/tinlake-ui/pages/index.tsx b/tinlake-ui/pages/index.tsx
index 0c3638dd4..f3362a059 100644
--- a/tinlake-ui/pages/index.tsx
+++ b/tinlake-ui/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Box, Card, Paragraph } from 'grommet'
+import { Box } from 'grommet'
 import { GetStaticProps } from 'next'
 import * as React from 'react'
 import Auth from '../components/Auth'
@@ -14,23 +14,6 @@ interface Props {
   ipfsPools: IpfsPools
 }
 
-const ExploreCentrifugeBanner = () => (
-  <Card
-    margin={{ top: 'medium' }}
-    pad={{ top: 'xsmall', bottom: 'xsmall', left: 'medium', right: 'medium' }}
-    style={{
-      backgroundColor: '#cde5ff',
-    }}
-  >
-    <Box>
-      <Paragraph>
-        Tinlake is no longer supported. Please proceed to the new Centrifuge app at{' '}
-        <Anchor href="https://app.centrifuge.io" label="app.centrifuge.io" />.
-      </Paragraph>
-    </Box>
-  </Card>
-)
-
 const Home: React.FC<Props> = (props: Props) => {
   return (
     <IpfsPoolsProvider value={props.ipfsPools}>
@@ -41,7 +24,6 @@ const Home: React.FC<Props> = (props: Props) => {
             <Box justify="center" direction="row">
               <Box width="xlarge">
                 <Auth>
-                  <ExploreCentrifugeBanner />
                   <Dashboard ipfsPools={props.ipfsPools} />
                 </Auth>
               </Box>