fix: Apply Prettier

src/apis/check-is-domain-disposable.ts

@@ -1,8 +1,6 @@
 import {client} from "~/constants/axios-client"
 
-export default async function checkIsDomainDisposable(
+export default async function checkIsDomainDisposable(domain: string): Promise<boolean> {
-	domain: string,
-): Promise<boolean> {
 	const {data} = await client.get(`https://api.mailcheck.ai/domain/${domain}`)
 
 	return !data.mx || data.disposable

src/components/widgets/FaviconImage.tsx

@@ -2,10 +2,7 @@ import React, {ReactElement, useState} from "react"
 
 export interface FaviconImageProps
 	extends Omit<
-		React.DetailedHTMLProps<
+		React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
-			React.ImgHTMLAttributes<HTMLImageElement>,
-			HTMLImageElement
-		>,
 		"src"
 	> {
 	url: string
@@ -16,10 +13,7 @@ const getDomain = (url: string): string => {
 	return `${hostname}${port ? `:${port}` : ""}`
 }
 
-export default function FaviconImage({
+export default function FaviconImage({url, ...props}: FaviconImageProps): ReactElement {
-	url,
-	...props
-}: FaviconImageProps): ReactElement {
 	const [source, setSource] = useState<string>(`${url}/favicon.ico`)
 
 	return (
@@ -27,11 +21,7 @@ export default function FaviconImage({
 			{...props}
 			src={source}
 			onError={() =>
-				setSource(
+				setSource(`https://external-content.duckduckgo.com/ip3/${getDomain(url)}.ico`)
-					`https://external-content.duckduckgo.com/ip3/${getDomain(
-						url,
-					)}.ico`,
-				)
 			}
 		/>
 	)

src/components/widgets/MultiStepForm.module.css

@@ -1,37 +1,37 @@
 .animateOut {
-    position: absolute;
+	position: absolute;
-    left: 0;
+	left: 0;
-    top: 0;
+	top: 0;
-    width: 100%;
+	width: 100%;
-    height: 100%;
+	height: 100%;
 
-    animation: slideOut 3s linear;
+	animation: slideOut 3s linear;
 }
 
 .animateIn {
-    position: absolute;
+	position: absolute;
-    left: 0;
+	left: 0;
-    top: 0;
+	top: 0;
-    width: 100%;
+	width: 100%;
-    height: 100%;
+	height: 100%;
 
-    animation: slideIn 3s linear;
+	animation: slideIn 3s linear;
 }
 
 @keyframes slideIn {
-    0% {
+	0% {
-        transform: translateX(100%);
+		transform: translateX(100%);
-    }
+	}
-    100% {
+	100% {
-        transform: translateX(0);
+		transform: translateX(0);
-    }
+	}
 }
 
 @keyframes slideOut {
-    0% {
+	0% {
-        transform: translateX(0);
+		transform: translateX(0);
-    }
+	}
-    100% {
+	100% {
-        transform: translateX(-100%);
+		transform: translateX(-100%);
-    }
+	}
 }

src/components/widgets/MultiStepForm.tsx

@@ -46,8 +46,7 @@ function MultiStepForm({
 	}, [index, currentIndex])
 
 	const hasSize = Boolean(
-		(currentSize?.width || nextSize?.width) &&
+		(currentSize?.width || nextSize?.width) && (currentSize?.height || nextSize?.height),
-			(currentSize?.height || nextSize?.height),
 	)
 
 	return (
@@ -58,12 +57,8 @@ function MultiStepForm({
 				flexDirection: "column",
 				alignItems: "center",
 				justifyContent: "center",
-				width:
+				width: Math.max(currentSize?.width || 0, nextSize?.width || 0) || "100%",
-					Math.max(currentSize?.width || 0, nextSize?.width || 0) ||
+				height: Math.max(currentSize?.height || 0, nextSize?.height || 0) || "100%",
-					"100%",
-				height:
-					Math.max(currentSize?.height || 0, nextSize?.height || 0) ||
-					"100%",
 				overflow: hasSize ? "hidden" : "visible",
 			}}
 		>
@@ -73,13 +68,9 @@ function MultiStepForm({
 					...currentSize,
 					position: "absolute",
 					transition: easing,
-					transitionDuration: isTransitioning
+					transitionDuration: isTransitioning ? `${duration}ms` : "0ms",
-						? `${duration}ms`
-						: "0ms",
 					transformOrigin: isTransitioning
-						? `${nextSize?.x - currentSize.x}px ${
+						? `${nextSize?.x - currentSize.x}px ${nextSize?.y - currentSize.y}px`
-								nextSize?.y - currentSize.y
-						  }px`
 						: "",
 					// Scale the difference between currentSize and nextSize
 					transform: isTransitioning
@@ -102,12 +93,7 @@ function MultiStepForm({
 					// @ts-ignore
 					$currentElement.current = ref
 
-					const {
+					const {width = 0, height = 0, x, y} = ref.getBoundingClientRect()
-						width = 0,
-						height = 0,
-						x,
-						y,
-					} = ref.getBoundingClientRect()
 
 					if (
 						width !== 0 &&
@@ -152,16 +138,10 @@ function MultiStepForm({
 					height: "max-content",
 					transition: easing,
 					transitionDuration: isTransitioning ? `${duration}ms` : "",
-					transform: isTransitioning
+					transform: isTransitioning ? "" : nextSize?.x ? "translateX(100%)" : "",
-						? ""
-						: nextSize?.x
-						? "translateX(100%)"
-						: "",
 				}}
 			>
-				{currentIndex === steps.length - 1
+				{currentIndex === steps.length - 1 ? null : steps[currentIndex + 1]}
-					? null
-					: steps[currentIndex + 1]}
 			</div>
 		</div>
 	)

src/components/widgets/MultiStepFormElement.tsx

@@ -6,9 +6,7 @@ export interface MultiStepFormElementProps {
 	children: ReactElement
 }
 
-export default function MultiStepFormElement({
+export default function MultiStepFormElement({children}: MultiStepFormElementProps): ReactElement {
-	children,
-}: MultiStepFormElementProps): ReactElement {
 	return (
 		<Box maxWidth="90vw" justifyContent="center" alignItems="center">
 			<Container maxWidth="xs">{children}</Container>

src/components/widgets/PasswordField.tsx

@@ -1,12 +1,7 @@
 import {MdVisibility, MdVisibilityOff} from "react-icons/md"
 import React, {ReactElement, useState} from "react"
 
-import {
+import {IconButton, InputAdornment, TextField, TextFieldProps} from "@mui/material"
-	IconButton,
-	InputAdornment,
-	TextField,
-	TextFieldProps,
-} from "@mui/material"
 
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type"> {}
 
@@ -24,15 +19,8 @@ export default function PasswordField({
 				...InputProps,
 				endAdornment: (
 					<InputAdornment position="end">
-						<IconButton
+						<IconButton edge="end" onClick={() => setShowPassword(value => !value)}>
-							edge="end"
+							{showPassword ? <MdVisibilityOff /> : <MdVisibility />}
-							onClick={() => setShowPassword(value => !value)}
-						>
-							{showPassword ? (
-								<MdVisibilityOff />
-							) : (
-								<MdVisibility />
-							)}
 						</IconButton>
 					</InputAdornment>
 				),

src/components/widgets/SimplePage.tsx

@@ -28,12 +28,7 @@ export default function SimplePage({
 				</Typography>
 			</Grid>
 			<Grid item width="100%">
-				<Grid
+				<Grid container spacing={4} flexDirection="column" alignItems="stretch">
-					container
-					spacing={4}
-					flexDirection="column"
-					alignItems="stretch"
-				>
 					{subtitle && (
 						<Grid item>
 							<Typography variant="h6" component="h2">
@@ -48,9 +43,7 @@ export default function SimplePage({
 							</Typography>
 						</Grid>
 					)}
-					{pageOptionsActions && (
+					{pageOptionsActions && <Grid item>{pageOptionsActions}</Grid>}
-						<Grid item>{pageOptionsActions}</Grid>
-					)}
 					<Grid item>{children}</Grid>
 				</Grid>
 			</Grid>

src/constants/themes.ts

@@ -4,8 +4,8 @@ export const lightTheme = createTheme({
 	palette: {
 		mode: "dark",
 		secondary: {
-		    main: "#ACF",
+			main: "#ACF",
-		    contrastText: "#FFF",
+			contrastText: "#FFF",
 		},
 	},
 })

src/hocs/WithEncryptionRequired.tsx

@@ -2,9 +2,7 @@ import {ReactElement} from "react"
 
 import {DecryptionPasswordMissingAlert} from "~/components"
 
-export default function WithEncryptionRequired(
+export default function WithEncryptionRequired(Component: any): (props: any) => ReactElement {
-	Component: any,
-): (props: any) => ReactElement {
 	return (props: any): ReactElement => {
 		return (
 			<DecryptionPasswordMissingAlert>

src/hooks/use-interval-update.ts

@@ -1,8 +1,6 @@
 import {useEffect, useState} from "react"
 
-export default function useIntervalUpdate(
+export default function useIntervalUpdate(updateIntervalInMilliSeconds = 1000): [Date, () => void] {
-	updateIntervalInMilliSeconds = 1000,
-): [Date, () => void] {
 	const [, setForceUpdateValue] = useState<number>(0)
 	const [startDate, setStartDate] = useState(() => new Date())
 

src/hooks/use-ui-state.ts

@@ -1,9 +1,7 @@
 import {Dispatch, SetStateAction, useState} from "react"
 import {useUpdateEffect} from "react-use"
 
-export default function useUIState<T>(
+export default function useUIState<T>(outerValue: T): [T, Dispatch<SetStateAction<T>>] {
-	outerValue: T,
-): [T, Dispatch<SetStateAction<T>>] {
 	const [value, setValue] = useState<T>(outerValue)
 
 	useUpdateEffect(() => {

src/main.tsx

@@ -3,6 +3,4 @@ import ReactDOM from "react-dom/client"
 
 import App from "~/App"
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLDivElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLDivElement).render(<App />)
-	<App />,
-)

src/route-widgets/SignupRoute/EmailForm/DetectEmailAutofillService.tsx

@@ -1,12 +1,6 @@
 import {MdCheck} from "react-icons/md"
 import {useSessionStorage} from "react-use"
-import React, {
+import React, {ReactElement, useCallback, useEffect, useRef, useState} from "react"
-	ReactElement,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from "react"
 
 import {
 	Alert,
@@ -41,10 +35,7 @@ export default function DetectEmailAutofillService({
 	const $hasDetected = useRef<boolean>(false)
 
 	const [type, setType] = useState<AliasType | null>(null)
-	const [hasShownModal, setHasShownModal] = useSessionStorage<boolean>(
+	const [hasShownModal, setHasShownModal] = useSessionStorage<boolean>(STORAGE_KEY, false)
-		STORAGE_KEY,
-		false,
-	)
 
 	const handleFound = useCallback(
 		(type: AliasType) => {
@@ -72,9 +63,7 @@ export default function DetectEmailAutofillService({
 			return false
 		}
 		const checkSimpleLogin = () => {
-			const $element = document.querySelector(
+			const $element = document.querySelector("body > div.sl-button-wrapper")
-				"body > div.sl-button-wrapper",
-			)
 
 			if (
 				$element &&
@@ -116,17 +105,14 @@ export default function DetectEmailAutofillService({
 				<Grid container spacing={2} justifyContent="center">
 					<Grid item>
 						<DialogContentText>
-							We detected that you are using an email relay
+							We detected that you are using an email relay service to sign up. This
-							service to sign up. This KleckRelay instance does
+							KleckRelay instance does not support relaying to another email relay
-							not support relaying to another email relay service.
+							service. You can either choose a different instance or sign up with a
-							You can either choose a different instance or sign
+							different email address.
-							up with a different email address.
 						</DialogContentText>
 					</Grid>
 					<Grid item>
-						<DialogContentText>
+						<DialogContentText>Detected email relay:</DialogContentText>
-							Detected email relay:
-						</DialogContentText>
 					</Grid>
 					<Grid item>
 						<Alert severity="info">{TYPE_NAME_MAP[type!]}</Alert>
@@ -134,11 +120,7 @@ export default function DetectEmailAutofillService({
 				</Grid>
 			</DialogContent>
 			<DialogActions>
-				<Button
+				<Button autoFocus startIcon={<MdCheck />} onClick={() => setType(null)}>
-					autoFocus
-					startIcon={<MdCheck />}
-					onClick={() => setType(null)}
-				>
 					Got it
 				</Button>
 			</DialogActions>

src/routes/SignupRoute.tsx

@@ -9,26 +9,15 @@ import YouGotMail from "~/route-widgets/SignupRoute/YouGotMail"
 
 export default function SignupRoute(): ReactElement {
 	const serverSettings = useLoaderData() as ServerSettings
-	const [email, setEmail] = useLocalStorage<string>(
+	const [email, setEmail] = useLocalStorage<string>("signup-form-state-email", "")
-		"signup-form-state-email",
-		"",
-	)
 
 	const index = email ? 1 : 0
 
 	return (
 		<MultiStepForm
 			steps={[
-				<EmailForm
+				<EmailForm serverSettings={serverSettings} onSignUp={setEmail} key="email" />,
-					serverSettings={serverSettings}
+				<YouGotMail onGoBack={() => setEmail("")} email={email || ""} key="you_got_mail" />,
-					onSignUp={setEmail}
-					key="email"
-				/>,
-				<YouGotMail
-					onGoBack={() => setEmail("")}
-					email={email || ""}
-					key="you_got_mail"
-				/>,
 			]}
 			index={index}
 		/>

src/utils/when-enter-pressed.ts

@@ -1,8 +1,6 @@
 import {KeyboardEventHandler} from "react"
 
-export default function whenEnterPressed<T = HTMLDivElement>(
+export default function whenEnterPressed<T = HTMLDivElement>(callback: KeyboardEventHandler<T>) {
-	callback: KeyboardEventHandler<T>,
-) {
 	return (event: any) => {
 		if (event.key === "Enter") {
 			callback(event)