feat: replace V4 announcement banner with permanent header button (aave#3089)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: sammdec

src/components/MarketSwitcher.tsx

@@ -183,7 +183,7 @@ const getMarketOrder = (marketId: CustomMarket): number => {
   return MARKET_ORDER_BY_TITLE[market.marketTitle] ?? 999;
 };
 
-const AAVE_PRO_URL = 'https://pro.aave.com/';
+export const AAVE_PRO_URL = 'https://pro.aave.com/';
 
 type V4Link = {
   id: string;

src/layouts/AppHeader.tsx

@@ -22,6 +22,7 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { AvatarSize } from 'src/components/Avatar';
 import { ContentWithTooltip } from 'src/components/ContentWithTooltip';
+import { AAVE_PRO_URL } from 'src/components/MarketSwitcher';
 import { UserDisplay } from 'src/components/UserDisplay';
 import { ConnectWalletButton } from 'src/components/WalletConnection/ConnectWalletButton';
 import { useModalContext } from 'src/hooks/useModal';
@@ -276,6 +277,25 @@ export function AppHeader() {
 
         <Box sx={{ flexGrow: 1 }} />
 
+        <NoSsr>
+          <Button
+            component={Link}
+            href={AAVE_PRO_URL}
+            variant="surface"
+            sx={{
+              p: '7px 8px',
+              minWidth: 'unset',
+              alignItems: 'center',
+              mr: 2,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            <Typography component="span" typography="subheader1">
+              {smd ? 'V4' : 'Aave V4'}
+            </Typography>
+          </Button>
+        </NoSsr>
+
         <NoSsr>
           <StyledBadge
             invisible={true}

src/layouts/MainLayout.tsx

@@ -1,4 +1,3 @@
-import { ChainId } from '@aave/contract-helpers';
 import { Box } from '@mui/material';
 import React, { ReactNode } from 'react';
 import AnalyticsConsent from 'src/components/Analytics/AnalyticsConsent';
@@ -10,125 +9,7 @@ import { AppFooter } from './AppFooter';
 import { AppHeader } from './AppHeader';
 import TopBarNotify from './TopBarNotify';
 
-const getCampaignConfigs = () => ({
-  [ChainId.base]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-  },
-
-  [ChainId.sonic]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/sonic.svg',
-  },
-
-  [ChainId.mainnet]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-  },
-
-  [ChainId.polygon]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/polygon.svg',
-  },
-
-  [ChainId.avalanche]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/avalanche.svg',
-  },
-
-  [ChainId.arbitrum_one]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/arbitrum.svg',
-  },
-
-  [ChainId.optimism]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/optimism.svg',
-  },
-
-  [ChainId.xdai]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/gnosis.svg',
-  },
-
-  [ChainId.bnb]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/binance.svg',
-  },
-
-  [ChainId.ink]: {
-    notifyText: 'Aave V4 is now live on Ethereum mainnet.',
-    buttonText: 'Try it out here',
-    buttonAction: {
-      type: 'url' as const,
-      value: 'https://pro.aave.com/',
-      target: '_blank' as const,
-    },
-    bannerVersion: 'aave-pro-mainnet-v1',
-    // icon: '/icons/networks/ink.svg',
-  },
-});
+const getCampaignConfigs = () => ({});
 
 // For defining Route specific campaigns if needed in future
 const routeCampaigns = {