Skip to content

feat: improve banner logic #2693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: improve banner logic #2693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7637fee
feat: improve banner logic
foodaka Oct 2, 2025
ce96b40
fix: banner improvements
foodaka Oct 2, 2025
d314847
chore: ux nit
foodaka Oct 2, 2025
d77ee89
fix: ux nits and simplify
foodaka Oct 2, 2025
fcad203
fix: nits
foodaka Oct 2, 2025
33af445
feat: move banner to hook
foodaka Oct 3, 2025
b2f5f50
chore: pr feedback
foodaka Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 152 additions & 0 deletions src/hooks/useBannerCampaigns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
import { ChainId } from '@aave/contract-helpers';
import { Trans } from '@lingui/macro';
import { useRouter } from 'next/router';
import { ReactNode } from 'react';
import { useModalContext } from 'src/hooks/useModal';
import { useRootStore } from 'src/store/root';
import { CustomMarket } from 'src/ui-config/marketsConfig';
import { useShallow } from 'zustand/shallow';

export interface CampaignConfig {
notifyText: ReactNode;
buttonText: ReactNode;
buttonAction: ButtonAction;
bannerVersion: string;
icon?: string;
}

export type ButtonAction =
| {
type: 'route';
value: string;
}
| {
type: 'function';
value: () => void;
};

type CampaignConfigs = Partial<Record<ChainId, CampaignConfig>>;

export type NetworkCampaigns = { [chainId: number]: CampaignConfig };

export const useBannerCampaigns = (chainId?: ChainId): NetworkCampaigns => {
const router = useRouter();
const [setCurrentMarket] = useRootStore(useShallow((store) => [store.setCurrentMarket]));
const { openSwitch } = useModalContext();

const openMarket = (market: CustomMarket) => {
setCurrentMarket(market);
router.push(`/markets/?marketName=${market}`);
};

const campaignConfigs: CampaignConfigs = {
[ChainId.base]: {
notifyText: <Trans>A new incentives campaign is live on the Base market</Trans>,
buttonText: <Trans>Explore Base</Trans>,
buttonAction: {
type: 'route' as const,
value: '/markets/?marketName=proto_base_v3',
},
bannerVersion: 'base-incentives-v1',
icon: '/icons/networks/base.svg',
},

// [ChainId.sonic]: {
// notifyText: <Trans>Swaps are now live on Sonic</Trans>,
// buttonText: <Trans>Swap Now</Trans>,
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.sonic),
// },
// bannerVersion: 'sonic-incentives-v1',
// icon: '/icons/networks/sonic.svg',
// },

[ChainId.mainnet]: {
notifyText: <Trans>The Plasma market is now live.</Trans>,
buttonText: <Trans>Get Started</Trans>,
buttonAction: {
type: 'function' as const,
value: () => openMarket(CustomMarket.proto_plasma_v3),
},
bannerVersion: 'plasma-market-v0',
icon: '/icons/networks/plasma.svg',
},

// [ChainId.polygon]: {
// notifyText: <Trans>Swap tokens directly in the Aave App</Trans>,
// buttonText: <Trans>Swap Now</Trans>,
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.polygon),
// },
// bannerVersion: 'polygon-swap-v1',
// icon: '/icons/networks/polygon.svg',
// },

// [ChainId.avalanche]: {
// notifyText: <Trans>Swap tokens directly in the Aave App</Trans>,
// buttonText: <Trans>Swap Now</Trans>,
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.avalanche),
// },
// bannerVersion: 'avalanche-swap-v1',
// icon: '/icons/networks/avalanche.svg',
// },

[ChainId.arbitrum_one]: {
notifyText: <Trans>Limit orders are now live on Arbitrum</Trans>,
buttonText: <Trans>Swap Now</Trans>,
buttonAction: {
type: 'function' as const,
value: () => openSwitch('', ChainId.arbitrum_one),
},
bannerVersion: 'arbitrum-swap-v1',
icon: '/icons/networks/arbitrum.svg',
},

// [ChainId.optimism]: {
// notifyText: <Trans>Swap tokens directly in the Aave App</Trans>,
// buttonText: <Trans>Swap Now</Trans>,
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.optimism),
// },
// bannerVersion: 'optimism-swap-v1',
// icon: '/icons/networks/optimism.svg',
// },

// [ChainId.xdai]: {
// notifyText: <Trans>Swap tokens directly in the Aave App</Trans>,
// buttonText: <Trans>Swap Now</Trans>,
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.xdai),
// },
// bannerVersion: 'gnosis-swap-v1',
// icon: '/icons/networks/gnosis.svg',
// },

// [ChainId.bnb]: {
// notifyText: <Trans>Swap tokens directly in the Aave App</Trans>,
// buttonText: <Trans>Swap Now</Trans>,
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.bnb),
// },
// bannerVersion: 'binance-swap-v1',
// icon: '/icons/networks/binance.svg',
// },
};

const isCampaignChainId = (chainId: ChainId): chainId is ChainId => {
return chainId in campaignConfigs;
};

