feat: banner campaigns (#2547)

Author: foodaka

src/layouts/MainLayout.tsx

@@ -10,38 +10,38 @@ import { AppFooter } from './AppFooter';
 import { AppHeader } from './AppHeader';
 import TopBarNotify from './TopBarNotify';
 
-// const SwitchIcon = () => (
-//   <svg
-//     xmlns="http://www.w3.org/2000/svg"
-//     fill="none"
-//     viewBox="0 0 24 24"
-//     strokeWidth="1.5"
-//     stroke="currentColor"
-//     style={{ marginLeft: '8px', width: '24px', height: '24px' }}
-//   >
-//     <path
-//       strokeLinecap="round"
-//       strokeLinejoin="round"
-//       d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
-//     />
-//   </svg>
-// );
+const getCampaignConfigs = (openSwitch: (token?: string, chainId?: number) => void) => ({
+  [ChainId.base]: {
+    notifyText: 'A new incentives campaign is live on the Base market',
+    buttonText: 'Explore Base',
+    buttonAction: {
+      type: 'route' as const,
+      value: '/markets/?marketName=proto_base_v3',
+    },
+    bannerVersion: 'base-incentives-v1',
+    icon: '/icons/networks/base.svg',
+  },
+
+  [ChainId.sonic]: {
+    notifyText: 'Swaps are now live on Sonic',
+    buttonText: 'Swap Now',
+    buttonAction: {
+      type: 'function' as const,
+      value: () => openSwitch('', ChainId.sonic),
+    },
+    bannerVersion: 'sonic-incentives-v1',
+    icon: '/icons/networks/sonic.svg',
+  },
+});
 
 export function MainLayout({ children }: { children: ReactNode }) {
-  const APP_BANNER_VERSION = '8.0.0';
   const { openSwitch } = useModalContext();
 
-  const handleLearnMore = () => {
-    openSwitch('', ChainId.sonic);
-  };
+  const campaignConfigs = getCampaignConfigs(openSwitch);
 
   return (
     <>
-      <TopBarNotify
-        learnMoreLink={handleLearnMore}
-        notifyText="Swaps are now live on Sonic"
-        bannerVersion={APP_BANNER_VERSION}
-      />
+      <TopBarNotify campaigns={campaignConfigs} />
 
       <AppHeader />
       <Box component="main" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>

src/layouts/TopBarNotify.tsx

@@ -6,60 +6,113 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import { useRouter } from 'next/router';
 import { ReactNode, useEffect, useState } from 'react';
 import { MarketLogo } from 'src/components/MarketSwitcher';
 import { Link } from 'src/components/primitives/Link';
 import { useRootStore } from 'src/store/root';
 
-interface TopBarNotifyProps {
+export type ButtonAction =
+  | { type: 'url'; value: string; target?: '_blank' | '_self' }
+  | { type: 'function'; value: () => void }
+  | { type: 'route'; value: string }
+  | { type: 'modal'; value: string; params?: Record<string, unknown> };
+
+interface CampaignConfig {
   notifyText: ReactNode;
   learnMoreLink?: string | (() => void);
   buttonText?: string;
+  buttonAction?: ButtonAction;
   bannerVersion: string;
   icon?: string;
   customIcon?: ReactNode;
 }
 
-export default function TopBarNotify({
-  notifyText,
-  learnMoreLink,
-  buttonText,
-  bannerVersion,
-  icon,
-  customIcon,
-}: TopBarNotifyProps) {
+interface NetworkCampaigns {
+  [chainId: number]: CampaignConfig;
+}
+
+interface TopBarNotifyProps {
+  campaigns: NetworkCampaigns;
+}
+
+export default function TopBarNotify({ campaigns }: TopBarNotifyProps) {
   const { breakpoints } = useTheme();
   const md = useMediaQuery(breakpoints.down('md'));
   const sm = useMediaQuery(breakpoints.down('sm'));
+  const router = useRouter();
+
+  const currentChainId = useRootStore((store) => store.currentChainId);
+  const mobileDrawerOpen = useRootStore((state) => state.mobileDrawerOpen);
+
+  const getCurrentCampaign = (): CampaignConfig | null => {
+    return campaigns[currentChainId] || null;
+  };
+
+  const currentCampaign = getCurrentCampaign();
 
   const [showWarning, setShowWarning] = useState(() => {
-    const storedBannerVersion = localStorage.getItem('bannerVersion');
-    const warningBarOpen = localStorage.getItem('warningBarOpen');
+    if (!currentCampaign) return false;
 
-    if (storedBannerVersion !== bannerVersion) {
+    const storedBannerVersion = localStorage.getItem(`bannerVersion_${currentChainId}`);
+    const warningBarOpen = localStorage.getItem(`warningBarOpen_${currentChainId}`);
+
+    if (storedBannerVersion !== currentCampaign.bannerVersion) {
       return true;
     }
 
     return warningBarOpen !== 'false';
   });
 
-  const mobileDrawerOpen = useRootStore((state) => state.mobileDrawerOpen);
-
   useEffect(() => {
-    const storedBannerVersion = localStorage.getItem('bannerVersion');
+    if (!currentCampaign) return;
 
-    if (storedBannerVersion !== bannerVersion) {
-      localStorage.setItem('bannerVersion', bannerVersion);
-      localStorage.setItem('warningBarOpen', 'true');
+    const storedBannerVersion = localStorage.getItem(`bannerVersion_${currentChainId}`);
+
+    if (storedBannerVersion !== currentCampaign.bannerVersion) {
+      localStorage.setItem(`bannerVersion_${currentChainId}`, currentCampaign.bannerVersion);
+      localStorage.setItem(`warningBarOpen_${currentChainId}`, 'true');
       setShowWarning(true);
     }
-  }, [bannerVersion]);
+  }, [currentCampaign, currentChainId]);
+
+  // If no campaign is configured for the current network, don't show anything
+  if (!currentCampaign) {
+    return null;
+  }
 
   const handleClose = () => {
-    localStorage.setItem('warningBarOpen', 'false');
+    localStorage.setItem(`warningBarOpen_${currentChainId}`, 'false');
     setShowWarning(false);
   };
 
+  const handleButtonAction = () => {
+    if (!currentCampaign.buttonAction) return;
+
+    switch (currentCampaign.buttonAction.type) {
+      case 'url':
+        if (currentCampaign.buttonAction.target === '_blank') {
+          window.open(currentCampaign.buttonAction.value, '_blank');
+        } else {
+          window.location.href = currentCampaign.buttonAction.value;
+        }
+        break;
+      case 'function':
+        currentCampaign.buttonAction.value();
+        break;
+      case 'route':
+        router.push(currentCampaign.buttonAction.value);
+        break;
+        // case 'modal':
+        //   console.log(
+        //     'Modal action:',
+        //     currentCampaign.buttonAction.value,
+        //     currentCampaign.buttonAction.params
+        //   );
+        break;
+    }
+  };
+
   // Note: hide warnings when mobile menu is open
   if (mobileDrawerOpen) return null;
 
@@ -92,20 +145,25 @@ export default function TopBarNotify({
               sx={{ display: 'flex', alignContent: 'center', alignItems: 'center' }}
               component="div"
             >
-              <Trans>{notifyText}</Trans>
+              <Trans>{currentCampaign.notifyText}</Trans>
 
-              {customIcon ? customIcon : null}
+              {currentCampaign.customIcon ? currentCampaign.customIcon : null}
 
-              {icon && !sm ? <MarketLogo sx={{ ml: 2 }} size={32} logo={icon} /> : ''}
+              {currentCampaign.icon && !sm ? (
+                <MarketLogo sx={{ ml: 2 }} size={32} logo={currentCampaign.icon} />
+              ) : (
+                ''
+              )}
 
-              {learnMoreLink && md ? (
-                typeof learnMoreLink === 'string' ? (
+              {currentCampaign.learnMoreLink && md ? (
+                typeof currentCampaign.learnMoreLink === 'string' ? (
                   <Link
                     sx={{ color: 'white', textDecoration: 'underline', paddingLeft: 2 }}
-                    // target={'_blank'} Todo option to pass as prop
-                    href={learnMoreLink}
+                    href={currentCampaign.learnMoreLink}
                   >
-                    <Trans>{buttonText ? buttonText : `Learn more`}</Trans>
+                    <Trans>
+                      {currentCampaign.buttonText ? currentCampaign.buttonText : `Learn more`}
+                    </Trans>
                   </Link>
                 ) : (
                   <Button
@@ -119,48 +177,32 @@ export default function TopBarNotify({
                       padding: 0,
                       marginLeft: 2,
                     }}
-                    onClick={learnMoreLink}
+                    onClick={currentCampaign.learnMoreLink}
                   >
-                    <Trans>{buttonText ? buttonText : `Swap Now`}</Trans>
+                    <Trans>
+                      {currentCampaign.buttonText ? currentCampaign.buttonText : `Learn more`}
+                    </Trans>
                   </Button>
                 )
               ) : null}
             </Typography>
           </Box>
 
           <Box>
-            {!md && learnMoreLink ? (
-              typeof learnMoreLink === 'string' ? (
-                <Button
-                  component="a"
-                  // target={'_blank'} Todo option to pass as prop
-                  size="small"
-                  href={learnMoreLink}
-                  sx={{
-                    minWidth: '90px',
-                    marginLeft: 5,
-                    height: '24px',
-                    background: '#383D51',
-                    color: '#EAEBEF',
-                  }}
-                >
-                  <Trans> {buttonText ? buttonText.toUpperCase() : `LEARN MORE`}</Trans>
-                </Button>
-              ) : (
-                <Button
-                  size="small"
-                  onClick={learnMoreLink}
-                  sx={{
-                    minWidth: '90px',
-                    marginLeft: 5,
-                    height: '24px',
-                    background: '#383D51',
-                    color: '#EAEBEF',
-                  }}
-                >
-                  <Trans> {buttonText ? buttonText.toUpperCase() : `Swap Now`}</Trans>
-                </Button>
-              )
+            {!md && currentCampaign.buttonText && currentCampaign.buttonAction ? (
+              <Button
+                size="small"
+                onClick={handleButtonAction}
+                sx={{
+                  minWidth: '90px',
+                  marginLeft: 5,
+                  height: '24px',
+                  background: '#383D51',
+                  color: '#EAEBEF',
+                }}
+              >
+                <Trans>{currentCampaign.buttonText.toUpperCase()}</Trans>
+              </Button>
             ) : null}
           </Box>
           <Button

src/locales/el/messages.js

@@ -1241,10 +1241,6 @@ msgstr "This represents the threshold at which a borrow position will be conside
 msgid "Isolated"
 msgstr "Isolated"
 
-#: src/layouts/TopBarNotify.tsx
-msgid "{notifyText}"
-msgstr "{notifyText}"
-
 #: src/components/transactions/Emode/EmodeActions.tsx
 msgid "Switching E-Mode"
 msgstr "Switching E-Mode"