1  import { Trans } from '@lingui/macro';
  2  import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
  3  import { ReactNode } from 'react';
  4  import { ListColumn } from 'src/components/lists/ListColumn';
  5  import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle';
  6  import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper';
  7  import { ListWrapper } from 'src/components/lists/ListWrapper';
  8  import { Link, ROUTES } from 'src/components/primitives/Link';
  9  import { Warning } from 'src/components/primitives/Warning';
 10  import { useRootStore } from 'src/store/root';
 11  import { IsolatedReserve } from 'src/store/v3MigrationSelectors';
 12  import { useShallow } from 'zustand/shallow';
 13  
 14  import { MigrationMobileList } from './MigrationMobileList';
 15  import { MigrationSelectionBox } from './MigrationSelectionBox';
 16  
 17  const supplyListHeaders = [
 18    { title: <Trans>APY change</Trans> },
 19    { title: <Trans>Collateral change</Trans> },
 20    { title: <Trans>Max LTV</Trans> },
 21    { title: <Trans>Current v2 balance</Trans> },
 22  ];
 23  
 24  const borrowListHeaders = [
 25    { title: <Trans>APY change</Trans> },
 26    { title: <Trans>APY type change</Trans> },
 27    { title: <Trans>Liquidation Threshold</Trans> },
 28    { title: <Trans>Current v2 balance</Trans> },
 29  ];
 30  
 31  interface MigrationListProps {
 32    titleComponent: ReactNode;
 33    children: ReactNode;
 34    onSelectAllClick: () => void;
 35    loading?: boolean;
 36    isAvailable: boolean;
 37    withCollateral?: boolean;
 38    withBorrow?: boolean;
 39    emodeCategoryId?: number;
 40    allSelected: boolean;
 41    numSelected: number;
 42    numAvailable: number;
 43    disabled: boolean;
 44    isolatedReserveV3?: IsolatedReserve;
 45  }
 46  
 47  export const MigrationList = ({
 48    titleComponent,
 49    children,
 50    onSelectAllClick,
 51    loading,
 52    isAvailable,
 53    withCollateral,
 54    withBorrow,
 55    allSelected,
 56    numSelected,
 57    numAvailable,
 58    disabled,
 59    isolatedReserveV3,
 60  }: MigrationListProps) => {
 61    const theme = useTheme();
 62    const [currentMarket, currentMarketData] = useRootStore(
 63      useShallow((store) => [store.currentMarket, store.currentMarketData])
 64    );
 65    const marketName = currentMarketData.marketTitle;
 66    const marketLink = ROUTES.dashboard + '/?marketName=' + currentMarket + '_v3';
 67  
 68    const isMobile = useMediaQuery(theme.breakpoints.down(1125));
 69    if (isMobile) {
 70      return (
 71        <MigrationMobileList
 72          titleComponent={titleComponent}
 73          onSelectAllClick={onSelectAllClick}
 74          loading={loading}
 75          isAvailable={isAvailable}
 76          allSelected={allSelected}
 77          numSelected={numSelected}
 78          disabled={disabled}
 79          numAvailable={numAvailable}
 80        >
 81          {children}
 82        </MigrationMobileList>
 83      );
 84    }
 85  
 86    return (
 87      <Box sx={{ width: '100%' }}>
 88        <ListWrapper
 89          paperSx={{ border: 0, boxShadow: 'none' }}
 90          titleComponent={
 91            <Box display="block">
 92              <Typography component="div" variant="subheader2" sx={{ mr: 4 }}>
 93                {titleComponent}
 94              </Typography>
 95              {isolatedReserveV3 && !isolatedReserveV3.enteringIsolationMode && (
 96                <Box sx={{ pt: '16px' }}>
 97                  <Warning severity="warning" icon={false} sx={{ mb: 0 }}>
 98                    <Typography variant="caption" color={theme.palette.warning[100]}>
 99                      <Trans>
100                        Some migrated assets will not be used as collateral due to enabled isolation
101                        mode in {marketName} V3 Market. Visit{' '}
102                        <Link href={marketLink}>{marketName} V3 Dashboard</Link> to manage isolation
103                        mode.
104                      </Trans>
105                    </Typography>
106                  </Warning>
107                </Box>
108              )}
109            </Box>
110          }
111        >
112          {(isAvailable || loading) && (
113            <ListHeaderWrapper sx={{ pl: 0 }}>
114              <ListColumn align="center" maxWidth={64} minWidth={64}>
115                <MigrationSelectionBox
116                  allSelected={allSelected}
117                  numSelected={numSelected}
118                  onSelectAllClick={onSelectAllClick}
119                  disabled={disabled}
120                />
121              </ListColumn>
122  
123              <ListColumn isRow maxWidth={250} minWidth={170}>
124                <ListHeaderTitle>
125                  <Trans>Assets</Trans>
126                </ListHeaderTitle>
127              </ListColumn>
128  
129              {withCollateral &&
130                supplyListHeaders.map((header, index) => (
131                  <ListColumn key={index}>
132                    <ListHeaderTitle>{header.title}</ListHeaderTitle>
133                  </ListColumn>
134                ))}
135  
136              {withBorrow &&
137                borrowListHeaders.map((header, index) => (
138                  <ListColumn key={index}>
139                    <ListHeaderTitle>{header.title}</ListHeaderTitle>
140                  </ListColumn>
141                ))}
142            </ListHeaderWrapper>
143          )}
144  
145          {children}
146        </ListWrapper>
147      </Box>
148    );
149  };