chore: add expiring cfg rewards banner (#1883)

* chore: add expiring cfg rewards banner

* use prod env temporarily

* move ExpiringCFGRewardsBanner inside DebugFlags component

* change verbiage

centrifuge-app/.env-config/.env.development

@@ -1,20 +1,20 @@
-REACT_APP_COLLATOR_WSS_URL=wss://fullnode.development.cntrfg.com
-REACT_APP_DEFAULT_NODE_URL=https://pod-development.k-f.dev
+REACT_APP_COLLATOR_WSS_URL=wss://fullnode.parachain.centrifuge.io
+REACT_APP_DEFAULT_NODE_URL=''
 REACT_APP_DEFAULT_UNLIST_POOLS=false
-REACT_APP_FAUCET_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/faucet-api-dev
+REACT_APP_FAUCET_URL=
 REACT_APP_IPFS_GATEWAY=https://centrifuge.mypinata.cloud/
-REACT_APP_IS_DEMO=false
+REACT_APP_IS_DEMO=
 REACT_APP_NETWORK=centrifuge
-REACT_APP_ONBOARDING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/onboarding-api-dev
-REACT_APP_PINNING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/pinning-api-dev
-REACT_APP_POOL_CREATION_TYPE=immediate
-REACT_APP_RELAY_WSS_URL=wss://fullnode-relay.development.cntrfg.com
-REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-development
+REACT_APP_ONBOARDING_API_URL=https://europe-central2-centrifuge-production-x.cloudfunctions.net/onboarding-api-production
+REACT_APP_PINNING_API_URL=https://europe-central2-centrifuge-production-x.cloudfunctions.net/pinning-api-production
+REACT_APP_POOL_CREATION_TYPE=propose
+REACT_APP_RELAY_WSS_URL=wss://rpc.polkadot.io
+REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-centrifuge
 REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
-REACT_APP_TINLAKE_NETWORK=goerli
+REACT_APP_TINLAKE_NETWORK=mainnet
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
-REACT_APP_WHITELISTED_ACCOUNTS=
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
-REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
+REACT_APP_WHITELISTED_ACCOUNTS=''
+REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-mainnet-production/latest.json
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kAJ27w29x7gHM75xajP2yXVLjVBaKmmUTxHwgRuCoAcWaoEiz
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn

centrifuge-app/src/components/ExpiringCFGRewardsBanner.tsx

@@ -0,0 +1,60 @@
+import { Banner, Text } from '@centrifuge/fabric'
+import * as React from 'react'
+import { useUserRewards } from '../utils/tinlake/useTinlakeRewards'
+
+export const ExpiringCFGRewardsBanner = () => {
+  const [isOpen, setIsOpen] = React.useState(true)
+  const { data } = useUserRewards()
+
+  const hasUnclaimedRewards = data?.links.some((link) => (link.claimable ? !link.claimable?.isZero() : false))
+  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()}`
+
+  if (!hasUnclaimedRewards || isExpired) {
+    return null
+  }
+
+  return (
+    <Banner
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      title={
+        <Text as="h3" color="textInverted" variant="heading5">
+          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{' '}
+          <Text
+            target="_blank"
+            as="a"
+            href="https://legacy.tinlake.centrifuge.io/rewards"
+            color="textInverted"
+            variant="heading5"
+            display="inline"
+            textDecoration="underline"
+          >
+            here
+          </Text>{' '}
+          if you have unclaimed rewards. Read more about the community vote{' '}
+          <Text
+            target="_blank"
+            as="a"
+            href="https://gov.centrifuge.io/t/cp81-unclaimed-tinlake-rewards/5885/4"
+            color="textInverted"
+            variant="heading5"
+            display="inline"
+            textDecoration="underline"
+          >
+            here
+          </Text>
+          .
+        </Text>
+      }
+    />
+  )
+}

centrifuge-app/src/components/Root.tsx

@@ -15,6 +15,7 @@ import PoolsPage from '../pages/Pools'
 import { pinToApi } from '../utils/pinToApi'
 import { DebugFlags, initialFlagsState } from './DebugFlags'
 import { DemoBanner } from './DemoBanner'
+import { ExpiringCFGRewardsBanner } from './ExpiringCFGRewardsBanner'
 import { GlobalStyle } from './GlobalStyle'
 import { Head } from './Head'
 import { LoadBoundary } from './LoadBoundary'
@@ -89,6 +90,7 @@ export function Root() {
                 <OnboardingAuthProvider>
                   <OnboardingProvider>
                     <DebugFlags onChange={(state) => setDebugState(state)}>
+                      <ExpiringCFGRewardsBanner />
                       <TransactionProvider>
                         <TransactionToasts />
                         <LoadBoundary>