Improve UX (#14)

* Add lists and collection loaders

* Fix mint button display if user mint limit is reached

* Improve reply error handling

* Fix Form nestend inputs

* Group layout components

* Require logo and banner on collection creation

* Add multiple nft images input on collection creation

* Add 404 page

* Add error boundary

* Group components

* Add nft page loaders

frontend/src/App.tsx

@@ -1,15 +1,22 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, ScrollRestoration, useLocation } from 'react-router-dom';
 
-import { Footer, Header } from './components';
+import { ErrorBoundary, Footer, Header } from './components';
 import { withProviders } from './providers';
 
 function Component() {
+  const { pathname } = useLocation();
+
   return (
     <>
       <Header />
 
       <main>
-        <Outlet />
+        {/* key to reset on route change */}
+        <ErrorBoundary key={pathname}>
+          <ScrollRestoration />
+
+          <Outlet />
+        </ErrorBoundary>
       </main>
 
       <Footer />

frontend/src/components/buttons/back-button/back-button.tsx

@@ -0,0 +1,12 @@
+import { Button, ButtonProps } from '@gear-js/vara-ui';
+import { useNavigate } from 'react-router-dom';
+
+type Props = Omit<ButtonProps, 'text' | 'children' | 'onClick'>;
+
+function BackButton(props: Props) {
+  const navigate = useNavigate();
+
+  return <Button {...props} text="Go Back" onClick={() => navigate(-1)} />;
+}
+
+export { BackButton };

frontend/src/components/buttons/back-button/index.ts

@@ -0,0 +1,3 @@
+import { BackButton } from './back-button';
+
+export { BackButton };

frontend/src/components/buttons/index.ts

@@ -0,0 +1,6 @@
+import { BackButton } from './back-button';
+import { CopyButton } from './copy-button';
+import { FilterButton } from './filter-button';
+import { LinkButton } from './link-button';
+
+export { BackButton, CopyButton, FilterButton, LinkButton };

frontend/src/components/buttons/link-button/index.ts

@@ -0,0 +1,3 @@
+import { LinkButton } from './link-button';
+
+export { LinkButton };

frontend/src/components/button-link/button-link.tsx → frontend/src/components/buttons/link-button/link-button.tsx

@@ -7,7 +7,7 @@ type Props = ButtonProps & {
   to: string;
 };
 
-function ButtonLink({
+function LinkButton({
   to,
   children,
   color = 'primary',
@@ -42,4 +42,4 @@ function ButtonLink({
   );
 }
 
-export { ButtonLink };
+export { LinkButton };

frontend/src/components/form/checkbox/checkbox.tsx

@@ -0,0 +1,12 @@
+import { Checkbox as VaraCheckbox, CheckboxProps } from '@gear-js/vara-ui';
+import { useFormContext } from 'react-hook-form';
+
+import { Props } from '../types';
+
+function Checkbox({ name, ...props }: Props<CheckboxProps>) {
+  const { register } = useFormContext();
+
+  return <VaraCheckbox {...props} {...register(name)} />;
+}
+
+export { Checkbox };

frontend/src/components/form/checkbox/index.ts

@@ -0,0 +1,3 @@
+import { Checkbox } from './checkbox';
+
+export { Checkbox };

frontend/src/components/form/form/form.tsx

@@ -0,0 +1,29 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ReactNode } from 'react';
+import { DefaultValues, FieldValues, FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { ZodType } from 'zod';
+
+type Props<T extends FieldValues> = {
+  defaultValues: DefaultValues<T>;
+  schema: ZodType;
+  children: ReactNode;
+  className?: string;
+  onSubmit: SubmitHandler<T>;
+};
+
+function Form<T extends FieldValues>({ defaultValues, schema, children, className, onSubmit }: Props<T>) {
+  const resolver = schema ? zodResolver(schema) : undefined;
+
+  const methods = useForm<T>({ defaultValues, resolver });
+  const { handleSubmit } = methods;
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)} className={className}>
+        {children}
+      </form>
+    </FormProvider>
+  );
+}
+
+export { Form };

frontend/src/components/form/form/index.ts

@@ -0,0 +1,3 @@
+import { Form } from './form';
+
+export { Form };

frontend/src/components/form/index.ts

@@ -1,3 +1,10 @@
+import { Checkbox } from './checkbox';
 import { Form } from './form';
+import { Input } from './input';
+import { Radio } from './radio';
+import { Select } from './select';
+import { Textarea } from './textarea';
+import { InputProps } from './types';
 
-export { Form };
+export { Form, Input, Checkbox, Radio, Select, Textarea };
+export type { InputProps };

frontend/src/components/form/input/index.ts

@@ -0,0 +1,3 @@
+import { Input } from './input';
+
+export { Input };

frontend/src/components/form/input/input.tsx

@@ -0,0 +1,15 @@
+import { Input as VaraInput } from '@gear-js/vara-ui';
+import { useFormContext } from 'react-hook-form';
+
+import { InputProps } from '../types';
+
+function Input({ name, ...props }: InputProps) {
+  const { register, formState } = useFormContext();
+  const { errors } = formState;
+
+  const error = errors[name]?.message?.toString();
+
+  return <VaraInput {...props} {...register(name)} error={error} />;
+}
+
+export { Input };

frontend/src/components/form/radio/index.ts

@@ -0,0 +1,3 @@
+import { Radio } from './radio';
+
+export { Radio };

frontend/src/components/form/radio/radio.tsx

@@ -0,0 +1,12 @@
+import { Radio as VaraRadio, RadioProps } from '@gear-js/vara-ui';
+import { useFormContext } from 'react-hook-form';
+
+import { Props } from '../types';
+
+function Radio({ name, ...props }: Props<RadioProps>) {
+  const { register } = useFormContext();
+
+  return <VaraRadio {...props} {...register(name)} />;
+}
+
+export { Radio };

frontend/src/components/form/select/index.ts

@@ -0,0 +1,3 @@
+import { Select } from './select';
+
+export { Select };

frontend/src/components/form/select/select.tsx

@@ -0,0 +1,12 @@
+import { Select as VaraSelect, SelectProps } from '@gear-js/vara-ui';
+import { useFormContext } from 'react-hook-form';
+
+import { Props } from '../types';
+
+function Select({ name, ...props }: Props<SelectProps>) {
+  const { register } = useFormContext();
+
+  return <VaraSelect {...props} {...register(name)} />;
+}
+
+export { Select };

frontend/src/components/form/textarea/index.ts

@@ -0,0 +1,3 @@
+import { Textarea } from './textarea';
+
+export { Textarea };

frontend/src/components/form/textarea/textarea.tsx

@@ -0,0 +1,15 @@
+import { Textarea as VaraTextarea, TextareaProps } from '@gear-js/vara-ui';
+import { useFormContext } from 'react-hook-form';
+
+import { Props } from '../types';
+
+const Textarea = ({ name, ...props }: Props<TextareaProps>) => {
+  const { register, formState } = useFormContext();
+  const { errors } = formState;
+
+  const error = errors[name]?.message?.toString();
+
+  return <VaraTextarea {...props} {...register(name)} error={error} />;
+};
+
+export { Textarea };

frontend/src/components/form/types.ts

@@ -0,0 +1,9 @@
+import { InputProps as VaraInputProps } from '@gear-js/vara-ui';
+
+type Props<T> = Omit<T, 'onChange' | 'onBlur'> & {
+  name: string;
+};
+
+type InputProps = Props<VaraInputProps>;
+
+export type { Props, InputProps };

frontend/src/components/hocs/index.ts

@@ -0,0 +1,4 @@
+import { withAccount } from './with-account';
+import { withApi } from './with-api';
+
+export { withAccount, withApi };

frontend/src/components/index.ts

@@ -1,20 +1,13 @@
-import { Breadcrumbs } from './breadcrumbs';
-import { Container } from './container';
-import { CopyButton } from './copy-button';
-import { FilterButton } from './filter-button';
-import { Footer } from './footer';
-import { Form } from './form';
-import { Header } from './header';
+import { CopyButton, FilterButton, LinkButton } from './buttons';
+import { Form, Input, Checkbox, Radio, Select, Textarea } from './form';
+import { withAccount, withApi } from './hocs';
 import { InfoCard, InfoCardProps } from './info-card';
+import { PriceInput, SearchInput } from './inputs';
+import { Container, Footer, Header, ErrorBoundary, PrivateRoute, Breadcrumbs, Skeleton } from './layout';
 import { NFTActionFormModal } from './nft-action-form-modal';
 import { PriceInfoCard } from './price-info-card';
-import { PriceInput } from './price-input';
-import { PrivateRoute } from './private-route';
 import { ResponsiveSquareImage } from './responsive-square-image';
-import { SearchInput } from './search-input';
 import { Tabs } from './tabs';
-import { withAccount } from './with-account';
-import { withApi } from './with-api';
 
 export {
   Header,
@@ -34,6 +27,14 @@ export {
   Breadcrumbs,
   Form,
   withApi,
+  Input,
+  Checkbox,
+  Radio,
+  Select,
+  Textarea,
+  LinkButton,
+  ErrorBoundary,
+  Skeleton,
 };
 
 export type { InfoCardProps };

frontend/src/components/inputs/index.ts

@@ -0,0 +1,4 @@
+import { PriceInput } from './price-input';
+import { SearchInput } from './search-input';
+
+export { PriceInput, SearchInput };

frontend/src/components/inputs/price-input/price-input.tsx

@@ -0,0 +1,9 @@
+import VaraSVG from '@/assets/vara.svg?react';
+
+import { Input, InputProps } from '../../form';
+
+function PriceInput(props: Omit<InputProps, 'type' | 'icon'>) {
+  return <Input type="number" step="any" icon={VaraSVG} {...props} />;
+}
+
+export { PriceInput };

frontend/src/components/breadcrumbs/breadcrumbs.tsx → frontend/src/components/layout/breadcrumbs/breadcrumbs.tsx

@@ -3,10 +3,12 @@ import { Link } from 'react-router-dom';
 
 import { ROUTE } from '@/consts';
 
+import { Skeleton } from '../skeleton';
+
 import styles from './breadcrumbs.module.scss';
 
 type Props = {
-  list: { to: string; text: string }[];
+  list: { to: string; text: string | undefined }[];
 };
 
 function Breadcrumbs(props: Props) {
@@ -18,7 +20,7 @@ function Breadcrumbs(props: Props) {
 
       return (
         <Fragment key={to}>
-          <Link to={to}>{text}</Link>
+          {text ? <Link to={to}>{text}</Link> : <Skeleton width="5%" borderRadius="4px" />}
 
           {!isLast && <span>&gt;</span>}
         </Fragment>

frontend/src/components/layout/error-boundary/error-boundary.module.scss

@@ -0,0 +1,12 @@
+.heading {
+  margin-bottom: 16px;
+
+  font-size: 32px;
+}
+
+.error {
+  margin-bottom: 64px;
+
+  font-size: 16px;
+  color: #535352;
+}