MainLayout.tsx
1 import { Box } from '@mui/material'; 2 import React, { ReactNode } from 'react'; 3 import AnalyticsConsent from 'src/components/Analytics/AnalyticsConsent'; 4 import { FeedbackModal } from 'src/layouts/FeedbackDialog'; 5 import { useRootStore } from 'src/store/root'; 6 import { FORK_ENABLED } from 'src/utils/marketsAndNetworksConfig'; 7 8 import { AppFooter } from './AppFooter'; 9 import { AppHeader } from './AppHeader'; 10 import TopBarNotify from './TopBarNotify'; 11 12 const SwitchIcon = () => ( 13 <svg 14 xmlns="http://www.w3.org/2000/svg" 15 fill="none" 16 viewBox="0 0 24 24" 17 strokeWidth="1.5" 18 stroke="currentColor" 19 style={{ marginLeft: '8px', width: '24px', height: '24px' }} 20 > 21 <path 22 strokeLinecap="round" 23 strokeLinejoin="round" 24 d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" 25 /> 26 </svg> 27 ); 28 export function MainLayout({ children }: { children: ReactNode }) { 29 const APP_BANNER_VERSION = '6.0.0'; 30 const currentMarket = useRootStore((state) => state.currentMarket); 31 return ( 32 <> 33 {currentMarket === 'proto_base_v3' && ( 34 <TopBarNotify 35 // learnMoreLink="https://oh7vm38ynd2.typeform.com/to/Fnw3rMyw" 36 notifyText="Swap debt to GHO, now live on Base!" 37 bannerVersion={APP_BANNER_VERSION} 38 customIcon={<SwitchIcon />} 39 /> 40 )} 41 42 <AppHeader /> 43 <Box component="main" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}> 44 {children} 45 </Box> 46 47 <AppFooter /> 48 <FeedbackModal /> 49 {FORK_ENABLED ? null : <AnalyticsConsent />} 50 </> 51 ); 52 }