1  import { ChainId } from '@aave/contract-helpers';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Button, useMediaQuery, useTheme } from '@mui/material';
  4  import { useRouter } from 'next/router';
  5  import { ROUTES } from 'src/components/primitives/Link';
  6  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
  7  import { useRootStore } from 'src/store/root';
  8  import { AUTH } from 'src/utils/mixPanelEvents';
  9  
 10  import { BorrowAssetsList } from './lists/BorrowAssetsList/BorrowAssetsList';
 11  import { BorrowedPositionsList } from './lists/BorrowedPositionsList/BorrowedPositionsList';
 12  import { SuppliedPositionsList } from './lists/SuppliedPositionsList/SuppliedPositionsList';
 13  import { SupplyAssetsList } from './lists/SupplyAssetsList/SupplyAssetsList';
 14  
 15  interface DashboardContentWrapperProps {
 16    isBorrow: boolean;
 17  }
 18  
 19  export const DashboardContentWrapper = ({ isBorrow }: DashboardContentWrapperProps) => {
 20    const { breakpoints } = useTheme();
 21    const { currentAccount } = useWeb3Context();
 22    const router = useRouter();
 23    const trackEvent = useRootStore((store) => store.trackEvent);
 24  
 25    const currentMarketData = useRootStore((store) => store.currentMarketData);
 26    const isDesktop = useMediaQuery(breakpoints.up('lg'));
 27    const paperWidth = isDesktop ? 'calc(50% - 8px)' : '100%';
 28  
 29    const downToLg = useMediaQuery(breakpoints.down('lg'));
 30  
 31    return (
 32      <Box>
 33        {currentMarketData.chainId === ChainId.polygon && !currentMarketData.v3}
 34        <Box
 35          sx={{
 36            display: isDesktop ? 'flex' : 'block',
 37            justifyContent: 'space-between',
 38            alignItems: 'flex-start',
 39          }}
 40        >
 41          <Box
 42            sx={{
 43              position: 'relative',
 44  
 45              display: { xs: isBorrow ? 'none' : 'block', lg: 'block' },
 46              width: paperWidth,
 47            }}
 48          >
 49            {currentAccount && !isBorrow && downToLg && (
 50              <Box
 51                sx={{
 52                  position: { xs: 'static', md: 'relative' },
 53                  display: 'flex',
 54                  justifyContent: 'flex-end',
 55                  mb: { xs: 2, md: 0 },
 56                }}
 57              >
 58                <Button
 59                  sx={{
 60                    position: { xs: 'static', md: 'absolute' },
 61                    top: { xs: 'auto', md: '-130px' },
 62                    right: { xs: 'auto', md: '0px' },
 63                  }}
 64                  onClick={() => {
 65                    router.push(ROUTES.history);
 66                    trackEvent(AUTH.VIEW_TX_HISTORY);
 67                  }}
 68                  component="a"
 69                  variant="surface"
 70                  size="small"
 71                >
 72                  <Trans>View Transactions</Trans>
 73                </Button>
 74              </Box>
 75            )}
 76  
 77            <SuppliedPositionsList />
 78            <SupplyAssetsList />
 79          </Box>
 80  
 81          <Box
 82            sx={{
 83              position: 'relative',
 84  
 85              display: { xs: !isBorrow ? 'none' : 'block', lg: 'block' },
 86              width: paperWidth,
 87            }}
 88          >
 89            {currentAccount && (
 90              <Box
 91                sx={{
 92                  position: { xs: 'static', md: 'absolute' },
 93                  top: { xs: 'auto', md: downToLg ? '-130px' : '-90px' },
 94                  right: { xs: 'auto', md: '0px' },
 95                  mb: { xs: 2, md: 0 },
 96                }}
 97              >
 98                <Button
 99                  onClick={() => {
100                    router.push(ROUTES.history);
101                    trackEvent(AUTH.VIEW_TX_HISTORY);
102                  }}
103                  component="a"
104                  variant="surface"
105                  size="small"
106                >
107                  <Trans>View Transactions</Trans>
108                </Button>
109              </Box>
110            )}
111  
112            <BorrowedPositionsList />
113            <BorrowAssetsList />
114          </Box>
115        </Box>
116      </Box>
117    );
118  };