From 7d0ce81ae8786ca234cab489eaa348d9b4a5e50f Mon Sep 17 00:00:00 2001
From: JP Angelle <jp@k-f.co>
Date: Thu, 18 Jan 2024 11:11:49 -0600
Subject: [PATCH 1/2] Add ExpiringCFGRewardsBanner component to Header

---
 .../components/ExpiringCFGRewardsBanner.tsx   | 19 +++++++++++++++++++
 tinlake-ui/components/Header/index.tsx        |  6 ++++++
 2 files changed, 25 insertions(+)
 create mode 100644 tinlake-ui/components/ExpiringCFGRewardsBanner.tsx

diff --git a/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx b/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx
new file mode 100644
index 00000000..bd872336
--- /dev/null
+++ b/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>
+)
diff --git a/tinlake-ui/components/Header/index.tsx b/tinlake-ui/components/Header/index.tsx
index c46a1ee1..3b8ec9a2 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 { 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 />

From a4c9ae7d9336b942e3e841157dc9d9db80322cea Mon Sep 17 00:00:00 2001
From: JP Angelle <jp@k-f.co>
Date: Thu, 18 Jan 2024 12:06:19 -0600
Subject: [PATCH 2/2] make dynamic with expiry

---
 .../components/ExpiringCFGRewardsBanner.tsx   | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx b/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx
index bd872336..d7eae1a2 100644
--- a/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx
+++ b/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx
@@ -1,19 +1,39 @@
 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>
-)
+export const ExpiringCFGRewardsBanner = () => {
+  const expirationDate = new Date('2024-01-29T15:01')
+  const currentDateCET = new Date().toLocaleString('en-US', { timeZone: 'CET' })
+  const currentDateCETMillis = new Date(currentDateCET).getTime()
+
+  const isExpired = currentDateCETMillis > expirationDate.getTime()
+
+  const formattedExpirationDate = `${expirationDate.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })} at ${expirationDate.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }).toLowerCase()}`
+
+  return (
+    <Card
+      margin={{ top: 'medium' }}
+      pad={{ top: 'xsmall', bottom: 'xsmall', left: 'medium', right: 'medium' }}
+      style={{
+        backgroundColor: '#fff5da',
+      }}
+    >
+      <Box>
+        <Paragraph>
+          {isExpired ? (
+            `CFG rewards expired on ${formattedExpirationDate} CET.`
+          ) : (
+            <>
+              Claim your rewards until {formattedExpirationDate} 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>
+  )
+}