Skip to content

Commit 33af445

Browse files
foodakafoodaka
committed
feat: move banner to hook
1 parent fcad203 commit 33af445

File tree

2 files changed

+156
-141
lines changed

2 files changed

+156
-141
lines changed

‎src/hooks/useBannerCampaigns.tsx‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import { ChainId } from '@aave/contract-helpers';
2+
import { useRouter } from 'next/router';
3+
import { useModalContext } from 'src/hooks/useModal';
4+
import { useRootStore } from 'src/store/root';
5+
import { CustomMarket } from 'src/ui-config/marketsConfig';
6+
import { useShallow } from 'zustand/shallow';
7+
8+
export interface CampaignConfig {
9+
notifyText: string;
10+
buttonText: string;
11+
buttonAction: ButtonAction;
12+
bannerVersion: string;
13+
icon: string;
14+
}
15+
16+
export type ButtonAction =
17+
| {
18+
type: 'route';
19+
value: string;
20+
}
21+
| {
22+
type: 'function';
23+
value: () => void;
24+
};
25+
26+
type CampaignChainId = ChainId.base | ChainId.mainnet | ChainId.arbitrum_one;
27+
28+
type CampaignConfigs = Partial<Record<CampaignChainId, CampaignConfig>>;
29+
30+
export type NetworkCampaigns = { [chainId: number]: CampaignConfig };
31+
32+
export const useBannerCampaigns = (chainId?: ChainId): NetworkCampaigns => {
33+
const router = useRouter();
34+
const [setCurrentMarket] = useRootStore(useShallow((store) => [store.setCurrentMarket]));
35+
const { openSwitch } = useModalContext();
36+
37+
const openMarket = (market: CustomMarket) => {
38+
setCurrentMarket(market);
39+
router.push(`/markets/?marketName=${market}`);
40+
};
41+
42+
const campaignConfigs: CampaignConfigs = {
43+
[ChainId.base]: {
44+
notifyText: 'A new incentives campaign is live on the Base market',
45+
buttonText: 'Explore Base',
46+
buttonAction: {
47+
type: 'route' as const,
48+
value: '/markets/?marketName=proto_base_v3',
49+
},
50+
bannerVersion: 'base-incentives-v1',
51+
icon: '/icons/networks/base.svg',
52+
},
53+
54+
// [ChainId.sonic]: {
55+
// notifyText: 'Swaps are now live on Sonic',
56+
// buttonText: 'Swap Now',
57+
// buttonAction: {
58+
// type: 'function' as const,
59+
// value: () => openSwitch('', ChainId.sonic),
60+
// },
61+
// bannerVersion: 'sonic-incentives-v1',
62+
// icon: '/icons/networks/sonic.svg',
63+
// },
64+
65+
[ChainId.mainnet]: {
66+
notifyText: 'The Plasma market is now live.',
67+
buttonText: 'Get Started',
68+
buttonAction: {
69+
type: 'function' as const,
70+
value: () => openMarket(CustomMarket.proto_plasma_v3),
71+
},
72+
bannerVersion: 'plasma-market-v0',
73+
icon: '/icons/networks/plasma.svg',
74+
},
75+
76+
// [ChainId.polygon]: {
77+
// notifyText: 'Swap tokens directly in the Aave App',
78+
// buttonText: 'Swap Now',
79+
// buttonAction: {
80+
// type: 'function' as const,
81+
// value: () => openSwitch('', ChainId.polygon),
82+
// },
83+
// bannerVersion: 'polygon-swap-v1',
84+
// icon: '/icons/networks/polygon.svg',
85+
// },
86+
87+
// [ChainId.avalanche]: {
88+
// notifyText: 'Swap tokens directly in the Aave App',
89+
// buttonText: 'Swap Now',
90+
// buttonAction: {
91+
// type: 'function' as const,
92+
// value: () => openSwitch('', ChainId.avalanche),
93+
// },
94+
// bannerVersion: 'avalanche-swap-v1',
95+
// icon: '/icons/networks/avalanche.svg',
96+
// },
97+
98+
[ChainId.arbitrum_one]: {
99+
notifyText: 'Limit orders are now live on Arbitrum',
100+
buttonText: 'Swap Now',
101+
buttonAction: {
102+
type: 'function' as const,
103+
value: () => openSwitch('', ChainId.arbitrum_one),
104+
},
105+
bannerVersion: 'arbitrum-swap-v1',
106+
icon: '/icons/networks/arbitrum.svg',
107+
},
108+
109+
// [ChainId.optimism]: {
110+
// notifyText: 'Swap tokens directly in the Aave App',
111+
// buttonText: 'Swap Now',
112+
// buttonAction: {
113+
// type: 'function' as const,
114+
// value: () => openSwitch('', ChainId.optimism),
115+
// },
116+
// bannerVersion: 'optimism-swap-v1',
117+
// icon: '/icons/networks/optimism.svg',
118+
// },
119+
120+
// [ChainId.xdai]: {
121+
// notifyText: 'Swap tokens directly in the Aave App',
122+
// buttonText: 'Swap Now',
123+
// buttonAction: {
124+
// type: 'function' as const,
125+
// value: () => openSwitch('', ChainId.xdai),
126+
// },
127+
// bannerVersion: 'gnosis-swap-v1',
128+
// icon: '/icons/networks/gnosis.svg',
129+
// },
130+
131+
// [ChainId.bnb]: {
132+
// notifyText: 'Swap tokens directly in the Aave App',
133+
// buttonText: 'Swap Now',
134+
// buttonAction: {
135+
// type: 'function' as const,
136+
// value: () => openSwitch('', ChainId.bnb),
137+
// },
138+
// bannerVersion: 'binance-swap-v1',
139+
// icon: '/icons/networks/binance.svg',
140+
// },
141+
};
142+
143+
const isCampaignChainId = (chainId: ChainId): chainId is CampaignChainId => {
144+
return chainId in campaignConfigs;
145+
};
146+
147+
if (!chainId || !isCampaignChainId(chainId)) {
148+
return {};
149+
}
150+
151+
return { [chainId]: campaignConfigs[chainId]! };
152+
};

