import styles from './styles.module.css' import {Autocomplete, IconButton, TextareaAutosize, TextField} from "@mui/material"; import {useContext, useEffect, useState} from "react"; import Context from "../../../context/token"; import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined'; import DeleteForeverOutlined from '@mui/icons-material/DeleteForeverOutlined'; import Modal from '@mui/material/Modal'; import Fade from '@mui/material/Fade'; import Backdrop from '@mui/material/Backdrop'; import Box from '@mui/material/Box'; import Grid from "@mui/material/Grid"; import ConfirmDialog from "../confirm-dialog"; const style = { position: 'absolute' as 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '100%', bgcolor: 'background.paper', border: '2px solid #000', boxShadow: 24, p: 4, }; export default function Tokens() { const {token, tokens, addToken, deleteToken, switchToken} = useContext(Context) const [showAddForm, setShowAddForm] = useState(false) const [showConfirm, setShowConfirm] = useState(false) let variants = tokens.map((token, index) => ({ ...token, label: `${token.host} [${token.id}]` })); useEffect(() => { setShowAddForm(!token) }, [token]) return ( <> { console.log('newValue', newValue); if (newValue?.id) { switchToken(newValue?.id) } }} disablePortal options={variants} renderInput={(params) => } /> setShowAddForm(true)} title={`Add new token`} aria-label="Add new token"> setShowConfirm(true)} title={`Delete current token`} aria-label="Add new token"> setShowAddForm(false)} closeAfterTransition slots={{backdrop: Backdrop}} slotProps={{ backdrop: { timeout: 500, }, }} > { if (addToken(event.target.value)) { setShowAddForm(false) } }} /> { let tokenId = token?.id || null if (tokenId) { deleteToken(tokenId) } setShowConfirm(false) }} closeCallback={() => {setShowConfirm(false)}}> Confirm? ) }