1  import { Trans } from '@lingui/macro';
  2  import { Paper, Typography } from '@mui/material';
  3  import { ReactNode } from 'react';
  4  import {
  5    BorrowMigrationReserve,
  6    SupplyMigrationReserve,
  7  } from 'src/hooks/migration/useUserMigrationReserves';
  8  import { useRootStore } from 'src/store/root';
  9  import { computeSelections, IsolatedReserve } from 'src/store/v3MigrationSelectors';
 10  import { useShallow } from 'zustand/shallow';
 11  
 12  import { MigrationList } from './MigrationList';
 13  
 14  interface MigrationListsProps {
 15    onSelectAllSupplies: () => void;
 16    onSelectAllBorrows: () => void;
 17    suppliesPositions: ReactNode;
 18    borrowsPositions: ReactNode;
 19    loading?: boolean;
 20    isSupplyPositionsAvailable: boolean;
 21    isBorrowPositionsAvailable: boolean;
 22    emodeCategoryId?: number;
 23    isolatedReserveV3?: IsolatedReserve;
 24    supplyReserves: SupplyMigrationReserve[];
 25    borrowReserves: BorrowMigrationReserve[];
 26  }
 27  
 28  export const MigrationLists = ({
 29    onSelectAllSupplies,
 30    onSelectAllBorrows,
 31    suppliesPositions,
 32    borrowsPositions,
 33    loading,
 34    isolatedReserveV3,
 35    isSupplyPositionsAvailable,
 36    isBorrowPositionsAvailable,
 37    emodeCategoryId,
 38    supplyReserves,
 39    borrowReserves,
 40  }: MigrationListsProps) => {
 41    const [selectedSupplyAssets, selectedBorrowAssets] = useRootStore(
 42      useShallow((store) => [
 43        store.selectedMigrationSupplyAssets,
 44        store.selectedMigrationBorrowAssets,
 45      ])
 46    );
 47  
 48    const allSuppliesDisabled =
 49      supplyReserves.find((reserve) => reserve.migrationDisabled === undefined) === undefined;
 50    const allBorrowsDisabled =
 51      borrowReserves.find((reserve) => reserve.migrationDisabled === undefined) === undefined;
 52  
 53    const { activeSelections: activeSupplySelections, activeUnselected: activeSupplyUnselected } =
 54      computeSelections(supplyReserves, selectedSupplyAssets);
 55    const { activeSelections: activeBorrowSelections, activeUnselected: activeBorrowUnselected } =
 56      computeSelections(borrowReserves, selectedBorrowAssets);
 57  
 58    return (
 59      <Paper
 60        sx={{
 61          display: 'flex',
 62          flexDirection: 'column',
 63          gap: 2,
 64          width: '100%',
 65        }}
 66      >
 67        <Typography
 68          variant="h3"
 69          sx={{
 70            p: {
 71              xs: '16px 24px 0 24px',
 72            },
 73            display: { xs: 'none', lg: 'block' },
 74          }}
 75        >
 76          Assets to migrate
 77        </Typography>
 78        <MigrationList
 79          isolatedReserveV3={isolatedReserveV3}
 80          loading={loading}
 81          onSelectAllClick={onSelectAllSupplies}
 82          allSelected={activeSupplyUnselected.length === 0}
 83          isAvailable={isSupplyPositionsAvailable}
 84          titleComponent={<Trans>Supplied assets</Trans>}
 85          emodeCategoryId={emodeCategoryId}
 86          withCollateral
 87          disabled={allSuppliesDisabled}
 88          numSelected={activeSupplySelections.length || 0}
 89          numAvailable={supplyReserves.length || 0}
 90        >
 91          {suppliesPositions}
 92        </MigrationList>
 93  
 94        <MigrationList
 95          loading={loading}
 96          onSelectAllClick={onSelectAllBorrows}
 97          allSelected={activeBorrowUnselected.length === 0}
 98          isAvailable={isBorrowPositionsAvailable}
 99          withBorrow
100          disabled={allBorrowsDisabled}
101          titleComponent={<Trans>Borrowed assets</Trans>}
102          numSelected={activeBorrowSelections.length || 0}
103          numAvailable={borrowReserves.length || 0}
104        >
105          {borrowsPositions}
106        </MigrationList>
107      </Paper>
108    );
109  };