Qortal-Hub/src/components/RegisterName.tsx

import React, { useCallback, useContext, useEffect, useState } from 'react'
import {
    Avatar,
    Box,
    Button,
    ButtonBase,
    Collapse,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Input,
    ListItem,
    ListItemAvatar,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    List,
    MenuItem,
    Popover,
    Select,
    TextField,
    Typography,
  } from "@mui/material";
import { Label } from './Group/AddGroup';
import { Spacer } from '../common/Spacer';
import { LoadingButton } from '@mui/lab';
import { getBaseApiReact, MyContext } from '../App';
import { getFee } from '../background';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
import { BarSpinner } from '../common/Spinners/BarSpinner/BarSpinner';
import CheckIcon from '@mui/icons-material/Check';
import ErrorIcon from '@mui/icons-material/Error';

enum Availability {
    NULL = 'null',
    LOADING = 'loading',
    AVAILABLE = 'available',
    NOT_AVAILABLE = 'not-available'
}
export const RegisterName = ({setOpenSnack, setInfoSnack, userInfo, show, setTxList, balance}) => {
  const [isOpen, setIsOpen] = useState(false) 
  const [registerNameValue, setRegisterNameValue] = useState('')
  const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false)
  const [isNameAvailable, setIsNameAvailable] = useState<Availability>(Availability.NULL)
   const [nameFee, setNameFee] = useState(null)

  const checkIfNameExisits = async (name)=> {
    if(!name?.trim()){
        setIsNameAvailable(Availability.NULL)

        return
    }
    setIsNameAvailable(Availability.LOADING)
    try {
        const res = await fetch(`${getBaseApiReact()}/names/` + name);
        const data = await res.json()
        if(data?.message === 'name unknown'){
            setIsNameAvailable(Availability.AVAILABLE)
        } else {
            setIsNameAvailable(Availability.NOT_AVAILABLE)
        }
    } catch (error) {
        console.error(error)
    } finally {
    }
  }
    // Debounce logic
    useEffect(() => {
      const handler = setTimeout(() => {
        checkIfNameExisits(registerNameValue);
      }, 500);
  
      // Cleanup timeout if searchValue changes before the timeout completes
      return () => {
        clearTimeout(handler);
      };
    }, [registerNameValue]); 

   const openRegisterNameFunc = useCallback((e) => {
    setIsOpen(true)

    }, [ setIsOpen]);
  
    useEffect(() => {
      subscribeToEvent("openRegisterName", openRegisterNameFunc);
  
      return () => {
        unsubscribeFromEvent("openRegisterName", openRegisterNameFunc);
      };
    }, [openRegisterNameFunc]);

    useEffect(()=> {
        const nameRegistrationFee = async  ()=> {
            try {
                const fee = await getFee("REGISTER_NAME");
                setNameFee(fee?.fee)
            } catch (error) {
                console.error(error)
            }
        }
        nameRegistrationFee()
    }, [])

    const registerName = async () => {
      try {
        if (!userInfo?.address) throw new Error("Your address was not found");
        if(!registerNameValue) throw new Error('Enter a name')
        
        const fee = await getFee("REGISTER_NAME");
        await show({
          message: "Would you like to register this name?",
          publishFee: fee.fee + " QORT",
        });
        setIsLoadingRegisterName(true);
        new Promise((res, rej) => {
          window
            .sendMessage("registerName", {
              name: registerNameValue,
            })
            .then((response) => {
              if (!response?.error) {
                res(response);
                setIsLoadingRegisterName(false);
                setInfoSnack({
                  type: "success",
                  message:
                    "Successfully registered. It may take a couple of minutes for the changes to propagate",
                });
                setIsOpen(false);
                setRegisterNameValue("");
                setOpenSnack(true);
                setTxList((prev) => [
                  {
                    ...response,
                    type: "register-name",
                    label: `Registered name: awaiting confirmation. This may take a couple minutes.`,
                    labelDone: `Registered name: success!`,
                    done: false,
                  },
                  ...prev.filter((item) => !item.done),
                ]);
                return;
              }
              setInfoSnack({
                type: "error",
                message: response?.error,
              });
              setOpenSnack(true);
              rej(response.error);
            })
            .catch((error) => {
              setInfoSnack({
                type: "error",
                message: error.message || "An error occurred",
              });
              setOpenSnack(true);
              rej(error);
            });
        });
      } catch (error) {
        if (error?.message) {
            setOpenSnack(true)
          setInfoSnack({
            type: "error",
            message: error?.message,
          });
        }
      } finally {
        setIsLoadingRegisterName(false);
      }
    };

  return (
    <Dialog
          open={isOpen}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">
            {"Register name"}
          </DialogTitle>
          <DialogContent>
          <Box
          sx={{
            width: "400px",
            maxWidth: '90vw',
            height: "500px",
            maxHeight: '90vh',
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: "10px",
            padding: "10px",
          }}
        >
          <Label>Choose a name</Label>
          <TextField
          autoComplete='off'
          autoFocus
            onChange={(e) => setRegisterNameValue(e.target.value)}
            value={registerNameValue}
            placeholder="Choose a name"
          />
          {(!balance || (nameFee && balance && balance < nameFee))&& (
            <>
             <Spacer height="10px" />
             <Box sx={{
                display: 'flex',
                gap: '5px',
                alignItems: 'center'
            }}>
                  <ErrorIcon sx={{
                    color: 'white'
                }} />
            <Typography>Your balance is {balance ?? 0} QORT. A name registration requires a {nameFee} QORT fee</Typography>
            </Box>
             <Spacer height="10px" />

            </>
          )}
          <Spacer height="5px" />
          {isNameAvailable === Availability.AVAILABLE && (
               <Box sx={{
                display: 'flex',
                gap: '5px',
                alignItems: 'center'
            }}>
                <CheckIcon sx={{
                    color: 'white'
                }} />
            <Typography>{registerNameValue} is available</Typography>
            </Box>
          )}
           {isNameAvailable === Availability.NOT_AVAILABLE && (
               <Box sx={{
                display: 'flex',
                gap: '5px',
                alignItems: 'center'
            }}>
                  <ErrorIcon sx={{
                    color: 'white'
                }} />
            <Typography>{registerNameValue} is unavailable</Typography>
            </Box>
          )}
           {isNameAvailable === Availability.LOADING && (
            <Box sx={{
                display: 'flex',
                gap: '5px',
                alignItems: 'center'
            }}>
                 <BarSpinner width="16px" color="white" />
            <Typography>Checking if name already existis</Typography>
            </Box>
          )}
          <Spacer height="25px" />
         <Typography sx={{
            textDecoration: 'underline'
         }}>Benefits of a name</Typography>
         <List
      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
      aria-label="contacts"
    >
      <ListItem disablePadding>
         
          <ListItemIcon>
            <RadioButtonCheckedIcon sx={{
                color: 'white'
            }} />
          </ListItemIcon>
          <ListItemText primary="Publish data to Qortal: anything from apps to videos. Fully decentralized!" />
     
      </ListItem>
      <ListItem disablePadding>
         
         <ListItemIcon>
           <RadioButtonCheckedIcon sx={{
               color: 'white'
           }} />
         </ListItemIcon>
         <ListItemText primary="Secure ownership of data published by your name. You can even sell your name, along with your data to a third party." />
    
     </ListItem>
    </List>
        </Box>
          </DialogContent>
          <DialogActions>
            <Button
              disabled={isLoadingRegisterName}
              variant="contained"
              onClick={() => {
                setIsOpen(false)
                setRegisterNameValue('')
              }}
            >
              Close
            </Button>
            <Button
              disabled={!registerNameValue.trim() ||isLoadingRegisterName || isNameAvailable !== Availability.AVAILABLE || !balance || ((balance && nameFee) && +balance < +nameFee)}
              variant="contained"
              onClick={registerName}
              autoFocus
            >
              Register Name
            </Button>
          </DialogActions>
        </Dialog>
  )
}