Add ExpiringCFGRewardsBanner component to Header

tinlake-ui/components/ExpiringCFGRewardsBanner.tsx

@@ -0,0 +1,19 @@
+import { Anchor, Box, Card, Paragraph } from 'grommet'
+
+export const ExpiringCFGRewardsBanner = () => (
+  <Card
+    margin={{ top: 'medium' }}
+    pad={{ top: 'xsmall', bottom: 'xsmall', left: 'medium', right: 'medium' }}
+    style={{
+      backgroundColor: '#fff5da',
+    }}
+  >
+    <Box>
+      <Paragraph>
+        Claim your rewards until 29/01/2024 3:01pm CET. After this day, users will not be able to claim their CFG
+        rewards. Check <Anchor href="/rewards" label="here" /> if there are still unclaimed rewards. Read more{' '}
+        <Anchor href="https://gov.centrifuge.io/t/cp81-unclaimed-tinlake-rewards/5885/4" label="here" />.
+      </Paragraph>
+    </Box>
+  </Card>
+)

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 { ExpiringCFGRewardsBanner } from '../ExpiringCFGRewardsBanner'
 import { ExploreCentrifugeBanner } from '../ExploreCentrifugeBanner'
 import { RewardsBanner } from '../RewardsBanner'
 import { useTinlake } from '../TinlakeProvider'
@@ -258,6 +259,11 @@ const Header: React.FC<Props> = (props: Props) => {
         </MobileNav>
       </HeaderBar>
       {!props.hideRewardsBanner && <RewardsBanner />}
+      <Box justify="center" direction="row">
+        <Box width="xlarge">
+          <ExpiringCFGRewardsBanner />
+        </Box>
+      </Box>
       <Box justify="center" direction="row">
         <Box width="xlarge">
           <ExploreCentrifugeBanner />