From 7d1c2156f311cba16b50bcb380f3c9a1ae9a234c Mon Sep 17 00:00:00 2001
From: franciscotobar <100875069+franciscotobar@users.noreply.github.com>
Date: Wed, 4 Dec 2024 05:11:29 -0600
Subject: [PATCH] TOK-517: pause builder reward claim (#431)

* refactor: pause builder reward claim

* refactor: pr comments
---
 .../rewards/builders/ClaimableRewards.tsx     | 12 +++++--
 .../rewards/builders/Rewards.tsx              | 28 +++++++++++++---
 .../builders/hooks/useClaimBuilderRewards.ts  | 32 +++++++++++++++----
 .../components/ClaimYouRewardButton.tsx       |  7 ++--
 4 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/app/collective-rewards/rewards/builders/ClaimableRewards.tsx b/src/app/collective-rewards/rewards/builders/ClaimableRewards.tsx
index 8e3dfe8a..3e5f2d84 100644
--- a/src/app/collective-rewards/rewards/builders/ClaimableRewards.tsx
+++ b/src/app/collective-rewards/rewards/builders/ClaimableRewards.tsx
@@ -24,6 +24,7 @@ type TokenRewardsMetricsProps = {
 }
 
 const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
+  builder,
   gauge,
   token: { address, symbol },
   currency = 'USD',
@@ -46,7 +47,8 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
     currency,
   )
 
-  const { isClaimable, claimRewards } = useClaimBuilderRewardsPerToken(gauge, address)
+  const { isClaimable, claimRewards, isPaused } = useClaimBuilderRewardsPerToken(builder, gauge, address)
+  const content = isPaused ? 'You cannot be paused to claim rewards' : undefined
 
   return withSpinner(
     TokenMetricsCardRow,
@@ -55,7 +57,13 @@ const TokenRewardsMetrics: FC<TokenRewardsMetricsProps> = ({
     amount,
     fiatAmount,
     isLoading: rewardsLoading,
-    children: <ClaimYourRewardsButton onClick={() => claimRewards()} disabled={!isClaimable} />,
+    children: (
+      <ClaimYourRewardsButton
+        onClick={() => claimRewards()}
+        disabled={!isClaimable || isPaused}
+        content={content}
+      />
+    ),
   })
 }
 
diff --git a/src/app/collective-rewards/rewards/builders/Rewards.tsx b/src/app/collective-rewards/rewards/builders/Rewards.tsx
index 5b24c2ad..c74c3508 100644
--- a/src/app/collective-rewards/rewards/builders/Rewards.tsx
+++ b/src/app/collective-rewards/rewards/builders/Rewards.tsx
@@ -13,15 +13,17 @@ import { Button } from '@/components/Button'
 import { PricesContextProvider } from '@/shared/context/PricesContext'
 import { FC } from 'react'
 import { Address } from 'viem'
