1  import { Trans } from '@lingui/macro';
  2  import { Box, Typography } from '@mui/material';
  3  import { useRouter } from 'next/router';
  4  import { useEffect, useState } from 'react';
  5  import StyledToggleButton from 'src/components/StyledToggleButton';
  6  import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
  7  import {
  8    ComputedReserveData,
  9    useAppDataContext,
 10  } from 'src/hooks/app-data-provider/useAppDataProvider';
 11  import { AssetCapsProvider } from 'src/hooks/useAssetCaps';
 12  import { MainLayout } from 'src/layouts/MainLayout';
 13  import { ReserveActions } from 'src/modules/reserve-overview/ReserveActions';
 14  import { ReserveConfigurationWrapper } from 'src/modules/reserve-overview/ReserveConfigurationWrapper';
 15  import { ReserveTopDetailsWrapper } from 'src/modules/reserve-overview/ReserveTopDetailsWrapper';
 16  import { useRootStore } from 'src/store/root';
 17  
 18  import { ContentContainer } from '../src/components/ContentContainer';
 19  
 20  export default function ReserveOverview() {
 21    const router = useRouter();
 22    const { reserves } = useAppDataContext();
 23    const underlyingAsset = router.query.underlyingAsset as string;
 24  
 25    const [mode, setMode] = useState<'overview' | 'actions' | ''>('overview');
 26    const trackEvent = useRootStore((store) => store.trackEvent);
 27  
 28    const reserve = reserves.find(
 29      (reserve) => reserve.underlyingAsset === underlyingAsset
 30    ) as ComputedReserveData;
 31  
 32    const [pageEventCalled, setPageEventCalled] = useState(false);
 33  
 34    useEffect(() => {
 35      if (!pageEventCalled && reserve && reserve.iconSymbol && underlyingAsset) {
 36        trackEvent('Page Viewed', {
 37          'Page Name': 'Reserve Overview',
 38          Reserve: reserve.iconSymbol,
 39          Asset: underlyingAsset,
 40        });
 41        setPageEventCalled(true);
 42      }
 43    }, [trackEvent, reserve, underlyingAsset, pageEventCalled]);
 44  
 45    const isOverview = mode === 'overview';
 46  
 47    return (
 48      <AssetCapsProvider asset={reserve}>
 49        <ReserveTopDetailsWrapper underlyingAsset={underlyingAsset} />
 50  
 51        <ContentContainer>
 52          <Box
 53            sx={{
 54              display: { xs: 'flex', lg: 'none' },
 55              justifyContent: { xs: 'center', xsm: 'flex-start' },
 56              mb: { xs: 3, xsm: 4 },
 57            }}
 58          >
 59            <StyledToggleButtonGroup
 60              color="primary"
 61              value={mode}
 62              exclusive
 63              onChange={(_, value) => setMode(value)}
 64              sx={{ width: { xs: '100%', xsm: '359px' }, height: '44px' }}
 65            >
 66              <StyledToggleButton value="overview" disabled={mode === 'overview'}>
 67                <Typography variant="subheader1">
 68                  <Trans>Overview</Trans>
 69                </Typography>
 70              </StyledToggleButton>
 71              <StyledToggleButton value="actions" disabled={mode === 'actions'}>
 72                <Typography variant="subheader1">
 73                  <Trans>Your info</Trans>
 74                </Typography>
 75              </StyledToggleButton>
 76            </StyledToggleButtonGroup>
 77          </Box>
 78  
 79          <Box sx={{ display: 'flex' }}>
 80            {/** Main status and configuration panel*/}
 81            <Box
 82              sx={{
 83                display: { xs: !isOverview ? 'none' : 'block', lg: 'block' },
 84                width: { xs: '100%', lg: 'calc(100% - 432px)' },
 85                mr: { xs: 0, lg: 4 },
 86              }}
 87            >
 88              <ReserveConfigurationWrapper reserve={reserve} />
 89            </Box>
 90  
 91            {/** Right panel with actions*/}
 92            <Box
 93              sx={{
 94                display: { xs: isOverview ? 'none' : 'block', lg: 'block' },
 95                width: { xs: '100%', lg: '416px' },
 96              }}
 97            >
 98              <ReserveActions reserve={reserve} />
 99            </Box>
100          </Box>
101        </ContentContainer>
102      </AssetCapsProvider>
103    );
104  }
105  
106  ReserveOverview.getLayout = function getLayout(page: React.ReactElement) {
107    return <MainLayout>{page}</MainLayout>;
108  };