if (!chainId || !isCampaignChainId(chainId)) {
return {};
}

return { [chainId]: campaignConfigs[chainId]! };
};
145 changes: 30 additions & 115 deletions src/layouts/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,137 +1,52 @@
import { ChainId } from '@aave/contract-helpers';
import { Box } from '@mui/material';
import { useRouter } from 'next/router';
import React, { ReactNode } from 'react';
import AnalyticsConsent from 'src/components/Analytics/AnalyticsConsent';
// import { useModalContext } from 'src/hooks/useModal';
import { useBannerCampaigns } from 'src/hooks/useBannerCampaigns';
import { SupportModal } from 'src/layouts/SupportModal';
import { useRootStore } from 'src/store/root';
import { CustomMarket } from 'src/ui-config/marketsConfig';
import { getQueryParameter } from 'src/store/utils/queryParams';
import { CustomMarket, marketsData } from 'src/ui-config/marketsConfig';
import { FORK_ENABLED } from 'src/utils/marketsAndNetworksConfig';
import { useShallow } from 'zustand/shallow';

import { AppFooter } from './AppFooter';
import { AppHeader } from './AppHeader';
import TopBarNotify from './TopBarNotify';

const getCampaignConfigs = (
// openSwitch: (underlyingAsset: string) => void,
openMarket: (market: CustomMarket) => 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',
// },

[ChainId.mainnet]: {
notifyText: 'The Plasma market is now live.',
buttonText: 'Get Started',
buttonAction: {
type: 'function' as const,
value: () => openMarket(CustomMarket.proto_plasma_v3),
},
bannerVersion: 'plasma-market-v0',
icon: '/icons/networks/plasma.svg',
},

// [ChainId.polygon]: {
// notifyText: 'Swap tokens directly in the Aave App',
// buttonText: 'Swap Now',
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.polygon),
// },
// bannerVersion: 'polygon-swap-v1',
// icon: '/icons/networks/polygon.svg',
// },

// [ChainId.avalanche]: {
// notifyText: 'Swap tokens directly in the Aave App',
// buttonText: 'Swap Now',
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.avalanche),
// },
// bannerVersion: 'avalanche-swap-v1',
// icon: '/icons/networks/avalanche.svg',
// },

// [ChainId.arbitrum_one]: {
// notifyText: 'Swap tokens directly in the Aave App',
// buttonText: 'Swap Now',
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.arbitrum_one),
// },
// bannerVersion: 'arbitrum-swap-v1',
// icon: '/icons/networks/arbitrum.svg',
// },

// [ChainId.optimism]: {
// notifyText: 'Swap tokens directly in the Aave App',
// buttonText: 'Swap Now',
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.optimism),
// },
// bannerVersion: 'optimism-swap-v1',
// icon: '/icons/networks/optimism.svg',
// },

// [ChainId.xdai]: {
// notifyText: 'Swap tokens directly in the Aave App',
// buttonText: 'Swap Now',
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.xdai),
// },
// bannerVersion: 'gnosis-swap-v1',
// icon: '/icons/networks/gnosis.svg',
// },

// [ChainId.bnb]: {
// notifyText: 'Swap tokens directly in the Aave App',
// buttonText: 'Swap Now',
// buttonAction: {
// type: 'function' as const,
// value: () => openSwitch('', ChainId.bnb),
// },
// bannerVersion: 'binance-swap-v1',
// icon: '/icons/networks/binance.svg',
// },
});
const getIntendedChainId = (currentChainId?: ChainId): ChainId => {
// Priority 1: URL params marketName
const urlMarket = getQueryParameter('marketName');
if (urlMarket && marketsData[urlMarket as CustomMarket]) {
return marketsData[urlMarket as CustomMarket].chainId;
}

// Priority 2: currentChainId from store
if (currentChainId) {
return currentChainId;
}

if (typeof window !== 'undefined') {
// Priority 3: localStorage selectedMarket
const selectedMarket = localStorage.getItem('selectedMarket');
if (selectedMarket && marketsData[selectedMarket as CustomMarket]) {
return marketsData[selectedMarket as CustomMarket].chainId;
}
}

// Priority 4: Default to mainnet
return ChainId.mainnet;
};

export function MainLayout({ children }: { children: ReactNode }) {
const router = useRouter();
const setCurrentMarket = useRootStore(useShallow((store) => store.setCurrentMarket));

const openMarket = (market: CustomMarket) => {
setCurrentMarket(market);
router.push(`/markets/?marketName=${market}`);
};
const [currentChainId] = useRootStore(useShallow((store) => [store.currentChainId]));

const campaignConfigs = getCampaignConfigs(openMarket);
const intendedChainId = getIntendedChainId(currentChainId);
const filteredCampaigns = useBannerCampaigns(intendedChainId);

return (
<>
<TopBarNotify campaigns={campaignConfigs} />
<TopBarNotify campaigns={filteredCampaigns} />

<AppHeader />
<Box component="main" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
Expand Down
Loading
Loading