/ src / layouts / MainLayout.tsx
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  }