chore: change verbiage of banner

centrifuge · Jan 19, 2024 · c57939a · c57939a
1 parent 41aa6a3
commit c57939a
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 11 deletions.
diff --git a/tinlake-ui/components/ExpiredCFGRewardsBanner.tsx b/tinlake-ui/components/ExpiredCFGRewardsBanner.tsx
@@ -0,0 +1,44 @@
+import { Anchor, Box, Card, Paragraph } from 'grommet'
+
+export const ExpiredCFGRewardsBanner = () => {
+  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()
+
+  if (isExpired) {
+    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', bottom: 'xsmall' }}
+        pad={{ top: 'xsmall', bottom: 'xsmall', left: 'medium', right: 'medium' }}
+        style={{
+          backgroundColor: '#fff5da',
+        }}
+      >
+        <Box>
+          <Paragraph>
+            The Tinlake Reward program has been discontinued by community vote. All unclaimed CFG rewards expired on{' '}
+            {formattedExpirationDate} CET and can no longer be collected. Read more about the community vote{' '}
+            <Anchor
+              href="https://gov.centrifuge.io/t/cp81-unclaimed-tinlake-rewards/5885/4"
+              label="here"
+              target="_blank"
+            />
+            .
+          </Paragraph>
+        </Box>
+      </Card>
+    )
+  }
+
+  return null
+}
diff --git a/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx b/tinlake-ui/components/ExpiringCFGRewardsBanner.tsx
@@ -7,6 +7,8 @@ export const ExpiringCFGRewardsBanner = () => {
 
   const isExpired = currentDateCETMillis > expirationDate.getTime()
 
+  if (isExpired) return null
+
   const formattedExpirationDate = `${expirationDate.toLocaleString('en-US', {
     month: 'short',
     day: 'numeric',
@@ -15,23 +17,24 @@ export const ExpiringCFGRewardsBanner = () => {
 
   return (
     <Card
-      margin={{ top: 'medium' }}
+      margin={{ top: 'medium', bottom: 'xsmall' }}
       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" />.
+          Claim your Tinlake Rewards before it is too late. Rewards will expire on {formattedExpirationDate} CET. After
+          the deadline, users will not be able to claim their CFG rewards. Check{' '}
+          <Anchor href="/rewards" label="here" target="_blank" /> if you have unclaimed rewards. Read more about the
+          community vote{' '}
+          <Anchor
+            href="https://gov.centrifuge.io/t/cp81-unclaimed-tinlake-rewards/5885/4"
+            label="here"
+            target="_blank"
+          />
+          .
         </Paragraph>
       </Box>
     </Card>

diff --git a/tinlake-ui/components/ExploreCentrifugeBanner.tsx b/tinlake-ui/components/ExploreCentrifugeBanner.tsx
@@ -2,7 +2,7 @@ import { Anchor, Box, Card, Paragraph } from 'grommet'
 
 export const ExploreCentrifugeBanner = () => (
   <Card
-    margin={{ top: 'medium' }}
+    margin={{ top: 'medium', bottom: 'xsmall' }}
     pad={{ top: 'xsmall', bottom: 'xsmall', left: 'medium', right: 'medium' }}
     style={{
       backgroundColor: '#cde5ff',

diff --git a/tinlake-ui/pages/rewards.tsx b/tinlake-ui/pages/rewards.tsx
@@ -4,6 +4,7 @@ import Head from 'next/head'
 import * as React from 'react'
 import Auth from '../components/Auth'
 import Container from '../components/Container'
+import { ExpiredCFGRewardsBanner } from '../components/ExpiredCFGRewardsBanner'
 import Header from '../components/Header'
 import { IpfsPoolsProvider } from '../components/IpfsPoolsProvider'
 import { TinlakeProvider } from '../components/TinlakeProvider'
@@ -28,6 +29,11 @@ const RewardsPage: React.FC<Props> = (props: Props) => {
             <title>CFG Rewards | Tinlake | Centrifuge</title>
           </Head>
           <Header selectedRoute={''} menuItems={[]} ipfsPools={props.ipfsPools} hideRewardsBanner />
+          <Box justify="center" direction="row">
+            <Box width="xlarge">
+              <ExpiredCFGRewardsBanner />
+            </Box>
+          </Box>
           <Container style={{ backgroundColor: '#f9f9f9' }}>
             <Box justify="center" direction="row">
               <Box width="xlarge">