‎src/layouts/MainLayout.tsx‎

Lines changed: 4 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { ChainId } from '@aave/contract-helpers';
22
import { Box } from '@mui/material';
3-
import { useRouter } from 'next/router';
43
import React, { ReactNode } from 'react';
54
import AnalyticsConsent from 'src/components/Analytics/AnalyticsConsent';
6-
import { useModalContext } from 'src/hooks/useModal';
5+
import { useBannerCampaigns } from 'src/hooks/useBannerCampaigns';
76
import { SupportModal } from 'src/layouts/SupportModal';
87
import { useRootStore } from 'src/store/root';
98
import { getQueryParameter } from 'src/store/utils/queryParams';
@@ -13,21 +12,7 @@ import { useShallow } from 'zustand/shallow';
1312

1413
import { AppFooter } from './AppFooter';
1514
import { AppHeader } from './AppHeader';
16-
import TopBarNotify, { ButtonAction } from './TopBarNotify';
17-
18-
interface CampaignConfig {
19-
notifyText: string;
20-
buttonText: string;
21-
buttonAction: ButtonAction;
22-
bannerVersion: string;
23-
icon: string;
24-
}
25-
26-
type CampaignChainId = ChainId.base | ChainId.mainnet | ChainId.arbitrum_one;
27-
28-
type CampaignConfigs = Partial<Record<CampaignChainId, CampaignConfig>>;
29-
30-
type NetworkCampaigns = { [chainId: number]: CampaignConfig };
15+
import TopBarNotify from './TopBarNotify';
3116

