chore: sync main

Author: foodaka

src/components/incentives/IncentivesButton.tsx

@@ -132,6 +132,7 @@ export const MeritIncentivesButton = (params: {
   protocolAction?: ProtocolAction;
   protocolAPY?: number;
   protocolIncentives?: ReserveIncentiveResponse[];
+  hideValue?: boolean;
 }) => {
   const [open, setOpen] = useState(false);
   const { data: meritIncentives } = useMeritIncentives(params);
@@ -150,7 +151,11 @@ export const MeritIncentivesButton = (params: {
       setOpen={setOpen}
       open={open}
     >
-      <Content incentives={[meritIncentives]} incentivesNetAPR={displayValue} />
+      <Content
+        incentives={[meritIncentives]}
+        incentivesNetAPR={displayValue}
+        hideValue={params.hideValue}
+      />
     </ContentWithTooltip>
   );
 };
@@ -307,11 +312,13 @@ const Content = ({
   incentivesNetAPR,
   displayBlank,
   plus,
+  hideValue,
 }: {
   incentives: ReserveIncentiveResponse[];
   incentivesNetAPR: number | typeof INFINITY;
   displayBlank?: boolean;
   plus?: boolean;
+  hideValue?: boolean;
 }) => {
   const [open, setOpen] = useState(false);
   const trackEvent = useRootStore((store) => store.trackEvent);
@@ -341,7 +348,13 @@ const Content = ({
         incentive.rewardTokenSymbol?.toLowerCase().includes('agho') ||
         incentive.rewardTokenSymbol?.toLowerCase().includes('abasgho')
     );
-
+    if (hideValue && hasGhoIncentives) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <IncentivesIcon width="16" height="16" />
+        </Box>
+      );
+    }
     if (hasGhoIncentives) {
       if (incentivesNetAPR !== INFINITY && incentivesNetAPR < 10000) {
         return (

src/components/incentives/IncentivesCard.tsx

@@ -1,6 +1,7 @@
 import { ProtocolAction } from '@aave/contract-helpers';
 import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
 import { Box, Typography } from '@mui/material';
+import { useRouter } from 'next/router';
 import { ReactNode } from 'react';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
 import { useMerklIncentives } from 'src/hooks/useMerklIncentives';
@@ -45,6 +46,8 @@ export const IncentivesCard = ({
   protocolAction,
   inlineIncentives = false,
 }: IncentivesCardProps) => {
+  const router = useRouter();
+
   const protocolAPY = typeof value === 'string' ? parseFloat(value) : value;
 
   const protocolIncentivesAPR =
@@ -85,6 +88,10 @@ export const IncentivesCard = ({
     ? protocolAPY - (protocolIncentivesAPR as number) - meritIncentivesAPR - merklIncentivesAPR
     : protocolAPY + (protocolIncentivesAPR as number) + meritIncentivesAPR + merklIncentivesAPR;
 
+  const isSghoPage =
+    typeof router?.asPath === 'string' && router.asPath.toLowerCase().startsWith('/sgho');
+  const hideMeritValue = symbol === 'GHO' && !isSghoPage;
+
   const incentivesContent = (
     <>
       <IncentivesButton
@@ -95,13 +102,16 @@ export const IncentivesCard = ({
         protocolAPY={protocolAPY}
         address={address}
       />
+
       <MeritIncentivesButton
         symbol={symbol}
         market={market}
         protocolAction={protocolAction}
         protocolAPY={protocolAPY}
         protocolIncentives={incentives || []}
+        hideValue={hideMeritValue}
       />
+
       <MerklIncentivesButton
         market={market}
         rewardedAsset={address}

src/components/incentives/MeritIncentivesTooltipContent.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro';
 import { Box, Typography, useTheme } from '@mui/material';
 import {
   ExtendedReserveIncentiveResponse,
+  MeritAction,
   MeritIncentivesBreakdown,
 } from 'src/hooks/useMeritIncentives';
 
@@ -11,17 +12,66 @@ import { Row } from '../primitives/Row';
 import { TokenIcon } from '../primitives/TokenIcon';
 import { getSymbolMap } from './IncentivesTooltipContent';
 
+export enum CampaignType {
+  SELF_VERIFICATION = 'self_verification',
+  CELO_STANDARD = 'celo_standard',
+  STANDARD = 'standard',
+}
+interface CampaignConfig {
+  type: CampaignType;
+  title: string;
+  hasSpecialContent: boolean;
+}
+
+const isCeloAction = (action: MeritAction): boolean => {
+  return [
+    MeritAction.CELO_SUPPLY_CELO,
+    MeritAction.CELO_SUPPLY_USDT,
+    MeritAction.CELO_SUPPLY_USDC,
+    MeritAction.CELO_SUPPLY_WETH,
+    MeritAction.CELO_SUPPLY_MULTIPLE_BORROW_USDT,
+    MeritAction.CELO_BORROW_CELO,
+    MeritAction.CELO_BORROW_USDT,
+    MeritAction.CELO_BORROW_USDC,
+    MeritAction.CELO_BORROW_WETH,
+  ].includes(action);
+};
+const isSelfVerificationCampaign = (action: MeritAction): boolean =>
+  action === MeritAction.CELO_SUPPLY_USDT;
+
+const getCampaignConfig = (action: MeritAction): CampaignConfig => {
+  if (isSelfVerificationCampaign(action)) {
+    return {
+      type: CampaignType.SELF_VERIFICATION,
+      title: 'Eligible for Merit program and Boosted Yield via Self.',
+      hasSpecialContent: true,
+    };
+  }
+  if (isCeloAction(action)) {
+    return {
+      type: CampaignType.CELO_STANDARD,
+      title: 'Eligible for Merit program.',
+      hasSpecialContent: true,
+    };
+  }
+  return {
+    type: CampaignType.STANDARD,
+    title: 'Eligible for the Merit program.',
+    hasSpecialContent: false,
+  };
+};
+
 export const MeritIncentivesTooltipContent = ({
   meritIncentives,
 }: {
   meritIncentives: ExtendedReserveIncentiveResponse & { breakdown?: MeritIncentivesBreakdown };
 }) => {
   const theme = useTheme();
-
   const typographyVariant = 'secondary12';
-
   const meritIncentivesFormatted = getSymbolMap(meritIncentives);
 
+  const campaignConfig = getCampaignConfig(meritIncentives.action);
+
   return (
     <Box
       sx={{
@@ -44,7 +94,7 @@ export const MeritIncentivesTooltipContent = ({
       />
 
       <Typography variant="caption" color="text.primary" fontSize={13}>
-        <Trans>Eligible for the Merit program.</Trans>
+        <Trans>{campaignConfig.title}</Trans>
       </Typography>
 
       <Typography variant="caption" color="text.secondary">
@@ -66,6 +116,49 @@ export const MeritIncentivesTooltipContent = ({
         </Link>
       </Typography>
 
+      {campaignConfig.type === CampaignType.SELF_VERIFICATION && (
+        <>
+          <Typography variant="caption" color="text.secondary">
+            <Trans>
+              Supply USDT and double your yield by{' '}
+              <span>
+                <Link
+                  href="https://aave.self.xyz/"
+                  sx={{ textDecoration: 'underline' }}
+                  variant="caption"
+                  color="text.secondary"
+                >
+                  verifying your humanity through Self
+                </Link>
+              </span>{' '}
+              for the first $1,000 USDT supplied per user.
+            </Trans>{' '}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            <Trans>
+              Visit{' '}
+              <span>
+                <Link
+                  href="https://aave.self.xyz/"
+                  sx={{ textDecoration: 'underline' }}
+                  variant="caption"
+                  color="text.secondary"
+                >
+                  https://aave.self.xyz/
+                </Link>
+              </span>{' '}
+              to get started with Self’s ZK-powered proof-of-humanity authentication.
+            </Trans>{' '}
+          </Typography>
+        </>
+      )}
+      {/* Show if SpecialContent is needed */}
+      {/* {campaignConfig.type === CampaignType.SELF_VERIFICATION &&
+        campaignConfig.hasSpecialContent &&
+        ''} */}
+      {/* Show if SpecialContent is needed */}
+      {/* {campaignConfig.type === CampaignType.CELO_STANDARD && campaignConfig.hasSpecialContent && ''} */}
+
       {meritIncentives.customMessage ? (
         <Typography variant="caption" color="text.secondary">
           <Trans>{meritIncentives.customMessage}</Trans>

src/components/transactions/Bridge/BridgeModalContent.tsx

@@ -333,6 +333,7 @@ export const BridgeModalContent = () => {
       </Box>
 
       <ChangeNetworkWarning
+        autoSwitchOnMount={true}
         networkName={getNetworkConfig(sourceNetworkObj.chainId).name}
         chainId={sourceNetworkObj.chainId}
         event={{

src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx

@@ -152,7 +152,11 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo
     <>
       <TxModalTitle title="Claim rewards" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={currentChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={currentChainId}
+        />
       )}
 
       {blockingError !== undefined && (

src/components/transactions/Emode/EmodeModalContent.tsx

@@ -181,7 +181,11 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
     <>
       <TxModalTitle title={<Trans>Manage E-Mode</Trans>} />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={currentChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={currentChainId}
+        />
       )}
 
       <Typography variant="caption">

src/components/transactions/FlowCommons/ModalWrapper.tsx

@@ -84,6 +84,7 @@ export const ModalWrapper: React.FC<{
       )}
       {isWrongNetwork && !readOnlyModeAddress && (
         <ChangeNetworkWarning
+          autoSwitchOnMount={true}
           networkName={getNetworkConfig(requiredChainId).name}
           chainId={requiredChainId}
           event={{

src/components/transactions/GovDelegation/GovDelegationModalContent.tsx

@@ -153,7 +153,11 @@ export const GovDelegationModalContent: React.FC<GovDelegationModalContentProps>
     <>
       <TxModalTitle title={isRevokeModal ? 'Revoke power' : 'Set up delegation'} />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={govChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={govChain}
+        />
       )}
       {(isRevokeModal &&
         !!powers &&

src/components/transactions/GovRepresentatives/GovRepresentativesModalContent.tsx

@@ -96,7 +96,11 @@ export const GovRepresentativesContent = ({
         <TxModalTitle title="Edit address" />
       </Box>
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={govChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={govChain}
+        />
       )}
       <Stack direction="column" gap={2}>
         {reps.map((r, i) => (

src/components/transactions/GovVote/GovVoteModalContent.tsx

@@ -104,7 +104,11 @@ export const GovVoteModalContent = ({
     <>
       <TxModalTitle title="Governance vote" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={proposalVotingChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={proposalVotingChain}
+        />
       )}
       {blockingError !== undefined && (
         <Typography variant="helperText" color="red">