From f895b13a4f30d5ba5982b2c3cc51cc91af1df358 Mon Sep 17 00:00:00 2001
From: Nam Nguyen <nam.nguyen@kyber.network>
Date: Fri, 28 Jul 2023 17:38:52 +0700
Subject: [PATCH] block click claiming

---
 src/components/WalletPopup/RewardCenter.tsx   |  5 ++--
 .../KyberDAO/KNCUtility/GasRefundBox.tsx      | 24 +++++++------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/components/WalletPopup/RewardCenter.tsx b/src/components/WalletPopup/RewardCenter.tsx
index 365d479a89..57b6720afe 100644
--- a/src/components/WalletPopup/RewardCenter.tsx
+++ b/src/components/WalletPopup/RewardCenter.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { ReactComponent as DollarIcon } from 'assets/svg/dollar.svg'
 import { ButtonPrimary } from 'components/Button'
+import Dots from 'components/Dots'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { useRewards } from 'hooks/useRewards'
 import useTheme from 'hooks/useTheme'
@@ -141,10 +142,10 @@ export default function RewardCenter() {
             padding="4px 15px"
             minWidth="unset"
             onClick={claimRewards}
-            disabled={!currentReward.knc || claiming}
+            disabled={claiming || !currentReward.knc}
           >
             <Text fontSize={14} fontWeight={500} lineHeight="20px">
-              <Trans>Claim</Trans>
+              {claiming ? <Trans>Claiming</Trans> : <Trans>Claim</Trans>}
             </Text>
           </ButtonPrimary>
         </Flex>
diff --git a/src/pages/KyberDAO/KNCUtility/GasRefundBox.tsx b/src/pages/KyberDAO/KNCUtility/GasRefundBox.tsx
index 5c123a6f4c..5fd91eb2d2 100644
--- a/src/pages/KyberDAO/KNCUtility/GasRefundBox.tsx
+++ b/src/pages/KyberDAO/KNCUtility/GasRefundBox.tsx
@@ -169,25 +169,19 @@ export default function GasRefundBox() {
             {selectedTab === KNCUtilityTabs.Available ? (
               account ? (
                 isSupportKyberDao(chainId) ? (
-                  claiming ? (
-                    <ButtonPrimary
-                      padding={upToXXSmall ? '8px 28px' : '8px 45px'}
-                      onClick={handleClaimReward}
-                      $disabled
-                    >
+                  <ButtonPrimary
+                    padding={upToXXSmall ? '8px 28px' : '8px 45px'}
+                    onClick={claiming ? undefined : handleClaimReward}
+                    disabled={claiming || (claimableReward?.knc ?? 0) <= 0}
+                  >
+                    {claiming ? (
                       <Dots>
                         <Trans>Claiming</Trans>
                       </Dots>
-                    </ButtonPrimary>
-                  ) : (
-                    <ButtonPrimary
-                      padding={upToXXSmall ? '8px 28px' : '8px 45px'}
-                      onClick={handleClaimReward}
-                      disabled={(claimableReward?.knc ?? 0) <= 0}
-                    >
+                    ) : (
                       <Trans>Claim</Trans>
-                    </ButtonPrimary>
-                  )
+                    )}
+                  </ButtonPrimary>
                 ) : (
                   <MouseoverTooltip
                     text={