Merge pull request #1196 from interlay/rui/TC-hidden-AuthCta

fix: replace T&C hidden CTA to AuthCTA

src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx

@@ -5,8 +5,8 @@ import { useMutation } from 'react-query';
 import { toast } from 'react-toastify';
 
 import { formatUSD } from '@/common/utils/utils';
-import { Card, CTA, Dl, DlGroup } from '@/component-library';
-import { IsAuthenticated } from '@/components';
+import { Card, Dl, DlGroup } from '@/component-library';
+import { AuthCTA } from '@/components';
 import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils';
 import { submitExtrinsic } from '@/utils/helpers/extrinsic';
 import { AccountPoolsData } from '@/utils/hooks/api/amm/use-get-account-pools';
@@ -87,13 +87,11 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
           <StyledDt color='primary'>{t('rewards')}</StyledDt>
           <StyledDd color='secondary'>{formatUSD(totalClaimableRewardUSD, { compact: true })}</StyledDd>
         </DlGroup>
-        <IsAuthenticated>
-          {hasClaimableRewards && (
-            <CTA onClick={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
-              Claim
-            </CTA>
-          )}
-        </IsAuthenticated>
+        {hasClaimableRewards && (
+          <AuthCTA onPress={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
+            Claim
+          </AuthCTA>
+        )}
       </Card>
     </Dl>
   );

src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx

@@ -4,8 +4,8 @@ import { useMutation } from 'react-query';
 import { toast } from 'react-toastify';
 
 import { formatNumber, formatPercentage, formatUSD } from '@/common/utils/utils';
-import { Card, CTA, Dl, DlGroup } from '@/component-library';
-import { IsAuthenticated } from '@/components';
+import { Card, Dl, DlGroup } from '@/component-library';
+import { AuthCTA } from '@/components';
 import ErrorModal from '@/legacy-components/ErrorModal';
 import { submitExtrinsic } from '@/utils/helpers/extrinsic';
 import { AccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics';
@@ -75,13 +75,11 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => {
             <StyledDt color='primary'>Rewards</StyledDt>
             <StyledDd color='secondary'>{subsidyRewardsAmountLabel}</StyledDd>
           </DlGroup>
-          <IsAuthenticated>
-            {hasSubsidyRewards && (
-              <CTA onClick={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
-                Claim
-              </CTA>
-            )}
-          </IsAuthenticated>
+          {hasSubsidyRewards && (
+            <AuthCTA onPress={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
+              Claim
+            </AuthCTA>
+          )}
         </Card>
       </Dl>
       {claimRewardsMutation.isError && (

src/pages/Vaults/Vault/components/Rewards/Rewards.styles.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
-import { CTA, H2, theme } from '@/component-library';
+import { H2, theme } from '@/component-library';
+import { AuthCTA } from '@/components';
 
 const StyledRewardsTitleWrapper = styled.div`
   display: flex;
@@ -19,7 +20,7 @@ type StyledCTAProps = {
   $loading: boolean;
 };
 
-const StyledCTA = styled(CTA)<StyledCTAProps>`
+const StyledCTA = styled(AuthCTA)<StyledCTAProps>`
   position: relative;
   padding-left: ${(props) => props.$loading && theme.spacing.spacing8};
 `;

src/pages/Vaults/Vault/components/Rewards/Rewards.tsx

@@ -7,7 +7,6 @@ import { toast } from 'react-toastify';
 import { formatNumber, formatUSD } from '@/common/utils/utils';
 import { CardProps } from '@/component-library';
 import { LoadingSpinner } from '@/component-library/LoadingSpinner';
-import { IsAuthenticated } from '@/components';
 import { GOVERNANCE_TOKEN_SYMBOL, WRAPPED_TOKEN } from '@/config/relay-chains';
 import ErrorModal from '@/legacy-components/ErrorModal';
 import { ZERO_GOVERNANCE_TOKEN_AMOUNT } from '@/utils/constants/currency';
@@ -83,25 +82,23 @@ const Rewards = ({
   const stakingTitle = (
     <StyledRewardsTitleWrapper>
       <StyledStakingTitle>Rewards</StyledStakingTitle>
-      <IsAuthenticated>
-        {hasWithdrawRewardsBtn && (
-          <StyledCTA
-            size='small'
-            variant='outlined'
-            onClick={handleClickWithdrawRewards}
-            disabled={!hasWithdrawableRewards || claimRewardsMutation.isLoading}
-            $loading={claimRewardsMutation.isLoading}
-          >
-            {/* TODO: temporary approach. Loading spinner should be added to the CTA itself */}
-            {claimRewardsMutation.isLoading && (
-              <StyledLoadingSpinnerWrapper>
-                <LoadingSpinner variant='indeterminate' thickness={2} diameter={20} />
-              </StyledLoadingSpinnerWrapper>
-            )}
-            Withdraw all rewards
-          </StyledCTA>
-        )}
-      </IsAuthenticated>
+      {hasWithdrawRewardsBtn && (
+        <StyledCTA
+          size='small'
+          variant='outlined'
+          onClick={handleClickWithdrawRewards}
+          disabled={!hasWithdrawableRewards || claimRewardsMutation.isLoading}
+          $loading={claimRewardsMutation.isLoading}
+        >
+          {/* TODO: temporary approach. Loading spinner should be added to the CTA itself */}
+          {claimRewardsMutation.isLoading && (
+            <StyledLoadingSpinnerWrapper>
+              <LoadingSpinner variant='indeterminate' thickness={2} diameter={20} />
+            </StyledLoadingSpinnerWrapper>
+          )}
+          Withdraw all rewards
+        </StyledCTA>
+      )}
       {claimRewardsMutation.isError && (
         <ErrorModal
           open={claimRewardsMutation.isError}