82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
import { Avatar, Box, Dialog, Link, List, ListItem, ListItemText, Typography } from "@mui/material";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import GhostStyledIcon from "../../../components/Icon/GhostIcon";
|
|
import Token from "../../../components/Token/Token";
|
|
|
|
const TokenModal = ({
|
|
open,
|
|
handleSelect,
|
|
handleClose,
|
|
ftsoBalance = "0.00",
|
|
stnkBalance = "0.00",
|
|
ghstBalance = "0.00",
|
|
tokenToExclude,
|
|
isUpper,
|
|
ftsoSymbol,
|
|
stnkSymbol,
|
|
ghstSymbol
|
|
}) => {
|
|
const theme = useTheme();
|
|
|
|
const TokenItem = ({ token, name, exclude, isUpper, balance = "0", icon, address = "", price, decimals, ...props }) => {
|
|
if (name === exclude) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<ListItem
|
|
key={token}
|
|
button="true"
|
|
onClick={() => {
|
|
handleSelect({token, isUpper});
|
|
handleClose();
|
|
}}
|
|
sx={{ borderBottom: `1px solid ${theme.colors.gray[500]}` }}
|
|
{...props}
|
|
>
|
|
{icon ? (
|
|
<Avatar src={icon} sx={{ width: "15px", height: "15px" }} />
|
|
) : (
|
|
<Token name={token} sx={{ fontSize: "15px" }} />
|
|
)}
|
|
|
|
<ListItemText
|
|
primaryTypographyProps={{
|
|
sx: { marginLeft: "6px", fontWeight: 500, lineHeight: "24px", fontSize: "15px" },
|
|
}}
|
|
primary={name}
|
|
/>
|
|
<Box flexGrow={10} />
|
|
<ListItemText
|
|
style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}
|
|
secondaryTypographyProps={{ sx: { fontSize: "12px", lineHeight: "15px" } }}
|
|
secondary={balance}
|
|
/>
|
|
</ListItem>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} fullWidth maxWidth="xs" PaperProps={{ sx: { borderRadius: "9px" } }} onClose={handleClose}>
|
|
<Box paddingX="15px" paddingTop="22.5px" paddingBottom="15px">
|
|
<Box display="flex" flexDirection="row" justifyContent="space-between">
|
|
<Typography id="migration-modal-title" variant="h6" component="h2">
|
|
{`Select a token`}
|
|
</Typography>
|
|
<Link>
|
|
<GhostStyledIcon component={CloseIcon} onClick={handleClose} sx={{ fontSize: "19px" }} />
|
|
</Link>
|
|
</Box>
|
|
<List>
|
|
{<TokenItem isUpper={isUpper} exclude={tokenToExclude} token="FTSO" name={ftsoSymbol} balance={ftsoBalance} />}
|
|
{<TokenItem isUpper={isUpper} exclude={tokenToExclude} token="STNK" name={stnkSymbol} balance={stnkBalance} />}
|
|
{<TokenItem isUpper={isUpper} exclude={tokenToExclude} token="GHST" name={ghstSymbol} balance={ghstBalance} />}
|
|
</List>
|
|
</Box>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default TokenModal;
|