chore: fix eslint ui errors (#201)

* chore: fix eslint errors ui

* chore: fix eslint errors

* chore: fix develop eslint errors

ui/postcss.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   plugins: {
     tailwindcss: {},

ui/src/app.tsx

@@ -1,9 +1,11 @@
-import { HashRouter, Route, Routes, Navigate } from 'react-router-dom';
-import { themeGlobals } from '@/theme/globals';
-import { ComponentsTest, Home, Mint, Explore, CreateAP } from './views';
-import { AppPage, ToastProvider } from './components';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 
-export const App = () => {
+import { themeGlobals } from '@/theme/globals';
+
+import { AppPage, ToastProvider } from './components';
+import { ComponentsTest, CreateAP, Explore, Home, Mint } from './views';
+
+export const App: React.FC = () => {
   themeGlobals();
   return (
     <>

ui/src/components/card/card.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable react/display-name */
 import React, { forwardRef } from 'react';
+
 import { Flex } from '../layout';
 import { CardStyles } from './card.styles';
 

ui/src/components/core/avatar/avatar.styles.ts

@@ -1,6 +1,7 @@
-import { dripStitches } from '@/theme';
 import * as Avatar from '@radix-ui/react-avatar';
 
+import { dripStitches } from '@/theme';
+
 const { styled } = dripStitches;
 
 export abstract class AvatarStyles {

ui/src/components/core/avatar/avatar.tsx

@@ -1,11 +1,9 @@
 import { forwardRef } from 'react';
+
 import { AvatarProps, AvatarStyles } from './avatar.styles';
 
 export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  (
-    { fallback, fallbackProps, imageProps = {}, src, alt, css, ...rootProps },
-    ref
-  ) => {
+  ({ imageProps = {}, src, alt, css, ...rootProps }, ref) => {
     return (
       <AvatarStyles.Root {...rootProps} ref={ref} css={css}>
         <AvatarStyles.Image src={src} alt={alt} {...imageProps} />
@@ -13,3 +11,5 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
     );
   }
 );
+
+Avatar.displayName = 'Avatar';

ui/src/components/core/button/button-spinner.tsx

@@ -1,6 +1,6 @@
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
 import React, { HTMLAttributes, useMemo } from 'react';
 
+import { dripStitches } from '../../../theme'; //TODO replace with absolute path
 import {
   ButtonSpinnerProps,
   StyledButtonSpinnerBox,

ui/src/components/core/color-picker/color-picker.tsx

@@ -1,7 +1,9 @@
-import { Button, Card, Flex, Icon } from '@/components';
-import { useRef } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import ColorThief from 'colorthief';
+import { useRef } from 'react';
+
+import { Button, Card, Flex, Icon } from '@/components';
 
 export type ColorPickerProps = {
   logoColor: string;
@@ -13,12 +15,12 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   logoColor,
   logo,
   setLogoColor,
-  onBlur,
-}) => {
+}: ColorPickerProps) => {
   const inputColorRef = useRef<HTMLInputElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
 
-  const handleLogoLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const handleLogoLoad = (e: React.SyntheticEvent<HTMLImageElement>): void => {
     const colorArray = new ColorThief().getColor(imageRef.current);
     const hexColor = `#${colorArray
       .map((c: number) => c.toString(16).padStart(2, '0'))
@@ -26,11 +28,11 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
     setLogoColor(hexColor);
   };
 
-  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     setLogoColor(e.target.value);
   };
 
-  const handleColorPickerClick = () => {
+  const handleColorPickerClick = (): void => {
     inputColorRef.current?.click();
   };
 

ui/src/components/core/combobox/combobox.tsx

@@ -1,3 +1,8 @@
+import {
+  Combobox as ComboboxLib,
+  ComboboxInputProps as ComboboxLibInputProps,
+  Transition,
+} from '@headlessui/react';
 import React, {
   forwardRef,
   Fragment,
@@ -5,14 +10,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Combobox as ComboboxLib,
-  ComboboxInputProps as ComboboxLibInputProps,
-  Transition,
-} from '@headlessui/react';
+
 import { Icon, IconName } from '@/components/core/icon';
 import { Flex } from '@/components/layout';
 import { useDebounce } from '@/hooks/use-debounce';
+
 import { Separator } from '../separator.styles';
 import { cleanString } from './combobox.utils';
 
@@ -31,7 +33,7 @@ type ComboboxInputProps = {
   error?: boolean;
 } & ComboboxLibInputProps<'input', ComboboxItem>;
 
-const ComboboxInput = ({
+const ComboboxInput: React.FC<ComboboxInputProps> = ({
   open,
   leftIcon,
   error,
@@ -71,7 +73,9 @@ type ComboboxOptionProps = {
   option: ComboboxItem;
 };
 
-const ComboboxOption = ({ option }: ComboboxOptionProps) => (
+const ComboboxOption: React.FC<ComboboxOptionProps> = ({
+  option,
+}: ComboboxOptionProps) => (
   <ComboboxLib.Option
     value={option}
     className={({ active }) =>
@@ -98,7 +102,7 @@ const ComboboxOption = ({ option }: ComboboxOptionProps) => (
   </ComboboxLib.Option>
 );
 
-export const NoResults = ({ css }: { css?: string }) => (
+export const NoResults: React.FC = ({ css }: { css?: string }) => (
   <div
     className={`relative cursor-default select-none pt-2 px-3.5 pb-4 text-slate11 ${css}`}
   >
@@ -153,18 +157,15 @@ export type ComboboxProps = {
 };
 
 export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
-  (
-    {
-      items,
-      selectedValue = { value: '', label: '' },
-      withAutocomplete = false,
-      leftIcon = 'search',
-      onChange,
-      onBlur,
-      error = false,
-    },
-    ref
-  ) => {
+  ({
+    items,
+    selectedValue = { value: '', label: '' },
+    withAutocomplete = false,
+    leftIcon = 'search',
+    onChange,
+    onBlur,
+    error = false,
+  }) => {
     const [filteredItems, setFilteredItems] = useState<ComboboxItem[]>([]);
     const [autocompleteItems, setAutocompleteItems] = useState<ComboboxItem[]>(
       []
@@ -180,7 +181,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       ) {
         setAutocompleteItems([selectedValue]);
       }
-    }, [selectedValue]);
+    }, [autocompleteItems.length, items, selectedValue, withAutocomplete]);
 
     useEffect(() => {
       setFilteredItems(items);
@@ -209,20 +210,22 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       }
     }, 200);
 
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const handleInputChange = (
+      event: React.ChangeEvent<HTMLInputElement>
+    ): void => {
       event.stopPropagation();
       handleSearch(event.target.value);
     };
 
-    const handleInputClick = () => {
+    const handleInputClick = (): void => {
       buttonRef.current?.click();
     };
 
-    const handleComboboxChange = (optionSelected: ComboboxItem) => {
+    const handleComboboxChange = (optionSelected: ComboboxItem): void => {
       onChange(optionSelected);
     };
 
-    const handleLeaveTransition = () => {
+    const handleLeaveTransition = (): void => {
       setFilteredItems(items);
       if (selectedValue.value === undefined && withAutocomplete) {
         setAutocompleteItems([]);
@@ -289,3 +292,5 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
     );
   }
 );
+
+Combobox.displayName = 'Combobox';

ui/src/components/core/combobox/combobox.utils.ts

@@ -1,2 +1,2 @@
-export const cleanString = (str: string) =>
+export const cleanString = (str: string): string =>
   str.toLowerCase().replace(/\s+/g, '');

ui/src/components/core/combobox/dropdown.tsx

@@ -1,13 +1,16 @@
-import { Fragment } from 'react';
 import { Listbox, Transition } from '@headlessui/react';
-import { Icon } from '@/components/core/icon';
+import { Fragment } from 'react';
+
 import { Flex } from '@/components';
+import { Icon } from '@/components/core/icon';
 
 type DropdownOptionProps = {
   option: DropdownItem;
 };
 
-const DropdownOption = ({ option }: DropdownOptionProps) => (
+const DropdownOption: React.FC<DropdownOptionProps> = ({
+  option,
+}: DropdownOptionProps) => (
   <Listbox.Option
     className={({ active }) =>
       `relative cursor-default select-none py-2 px-3.5 text-slate11 rounded-xl mb-2 text-sm max-w-full ${
@@ -64,9 +67,8 @@ type DropdownButtonProps = {
   textColor?: string;
 };
 
-const DropdownButton = ({
+const DropdownButton: React.FC<DropdownButtonProps> = ({
   selectedValue,
-  open, //TODO maybe would be deprecated
   backgroundColor,
   textColor,
 }: DropdownButtonProps) => {
@@ -147,8 +149,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
   backgroundColor,
   textColor,
   optionsWidth,
-}) => {
-  const handleDropdownChange = (option: DropdownItem) => {
+}: DropdownProps) => {
+  const handleDropdownChange = (option: DropdownItem): void => {
     onChange(option);
   };
   const width = optionsWidth ? `w-${optionsWidth}` : 'w-full';

ui/src/components/core/icon/icon-library.tsx

@@ -1,24 +1,25 @@
-import { IoLogoGithub } from '@react-icons/all-files/io5/IoLogoGithub';
-import { IoArrowBackCircleSharp } from '@react-icons/all-files/io5/IoArrowBackCircleSharp';
-import { IoInformationCircleSharp } from '@react-icons/all-files/io5/IoInformationCircleSharp';
-import { AiOutlineCheck } from '@react-icons/all-files/ai/AiOutlineCheck';
-import { BiSearch } from '@react-icons/all-files/bi/BiSearch';
-import { IoCloudUploadSharp } from '@react-icons/all-files/io5/IoCloudUploadSharp';
-import {
-  ChevronDownIcon,
-  MetamaskIcon,
-  EthereumIcon,
-  ErrorIcon,
-  FleekName,
-  BetaTag,
-  FleekLogo,
-} from './custom';
-import { IoCheckmarkCircleSharp } from '@react-icons/all-files/io5/IoCheckmarkCircleSharp';
-import { AiOutlineTwitter } from '@react-icons/all-files/ai/AiOutlineTwitter';
-import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { AiFillCheckCircle } from '@react-icons/all-files/ai/AiFillCheckCircle';
+import { AiOutlineCheck } from '@react-icons/all-files/ai/AiOutlineCheck';
+import { AiOutlineTwitter } from '@react-icons/all-files/ai/AiOutlineTwitter';
 import { BiGitBranch } from '@react-icons/all-files/bi/BiGitBranch';
+import { BiSearch } from '@react-icons/all-files/bi/BiSearch';
 import { BsFillSquareFill } from '@react-icons/all-files/bs/BsFillSquareFill';
+import { IoArrowBackCircleSharp } from '@react-icons/all-files/io5/IoArrowBackCircleSharp';
+import { IoCheckmarkCircleSharp } from '@react-icons/all-files/io5/IoCheckmarkCircleSharp';
+import { IoClose } from '@react-icons/all-files/io5/IoClose';
+import { IoCloudUploadSharp } from '@react-icons/all-files/io5/IoCloudUploadSharp';
+import { IoInformationCircleSharp } from '@react-icons/all-files/io5/IoInformationCircleSharp';
+import { IoLogoGithub } from '@react-icons/all-files/io5/IoLogoGithub';
+
+import {
+  BetaTag,
+  ChevronDownIcon,
+  ErrorIcon,
+  EthereumIcon,
+  FleekLogo,
+  FleekName,
+  MetamaskIcon,
+} from './custom';
 
 export const IconLibrary = Object.freeze({
   back: IoArrowBackCircleSharp,

ui/src/components/core/icon/icon.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+
 import { IconStyles } from './icon.styles';
 import { IconLibrary, IconName, IconType } from './icon-library';
 

ui/src/components/core/input/input-file.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, useRef } from 'react';
+
 import { Icon } from '../icon';
 import { InputFileStyles as S } from './input-file.styles';
 
@@ -8,15 +9,15 @@ type InputFileProps = {
 } & React.ComponentProps<typeof S.Border>;
 
 export const StyledInputFile = forwardRef<HTMLDivElement, InputFileProps>(
-  ({ value: file, onChange, css, ...props }, ref) => {
+  ({ value: file, onChange, ...props }, ref) => {
     const inputFileRef = useRef<HTMLInputElement>(null);
 
-    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
       e.preventDefault();
       onChange(e);
     };
 
-    const handleInputClick = () => {
+    const handleInputClick = (): void => {
       inputFileRef.current?.click();
     };
 
@@ -41,3 +42,5 @@ export const StyledInputFile = forwardRef<HTMLDivElement, InputFileProps>(
     );
   }
 );
+
+StyledInputFile.displayName = 'StyledInputFile';

ui/src/components/core/input/input.styles.ts

@@ -1,4 +1,5 @@
 import { dripStitches } from '@/theme';
+
 import { Icon } from '../icon';
 const { styled } = dripStitches;
 

ui/src/components/core/input/input.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
+
 import { IconName } from '../icon';
-import { StyledInputFile } from './input-file';
 import { InputIconStyled, InputStyled, TextareaStyled } from './input.styles';
+import { StyledInputFile } from './input-file';
 
 export const Textarea = TextareaStyled;
 
@@ -9,21 +10,23 @@ export const LogoFileInput = StyledInputFile;
 
 type InputProps = {
   leftIcon?: IconName;
-} & React.ComponentProps<typeof InputStyled>;
+} & React.ComponentPropsWithRef<typeof InputStyled>;
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ leftIcon, ...props }, ref) => {
-    return (
-      <div className="relative">
-        {leftIcon && (
-          <InputIconStyled name={leftIcon} css={{ fontSize: '$lg' }} />
-        )}
-        <InputStyled
-          {...props}
-          ref={ref}
-          css={{ ...(leftIcon && { pl: '$10' }), ...(props?.css || {}) }}
-        />
-      </div>
-    );
-  }
-);
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { leftIcon, ...ownProps } = props;
+
+  return (
+    <div className="relative">
+      {leftIcon && (
+        <InputIconStyled name={leftIcon} css={{ fontSize: '$lg' }} />
+      )}
+      <InputStyled
+        {...props}
+        ref={ref}
+        css={{ ...(leftIcon && { pl: '$10' }), ...(ownProps.css || {}) }}
+      />
+    </div>
+  );
+});
+
+Input.displayName = 'Input';

ui/src/components/core/switch/switch.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Switch as SwitchComponent } from '@headlessui/react';
+import React from 'react';
 
 type SwitchProps = {
   checked: boolean;

ui/src/components/form/form.context.tsx

@@ -1,6 +1,7 @@
-import { createContext, StringValidator } from '@/utils';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { createContext, StringValidator } from '@/utils';
+
 export type FormValidations = { [key: string]: StringValidator[] };
 
 export type FormContext = {
@@ -58,6 +59,7 @@ export const useFormFieldValidator = (
       }
 
       setValidations((prev) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { [id]: toBeRemoved, ...rest } = prev;
         return rest;
       });

ui/src/components/form/form.stories.tsx

@@ -1,29 +0,0 @@
-import { useState } from 'react';
-import { Form } from './form';
-
-export default {
-  title: 'Components/Form',
-  component: Form,
-};
-
-export const Fields = () => {
-  const [file, setFile] = useState<File | null>(null);
-  return (
-    <>
-      <Form.Field>
-        <Form.Label>Label</Form.Label>
-        <Form.Input placeholder="Input" />
-        <Form.Error>Input error</Form.Error>
-      </Form.Field>
-      <Form.Field>
-        <Form.Label>Label</Form.Label>
-        <Form.Textarea placeholder="Textarea" />
-        <Form.Error>Textarea error</Form.Error>
-      </Form.Field>
-      <Form.Field css={{ width: '$24' }}>
-        <Form.Label>Label</Form.Label>
-        <Form.LogoFileInput value={file} onChange={(file) => setFile(file)} />
-      </Form.Field>
-    </>
-  );
-};

ui/src/components/form/form.tsx

@@ -1,19 +1,22 @@
+/* eslint-disable react/display-name */
+import React, { forwardRef, useMemo, useState } from 'react';
+
 import { hasValidator } from '@/utils';
 import { fileToBase64 } from '@/views/mint/nfa-step/form-step/form.utils';
-import React, { forwardRef, useMemo, useState } from 'react';
+
 import { ColorPicker, Combobox, ComboboxItem } from '../core';
 import { Input, LogoFileInput, Textarea } from '../core/input';
-import {
-  FormFieldContext,
-  FormFieldProvider,
-  useFormFieldContext,
-} from './form-field.context';
 import {
   FormProvider,
   useFormContext,
   useFormFieldValidatorValue,
 } from './form.context';
 import { FormStyles } from './form.styles';
+import {
+  FormFieldContext,
+  FormFieldProvider,
+  useFormFieldContext,
+} from './form-field.context';
 
 export abstract class Form {
   static readonly Root = FormProvider;
@@ -104,14 +107,16 @@ export abstract class Form {
       } = useFormFieldContext();
       const isValid = useFormFieldValidatorValue(id, validators, value);
 
-      const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const handleInputChange = (
+        e: React.ChangeEvent<HTMLInputElement>
+      ): void => {
         if (props.onChange) props.onChange(e);
         setValue(e.target.value);
       };
 
       const handleInputBlur = (
         e: React.FocusEvent<HTMLInputElement, Element>
-      ) => {
+      ): void => {
         if (props.onBlur) props.onBlur(e);
         setValidationEnabled(true);
       };
@@ -146,16 +151,16 @@ export abstract class Form {
           return { label: value, value: value };
         }
         return item;
-      }, [value]);
+      }, [props.items, props.withAutocomplete, value]);
 
       const isValid = useFormFieldValidatorValue(id, validators, value);
 
-      const handleComboboxChange = (option: ComboboxItem) => {
+      const handleComboboxChange = (option: ComboboxItem): void => {
         if (props.onChange) props.onChange(option);
         setValue(option.label);
       };
 
-      const handleComboboxBlur = () => {
+      const handleComboboxBlur = (): void => {
         setValidationEnabled(true);
       };
 
@@ -172,7 +177,7 @@ export abstract class Form {
     }
   );
 
-  static readonly ColorPicker = ({
+  static readonly ColorPicker: React.FC<Form.ColorPickerProps> = ({
     logo,
     setLogoColor,
   }: Form.ColorPickerProps) => {
@@ -181,12 +186,12 @@ export abstract class Form {
       validationEnabled: [, setValidationEnabled],
     } = useFormFieldContext();
 
-    const handleColorChange = (color: string) => {
+    const handleColorChange = (color: string): void => {
       if (setLogoColor) setLogoColor(color);
       setValue(color);
     };
 
-    const handleInputBlur = () => {
+    const handleInputBlur = (): void => {
       setValidationEnabled(true);
     };
 
@@ -214,14 +219,14 @@ export abstract class Form {
 
     const handleTextareaChange = (
       e: React.ChangeEvent<HTMLTextAreaElement>
-    ) => {
+    ): void => {
       if (props.onChange) props.onChange(e);
       setValue(e.target.value);
     };
 
     const handleTextareaBlur = (
       e: React.FocusEvent<HTMLTextAreaElement, Element>
-    ) => {
+    ): void => {
       if (props.onBlur) props.onBlur(e);
       setValidationEnabled(true);
     };
@@ -253,7 +258,7 @@ export abstract class Form {
 
     const handleFileInputChange = async (
       e: React.ChangeEvent<HTMLInputElement>
-    ) => {
+    ): void => {
       const file = e.target.files?.[0];
       if (file) {
         //Convert to string base64 to send to contract

ui/src/components/form/form.utils.ts

@@ -1,5 +1,7 @@
 import { useState } from 'react';
+
 import { StringValidator } from '@/utils';
+
 import { FormFieldContext } from './form-field.context';
 
 export type FormField = Omit<FormFieldContext, 'validationEnabled'>;

ui/src/components/layout/flex.styles.ts

@@ -1,6 +1,7 @@
-import { dripStitches } from '../../theme'; //TODO replace with absolute path
 import React from 'react';
 
+import { dripStitches } from '../../theme'; //TODO replace with absolute path
+
 const { styled } = dripStitches;
 
 export const Flex = styled('div', {

ui/src/components/layout/nav-bar/connect-wallet-button.tsx

@@ -1,7 +1,8 @@
-import { Button, Flex, Icon } from '@/components';
-import { ConnectKitButton, Avatar } from 'connectkit';
+import { Avatar, ConnectKitButton } from 'connectkit';
 
-export const ConnectWalletButton = () => {
+import { Button, Flex } from '@/components';
+
+export const ConnectWalletButton: React.FC = () => {
   return (
     <ConnectKitButton.Custom>
       {({ isConnected, show, truncatedAddress, address, ensName }) => {

ui/src/components/layout/nav-bar/nav-bar.styles.ts

@@ -1,4 +1,5 @@
 import { dripStitches } from '@/theme';
+
 import { Flex } from '../flex.styles';
 
 const { styled } = dripStitches;

ui/src/components/layout/page/app-page.tsx

@@ -1,4 +1,5 @@
 import { NavBar } from '@/components';
+
 import { PageStyles as PS } from './page.styles';
 
 export type AppPageProps = {

ui/src/components/layout/stepper/stepper.stories.tsx

@@ -1,48 +0,0 @@
-import { Button } from '../../core';
-import { Stepper } from './stepper';
-import { Flex } from '../../layout';
-
-export default {
-  title: 'Components/Layout/Stepper',
-  component: Stepper,
-};
-
-const StepperButton: React.FC = () => {
-  const { nextStep, prevStep, setStep } = Stepper.useContext();
-  return (
-    <Flex css={{ gap: '$md' }}>
-      <Button onClick={prevStep}>Prev</Button>
-      <Button onClick={nextStep}>Next</Button>
-      <Button onClick={() => setStep(4)}>Set final step</Button>
-    </Flex>
-  );
-};
-
-export const Default = () => {
-  return (
-    <>
-      <Stepper.Root initialStep={1}>
-        <Stepper.Container>
-          <Stepper.Step>
-            {/* Step 1 */}
-            <Stepper.Indicator />
-          </Stepper.Step>
-          <Stepper.Step>
-            {/* Step 2*/}
-            <Stepper.Indicator />
-          </Stepper.Step>
-          <Stepper.Step>
-            {/* Step 3 */}
-            <Stepper.Indicator />
-          </Stepper.Step>
-          <Stepper.Step>
-            {/* Step 4 */}
-            <Stepper.Indicator />
-          </Stepper.Step>
-        </Stepper.Container>
-
-        <StepperButton />
-      </Stepper.Root>
-    </>
-  );
-};

ui/src/components/layout/stepper/stepper.tsx

@@ -1,5 +1,7 @@
-import { Flex } from '@/components';
 import React, { useMemo, useState } from 'react';
+
+import { Flex } from '@/components';
+
 import { createContext } from '../../../utils';
 import { StepperStyles } from './stepper.styles';
 

ui/src/components/logo/logo.styles.ts

@@ -1,4 +1,5 @@
 import { dripStitches } from '@/theme';
+
 import { Flex } from '../layout';
 
 const { styled } = dripStitches;

ui/src/components/logo/logo.tsx

@@ -1,8 +1,9 @@
-import { Icon } from '../core/icon';
 import { useNavigate } from 'react-router-dom';
+
+import { Icon } from '../core/icon';
 import { LogoStyles as LS } from './logo.styles';
 
-export const Logo = () => {
+export const Logo: React.FC = () => {
   const navigate = useNavigate();
   return (
     <LS.Container onClick={() => navigate('/home')}>

ui/src/components/step/step.tsx

@@ -4,7 +4,7 @@ type StepperIndicatorContainerProps = {
   children: React.ReactNode;
 };
 
-const StepperIndicatorContainer = ({
+const StepperIndicatorContainer: React.FC<StepperIndicatorContainerProps> = ({
   children,
 }: StepperIndicatorContainerProps) => {
   return (
@@ -25,7 +25,9 @@ type MintStepContainerProps = {
   children: React.ReactNode;
 };
 
-const Container = ({ children }: MintStepContainerProps) => (
+const Container: React.FC<MintStepContainerProps> = ({
+  children,
+}: MintStepContainerProps) => (
   <Flex css={{ flexDirection: 'row', justifyContent: 'center' }}>
     {children}
   </Flex>
@@ -36,7 +38,7 @@ type StepProps = {
   header: string;
 };
 
-export const Step: React.FC<StepProps> = ({ children, header }) => {
+export const Step: React.FC<StepProps> = ({ children, header }: StepProps) => {
   return (
     <Container>
       <StepperIndicatorContainer>

ui/src/components/toast/toast.styles.tsx

@@ -1,5 +1,7 @@
-import { dripStitches } from '@/theme';
 import * as ToastLib from '@radix-ui/react-toast';
+
+import { dripStitches } from '@/theme';
+
 import { Icon, IconButton } from '../core';
 import { Flex } from '../layout';
 

ui/src/components/toast/toast.tsx

@@ -1,10 +1,12 @@
+import { useCallback, useState } from 'react';
+
 import {
   toastsActions,
   ToastsState,
   useAppDispatch,
   useToastsState,
 } from '@/store';
-import { useCallback, useState } from 'react';
+
 import { Icon } from '../core';
 import { ToastStyles } from './toast.styles';
 
@@ -16,7 +18,7 @@ const Toast: React.FC<ToastProps> = ({
   message,
   onDismiss,
   duration = 3000,
-}) => {
+}: ToastProps) => {
   const dispatch = useAppDispatch();
   const [open, setOpen] = useState(true);
 

ui/src/hooks/use-debounce.ts

@@ -1,9 +1,10 @@
 import { useRef } from 'react';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const useDebounce = <A extends any[], F extends (...args: A) => void>(
   f: F,
   t = 500
-) => {
+): ((...args: A) => void) => {
   const timeOutRef = useRef<NodeJS.Timeout>();
 
   return (...args: A) => {

ui/src/hooks/use-transaction-cost.ts

@@ -1,6 +1,6 @@
-import { useFeeData, useNetwork } from 'wagmi';
 import { ethers } from 'ethers';
 import { useMemo } from 'react';
+import { useFeeData, useNetwork } from 'wagmi';
 
 export const useTransactionCost = (
   value = ethers.BigNumber.from(0),

ui/src/index.tsx

@@ -1,7 +1,9 @@
+import './styles.css';
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
 import { App } from './app';
-import './styles.css';
 import { Providers } from './providers';
 
 const root = ReactDOM.createRoot(

ui/src/integrations/ethereum/ethereum.ts

@@ -1,8 +1,10 @@
 import { JsonRpcProvider, Networkish } from '@ethersproject/providers';
-import { ethers } from 'ethers';
-import * as Contracts from './contracts';
-import { env } from '@/constants';
 import { Alchemy, Network } from 'alchemy-sdk';
+import { ethers } from 'ethers';
+
+import { env } from '@/constants';
+
+import * as Contracts from './contracts';
 
 const config = {
   apiKey: env.alchemy.id,

ui/src/integrations/ethereum/hooks/ethereum-hooks.tsx

@@ -1,20 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Abi as AbiType } from 'abitype';
+import { useState } from 'react';
 import {
   Address,
   useContractWrite,
   usePrepareContractWrite,
-  useWaitForTransaction,
   UsePrepareContractWriteConfig,
+  useWaitForTransaction,
 } from 'wagmi';
-import type { Abi as AbiType } from 'abitype';
-import { FleekERC721 } from '../contracts';
+
 import { createContext } from '@/utils';
-import { useState } from 'react';
+
+import { FleekERC721 } from '../contracts';
 
 /**
  * This is a factory to create context factories for contracts write.
  * It should be used inside other context factories specific for each
  * contract.
  */
+// TODO: Fix this eslint-disable-next-line
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 const createWriteContractContext = <
   TAbi extends EthereumHooks.Abi,
   TArgumentsMap extends EthereumHooks.WriteContext.ArgumentsMap,
@@ -44,7 +49,7 @@ const createWriteContractContext = <
     providerName,
   });
 
-  const Provider = ({
+  const Provider: React.FC = ({
     children,
     config: {
       prepare: prepareConfig = {},

ui/src/integrations/ethereum/lib/fleek-erc721.ts

@@ -3,6 +3,7 @@ import {
   Result as InterfaceResult,
 } from '@ethersproject/abi/lib/interface';
 import { BytesLike } from 'ethers';
+
 import { Ethereum } from '../ethereum';
 
 enum Billing {

ui/src/mocks/detail.ts

@@ -34,8 +34,9 @@ const mockDetail = {
   ],
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
 export const fetchSiteDetail = async (tokenId: string) => {
-  return new Promise((resolved, reject) => {
+  return new Promise((resolved) => {
     setTimeout(() => {
       resolved({
         data: { ...mockDetail, externalUrl: mockDetail.external_url },

ui/src/mocks/list.ts

@@ -1,5 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { ComboboxItem } from '@/components';
-import { GithubState } from '@/store';
 
 const listSites = [
   {

ui/src/mocks/mint-site.ts

@@ -1,9 +1,10 @@
 import { SiteNFT } from '@/types';
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const mintSiteNFT = async (props: SiteNFT) => {
   const { name, description, owner, externalUrl, ens, commitHash, repo } =
     props;
-  return new Promise((resolved, rejected) => {
+  return new Promise((resolved) => {
     setTimeout(() => {
       // returning data of the site for now
       // just leave rejected for testing purposes

ui/src/providers/apollo-provider.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
 import {
   ApolloClient,
-  InMemoryCache,
   ApolloProvider as Provider,
+  InMemoryCache,
 } from '@apollo/client';
 import { GraphApolloLink } from '@graphprotocol/client-apollo';
+import React from 'react';
+
 import * as GraphClient from '@/graphclient';
 
 const client = new ApolloClient({

ui/src/providers/connectkit-provider.tsx

@@ -1,9 +1,10 @@
-import { WagmiConfig, createClient } from 'wagmi';
-import { polygonMumbai } from 'wagmi/chains';
 import {
   ConnectKitProvider as ConnectKitProviderLib,
   getDefaultClient,
 } from 'connectkit';
+import { createClient, WagmiConfig } from 'wagmi';
+import { polygonMumbai } from 'wagmi/chains';
+
 import { env } from '@/constants';
 
 const alchemyId = env.alchemy.id;
@@ -23,7 +24,7 @@ type ConnectKitProviderProps = {
 
 export const ConnectkitProvider: React.FC<ConnectKitProviderProps> = ({
   children,
-}) => (
+}: ConnectKitProviderProps) => (
   <WagmiConfig client={wagmiClient}>
     <ConnectKitProviderLib>{children}</ConnectKitProviderLib>
   </WagmiConfig>

ui/src/providers/providers.tsx

@@ -7,7 +7,9 @@ type ProviderProps = {
   children: React.ReactNode;
 };
 
-export const Providers: React.FC<ProviderProps> = ({ children }) => {
+export const Providers: React.FC<ProviderProps> = ({
+  children,
+}: ProviderProps) => {
   return (
     <ReduxProvider>
       <ReactQueryProvider>

ui/src/providers/react-query-provider.tsx

@@ -10,7 +10,7 @@ type ReactQueryProviderProps = {
 
 export const ReactQueryProvider: React.FC<ReactQueryProviderProps> = ({
   children,
-}) => {
+}: ReactQueryProviderProps) => {
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );

ui/src/providers/redux-provider.tsx

@@ -1,10 +1,11 @@
-import { store } from '@/store';
 import { Provider } from 'react-redux';
 
+import { store } from '@/store';
+
 type ReduxProviderProps = {
   children: React.ReactNode;
 };
 
-export const ReduxProvider: React.FC<ReduxProviderProps> = ({ children }) => (
-  <Provider store={store}>{children}</Provider>
-);
+export const ReduxProvider: React.FC<ReduxProviderProps> = ({
+  children,
+}: ReduxProviderProps) => <Provider store={store}>{children}</Provider>;

ui/src/store/features/fleek-erc721/async-thunk/fetch-billing.ts

@@ -1,7 +1,9 @@
-import { FleekERC721 } from '@/integrations';
-import { FleekERC721State, fleekERC721Actions, RootState } from '@/store';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
+import { FleekERC721 } from '@/integrations';
+import { fleekERC721Actions, FleekERC721State, RootState } from '@/store';
+import { AppLog } from '@/utils';
+
 type FetchBilling = FleekERC721State.BillingKeys;
 
 export const fetchBilling = createAsyncThunk<void, FetchBilling>(
@@ -18,7 +20,7 @@ export const fetchBilling = createAsyncThunk<void, FetchBilling>(
 
       dispatch(fleekERC721Actions.setBilling({ key, value }));
     } catch (error) {
-      console.log(error);
+      AppLog.error(error);
       dispatch(fleekERC721Actions.setBillingState({ key, value: 'failed' }));
     }
   }

ui/src/store/features/fleek-erc721/fleek-erc721-slice.ts

@@ -1,8 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { FleekERC721 } from '@/integrations';
 import { RootState } from '@/store';
 import { useAppSelector } from '@/store/hooks';
+
 import * as asyncThunk from './async-thunk';
-import { FleekERC721 } from '@/integrations';
 
 export namespace FleekERC721State {
   export type QueryState = undefined | 'loading' | 'failed' | 'success';

ui/src/store/features/fleek-erc721/hooks/use-fleek-erc721-billing.ts

@@ -1,11 +1,14 @@
-import { useAppDispatch } from '@/store/hooks';
 import { useEffect } from 'react';
+
+import { useAppDispatch } from '@/store/hooks';
+
 import {
   fleekERC721Actions,
   FleekERC721State,
   useFleekERC721Store,
 } from '../fleek-erc721-slice';
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const useFleekERC721Billing = (key: FleekERC721State.BillingKeys) => {
   const { billing, billingState } = useFleekERC721Store();
   const dispatch = useAppDispatch();
@@ -18,6 +21,7 @@ export const useFleekERC721Billing = (key: FleekERC721State.BillingKeys) => {
     if (typeof billingState[key] !== 'undefined') return;
 
     refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return [billing[key], billingState[key], refresh] as const;

ui/src/store/features/github/async-thunk/fetch-branches.ts

@@ -1,7 +1,9 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
 import { ComboboxItem } from '@/components';
 import { githubActions, RootState } from '@/store';
 import { AppLog } from '@/utils';
-import { createAsyncThunk } from '@reduxjs/toolkit';
+
 import { GithubClient } from '../github-client';
 
 type FetchBranches = {

ui/src/store/features/github/async-thunk/fetch-repositories.ts

@@ -1,6 +1,8 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
 import { githubActions, RootState } from '@/store';
 import { AppLog } from '@/utils';
-import { createAsyncThunk } from '@reduxjs/toolkit';
+
 import { GithubClient } from '../github-client';
 
 export const fetchRepositoriesThunk = createAsyncThunk(

ui/src/store/features/github/async-thunk/fetch-user-organizations.ts

@@ -1,7 +1,8 @@
-import { ComboboxItem } from '@/components';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
 import { RootState } from '@/store';
 import { AppLog } from '@/utils';
-import { createAsyncThunk } from '@reduxjs/toolkit';
+
 import { GithubClient, UserData } from '../github-client';
 import { githubActions } from '../github-slice';
 

ui/src/store/features/github/async-thunk/login.ts

@@ -1,7 +1,8 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { env } from '@/constants';
 import { initializeApp } from 'firebase/app';
-import { getAuth, signInWithPopup, GithubAuthProvider } from 'firebase/auth';
+import { getAuth, GithubAuthProvider, signInWithPopup } from 'firebase/auth';
+
+import { env } from '@/constants';
 import { githubActions, RootState } from '@/store';
 import { AppLog } from '@/utils';
 

ui/src/store/features/github/github-client.ts

@@ -1,5 +1,7 @@
-import { DropdownItem } from '@/components';
 import { Octokit } from 'octokit';
+
+import { DropdownItem } from '@/components';
+
 import { GithubState } from './github-slice';
 
 export type UserData = {
@@ -43,25 +45,22 @@ export class GithubClient {
     });
   }
 
-  async fetchRepos(url: string) {
-    try {
-      const repos = await fetch(url, {
-        headers: {
-          Authorization: `Bearer ${this.token}`,
-        },
-      }).then((res) => res.json());
+  async fetchRepos(url: string): Promise<GithubState.Repository[]> {
+    const repos = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${this.token}`,
+      },
+    }).then((res) => res.json());
 
-      return repos.map(
-        (repo: any) =>
-          ({
-            name: repo.name,
-            url: repo.html_url,
-            defaultBranch: repo.default_branch,
-          } as GithubState.Repository)
-      );
-    } catch (error) {
-      return error;
-    }
+    return repos.map(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (repo: any) =>
+        ({
+          name: repo.name,
+          url: repo.html_url,
+          defaultBranch: repo.default_branch,
+        } as GithubState.Repository)
+    );
   }
 
   async fetchBranches(owner: string, repo: string): Promise<DropdownItem[]> {

ui/src/store/features/github/github-slice.ts

@@ -1,8 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { ComboboxItem } from '@/components';
 import { RootState } from '@/store';
 import { useAppSelector } from '@/store/hooks';
+
 import * as asyncThunk from './async-thunk';
-import { ComboboxItem } from '@/components';
 import { UserData } from './github-client';
 
 export namespace GithubState {

ui/src/store/hooks.ts

@@ -1,4 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+
 import type { AppDispatch, RootState } from './store';
 
 export const useAppDispatch = (): AppDispatch => useDispatch<AppDispatch>();

ui/src/theme/themes.ts

@@ -4,7 +4,6 @@ import type { ConfigType } from '@stitches/react/types/config';
 
 import { allToNegative } from '../utils';
 import {
-  colors,
   darkColors,
   media as libMedia,
   radii,
@@ -37,7 +36,7 @@ export const createDripStitches = <
   Utils extends {} = {}
 >(
   config?: CreateDripStitchesConfig<Prefix, Media, Theme, ThemeMap, Utils>
-) => {
+): object => {
   const { prefix, theme, themeMap, utils, media } = config || {};
 
   const _spacing = {

ui/src/utils/format.ts

@@ -1,13 +1,12 @@
-export const getRepoAndCommit = (url: string) => {
-  //TODO validate is a github url
-  url = url.replace('/commit', '');
-  const lastIndexSlash = url.lastIndexOf('/');
-  const repo = url.substring(0, lastIndexSlash + 1).slice(0, lastIndexSlash);
-  const commit_hash = url.substring(lastIndexSlash + 1, url.length);
-  return { repo, commit_hash };
-};
-
-export const contractAddress = (address: string): string => {
-  return `${address.slice(0, 6)}...${address.slice(-4)}`;
-};
-
+export const getRepoAndCommit = (url: string): object => {
+  //TODO validate is a github url
+  url = url.replace('/commit', '');
+  const lastIndexSlash = url.lastIndexOf('/');
+  const repo = url.substring(0, lastIndexSlash + 1).slice(0, lastIndexSlash);
+  const commit_hash = url.substring(lastIndexSlash + 1, url.length);
+  return { repo, commit_hash };
+};
+
+export const contractAddress = (address: string): string => {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};

ui/src/utils/log.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { pushToast } from './toast';
 
 export abstract class AppLog {

ui/src/utils/object.ts

@@ -1,6 +1,6 @@
 type StringObject = { [key: string]: string };
 
-export const allToNegative = (obj: StringObject) => {
+export const allToNegative = (obj: StringObject): StringObject => {
   const negativeSpacing: StringObject = {};
 
   for (const key in obj) {

ui/src/utils/string-validators.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export type StringValidator = {
   name: string;
   message: string;
@@ -25,7 +26,7 @@ const isUrl: StringValidator = {
   name: 'isUrl',
   validate: (value = '') => {
     const regex =
-      /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+      /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/;
     return regex.test(value);
   },
   message: 'Is not a valid URL',

ui/src/utils/validation.ts

@@ -1,10 +1,10 @@
-export const isValidUrl = (url: string) => {
+export const isValidUrl = (url: string): boolean => {
   const regex =
-    /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+    /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/;
   return regex.test(url);
 };
 
-export const isValidImageUrl = (url: string) => {
+export const isValidImageUrl = (url: string): boolean => {
   const regex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|svg)$/;
   return regex.test(url);
 };

ui/src/views/access-point/create-ap-form.tsx

@@ -1,8 +1,9 @@
 import { Card, Grid, Icon, IconButton, Stepper } from '@/components';
+
 import { CreateAccessPoint } from './create-ap.context';
 import { CreateAccessPointFormBody } from './create-ap.form-body';
 
-export const CreateAccessPointForm = () => {
+export const CreateAccessPointForm: React.FC = () => {
   const { prevStep } = Stepper.useContext();
 
   const { nfa } = CreateAccessPoint.useContext();

ui/src/views/access-point/create-ap-preview.tsx

@@ -1,8 +1,10 @@
+import { ethers } from 'ethers';
+import { useMemo } from 'react';
+
 import {
   Button,
   Card,
   Flex,
-  Form,
   Grid,
   Icon,
   IconButton,
@@ -10,12 +12,11 @@ import {
 } from '@/components';
 import { useTransactionCost } from '@/hooks';
 import { FleekERC721 } from '@/integrations';
-import { useMemo } from 'react';
-import { ethers } from 'ethers';
+
 import { CreateAccessPoint } from './create-ap.context';
 import { useAccessPointFormContext } from './create-ap.form.context';
 
-export const CreateAccessPointPreview = () => {
+export const CreateAccessPointPreview: React.FC = () => {
   const { prevStep } = Stepper.useContext();
   const {
     prepare: { status: prepareStatus, data: prepareData, error: prepareError },
@@ -42,6 +43,7 @@ export const CreateAccessPointPreview = () => {
 
     if (prepareError) {
       const parsedError = FleekERC721.parseError(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (prepareError as any).error?.data.data
       );
       if (parsedError.isIdentified) {
@@ -53,6 +55,7 @@ export const CreateAccessPointPreview = () => {
 
     const formattedCost = ethers.utils.formatEther(cost).slice(0, 9);
     return `Creating this Access Point will cost ${formattedCost} ${currency}.`;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [prepareData, isCostLoading, prepareStatus]);
 
   const isLoading = useMemo(
@@ -92,7 +95,7 @@ export const CreateAccessPointPreview = () => {
             rowGap: '$6',
           }}
         >
-          <Flex>
+          <Flex css={{ flexDirection: 'column' }}>
             <span>NFA: {nfa.value}</span>
             <span>{appName}</span>
             <span className="text-slate11 text-sm">{message}</span>

ui/src/views/access-point/create-ap.context.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
+
 import { ComboboxItem } from '@/components';
 import { EthereumHooks } from '@/integrations';
 import { useFleekERC721Billing } from '@/store';
 import { AppLog, createContext, pushToast } from '@/utils';
-import { useState } from 'react';
 
 export type AccessPointContext = {
   billing: string | undefined;
@@ -45,6 +46,7 @@ export abstract class CreateAccessPoint {
                 AppLog.info('Transaction:', data);
                 pushToast('success', 'Your transaction was successful!');
               },
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
               onError: (error) => {
                 AppLog.errorToast(
                   'There was an error trying to create the Access Point. Please try again'

ui/src/views/access-point/create-ap.form-body.tsx

@@ -1,15 +1,17 @@
-import { Button, Flex, Form, Spinner, Stepper } from '@/components';
-import { AppLog } from '@/utils';
 import { useQuery } from '@apollo/client';
 import { ethers } from 'ethers';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+
+import { Button, Flex, Form, Spinner, Stepper } from '@/components';
+import { getNFADocument } from '@/graphclient';
+import { AppLog } from '@/utils';
+
+import { CreateAccessPoint } from './create-ap.context';
 import { useAccessPointFormContext } from './create-ap.form.context';
 import { NfaPicker } from './nfa-picker';
-import { getNFADocument } from '@/graphclient';
-import { CreateAccessPoint } from './create-ap.context';
 
-export const CreateAccessPointFormBody = () => {
+export const CreateAccessPointFormBody: React.FC = () => {
   const { id } = useParams();
   const { nextStep } = Stepper.useContext();
   const { nfa, setNfa, billing } = CreateAccessPoint.useContext();
@@ -54,7 +56,7 @@ export const CreateAccessPointFormBody = () => {
         AppLog.errorToast("We couldn't find the NFA you are looking for");
       }
     }
-  }, [nfaData, id]);
+  }, [nfaData, id, setNfa]);
 
   if (nfaLoading) {
     return (
@@ -70,7 +72,7 @@ export const CreateAccessPointFormBody = () => {
     );
   }
 
-  const handleContinueClick = () => {
+  const handleContinueClick = (): void => {
     if (nfa && appName) {
       setArgs([Number(nfa.value), appName, { value: billing }]);
       nextStep();

ui/src/views/access-point/create-ap.form.context.ts

@@ -1,6 +1,7 @@
+import { useState } from 'react';
+
 import { FormField, useFormField } from '@/components';
 import { createContext, StringValidators } from '@/utils';
-import { useState } from 'react';
 
 export type CreateAccessPointFormContext = {
   form: {

ui/src/views/access-point/create-ap.stepper.tsx

@@ -1,10 +1,11 @@
 import { Form, Step, Stepper } from '@/components';
+
 import { WalletStep } from '../mint/wallet-step';
+import { useAccessPointFormContext } from './create-ap.form.context';
 import { CreateAccessPointForm } from './create-ap-form';
 import { CreateAccessPointPreview } from './create-ap-preview';
-import { useAccessPointFormContext } from './create-ap.form.context';
 
-export const CreateApStepper = () => {
+export const CreateApStepper: React.FC = () => {
   const {
     form: {
       isValid: [, setIsValid],

ui/src/views/access-point/create-ap.tsx

@@ -1,4 +1,5 @@
 import { Flex } from '@/components';
+
 import { CreateAccessPoint } from './create-ap.context';
 import {
   CreateAccessPointFormProvider,
@@ -6,7 +7,7 @@ import {
 } from './create-ap.form.context';
 import { CreateApStepper } from './create-ap.stepper';
 
-export const CreateAP = () => {
+export const CreateAP: React.FC = () => {
   const context = useAccessPointFormContextInit();
   return (
     <Flex

ui/src/views/access-point/nfa-picker.tsx

@@ -1,15 +1,17 @@
+import { useQuery } from '@apollo/client';
+import { useMemo } from 'react';
+
 import { Combobox, ComboboxItem } from '@/components';
 import { getLatestNFAsDocument } from '@/graphclient';
 import { AppLog } from '@/utils';
-import { useQuery } from '@apollo/client';
-import { useMemo } from 'react';
+
 import { CreateAccessPoint } from './create-ap.context';
 
-export const NfaPicker = () => {
+export const NfaPicker: React.FC = () => {
   const { nfa, setNfa } = CreateAccessPoint.useContext();
   const { data, loading, error } = useQuery(getLatestNFAsDocument);
 
-  const handleNfaChange = (item: ComboboxItem) => {
+  const handleNfaChange = (item: ComboboxItem): void => {
     setNfa(item);
   };
 

ui/src/views/components-test/color-picker.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, Icon } from '@/components';
 
-export const ColorPickerTest = () => {
+export const ColorPickerTest: React.FC = () => {
   return (
     <Flex css={{ margin: '$22', gap: '$5', width: '$8' }}>
       <Button

ui/src/views/components-test/combobox-test.tsx

@@ -1,22 +1,23 @@
-import { Combobox, ComboboxItem, Flex } from '@/components';
 import { useState } from 'react';
 
+import { Combobox, Flex } from '@/components';
+
 const itemsCombobox = [
   { label: 'Item 1', value: 'item-1' },
   { label: 'Item 2', value: 'item-2' },
   { label: 'Item 3', value: 'item-3' },
 ];
 
-export const ComboboxTest = () => {
+export const ComboboxTest: React.FC = () => {
   const [selectedValue, setSelectedValue] = useState('');
   const [selectedValueAutocomplete, setSelectedValueAutocomplete] =
     useState('');
 
-  const handleComboboxChange = (value: string) => {
+  const handleComboboxChange = (value: string): void => {
     setSelectedValue(value);
   };
 
-  const handleComboboxChangeAutocomplete = (value: string) => {
+  const handleComboboxChangeAutocomplete = (value: string): void => {
     setSelectedValueAutocomplete(value);
   };
 

ui/src/views/components-test/components-test.tsx

@@ -1,9 +1,10 @@
 import { Flex } from '@/components';
+
 import { ColorPickerTest } from './color-picker';
 import { ComboboxTest } from './combobox-test';
 import { ToastTest } from './toast-test';
 
-export const ComponentsTest = () => {
+export const ComponentsTest: React.FC = () => {
   return (
     <Flex css={{ flexDirection: 'column' }}>
       <ColorPickerTest />

ui/src/views/components-test/toast-test.tsx

@@ -1,8 +1,9 @@
-import { Button, Flex } from '@/components';
-import { pushToast } from '@/utils';
 import { useNavigate } from 'react-router-dom';
 
-export const ToastTest = () => {
+import { Button, Flex } from '@/components';
+import { pushToast } from '@/utils';
+
+export const ToastTest: React.FC = () => {
   const navigate = useNavigate();
   return (
     <Flex css={{ margin: '$22', gap: '$5' }}>

ui/src/views/explore/explore.tsx

@@ -1,5 +1,5 @@
-import { Header } from './header';
 import { Explore as ES } from './explore.styles';
+import { Header } from './header';
 import { ListNfas } from './list-nfas/list-nfas';
 
 export const Explore: React.FC = () => {

ui/src/views/explore/header.tsx

@@ -1,8 +1,10 @@
-import { Button } from '@/components';
 import { Link } from 'react-router-dom';
+
+import { Button } from '@/components';
+
 import { Header as HS } from './header.styles';
 
-export const Header = () => (
+export const Header: React.FC = () => (
   <HS.Container>
     <HS.Text>
       <HS.GrayText>

ui/src/views/explore/list-nfas/list-nfas.tsx

@@ -1,4 +1,5 @@
 import { Flex } from '@/components';
+
 import { NFAList } from './nfa-list';
 import { ResultsSearch } from './results-search';
 

ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx

@@ -1,15 +1,13 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { useQuery } from '@apollo/client';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 
-import { Button, Card, Flex, NFACard, NoResults } from '@/components';
+import { Button, Flex, NFACard, NoResults } from '@/components';
 import { lastNFAsPaginatedDocument, totalTokensDocument } from '@/graphclient';
-import { FleekERC721 } from '@/integrations/ethereum/contracts';
 
 const pageSize = 10; //Set this size to test pagination
 
-export const NFAList = () => {
+export const NFAList: React.FC = () => {
   const [pageNumber, setPageNumber] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
 
@@ -40,13 +38,13 @@ export const NFAList = () => {
   if (loadingMintedTokens || loadingTotalTokens) return <div>Loading...</div>; //TODO handle loading
   if (errorMintedTokens || errorTotalTokens) return <div>Error</div>; //TODO handle error
 
-  const handlePreviousPage = () => {
+  const handlePreviousPage = (): void => {
     if (pageNumber > 1) {
       setPageNumber((prevState) => prevState - 1);
     }
   };
 
-  const handleNextPage = () => {
+  const handleNextPage = (): void => {
     if (pageNumber + 1 <= totalPages)
       setPageNumber((prevState) => prevState + 1);
   };

ui/src/views/explore/list-nfas/results-search.tsx

@@ -1,5 +1,7 @@
-import { Dropdown, DropdownItem, Flex, Input } from '@/components';
 import { useState } from 'react';
+
+import { Dropdown, DropdownItem, Flex, Input } from '@/components';
+
 import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles';
 
 const orderResults: DropdownItem[] = [

ui/src/views/home/home.tsx

@@ -1,7 +1,8 @@
-import { Flex } from '@/components';
 import { Link } from 'react-router-dom';
 
-export const Home = () => {
+import { Flex } from '@/components';
+
+export const Home: React.FC = () => {
   return (
     <Flex css={{ flexDirection: 'column' }}>
       <h1>Home</h1>

ui/src/views/mint-test/mint-test.tsx

@@ -1,9 +1,10 @@
+import { ConnectKitButton } from 'connectkit';
+import { useAccount } from 'wagmi';
+
 import { Button, Flex } from '@/components';
 import { Separator } from '@/components/core/separator.styles';
 import { EthereumHooks } from '@/integrations';
 import { AppLog } from '@/utils';
-import { ConnectKitButton } from 'connectkit';
-import { useAccount } from 'wagmi';
 
 /**
  * This is an example about how to use the EthereumHooks to create a context for a contract method
@@ -22,7 +23,7 @@ const Preparing: React.FC = () => {
     setArgs,
   } = useMintContext();
 
-  const handlePrepare = () => {
+  const handlePrepare = (): void => {
     // `setArgs` will fulfill the arguments used to call the contract method
     setArgs([
       '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
@@ -81,7 +82,7 @@ const Minting: React.FC = () => {
     },
   } = useMintContext();
 
-  const handleMint = () => {
+  const handleMint = (): void => {
     // The trigger function will be undefined in case the contract method is not ready to be called
     // Preparing the contract method will run a gas estimation and will set the trigger function
     // If the gas estimation fails, the trigger function will be undefined
@@ -135,6 +136,7 @@ const Waiting: React.FC = () => {
 
   if (transactionStatus !== 'success') {
     if (transactionStatus === 'error') {
+      // eslint-disable-next-line no-console
       console.error(transactionError);
       return <div>Transaction error</div>;
     }

ui/src/views/mint/form-step/form.validations.ts

@@ -4,7 +4,7 @@ import { Ethereum } from '@/integrations';
 export const validateEnsField = async (
   ensName: string,
   setError: (message: string) => void
-) => {
+): Promise<boolean> => {
   const isValid = await Ethereum.validateEnsName(ensName);
   if (!isValid) setError('Invalid ENS name');
   else setError('');

ui/src/views/mint/github-step/github-step.tsx

@@ -5,7 +5,7 @@ import {
   GithubRepositoryConnection,
 } from './steps';
 
-export const GithubStep = () => {
+export const GithubStep: React.FC = () => {
   const { githubStep } = Mint.useContext();
 
   switch (githubStep) {

ui/src/views/mint/github-step/steps/github-connect/github-connect-step.tsx

@@ -1,5 +1,6 @@
 import { Card, Grid, Stepper } from '@/components';
 import { MintCardHeader } from '@/views/mint/mint-card';
+
 import { GithubButton } from './github-button';
 
 export const GithubConnect: React.FC = () => {

ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-body/repo-branch-commit-fields.tsx

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
+
 import { ComboboxItem, Flex, Form, Spinner } from '@/components';
 import { githubActions, useAppDispatch, useGithubStore } from '@/store';
+import { AppLog } from '@/utils';
 import { Mint } from '@/views/mint/mint.context';
 import { useMintFormContext } from '@/views/mint/nfa-step/form-step';
-import { AppLog } from '@/utils';
 
-export const RepoBranchCommitFields = () => {
+export const RepoBranchCommitFields: React.FC = () => {
   const { queryLoading, branches } = useGithubStore();
   const dispatch = useAppDispatch();
   const {
@@ -31,7 +32,7 @@ export const RepoBranchCommitFields = () => {
         })
       );
     }
-  }, [queryLoading, dispatch]);
+  }, [queryLoading, dispatch, selectedUserOrg.label, repositoryName.name]);
 
   useEffect(() => {
     try {
@@ -54,7 +55,14 @@ export const RepoBranchCommitFields = () => {
     } catch (error) {
       AppLog.errorToast('We had a problem. Try again');
     }
-  }, [queryLoading, branches]);
+  }, [
+    queryLoading,
+    branches,
+    repositoryName.defaultBranch,
+    gitBranch,
+    setGitBranch,
+    setGitCommit,
+  ]);
 
   if (queryLoading === 'loading') {
     return (
@@ -70,7 +78,7 @@ export const RepoBranchCommitFields = () => {
     );
   }
 
-  const handleBranchChange = (branch: ComboboxItem) => {
+  const handleBranchChange = (branch: ComboboxItem): void => {
     setGitBranch(branch.label);
     setGitCommit(branch.value);
   };

ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-body/repo-configuration-body.tsx

@@ -1,10 +1,11 @@
-import { Button, Card, Flex, Form, Stepper } from '@/components';
+import { Button, Card, Flex, Stepper } from '@/components';
 import { Mint } from '@/views/mint/mint.context';
 import { useMintFormContext } from '@/views/mint/nfa-step/form-step';
+
 import { RepoRow } from '../../repository-row';
 import { RepoBranchCommitFields } from './repo-branch-commit-fields';
 
-export const RepoConfigurationBody = () => {
+export const RepoConfigurationBody: React.FC = () => {
   const {
     form: {
       isValid: [isValid],
@@ -15,7 +16,7 @@ export const RepoConfigurationBody = () => {
 
   const { nextStep } = Stepper.useContext();
 
-  const handleContinueClick = () => {
+  const handleContinueClick = (): void => {
     nextStep();
   };
 

ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-header.tsx

@@ -1,9 +1,8 @@
-import { DropdownItem } from '@/components';
-import { MintCardHeader } from '@/views/mint/mint-card';
 import { Mint } from '@/views/mint/mint.context';
+import { MintCardHeader } from '@/views/mint/mint-card';
 import { useMintFormContext } from '@/views/mint/nfa-step/form-step';
 
-export const RepoConfigurationHeader = () => {
+export const RepoConfigurationHeader: React.FC = () => {
   const { setGithubStep } = Mint.useContext();
   const {
     form: {
@@ -16,7 +15,7 @@ export const RepoConfigurationHeader = () => {
     },
   } = useMintFormContext();
 
-  const handlePrevStepClick = () => {
+  const handlePrevStepClick = (): void => {
     setGithubStep(2);
     setBranchName('');
     setCommitHash('');

ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration.tsx

@@ -1,4 +1,5 @@
 import { Card } from '@/components';
+
 import { RepoConfigurationBody } from './repo-configuration-body';
 import { RepoConfigurationHeader } from './repo-configuration-header';
 

ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.tsx

@@ -1,3 +1,5 @@
+import React, { useState } from 'react';
+
 import {
   Card,
   ComboboxItem,
@@ -10,13 +12,12 @@ import {
 import { Input } from '@/components/core/input';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useGithubStore } from '@/store';
-import { MintCardHeader } from '@/views/mint/mint-card';
 import { Mint } from '@/views/mint/mint.context';
-import React, { useState } from 'react';
+
 import { RepositoriesList } from './repositories-list';
 import { UserOrgsCombobox } from './users-orgs-combobox';
 
-export const Loading = () => (
+export const Loading: React.FC = () => (
   <Flex
     css={{
       justifyContent: 'center',
@@ -40,12 +41,14 @@ export const GithubRepositoryConnection: React.FC = () => {
     500
   );
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
     event.stopPropagation();
     setSearchValueDebounced(event);
   };
 
-  const handlePrevStepClick = () => {
+  const handlePrevStepClick = (): void => {
     setGithubStep(1);
     setSelectedUserOrg({} as ComboboxItem);
   };

ui/src/views/mint/github-step/steps/github-repository-selection/repositories-list.tsx

@@ -1,14 +1,18 @@
 import { useEffect, useMemo } from 'react';
+
 import { Flex, NoResults } from '@/components';
-import { Mint } from '@/views/mint/mint.context';
 import { githubActions, useAppDispatch, useGithubStore } from '@/store';
+import { Mint } from '@/views/mint/mint.context';
+
 import { Repository } from './repository';
 
 type RepositoriesListProps = {
   searchValue: string;
 };
 
-export const RepositoriesList = ({ searchValue }: RepositoriesListProps) => {
+export const RepositoriesList: React.FC<RepositoriesListProps> = ({
+  searchValue,
+}: RepositoriesListProps) => {
   const { selectedUserOrg } = Mint.useContext();
   const { queryLoading, repositories } = useGithubStore();
   const dispatch = useAppDispatch();

ui/src/views/mint/github-step/steps/github-repository-selection/repository.tsx

@@ -1,7 +1,9 @@
+import { useCallback } from 'react';
+
 import { Button, Separator } from '@/components';
 import { githubActions, GithubState, useAppDispatch } from '@/store';
 import { Mint } from '@/views/mint/mint.context';
-import { useCallback } from 'react';
+
 import { RepoRow } from '../repository-row';
 
 type RepositoryProps = {
@@ -9,7 +11,11 @@ type RepositoryProps = {
   index: number;
   length: number;
 };
-export const Repository = ({ repository, index, length }: RepositoryProps) => {
+export const Repository: React.FC<RepositoryProps> = ({
+  repository,
+  index,
+  length,
+}: RepositoryProps) => {
   const { setGithubStep, setRepositoryName } = Mint.useContext();
 
   const dispatch = useAppDispatch();
@@ -18,7 +24,7 @@ export const Repository = ({ repository, index, length }: RepositoryProps) => {
     setRepositoryName(repository);
     setGithubStep(3);
     dispatch(githubActions.setQueryState('idle'));
-  }, [dispatch]);
+  }, [dispatch, repository, setGithubStep, setRepositoryName]);
 
   return (
     <>

ui/src/views/mint/github-step/steps/github-repository-selection/users-orgs-combobox.tsx

@@ -1,10 +1,11 @@
+import { useEffect } from 'react';
+
 import { Avatar, Combobox, ComboboxItem } from '@/components';
 import { githubActions, useAppDispatch, useGithubStore } from '@/store';
 import { AppLog } from '@/utils';
 import { Mint } from '@/views/mint/mint.context';
-import { useEffect } from 'react';
 
-export const UserOrgsCombobox = () => {
+export const UserOrgsCombobox: React.FC = () => {
   const { queryUserAndOrganizations, userAndOrganizations } = useGithubStore();
   const dispatch = useAppDispatch();
 
@@ -16,7 +17,7 @@ export const UserOrgsCombobox = () => {
     }
   }, [dispatch, queryUserAndOrganizations]);
 
-  const handleUserOrgChange = (item: ComboboxItem) => {
+  const handleUserOrgChange = (item: ComboboxItem): void => {
     if (item) {
       dispatch(githubActions.fetchRepositoriesThunk(item.value));
       setSelectedUserOrg(item);
@@ -34,7 +35,12 @@ export const UserOrgsCombobox = () => {
       //SET first user
       setSelectedUserOrg(userAndOrganizations[0]);
     }
-  }, [queryUserAndOrganizations, selectedUserOrg, userAndOrganizations]);
+  }, [
+    queryUserAndOrganizations,
+    selectedUserOrg,
+    setSelectedUserOrg,
+    userAndOrganizations,
+  ]);
 
   return (
     <Combobox

ui/src/views/mint/github-step/steps/repository-row.tsx

@@ -1,6 +1,7 @@
-import { Flex, Icon } from '@/components';
 import { forwardRef } from 'react';
 
+import { Flex, Icon } from '@/components';
+
 type RepoRowProps = {
   repo: string;
   button: React.ReactNode;
@@ -26,3 +27,5 @@ export const RepoRow = forwardRef<HTMLDivElement, RepoRowProps>(
     </Flex>
   )
 );
+
+RepoRow.displayName = 'RepoRow';

ui/src/views/mint/mint-card/mint-card.tsx

@@ -8,7 +8,7 @@ type MintCardHeaderProps = {
 export const MintCardHeader: React.FC<MintCardHeaderProps> = ({
   title,
   onClickBack,
-}) => {
+}: MintCardHeaderProps) => {
   return (
     <Card.Heading
       title={title}

ui/src/views/mint/mint-stepper.tsx

@@ -1,13 +1,14 @@
-import { Form, Stepper, Step } from '@/components';
-import { MintPreview } from './preview-step/mint-preview';
-import { GithubStep } from './github-step';
-import { WalletStep } from './wallet-step';
-import { NFAStep } from './nfa-step';
-import { Mint } from './mint.context';
-import { NftMinted } from './nft-minted';
-import { useMintFormContext } from './nfa-step/form-step';
+import { Form, Step, Stepper } from '@/components';
 
-export const MintStepper = () => {
+import { GithubStep } from './github-step';
+import { Mint } from './mint.context';
+import { NFAStep } from './nfa-step';
+import { useMintFormContext } from './nfa-step/form-step';
+import { NftMinted } from './nft-minted';
+import { MintPreview } from './preview-step/mint-preview';
+import { WalletStep } from './wallet-step';
+
+export const MintStepper: React.FC = () => {
   const {
     transaction: { isSuccess },
   } = Mint.useTransactionContext();

ui/src/views/mint/mint.context.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import { ComboboxItem } from '@/components';
 import { EthereumHooks } from '@/integrations';
-import { AppLog, createContext } from '@/utils';
 import { GithubState, useFleekERC721Billing } from '@/store';
+import { AppLog, createContext } from '@/utils';
 
 export type MintContext = {
   billing: string | undefined;

ui/src/views/mint/mint.tsx

@@ -1,9 +1,10 @@
 import { Flex } from '@/components';
-import { MintStepper } from './mint-stepper';
+
 import { Mint as MintContext } from './mint.context';
+import { MintStepper } from './mint-stepper';
 import { MintFormProvider, useMintFormContextInit } from './nfa-step/form-step';
 
-export const Mint = () => {
+export const Mint: React.FC = () => {
   const context = useMintFormContextInit();
   return (
     <Flex

ui/src/views/mint/nfa-step/form-step/fields/app-description-field.tsx

@@ -1,7 +1,8 @@
 import { Form } from '@/components';
+
 import { useMintFormContext } from '../mint-form.context';
 
-export const AppDescriptionField = () => {
+export const AppDescriptionField: React.FC = () => {
   const {
     form: { appDescription },
   } = useMintFormContext();

ui/src/views/mint/nfa-step/form-step/fields/app-name-field.tsx

@@ -1,7 +1,8 @@
 import { Form } from '@/components';
+
 import { useMintFormContext } from '../mint-form.context';
 
-export const AppNameField = () => {
+export const AppNameField: React.FC = () => {
   const {
     form: { appName },
   } = useMintFormContext();

ui/src/views/mint/nfa-step/form-step/fields/ens-domain-field/domain-field.tsx

@@ -1,8 +1,8 @@
 import { Form } from '@/components';
-import { Mint } from '@/views/mint/mint.context';
+
 import { useMintFormContext } from '../../mint-form.context';
 
-export const DomainField = () => {
+export const DomainField: React.FC = () => {
   const {
     form: { domainURL },
   } = useMintFormContext();

ui/src/views/mint/nfa-step/form-step/fields/ens-domain-field/ens-domain-field.tsx

@@ -1,8 +1,9 @@
 import { Flex } from '@/components';
+
 import { DomainField } from './domain-field';
 import { EnsField } from './ens-field';
 
-export const EnsDomainField = () => (
+export const EnsDomainField: React.FC = () => (
   <Flex css={{ columnGap: '$4' }}>
     <EnsField />
     <DomainField />