1  import { Box, Typography } from '@mui/material';
 2  import { ReactNode } from 'react';
 3  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 4  import { Row } from 'src/components/primitives/Row';
 5  import { TokenIcon } from 'src/components/primitives/TokenIcon';
 6  
 7  export type Asset = {
 8    underlyingAsset: string;
 9    iconSymbol: string;
10    symbol: string;
11    amount: string;
12    amountInUSD: string;
13  };
14  
15  interface MigrateV3ModalAssetsListProps {
16    caption: ReactNode;
17    assets: (Asset | undefined)[];
18  }
19  
20  export const MigrateV3ModalAssetsList = ({ caption, assets }: MigrateV3ModalAssetsListProps) => {
21    return (
22      <Row
23        caption={caption}
24        captionVariant="description"
25        align="flex-start"
26        sx={{ mb: 6, '&:last-of-type': { mb: 0 } }}
27      >
28        {!!assets.length ? (
29          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
30            {assets.map((asset) =>
31              asset ? (
32                <Box
33                  key={asset.underlyingAsset}
34                  sx={{ mb: 2, display: 'flex', alignItems: 'flex-end', flexDirection: 'column' }}
35                >
36                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
37                    <TokenIcon symbol={asset.iconSymbol} sx={{ mr: 1, fontSize: '16px' }} />
38                    <FormattedNumber value={asset.amount} variant="secondary14" compact />
39                    <Typography ml={1} variant="secondary14">
40                      {asset.symbol}
41                    </Typography>
42                  </Box>
43                  <FormattedNumber
44                    value={asset.amountInUSD}
45                    variant="helperText"
46                    compact
47                    symbol="USD"
48                    color="text.secondary"
49                  />
50                </Box>
51              ) : (
52                <></>
53              )
54            )}
55          </Box>
56        ) : (
57          <Typography>—</Typography>
58        )}
59      </Row>
60    );
61  };