feat: claim (#2702)

Author: foodaka

src/components/incentives/IncentivesButton.tsx

@@ -146,7 +146,12 @@ export const MeritIncentivesButton = (params: {
 
   return (
     <ContentWithTooltip
-      tooltipContent={<MeritIncentivesTooltipContent meritIncentives={meritIncentives} />}
+      tooltipContent={
+        <MeritIncentivesTooltipContent
+          meritIncentives={meritIncentives}
+          onClose={() => setOpen(false)}
+        />
+      }
       withoutHover
       setOpen={setOpen}
       open={open}

src/components/incentives/MeritIncentivesTooltipContent.tsx

@@ -6,9 +6,10 @@ import {
   MeritAction,
   MeritIncentivesBreakdown,
 } from 'src/hooks/useMeritIncentives';
+import { useModalContext } from 'src/hooks/useModal';
 
 import { FormattedNumber } from '../primitives/FormattedNumber';
-import { Link } from '../primitives/Link';
+import { Link, ROUTES } from '../primitives/Link';
 import { Row } from '../primitives/Row';
 import { TokenIcon } from '../primitives/TokenIcon';
 import { getSymbolMap } from './IncentivesTooltipContent';
@@ -99,16 +100,24 @@ const getCampaignConfig = (action: MeritAction): CampaignConfig => {
 
 export const MeritIncentivesTooltipContent = ({
   meritIncentives,
+  onClose,
 }: {
   meritIncentives: ExtendedReserveIncentiveResponse & {
     breakdown?: MeritIncentivesBreakdown;
     variants?: { selfAPY: number | null };
     activeActions: MeritAction[];
     actionMessages: Record<string, { customMessage?: string; customForumLink?: string }>;
   };
+  onClose?: () => void;
 }) => {
   const theme = useTheme();
+  const { openClaimRewards } = useModalContext();
   const typographyVariant = 'secondary12';
+
+  const handleClaimClick = () => {
+    openClaimRewards();
+    if (onClose) onClose();
+  };
   const meritIncentivesFormatted = getSymbolMap(meritIncentives);
   const isCombinedMeritIncentives: boolean = meritIncentives.activeActions.length > 1;
   const campaignConfig = getCampaignConfig(meritIncentives.action);
@@ -212,35 +221,81 @@ export const MeritIncentivesTooltipContent = ({
         </Typography>
       ) : null}
 
-      <Typography variant="caption" color="text.primary" fontSize={13} fontWeight={'600'}>
+      <Typography
+        variant="caption"
+        color="text.primary"
+        fontSize={13}
+        fontWeight={'600'}
+        sx={{ display: 'inline' }}
+      >
         {campaignConfig.type === CampaignType.SELF_VERIFICATION && selfConfig ? (
-          <Trans>Merit Program and Self rewards are claimed through the</Trans>
+          <>
+            <Trans>Merit Program and Self rewards can be claimed </Trans>
+            <Typography
+              component="span"
+              onClick={handleClaimClick}
+              sx={{
+                textDecoration: 'underline',
+                cursor: 'pointer',
+                fontSize: '13px !important',
+                fontWeight: 'bold',
+                mx: 0.5,
+              }}
+              variant="caption"
+              color="primary"
+            >
+              <Trans>here</Trans>
+            </Typography>
+            <Trans> or from the </Trans>
+            <Link
+              href={`${ROUTES.dashboard}`}
+              sx={{
+                textDecoration: 'underline',
+                fontWeight: 'bold',
+                cursor: 'pointer',
+                fontSize: '13px !important',
+                mx: 0.5,
+              }}
+              variant="caption"
+            >
+              <Trans>dashboard</Trans>
+            </Link>
+            .
+          </>
         ) : (
-          <Trans>Merit Program rewards are claimed through the</Trans>
+          <>
+            <Trans>Merit Program rewards can be claimed </Trans>
+            <Typography
+              component="span"
+              onClick={handleClaimClick}
+              sx={{
+                textDecoration: 'underline',
+                cursor: 'pointer',
+                fontSize: '13px !important',
+                fontWeight: 'bold',
+                mx: 0.5,
+              }}
+              variant="caption"
+              color="primary"
+            >
+              <Trans>here</Trans>
+            </Typography>
+            <Trans> or from the </Trans>
+            <Link
+              href={`${ROUTES.dashboard}`}
+              sx={{
+                textDecoration: 'underline',
+                fontWeight: 'bold !important',
+                cursor: 'pointer',
+                fontSize: '13px !important',
+                mx: 0.5,
+              }}
+              variant="caption"
+            >
+              <Trans>dashboard</Trans>
+            </Link>
+          </>
         )}
-
-        <Link
-          href={`https://apps.aavechan.com/merit/${meritIncentives.action}`}
-          sx={{ textDecoration: 'underline', ml: 1 }}
-          variant="caption"
-        >
-          <span
-            style={{
-              fontSize: '13px',
-              fontWeight: '600',
-            }}
-          >
-            {'Aave Chan Initiative interface'}
-          </span>
-        </Link>
-        <span
-          style={{
-            fontSize: '13px',
-            fontWeight: '600',
-          }}
-        >
-          {'.'}
-        </span>
       </Typography>
       <Box sx={{ width: '100%' }}>
         <Box>

src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx

@@ -245,7 +245,7 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo
   const handleBlocked = () => {
     switch (blockingError) {
       case ErrorType.NOT_ENOUGH_BALANCE:
-        return <Trans>Your reward balance is 0</Trans>;
+        return <Trans>You have no rewards to claim at this time.</Trans>;
       default:
         return null;
     }
@@ -377,11 +377,7 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo
         </Typography>
       )}
 
-      {blockingError !== undefined && (
-        <Typography variant="helperText" color="error.main">
-          {handleBlocked()}
-        </Typography>
-      )}
+      {blockingError !== undefined && <Typography>{handleBlocked()}</Typography>}
 
       {(rewards.length > 1 ||
         (rewards.length >= 1 &&

src/locales/el/messages.js

@@ -151,10 +151,6 @@ msgstr "Rate change"
 msgid "Sorry, we couldn't find the page you were looking for."
 msgstr "Sorry, we couldn't find the page you were looking for."
 
-#: src/components/incentives/MeritIncentivesTooltipContent.tsx
-msgid "Merit Program and Self rewards are claimed through the"
-msgstr "Merit Program and Self rewards are claimed through the"
-
 #: src/components/transactions/Switch/SwitchAssetInput.tsx
 msgid "Select token"
 msgstr "Select token"
@@ -380,6 +376,11 @@ msgstr "Terms"
 msgid "Maximum available to borrow"
 msgstr "Maximum available to borrow"
 
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+msgid "or from the"
+msgstr "or from the"
+
 #: src/components/transactions/DelegationTxsWrapper.tsx
 msgid "Sign to continue"
 msgstr "Sign to continue"
@@ -1592,6 +1593,11 @@ msgstr "Maximum amount available to borrow against this asset is limited because
 msgid "Email"
 msgstr "Email"
 
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+msgid "here"
+msgstr "here"
+
 #: src/modules/staking/StakingPanel.tsx
 #: src/modules/umbrella/UnstakeModal.tsx
 msgid "Unstake"
@@ -2141,6 +2147,10 @@ msgstr "Staked Underlying"
 msgid "Umbrella"
 msgstr "Umbrella"
 
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+msgid "Merit Program and Self rewards can be claimed"
+msgstr "Merit Program and Self rewards can be claimed"
+
 #: src/components/transactions/Switch/SwitchTxSuccessView.tsx
 msgid "The order could't be filled."
 msgstr "The order could't be filled."
@@ -2739,6 +2749,11 @@ msgstr "Claim"
 msgid "Liquidated collateral"
 msgstr "Liquidated collateral"
 
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+msgid "dashboard"
+msgstr "dashboard"
+
 #: src/components/transactions/Borrow/BorrowActions.tsx
 msgid "Borrowing {symbol}"
 msgstr "Borrowing {symbol}"
@@ -3253,10 +3268,6 @@ msgstr "The loan to value of the migrated positions would cause liquidation. Inc
 msgid "This asset has reached its borrow cap. Nothing is available to be borrowed from this market."
 msgstr "This asset has reached its borrow cap. Nothing is available to be borrowed from this market."
 
-#: src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx
-msgid "Your reward balance is 0"
-msgstr "Your reward balance is 0"
-
 #: src/modules/governance/DelegatedInfoPanel.tsx
 msgid "Set up delegation"
 msgstr "Set up delegation"
@@ -3593,6 +3604,10 @@ msgstr "Borrow amount to reach {0}% utilization"
 msgid "Please, connect your wallet"
 msgstr "Please, connect your wallet"
 
+#: src/components/incentives/MeritIncentivesTooltipContent.tsx
+msgid "Merit Program rewards can be claimed"
+msgstr "Merit Program rewards can be claimed"
+
 #: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx
 #: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx
 msgid "Your supplies"
@@ -3654,6 +3669,10 @@ msgstr "Custom slippage"
 msgid "This asset is eligible for Kernel points incentive program. Aave Labs does not guarantee the program and accepts no liability."
 msgstr "This asset is eligible for Kernel points incentive program. Aave Labs does not guarantee the program and accepts no liability."
 
+#: src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx
+msgid "You have no rewards to claim at this time."
+msgstr "You have no rewards to claim at this time."
+
 #: src/components/transactions/DebtSwitch/DebtSwitchModalContent.tsx
 msgid "Insufficient collateral to cover new borrow position. Wallet must have borrowing power remaining to perform debt switch."
 msgstr "Insufficient collateral to cover new borrow position. Wallet must have borrowing power remaining to perform debt switch."
@@ -3998,7 +4017,3 @@ msgstr "Asset is frozen in {marketName} v3 market, hence this position cannot be
 #: src/modules/migration/MigrationBottomPanel.tsx
 msgid "Be mindful of the network congestion and gas prices."
 msgstr "Be mindful of the network congestion and gas prices."
-
-#: src/components/incentives/MeritIncentivesTooltipContent.tsx
-msgid "Merit Program rewards are claimed through the"
-msgstr "Merit Program rewards are claimed through the"

src/locales/en/messages.js

@@ -251,7 +251,7 @@ export const DashboardTopPanel = () => {
           </TopInfoPanelItem>
         )}
 
-        {currentAccount && claimableRewardsUsd > 0 && (
+        {currentAccount && (
           <TopInfoPanelItem title={<Trans>Available rewards</Trans>} loading={loading} hideIcon>
             <Box
               sx={{