3217
const getIntendedChainId = (currentChainId?: ChainId): ChainId => {
3318
// Priority 1: currentChainId from store
@@ -53,133 +38,11 @@ const getIntendedChainId = (currentChainId?: ChainId): ChainId => {
5338
return ChainId.mainnet;
5439
};
5540

56-
const getCampaignConfigs = (
57-
openSwitch: (underlyingAsset: string, chainId: ChainId) => void,
58-
openMarket: (market: CustomMarket) => void
59-
): CampaignConfigs => ({
60-
[ChainId.base]: {
61-
notifyText: 'A new incentives campaign is live on the Base market',
62-
buttonText: 'Explore Base',
63-
buttonAction: {
64-
type: 'route' as const,
65-
value: '/markets/?marketName=proto_base_v3',
66-
},
67-
bannerVersion: 'base-incentives-v1',
68-
icon: '/icons/networks/base.svg',
69-
},
70-
71-
// [ChainId.sonic]: {
72-
// notifyText: 'Swaps are now live on Sonic',
73-
// buttonText: 'Swap Now',
74-
// buttonAction: {
75-
// type: 'function' as const,
76-
// value: () => openSwitch('', ChainId.sonic),
77-
// },
78-
// bannerVersion: 'sonic-incentives-v1',
79-
// icon: '/icons/networks/sonic.svg',
80-
// },
81-
82-
[ChainId.mainnet]: {
83-
notifyText: 'The Plasma market is now live.',
84-
buttonText: 'Get Started',
85-
buttonAction: {
86-
type: 'function' as const,
87-
value: () => openMarket(CustomMarket.proto_plasma_v3),
88-
},
89-
bannerVersion: 'plasma-market-v0',
90-
icon: '/icons/networks/plasma.svg',
91-
},
92-
93-
// [ChainId.polygon]: {
94-
// notifyText: 'Swap tokens directly in the Aave App',
95-
// buttonText: 'Swap Now',
96-
// buttonAction: {
97-
// type: 'function' as const,
98-
// value: () => openSwitch('', ChainId.polygon),
99-
// },
100-
// bannerVersion: 'polygon-swap-v1',
101-
// icon: '/icons/networks/polygon.svg',
102-
// },
103-
104-
// [ChainId.avalanche]: {
105-
// notifyText: 'Swap tokens directly in the Aave App',
106-
// buttonText: 'Swap Now',
107-
// buttonAction: {
108-
// type: 'function' as const,
109-
// value: () => openSwitch('', ChainId.avalanche),
110-
// },
111-
// bannerVersion: 'avalanche-swap-v1',
112-
// icon: '/icons/networks/avalanche.svg',
113-
// },
114-
115-
[ChainId.arbitrum_one]: {
116-
notifyText: 'Limit orders are now live on Arbitrum',
117-
buttonText: 'Swap Now',
118-
buttonAction: {
119-
type: 'function' as const,
120-
value: () => openSwitch('', ChainId.arbitrum_one),
121-
},
122-
bannerVersion: 'arbitrum-swap-v1',
123-
icon: '/icons/networks/arbitrum.svg',
124-
},
125-
126-
// [ChainId.optimism]: {
127-
// notifyText: 'Swap tokens directly in the Aave App',
128-
// buttonText: 'Swap Now',
129-
// buttonAction: {
130-
// type: 'function' as const,
131-
// value: () => openSwitch('', ChainId.optimism),
132-
// },
133-
// bannerVersion: 'optimism-swap-v1',
134-
// icon: '/icons/networks/optimism.svg',
135-
// },
136-
137-
// [ChainId.xdai]: {
138-
// notifyText: 'Swap tokens directly in the Aave App',
139-
// buttonText: 'Swap Now',
140-
// buttonAction: {
141-
// type: 'function' as const,
142-
// value: () => openSwitch('', ChainId.xdai),
143-
// },
144-
// bannerVersion: 'gnosis-swap-v1',
145-
// icon: '/icons/networks/gnosis.svg',
146-
// },
147-
148-
// [ChainId.bnb]: {
149-
// notifyText: 'Swap tokens directly in the Aave App',
150-
// buttonText: 'Swap Now',
151-
// buttonAction: {
152-
// type: 'function' as const,
153-
// value: () => openSwitch('', ChainId.bnb),
154-
// },
155-
// bannerVersion: 'binance-swap-v1',
156-
// icon: '/icons/networks/binance.svg',
157-
// },
158-
});
159-
16041
export function MainLayout({ children }: { children: ReactNode }) {
161-
const router = useRouter();
162-
const [setCurrentMarket, currentChainId] = useRootStore(
163-
useShallow((store) => [store.setCurrentMarket, store.currentChainId])
164-
);
165-
const { openSwitch } = useModalContext();
166-
167-
const openMarket = (market: CustomMarket) => {
168-
setCurrentMarket(market);
169-
router.push(`/markets/?marketName=${market}`);
170-
};
171-
172-
const campaignConfigs = getCampaignConfigs(openSwitch, openMarket);
42+
const [currentChainId] = useRootStore(useShallow((store) => [store.currentChainId]));
17343

17444
const intendedChainId = getIntendedChainId(currentChainId);
175-
176-
const isCampaignChainId = (chainId: ChainId): chainId is CampaignChainId => {
177-
return chainId in campaignConfigs;
178-
};
179-
180-
const filteredCampaigns: NetworkCampaigns = isCampaignChainId(intendedChainId)
181-
? { [intendedChainId]: campaignConfigs[intendedChainId]! }
182-
: {};
45+
const filteredCampaigns = useBannerCampaigns(intendedChainId);
18346

18447
return (
18548
<>

0 commit comments

Comments
 (0)