+import { Popover } from '@/components/Popover'
 
 type RewardsProps = RewardDetails & { gauge: Address }
 
 const RewardsContent: FC<RewardsProps> = props => {
   const {
+    builder,
     gauge,
     tokens: { rif, rbtc },
   } = props
-  const { isClaimable, claimRewards } = useClaimBuilderRewards(gauge, {
+  const { isClaimable, claimRewards, isPaused } = useClaimBuilderRewards(builder, gauge, {
     rif: rif.address,
     rbtc: rbtc.address,
   })
@@ -32,9 +34,27 @@ const RewardsContent: FC<RewardsProps> = props => {
         <div className="min-h-[190px] w-full">
           <BuilderClaimableRewards {...props} />
         </div>
-        <Button className="w-full" onClick={() => claimRewards()} disabled={!isClaimable} variant="primary">
-          Claim all
-        </Button>
+        <Popover
+          content={
+            <div className="text-[12px] font-bold mb-1">
+              <p data-testid="adjustBackerRewardPctTooltip">You cannot be paused to claim rewards</p>
+            </div>
+          }
+          className="w-full"
+          size="small"
+          position="top"
+          trigger="hover"
+          disabled={!isPaused}
+        >
+          <Button
+            className="w-full"
+            onClick={() => claimRewards()}
+            disabled={!isClaimable || isPaused}
+            variant="primary"
+          >
+            Claim all
+          </Button>
+        </Popover>
       </MetricContainer>
       <MetricContainer>
         <BuilderLastCycleRewards {...props} />
diff --git a/src/app/collective-rewards/rewards/builders/hooks/useClaimBuilderRewards.ts b/src/app/collective-rewards/rewards/builders/hooks/useClaimBuilderRewards.ts
index a823601a..f39035fb 100644
--- a/src/app/collective-rewards/rewards/builders/hooks/useClaimBuilderRewards.ts
+++ b/src/app/collective-rewards/rewards/builders/hooks/useClaimBuilderRewards.ts
@@ -3,9 +3,14 @@ import { GaugeAbi } from '@/lib/abis/v2/GaugeAbi'
 import { Address } from 'viem'
 import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi'
 import { useGetBuilderRewards } from '@/app/collective-rewards/rewards'
+import { useBuilderContext } from '@/app/collective-rewards/user'
 
-const useClaimBuilderReward = (gauge: Address, rewardToken?: Address) => {
+const useClaimBuilderReward = (builder: Address, gauge: Address, rewardToken?: Address) => {
   const { writeContractAsync, error: executionError, data: hash, isPending } = useWriteContract()
+  const { getBuilderByAddress } = useBuilderContext()
+
+  const claimingBuilder = getBuilderByAddress(builder)
+  const isPaused = claimingBuilder?.stateFlags?.paused ?? false
 
   const { isLoading, isSuccess, data, error: receiptError } = useWaitForTransactionReceipt({ hash })
 
@@ -33,6 +38,7 @@ const useClaimBuilderReward = (gauge: Address, rewardToken?: Address) => {
 
   return {
     claimRewards: () => claimBuilderReward(),
+    isPaused,
     error,
     isPendingTx: isPending,
     isLoadingReceipt: isLoading,
@@ -41,10 +47,22 @@ const useClaimBuilderReward = (gauge: Address, rewardToken?: Address) => {
   }
 }
 
-export const useClaimBuilderRewards = (gauge: Address, { rif, rbtc }: { rif: Address; rbtc: Address }) => {
-  const { error: claimBuilderRewardError, ...rest } = useClaimBuilderReward(gauge)
-  const { isClaimable: rifClaimable, error: claimRifError } = useClaimBuilderRewardsPerToken(gauge, rif)
-  const { isClaimable: rbtcClaimable, error: claimRbtcError } = useClaimBuilderRewardsPerToken(gauge, rbtc)
+export const useClaimBuilderRewards = (
+  builder: Address,
+  gauge: Address,
+  { rif, rbtc }: { rif: Address; rbtc: Address },
+) => {
+  const { error: claimBuilderRewardError, ...rest } = useClaimBuilderReward(builder, gauge)
+  const { isClaimable: rifClaimable, error: claimRifError } = useClaimBuilderRewardsPerToken(
+    builder,
+    gauge,
+    rif,
+  )
+  const { isClaimable: rbtcClaimable, error: claimRbtcError } = useClaimBuilderRewardsPerToken(
+    builder,
+    gauge,
+    rbtc,
+  )
 
   const isClaimable = rifClaimable || rbtcClaimable
   const error = claimBuilderRewardError ?? claimRifError ?? claimRbtcError
@@ -56,8 +74,8 @@ export const useClaimBuilderRewards = (gauge: Address, { rif, rbtc }: { rif: Add
   }
 }
 
-export const useClaimBuilderRewardsPerToken = (gauge: Address, rewardToken: Address) => {
-  const { error: claimBuilderRewardError, ...rest } = useClaimBuilderReward(gauge, rewardToken)
+export const useClaimBuilderRewardsPerToken = (builder: Address, gauge: Address, rewardToken: Address) => {
+  const { error: claimBuilderRewardError, ...rest } = useClaimBuilderReward(builder, gauge, rewardToken)
   const { data: rewards, isLoading, error: getBuilderRewardsError } = useGetBuilderRewards(rewardToken, gauge)
 
   const isClaimable = !isLoading && rewards !== 0n
diff --git a/src/app/collective-rewards/rewards/components/ClaimYouRewardButton.tsx b/src/app/collective-rewards/rewards/components/ClaimYouRewardButton.tsx
index e5c21e3c..426c8b8c 100644
--- a/src/app/collective-rewards/rewards/components/ClaimYouRewardButton.tsx
+++ b/src/app/collective-rewards/rewards/components/ClaimYouRewardButton.tsx
@@ -14,12 +14,15 @@ const ClaimYourRewardsSvg = () => (
   </svg>
 )
 
-export const ClaimYourRewardsButton: FC<Pick<ButtonProps, 'onClick' | 'disabled'>> = buttonProps => (
+export const ClaimYourRewardsButton: FC<Pick<ButtonProps, 'onClick' | 'disabled'> & { content?: string }> = ({
+  content,
+  ...buttonProps
+}) => (
   <div className="self-start justify-self-end pt-[10px]">
     <Popover
       content={
         <div className="text-[12px] font-bold mb-1">
-          <p data-testid="claimYouRewardsButtonTooltip">Claim your rewards</p>
+          <p data-testid="claimYouRewardsButtonTooltip">{content ?? 'Claim your rewards'}</p>
         </div>
       }
       size="small"