From 733aa2a392d45832dab534214bc60cc6a81e7928 Mon Sep 17 00:00:00 2001
From: Antonio <antonio@iovlabs.org>
Date: Wed, 11 Dec 2024 11:02:12 +0100
Subject: [PATCH] feat: include text under rewards leaderboard

---
 .../leaderboard/BuilderLeaderBoard.tsx            | 14 +++++++++++---
 src/app/collective-rewards/rewards/MyRewards.tsx  | 13 ++-----------
 .../shared/components/CRWhitepaperLink.tsx        | 15 +++++++++++++++
 .../collective-rewards/shared/components/index.ts |  1 +
 4 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 src/app/collective-rewards/shared/components/CRWhitepaperLink.tsx

diff --git a/src/app/collective-rewards/leaderboard/BuilderLeaderBoard.tsx b/src/app/collective-rewards/leaderboard/BuilderLeaderBoard.tsx
index 40ce6f6d..0ce9d192 100644
--- a/src/app/collective-rewards/leaderboard/BuilderLeaderBoard.tsx
+++ b/src/app/collective-rewards/leaderboard/BuilderLeaderBoard.tsx
@@ -1,10 +1,11 @@
 import { CycleContextProvider } from '@/app/collective-rewards/metrics'
 import { Button } from '@/components/Button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/Collapsible'
-import { HeaderTitle } from '@/components/Typography'
+import { HeaderTitle, Paragraph } from '@/components/Typography'
 import { BuildersLeaderBoardContent } from '@/app/collective-rewards/leaderboard'
 import { useRouter } from 'next/navigation'
 import { useCanManageAllocations } from '@/app/collective-rewards/allocations/hooks'
+import { CRWhitepaperLink } from '../shared'
 
 export const BuildersLeaderBoard = () => {
   const router = useRouter()
@@ -17,9 +18,16 @@ export const BuildersLeaderBoard = () => {
   return (
     <>
       <Collapsible defaultOpen>
-        <CollapsibleTrigger>
+        <CollapsibleTrigger className="self-start pt-1">
           <div className="flex items-center justify-between w-full">
-            <HeaderTitle className="">Rewards leaderboard</HeaderTitle>
+            <div className="flex flex-col justify-center items-start gap-2 flex-1">
+              <HeaderTitle className="">Rewards leaderboard</HeaderTitle>
+              <Paragraph className="text-[14px] text-white font-rootstock-sans">
+                Select one or more Builders you want to back. You retain full ownership and access to your
+                stRIF while earning a portion of their rewards. For more information check the{' '}
+                <CRWhitepaperLink />.
+              </Paragraph>
+            </div>
             <Button variant="primary" onClick={onManageAllocations} disabled={!canManageAllocations}>
               Manage Allocations
             </Button>
diff --git a/src/app/collective-rewards/rewards/MyRewards.tsx b/src/app/collective-rewards/rewards/MyRewards.tsx
index 217b951b..741e8248 100644
--- a/src/app/collective-rewards/rewards/MyRewards.tsx
+++ b/src/app/collective-rewards/rewards/MyRewards.tsx
@@ -15,22 +15,13 @@ import { useRouter } from 'next/navigation'
 import { Link } from '@/components/Link'
 import { Builder } from '../types'
 import { useCanManageAllocations } from '@/app/collective-rewards/allocations/hooks'
+import { CRWhitepaperLink } from '../shared'
 
 const SubText = () => {
   return (
     <>
       Track and claim the rewards you earn from Collective Rewards. For more information check the{' '}
-      <Link
-        className="text-[#E56B1A]"
-        href={
-          'https://file.notion.so/f/f/5c274ed5-ccaa-43f3-9086-7ff7fed02299/2d5ab5ff-a08b-428f-b8ef-1fb642dcaf42/20241128_RootstockCollective_Rewards_Whitepaper_V1_0.pdf?table=block&id=14c1ca6b-0b02-8093-beba-c642396e4e09&spaceId=5c274ed5-ccaa-43f3-9086-7ff7fed02299&expirationTimestamp=1733918400000&signature=0fXpO_3zOse-KRipYdYjHuOFRMqBcbKy5gHR2T5yyZQ&downloadName=20241128_RootstockCollective_Rewards_Whitepaper_V1_0.pdf'
-        }
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Whitepaper
-      </Link>{' '}
-      .
+      <CRWhitepaperLink />.
     </>
   )
 }
diff --git a/src/app/collective-rewards/shared/components/CRWhitepaperLink.tsx b/src/app/collective-rewards/shared/components/CRWhitepaperLink.tsx
new file mode 100644
index 00000000..3ca9794b
--- /dev/null
+++ b/src/app/collective-rewards/shared/components/CRWhitepaperLink.tsx
@@ -0,0 +1,15 @@
+import { Link } from '@/components/Link'
+import { FC } from 'react'
+
+export const CRWhitepaperLink: FC = () => (
+  <Link
+    className="text-[#E56B1A]"
+    href={
+      'https://file.notion.so/f/f/5c274ed5-ccaa-43f3-9086-7ff7fed02299/2d5ab5ff-a08b-428f-b8ef-1fb642dcaf42/20241128_RootstockCollective_Rewards_Whitepaper_V1_0.pdf?table=block&id=14c1ca6b-0b02-8093-beba-c642396e4e09&spaceId=5c274ed5-ccaa-43f3-9086-7ff7fed02299&expirationTimestamp=1733918400000&signature=0fXpO_3zOse-KRipYdYjHuOFRMqBcbKy5gHR2T5yyZQ&downloadName=20241128_RootstockCollective_Rewards_Whitepaper_V1_0.pdf'
+    }
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Whitepaper
+  </Link>
+)
diff --git a/src/app/collective-rewards/shared/components/index.ts b/src/app/collective-rewards/shared/components/index.ts
index ca232de6..0c728bc2 100644
--- a/src/app/collective-rewards/shared/components/index.ts
+++ b/src/app/collective-rewards/shared/components/index.ts
@@ -1,2 +1,3 @@
 export * from './Table'
 export * from './Search'
+export * from './CRWhitepaperLink'