diff --git a/ui/postcss.config.js b/ui/postcss.config.js index a1b36d2..73e56fc 100644 --- a/ui/postcss.config.js +++ b/ui/postcss.config.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-undef module.exports = { plugins: { tailwindcss: {}, diff --git a/ui/src/app.tsx b/ui/src/app.tsx index 4c2dd2d..16a0d39 100644 --- a/ui/src/app.tsx +++ b/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 ( <> diff --git a/ui/src/components/card/card.tsx b/ui/src/components/card/card.tsx index adb0817..7c2043d 100644 --- a/ui/src/components/card/card.tsx +++ b/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'; diff --git a/ui/src/components/core/avatar/avatar.styles.ts b/ui/src/components/core/avatar/avatar.styles.ts index 8bbd475..c50b444 100644 --- a/ui/src/components/core/avatar/avatar.styles.ts +++ b/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 { diff --git a/ui/src/components/core/avatar/avatar.tsx b/ui/src/components/core/avatar/avatar.tsx index 40e8b38..6948425 100644 --- a/ui/src/components/core/avatar/avatar.tsx +++ b/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( - ( - { fallback, fallbackProps, imageProps = {}, src, alt, css, ...rootProps }, - ref - ) => { + ({ imageProps = {}, src, alt, css, ...rootProps }, ref) => { return ( @@ -13,3 +11,5 @@ export const Avatar = forwardRef( ); } ); + +Avatar.displayName = 'Avatar'; diff --git a/ui/src/components/core/button/button-spinner.tsx b/ui/src/components/core/button/button-spinner.tsx index fcf4796..c1b0663 100644 --- a/ui/src/components/core/button/button-spinner.tsx +++ b/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, diff --git a/ui/src/components/core/color-picker/color-picker.tsx b/ui/src/components/core/color-picker/color-picker.tsx index ba37db1..3e4cb05 100644 --- a/ui/src/components/core/color-picker/color-picker.tsx +++ b/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 = ({ logoColor, logo, setLogoColor, - onBlur, -}) => { +}: ColorPickerProps) => { const inputColorRef = useRef(null); const imageRef = useRef(null); - const handleLogoLoad = (e: React.SyntheticEvent) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const handleLogoLoad = (e: React.SyntheticEvent): 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 = ({ setLogoColor(hexColor); }; - const handleColorChange = (e: React.ChangeEvent) => { + const handleColorChange = (e: React.ChangeEvent): void => { setLogoColor(e.target.value); }; - const handleColorPickerClick = () => { + const handleColorPickerClick = (): void => { inputColorRef.current?.click(); }; diff --git a/ui/src/components/core/combobox/combobox.tsx b/ui/src/components/core/combobox/combobox.tsx index 883608a..fa74939 100644 --- a/ui/src/components/core/combobox/combobox.tsx +++ b/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 = ({ open, leftIcon, error, @@ -71,7 +73,9 @@ type ComboboxOptionProps = { option: ComboboxItem; }; -const ComboboxOption = ({ option }: ComboboxOptionProps) => ( +const ComboboxOption: React.FC = ({ + option, +}: ComboboxOptionProps) => ( @@ -98,7 +102,7 @@ const ComboboxOption = ({ option }: ComboboxOptionProps) => ( ); -export const NoResults = ({ css }: { css?: string }) => ( +export const NoResults: React.FC = ({ css }: { css?: string }) => (
@@ -153,18 +157,15 @@ export type ComboboxProps = { }; export const Combobox = forwardRef( - ( - { - 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([]); const [autocompleteItems, setAutocompleteItems] = useState( [] @@ -180,7 +181,7 @@ export const Combobox = forwardRef( ) { setAutocompleteItems([selectedValue]); } - }, [selectedValue]); + }, [autocompleteItems.length, items, selectedValue, withAutocomplete]); useEffect(() => { setFilteredItems(items); @@ -209,20 +210,22 @@ export const Combobox = forwardRef( } }, 200); - const handleInputChange = (event: React.ChangeEvent) => { + const handleInputChange = ( + event: React.ChangeEvent + ): 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( ); } ); + +Combobox.displayName = 'Combobox'; diff --git a/ui/src/components/core/combobox/combobox.utils.ts b/ui/src/components/core/combobox/combobox.utils.ts index 2b4de14..5c86324 100644 --- a/ui/src/components/core/combobox/combobox.utils.ts +++ b/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, ''); diff --git a/ui/src/components/core/combobox/dropdown.tsx b/ui/src/components/core/combobox/dropdown.tsx index acfefe1..c3d5baf 100644 --- a/ui/src/components/core/combobox/dropdown.tsx +++ b/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 = ({ + option, +}: DropdownOptionProps) => ( `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 = ({ selectedValue, - open, //TODO maybe would be deprecated backgroundColor, textColor, }: DropdownButtonProps) => { @@ -147,8 +149,8 @@ export const Dropdown: React.FC = ({ backgroundColor, textColor, optionsWidth, -}) => { - const handleDropdownChange = (option: DropdownItem) => { +}: DropdownProps) => { + const handleDropdownChange = (option: DropdownItem): void => { onChange(option); }; const width = optionsWidth ? `w-${optionsWidth}` : 'w-full'; diff --git a/ui/src/components/core/icon/icon-library.tsx b/ui/src/components/core/icon/icon-library.tsx index c7e4a26..a8c481b 100644 --- a/ui/src/components/core/icon/icon-library.tsx +++ b/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, diff --git a/ui/src/components/core/icon/icon.tsx b/ui/src/components/core/icon/icon.tsx index 3a23a1d..3ee1ef4 100644 --- a/ui/src/components/core/icon/icon.tsx +++ b/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'; diff --git a/ui/src/components/core/input/input-file.tsx b/ui/src/components/core/input/input-file.tsx index d321bee..456e68c 100644 --- a/ui/src/components/core/input/input-file.tsx +++ b/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; export const StyledInputFile = forwardRef( - ({ value: file, onChange, css, ...props }, ref) => { + ({ value: file, onChange, ...props }, ref) => { const inputFileRef = useRef(null); - const handleFileChange = (e: React.ChangeEvent) => { + const handleFileChange = (e: React.ChangeEvent): void => { e.preventDefault(); onChange(e); }; - const handleInputClick = () => { + const handleInputClick = (): void => { inputFileRef.current?.click(); }; @@ -41,3 +42,5 @@ export const StyledInputFile = forwardRef( ); } ); + +StyledInputFile.displayName = 'StyledInputFile'; diff --git a/ui/src/components/core/input/input.styles.ts b/ui/src/components/core/input/input.styles.ts index 9ae81f4..4827e4c 100644 --- a/ui/src/components/core/input/input.styles.ts +++ b/ui/src/components/core/input/input.styles.ts @@ -1,4 +1,5 @@ import { dripStitches } from '@/theme'; + import { Icon } from '../icon'; const { styled } = dripStitches; diff --git a/ui/src/components/core/input/input.tsx b/ui/src/components/core/input/input.tsx index 40ba4fa..642abd2 100644 --- a/ui/src/components/core/input/input.tsx +++ b/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; +} & React.ComponentPropsWithRef; -export const Input = forwardRef( - ({ leftIcon, ...props }, ref) => { - return ( -
- {leftIcon && ( - - )} - -
- ); - } -); +export const Input = forwardRef((props, ref) => { + const { leftIcon, ...ownProps } = props; + + return ( +
+ {leftIcon && ( + + )} + +
+ ); +}); + +Input.displayName = 'Input'; diff --git a/ui/src/components/core/switch/switch.tsx b/ui/src/components/core/switch/switch.tsx index ed3c890..41a15e4 100644 --- a/ui/src/components/core/switch/switch.tsx +++ b/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; diff --git a/ui/src/components/form/form.context.tsx b/ui/src/components/form/form.context.tsx index 523b5d7..d6a291f 100644 --- a/ui/src/components/form/form.context.tsx +++ b/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; }); diff --git a/ui/src/components/form/form.stories.tsx b/ui/src/components/form/form.stories.tsx deleted file mode 100644 index 6fcf372..0000000 --- a/ui/src/components/form/form.stories.tsx +++ /dev/null @@ -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(null); - return ( - <> - - Label - - Input error - - - Label - - Textarea error - - - Label - setFile(file)} /> - - - ); -}; diff --git a/ui/src/components/form/form.tsx b/ui/src/components/form/form.tsx index 1e2242a..6e1e706 100644 --- a/ui/src/components/form/form.tsx +++ b/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) => { + const handleInputChange = ( + e: React.ChangeEvent + ): void => { if (props.onChange) props.onChange(e); setValue(e.target.value); }; const handleInputBlur = ( e: React.FocusEvent - ) => { + ): 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 = ({ 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 - ) => { + ): void => { if (props.onChange) props.onChange(e); setValue(e.target.value); }; const handleTextareaBlur = ( e: React.FocusEvent - ) => { + ): void => { if (props.onBlur) props.onBlur(e); setValidationEnabled(true); }; @@ -253,7 +258,7 @@ export abstract class Form { const handleFileInputChange = async ( e: React.ChangeEvent - ) => { + ): void => { const file = e.target.files?.[0]; if (file) { //Convert to string base64 to send to contract diff --git a/ui/src/components/form/form.utils.ts b/ui/src/components/form/form.utils.ts index 21a5bac..52d22a4 100644 --- a/ui/src/components/form/form.utils.ts +++ b/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; diff --git a/ui/src/components/layout/flex.styles.ts b/ui/src/components/layout/flex.styles.ts index 30af230..144b5e2 100644 --- a/ui/src/components/layout/flex.styles.ts +++ b/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', { diff --git a/ui/src/components/layout/nav-bar/connect-wallet-button.tsx b/ui/src/components/layout/nav-bar/connect-wallet-button.tsx index 1e2988d..9f5c29c 100644 --- a/ui/src/components/layout/nav-bar/connect-wallet-button.tsx +++ b/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 ( {({ isConnected, show, truncatedAddress, address, ensName }) => { diff --git a/ui/src/components/layout/nav-bar/nav-bar.styles.ts b/ui/src/components/layout/nav-bar/nav-bar.styles.ts index d847160..0ccacba 100644 --- a/ui/src/components/layout/nav-bar/nav-bar.styles.ts +++ b/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; diff --git a/ui/src/components/layout/page/app-page.tsx b/ui/src/components/layout/page/app-page.tsx index 038a057..0b2587a 100644 --- a/ui/src/components/layout/page/app-page.tsx +++ b/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 = { diff --git a/ui/src/components/layout/stepper/stepper.stories.tsx b/ui/src/components/layout/stepper/stepper.stories.tsx deleted file mode 100644 index 543f33b..0000000 --- a/ui/src/components/layout/stepper/stepper.stories.tsx +++ /dev/null @@ -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 ( - - - - - - ); -}; - -export const Default = () => { - return ( - <> - - - - {/* Step 1 */} - - - - {/* Step 2*/} - - - - {/* Step 3 */} - - - - {/* Step 4 */} - - - - - - - - ); -}; diff --git a/ui/src/components/layout/stepper/stepper.tsx b/ui/src/components/layout/stepper/stepper.tsx index 230140a..167535a 100644 --- a/ui/src/components/layout/stepper/stepper.tsx +++ b/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'; diff --git a/ui/src/components/logo/logo.styles.ts b/ui/src/components/logo/logo.styles.ts index 62590f0..d0bd958 100644 --- a/ui/src/components/logo/logo.styles.ts +++ b/ui/src/components/logo/logo.styles.ts @@ -1,4 +1,5 @@ import { dripStitches } from '@/theme'; + import { Flex } from '../layout'; const { styled } = dripStitches; diff --git a/ui/src/components/logo/logo.tsx b/ui/src/components/logo/logo.tsx index f5630dd..dbb0e91 100644 --- a/ui/src/components/logo/logo.tsx +++ b/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 ( navigate('/home')}> diff --git a/ui/src/components/step/step.tsx b/ui/src/components/step/step.tsx index 67b9b1e..57d00af 100644 --- a/ui/src/components/step/step.tsx +++ b/ui/src/components/step/step.tsx @@ -4,7 +4,7 @@ type StepperIndicatorContainerProps = { children: React.ReactNode; }; -const StepperIndicatorContainer = ({ +const StepperIndicatorContainer: React.FC = ({ children, }: StepperIndicatorContainerProps) => { return ( @@ -25,7 +25,9 @@ type MintStepContainerProps = { children: React.ReactNode; }; -const Container = ({ children }: MintStepContainerProps) => ( +const Container: React.FC = ({ + children, +}: MintStepContainerProps) => ( {children} @@ -36,7 +38,7 @@ type StepProps = { header: string; }; -export const Step: React.FC = ({ children, header }) => { +export const Step: React.FC = ({ children, header }: StepProps) => { return ( diff --git a/ui/src/components/toast/toast.styles.tsx b/ui/src/components/toast/toast.styles.tsx index 308d4b7..0507389 100644 --- a/ui/src/components/toast/toast.styles.tsx +++ b/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'; diff --git a/ui/src/components/toast/toast.tsx b/ui/src/components/toast/toast.tsx index f11cfb6..e6e4cb8 100644 --- a/ui/src/components/toast/toast.tsx +++ b/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 = ({ message, onDismiss, duration = 3000, -}) => { +}: ToastProps) => { const dispatch = useAppDispatch(); const [open, setOpen] = useState(true); diff --git a/ui/src/hooks/use-debounce.ts b/ui/src/hooks/use-debounce.ts index 7528399..7d24271 100644 --- a/ui/src/hooks/use-debounce.ts +++ b/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 = void>( f: F, t = 500 -) => { +): ((...args: A) => void) => { const timeOutRef = useRef(); return (...args: A) => { diff --git a/ui/src/hooks/use-transaction-cost.ts b/ui/src/hooks/use-transaction-cost.ts index e3e7477..9918685 100644 --- a/ui/src/hooks/use-transaction-cost.ts +++ b/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), diff --git a/ui/src/index.tsx b/ui/src/index.tsx index a2d0fb7..ad6d881 100644 --- a/ui/src/index.tsx +++ b/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( diff --git a/ui/src/integrations/ethereum/ethereum.ts b/ui/src/integrations/ethereum/ethereum.ts index cb2ae65..6ce662a 100644 --- a/ui/src/integrations/ethereum/ethereum.ts +++ b/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, diff --git a/ui/src/integrations/ethereum/hooks/ethereum-hooks.tsx b/ui/src/integrations/ethereum/hooks/ethereum-hooks.tsx index 893d6f9..4cd8a58 100644 --- a/ui/src/integrations/ethereum/hooks/ethereum-hooks.tsx +++ b/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 = {}, diff --git a/ui/src/integrations/ethereum/lib/fleek-erc721.ts b/ui/src/integrations/ethereum/lib/fleek-erc721.ts index c3a3baa..8a2e5ad 100644 --- a/ui/src/integrations/ethereum/lib/fleek-erc721.ts +++ b/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 { diff --git a/ui/src/mocks/detail.ts b/ui/src/mocks/detail.ts index 56441e3..b8ffe71 100644 --- a/ui/src/mocks/detail.ts +++ b/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 }, diff --git a/ui/src/mocks/list.ts b/ui/src/mocks/list.ts index eac5de2..b83b2ef 100644 --- a/ui/src/mocks/list.ts +++ b/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 = [ { diff --git a/ui/src/mocks/mint-site.ts b/ui/src/mocks/mint-site.ts index e1b8a60..d7ee907 100644 --- a/ui/src/mocks/mint-site.ts +++ b/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 diff --git a/ui/src/providers/apollo-provider.tsx b/ui/src/providers/apollo-provider.tsx index a886f5d..bdf799c 100644 --- a/ui/src/providers/apollo-provider.tsx +++ b/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({ diff --git a/ui/src/providers/connectkit-provider.tsx b/ui/src/providers/connectkit-provider.tsx index bdf53a2..b626e40 100644 --- a/ui/src/providers/connectkit-provider.tsx +++ b/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 = ({ children, -}) => ( +}: ConnectKitProviderProps) => ( {children} diff --git a/ui/src/providers/providers.tsx b/ui/src/providers/providers.tsx index ab0f99e..e8d205c 100644 --- a/ui/src/providers/providers.tsx +++ b/ui/src/providers/providers.tsx @@ -7,7 +7,9 @@ type ProviderProps = { children: React.ReactNode; }; -export const Providers: React.FC = ({ children }) => { +export const Providers: React.FC = ({ + children, +}: ProviderProps) => { return ( diff --git a/ui/src/providers/react-query-provider.tsx b/ui/src/providers/react-query-provider.tsx index 9986921..1561bbc 100644 --- a/ui/src/providers/react-query-provider.tsx +++ b/ui/src/providers/react-query-provider.tsx @@ -10,7 +10,7 @@ type ReactQueryProviderProps = { export const ReactQueryProvider: React.FC = ({ children, -}) => { +}: ReactQueryProviderProps) => { return ( {children} ); diff --git a/ui/src/providers/redux-provider.tsx b/ui/src/providers/redux-provider.tsx index 0bbdb6f..69d7eef 100644 --- a/ui/src/providers/redux-provider.tsx +++ b/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 = ({ children }) => ( - {children} -); +export const ReduxProvider: React.FC = ({ + children, +}: ReduxProviderProps) => {children}; diff --git a/ui/src/store/features/fleek-erc721/async-thunk/fetch-billing.ts b/ui/src/store/features/fleek-erc721/async-thunk/fetch-billing.ts index a362e6d..b680ff2 100644 --- a/ui/src/store/features/fleek-erc721/async-thunk/fetch-billing.ts +++ b/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( @@ -18,7 +20,7 @@ export const fetchBilling = createAsyncThunk( dispatch(fleekERC721Actions.setBilling({ key, value })); } catch (error) { - console.log(error); + AppLog.error(error); dispatch(fleekERC721Actions.setBillingState({ key, value: 'failed' })); } } diff --git a/ui/src/store/features/fleek-erc721/fleek-erc721-slice.ts b/ui/src/store/features/fleek-erc721/fleek-erc721-slice.ts index 5add0aa..33d1bdb 100644 --- a/ui/src/store/features/fleek-erc721/fleek-erc721-slice.ts +++ b/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'; diff --git a/ui/src/store/features/fleek-erc721/hooks/use-fleek-erc721-billing.ts b/ui/src/store/features/fleek-erc721/hooks/use-fleek-erc721-billing.ts index 9c0cb5f..2819ac7 100644 --- a/ui/src/store/features/fleek-erc721/hooks/use-fleek-erc721-billing.ts +++ b/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; diff --git a/ui/src/store/features/github/async-thunk/fetch-branches.ts b/ui/src/store/features/github/async-thunk/fetch-branches.ts index dee72bf..080ed86 100644 --- a/ui/src/store/features/github/async-thunk/fetch-branches.ts +++ b/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 = { diff --git a/ui/src/store/features/github/async-thunk/fetch-repositories.ts b/ui/src/store/features/github/async-thunk/fetch-repositories.ts index 7ebfef0..ccf632b 100644 --- a/ui/src/store/features/github/async-thunk/fetch-repositories.ts +++ b/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( diff --git a/ui/src/store/features/github/async-thunk/fetch-user-organizations.ts b/ui/src/store/features/github/async-thunk/fetch-user-organizations.ts index 04f4ed1..e7382ab 100644 --- a/ui/src/store/features/github/async-thunk/fetch-user-organizations.ts +++ b/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'; diff --git a/ui/src/store/features/github/async-thunk/login.ts b/ui/src/store/features/github/async-thunk/login.ts index 09dc3e3..1db09f4 100644 --- a/ui/src/store/features/github/async-thunk/login.ts +++ b/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'; diff --git a/ui/src/store/features/github/github-client.ts b/ui/src/store/features/github/github-client.ts index a74bca7..7ee84ea 100644 --- a/ui/src/store/features/github/github-client.ts +++ b/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 { + 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 { diff --git a/ui/src/store/features/github/github-slice.ts b/ui/src/store/features/github/github-slice.ts index eebc21f..c8f3591 100644 --- a/ui/src/store/features/github/github-slice.ts +++ b/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 { diff --git a/ui/src/store/hooks.ts b/ui/src/store/hooks.ts index c4ca63a..3340a82 100644 --- a/ui/src/store/hooks.ts +++ b/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(); diff --git a/ui/src/theme/themes.ts b/ui/src/theme/themes.ts index 42fd3f0..6a344ad 100644 --- a/ui/src/theme/themes.ts +++ b/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 -) => { +): object => { const { prefix, theme, themeMap, utils, media } = config || {}; const _spacing = { diff --git a/ui/src/utils/format.ts b/ui/src/utils/format.ts index 22b6b92..04914b2 100644 --- a/ui/src/utils/format.ts +++ b/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)}`; +}; diff --git a/ui/src/utils/log.ts b/ui/src/utils/log.ts index 905fa8b..245849a 100644 --- a/ui/src/utils/log.ts +++ b/ui/src/utils/log.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { pushToast } from './toast'; export abstract class AppLog { diff --git a/ui/src/utils/object.ts b/ui/src/utils/object.ts index e71e7a1..4d72ab4 100644 --- a/ui/src/utils/object.ts +++ b/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) { diff --git a/ui/src/utils/string-validators.ts b/ui/src/utils/string-validators.ts index 8dc8a1c..1289d5b 100644 --- a/ui/src/utils/string-validators.ts +++ b/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', diff --git a/ui/src/utils/validation.ts b/ui/src/utils/validation.ts index df172a1..c4cba81 100644 --- a/ui/src/utils/validation.ts +++ b/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); }; diff --git a/ui/src/views/access-point/create-ap-form.tsx b/ui/src/views/access-point/create-ap-form.tsx index 549165f..e0e4aa3 100644 --- a/ui/src/views/access-point/create-ap-form.tsx +++ b/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(); diff --git a/ui/src/views/access-point/create-ap-preview.tsx b/ui/src/views/access-point/create-ap-preview.tsx index 06495ce..d14330b 100644 --- a/ui/src/views/access-point/create-ap-preview.tsx +++ b/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', }} > - + NFA: {nfa.value} {appName} {message} diff --git a/ui/src/views/access-point/create-ap.context.tsx b/ui/src/views/access-point/create-ap.context.tsx index 7f59654..c16d68a 100644 --- a/ui/src/views/access-point/create-ap.context.tsx +++ b/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' diff --git a/ui/src/views/access-point/create-ap.form-body.tsx b/ui/src/views/access-point/create-ap.form-body.tsx index d396985..1180c3c 100644 --- a/ui/src/views/access-point/create-ap.form-body.tsx +++ b/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(); diff --git a/ui/src/views/access-point/create-ap.form.context.ts b/ui/src/views/access-point/create-ap.form.context.ts index 4330331..fea18bf 100644 --- a/ui/src/views/access-point/create-ap.form.context.ts +++ b/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: { diff --git a/ui/src/views/access-point/create-ap.stepper.tsx b/ui/src/views/access-point/create-ap.stepper.tsx index eb1b135..bdc3f3f 100644 --- a/ui/src/views/access-point/create-ap.stepper.tsx +++ b/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], diff --git a/ui/src/views/access-point/create-ap.tsx b/ui/src/views/access-point/create-ap.tsx index 1bf5c4e..446ee0b 100644 --- a/ui/src/views/access-point/create-ap.tsx +++ b/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 ( { +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); }; diff --git a/ui/src/views/components-test/color-picker.tsx b/ui/src/views/components-test/color-picker.tsx index 38c85e9..872446e 100644 --- a/ui/src/views/components-test/color-picker.tsx +++ b/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 (