fix: remove checkbox from staking rewards

derivexyz · Feb 9, 2023 · baae00b · baae00b
1 parent 255967b
commit baae00b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 38 deletions.
diff --git a/app/src/containers/rewards/ClaimStakingRewardsModal/ClaimStakingRewardsButton.tsx b/app/src/containers/rewards/ClaimStakingRewardsModal/ClaimStakingRewardsButton.tsx
@@ -1,7 +1,6 @@
 import ButtonShimmer from '@lyra/ui/components/Shimmer/ButtonShimmer'
 import React from 'react'
 
-import { ZERO_BN } from '@/app/constants/bn'
 import { TransactionType } from '@/app/constants/screen'
 import useTransaction from '@/app/hooks/account/useTransaction'
 import useWalletAccount from '@/app/hooks/account/useWalletAccount'
@@ -12,18 +11,16 @@ import { lyraOptimism } from '@/app/utils/lyra'
 import TransactionButton from '../../common/TransactionButton'
 
 type Props = {
-  isNewStkLyraChecked: boolean
   onClaim?: () => void
 }
 
 const ClaimButton = withSuspense(
-  ({ isNewStkLyraChecked, onClaim }: Props) => {
+  ({ onClaim }: Props) => {
     const owner = useWalletAccount()
     const account = lyraOptimism.account(owner ?? '')
     const execute = useTransaction('ethereum')
     const mutateClaimableBalance = useMutateClaimableBalancesL1()
     const claimableBalances = useClaimableBalancesL1()
-    const isSelectedBalanceZero = ZERO_BN.add(isNewStkLyraChecked ? claimableBalances.newStkLyra : ZERO_BN).isZero()
 
     const handleStkLyraClaim = async () => {
       const tx = await account.claimStakedLyraRewards()
@@ -44,8 +41,8 @@ const ClaimButton = withSuspense(
       <TransactionButton
         transactionType={TransactionType.ClaimStakedLyraRewards}
         network="ethereum"
-        label={!isNewStkLyraChecked ? 'Select Rewards' : 'Claim'}
-        isDisabled={isSelectedBalanceZero}
+        label="Claim"
+        isDisabled={claimableBalances.newStkLyra.isZero()}
         onClick={async () => await handleStkLyraClaim()}
       />
     )

diff --git a/app/src/containers/rewards/ClaimStakingRewardsModal/ClaimStakingRewardsModalContent.tsx b/app/src/containers/rewards/ClaimStakingRewardsModal/ClaimStakingRewardsModalContent.tsx
@@ -1,43 +1,29 @@
 import Box from '@lyra/ui/components/Box'
 import Card from '@lyra/ui/components/Card'
 import CardBody from '@lyra/ui/components/Card/CardBody'
-import Checkbox from '@lyra/ui/components/Input/Checkbox'
 import Spinner from '@lyra/ui/components/Spinner'
+import { MarginProps } from '@lyra/ui/types'
 import React from 'react'
 
 import RowItem from '@/app/components/common/RowItem'
 import TokenAmountText from '@/app/components/common/TokenAmountText'
 import withSuspense from '@/app/hooks/data/withSuspense'
 import useClaimableBalancesL1 from '@/app/hooks/rewards/useClaimableBalanceL1'
 
-type Props = {
-  isNewStkLyraChecked: boolean
-  onClickStkLyra: () => void
-}
+type Props = MarginProps
 
 const ClaimStakingRewardsModalContent = withSuspense(
-  ({ isNewStkLyraChecked, onClickStkLyra }: Props) => {
+  ({ ...styleProps }: Props) => {
     const claimableBalances = useClaimableBalancesL1()
     return (
-      <Box>
+      <Box {...styleProps} mb={4}>
         {claimableBalances.newStkLyra.gt(0) ? (
-          <Card
-            variant="nested"
-            mb={6}
-            onClick={onClickStkLyra}
-            sx={{
-              cursor: 'pointer',
-              ':hover': { bg: 'active' },
-            }}
-          >
+          <Card variant="nested">
             <CardBody>
               <RowItem
-                mb={3}
                 label="stkLyra Rewards"
-                value={<TokenAmountText tokenNameOrAddress="lyra" amount={claimableBalances.newStkLyra} mt={4} />}
-                textVariant="small"
+                value={<TokenAmountText tokenNameOrAddress="stkLyra" amount={claimableBalances.newStkLyra} />}
               />
-              <Checkbox checked={isNewStkLyraChecked} onToggle={onClickStkLyra} />
             </CardBody>
           </Card>
         ) : null}

diff --git a/app/src/containers/rewards/ClaimStakingRewardsModal/index.tsx b/app/src/containers/rewards/ClaimStakingRewardsModal/index.tsx
@@ -1,6 +1,6 @@
 import Modal from '@lyra/ui/components/Modal'
 import ModalBody from '@lyra/ui/components/Modal/ModalBody'
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 
 import withSuspense from '@/app/hooks/data/withSuspense'
 
@@ -13,20 +13,11 @@ type Props = {
 }
 
 const ClaimStakingRewardsModal = withSuspense(({ isOpen, onClose }: Props): JSX.Element => {
-  const [isNewStkLyraChecked, setIsStkLyraChecked] = useState(false)
-
-  const handleClickStkLyra = useCallback(() => {
-    setIsStkLyraChecked(!isNewStkLyraChecked)
-  }, [isNewStkLyraChecked])
-
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Claim Staking Rewards">
       <ModalBody>
-        <ClaimStakingRewardsModalContent
-          isNewStkLyraChecked={isNewStkLyraChecked}
-          onClickStkLyra={handleClickStkLyra}
-        />
-        <ClaimButton isNewStkLyraChecked={isNewStkLyraChecked} onClaim={onClose} />
+        <ClaimStakingRewardsModalContent />
+        <ClaimButton onClaim={onClose} />
       </ModalBody>
     </Modal>
   )