Bump version v0.3.2

app/components/ActiveSubscription/index.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import BigNumber from 'bignumber.js';
 
 import { fromBaseToken } from '~/helpers/formatters';
-import Modal from '../Modal';
-import { PrimaryButton } from '~/components/common/Button';
 import EmptyState from '~/components/common/EmptyState';
 import { SubscriptionInfoProps } from './types';
 import { TOKEN, DEV_SHARE, Subscription } from '~/configs';
@@ -52,25 +50,6 @@ const ActiveSubscription = ({ data }: { data: Subscription | null }) => {
   return (
     <section className="component activeSubscription">
       <SubscriptionInfo data={data} />
-      <Modal className="subscriptionFooter">
-        <div className="wrapper">
-          <figure>
-            <img
-              className="svg"
-              src="/images/letter.svg"
-              alt="Letter icon"
-            />
-          </figure>
-          <header>
-            <h4>
-              Spread the word of Muzikie
-              <br />
-              let others enjoy free music too
-            </h4>
-          </header>
-          <PrimaryButton theme="white">Share link</PrimaryButton>
-        </div>
-      </Modal>
     </section>
   );
 };

app/components/CreateAudio/index.tsx

@@ -12,6 +12,7 @@
 import Feedback from '~/components/Feedback';
 import { ROUTES } from '~/routes/routes';
 import { VALID_GENRES } from '~/configs';
+import { getFormErrorMessage } from '~/helpers/helpers';
 import { CollectionInfo } from './types';
 
 const CreateAudio = ({ CollectionInfo, creatorAddress }: CollectionInfo) => {
@@ -24,7 +25,7 @@
       name: '',
       releaseYear: '',
       collectionID: '',
-      genre: 0,
+      genre: '',
       files: null,
       owners: [{
         address: creatorAddress,
@@ -44,32 +45,34 @@
     label: `${item.name} - ${item.releaseYear}`,
   }));
 
   const onSubmit = async (data: Record<string, any>) => {
     await signAndBroadcast(data);
   };
 
-  const errorMessage = formState.errors && (Object.values(formState.errors)[0]?.message as string);
+  const errorMessage = getFormErrorMessage(formState);
   const formError = errorMessage
     ? {
       message: errorMessage,
       error: true,
     }
     : broadcastStatus;
-
+  
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="component createAudio">
       <fieldset>
         <Input
           {...register('name', { required: true })}
           placeholder="Enter name"
           type="text"
+          className={formState.errors.name ? 'error' : ''}
         />
         <Input
           {...register('releaseYear', { required: true })}
           placeholder="Release year"
           type="text"
+          className={formState.errors.releaseYear ? 'error' : ''}
         />
-        <div className="collectionRow">
+        <div className={`collectionRow ${formState.errors.collectionID ? 'error' : ''}`}>
           <Select
             {...register('collectionID', { required: true })}
             placeholder="Select a collection (Collection)"
@@ -84,7 +87,8 @@
         <Select
           {...register('genre', { required: true })}
           placeholder="Select a genre"
-          options={VALID_GENRES}
+          options={VALID_GENRES.sort((a, b) => a.label.localeCompare(b.label))}
+          className={formState.errors.releaseYear ? 'error' : ''}
         />
         <fieldset className="royaltyOwners">
           <legend>
@@ -99,13 +103,13 @@
             fields.map(({ address }, index: number) => (
               <fieldset key={address + index} className="ownerItem">
                 <Input
-                  className="input"
+                  className={`input ${formState.errors.owners && formState.errors.owners[index] ? 'error' : ''}`}
                   placeholder="Owner's wallet address"
                   type="text"
                   {...register(`owners.${index}.address`, { required: false })} 
                 />
                 <Input
-                  className="input"
+                  className={`input ${formState.errors.owners && formState.errors.owners[index] ? 'error' : ''}`}
                   placeholder="Owner's royalty shares (%)"
                   type="text"
                   {...register(`owners.${index}.shares`, { required: false })} 
@@ -125,9 +129,13 @@
           accept=".mp3,.wav"
           multiple={false}
           placeholder="Upload MP3"
+          className={formState.errors.files ? 'error' : ''}
         />
       </fieldset>
-      <PrimaryButton type="submit" disabled={formError.loading || formError.error}>
+      <PrimaryButton
+        type="submit"
+        disabled={formError.loading || formError.error}
+      >
         <span>{broadcastStatus.loading ? 'loading...' : 'Create'}</span>
       </PrimaryButton>
       <Feedback data={formError} />

app/components/CreateCollection/index.tsx

@@ -26,10 +26,10 @@
     },
   });
 
   const onSubmit = async (data: Record<string, any>) => {
     await signAndBroadcast(data);
   };
-  const errorMessage = formState.errors && (Object.values(formState.errors)[0]?.message as string);
+  const errorMessage = (Object.values(formState.errors)[0]?.message as string);
   const formError = errorMessage
     ? {
       message: errorMessage,
@@ -44,27 +44,31 @@
           {...register('name', { required: true })}
           placeholder="Enter name"
           type="text"
+          className={formState.errors.name ? 'error' : ''}
         />
         <Input
           {...register('releaseYear', { required: true })}
           placeholder="Release year"
           type="text"
+          className={formState.errors.releaseYear ? 'error' : ''}
         />
         <Select
           {...register('collectionType', { required: true })}
           placeholder="Select a collection type"
           options={VALID_COLLECTION_TYPES}
+          className={formState.errors.collectionType ? 'error' : ''}
         />
         <FileInput
           {...register('files', { required: true })}
           icon="file"
           accept=".png,.jpg,.jpeg"
           multiple={false}
           placeholder="Upload cover image"
+          className={formState.errors.files ? 'error' : ''}
         />
       </fieldset>
-      <PrimaryButton type="submit">
-        <>{broadcastStatus.loading ? <span>loading...</span> : <span>Create</span>}</>
+      <PrimaryButton type="submit" disabled={formError.loading || formError.error}>
+        <span>{broadcastStatus.loading ? 'loading...' : 'Create'}</span>
       </PrimaryButton>
       <Feedback data={formError} />
     </form>

app/components/EditProfile/index.tsx

@@ -7,11 +7,25 @@ import { Input, FileInput, Textarea } from '~/components/common/Input';
 import { IconButton, PrimaryButton } from '~/components/common/Button';
 import Feedback from '~/components/Feedback';
 import { useCreateProfile } from '~/hooks/useCreateEntity';
-import { socialPlatformNames } from '~/configs';
+import {
+  socialPlatformNames,
+  SocialAccountPlatform,
+  SocialAccount,
+} from '~/configs';
 import { profileSchema } from '~/hooks/useCreateEntity/schemas';
 import { ProfileEditProps } from './types';
 import './profileDetails.css';
 
+const fillSocialMediaInputs = (values: SocialAccount[]) =>
+  [
+    SocialAccountPlatform.Instagram,
+    SocialAccountPlatform.Twitter,
+    SocialAccountPlatform.Youtube,
+  ].map((platform) => ({
+    platform,
+    username: values.find((value) => value.platform === platform)?.username ?? '',
+  }));
+
 const ProfileEdit = ({ data }: ProfileEditProps) => {
   const { signAndBroadcast, broadcastStatus } = useCreateProfile();
 
@@ -27,18 +41,20 @@ const ProfileEdit = ({ data }: ProfileEditProps) => {
     resolver: yupResolver(profileSchema),
     mode: 'onBlur', // validate on blur
     shouldFocusError: true, // focus on input with an error after submission
-    defaultValues,
+    defaultValues: {
+      ...defaultValues,
+      socialAccounts: fillSocialMediaInputs(defaultValues.socialAccounts),
+    },
   });
   const { fields, remove } = useFieldArray({
     control,
-    rules: { minLength: 3 },
     name: 'socialAccounts',
   });
 
   const onSubmit = async (formValues: Record<string, unknown>) => {
     await signAndBroadcast(formValues, data);
   };
-  const errorMessage = formState.errors && (Object.values(formState.errors)[0]?.message as string);
+  const errorMessage = (Object.values(formState.errors)[0]?.message as string);
   const formError = errorMessage
     ? {
       message: errorMessage,
@@ -53,33 +69,36 @@ const ProfileEdit = ({ data }: ProfileEditProps) => {
             accept=".png,.jpg,.jpeg"
             multiple={false}
             placeholder="Click to update banner"
-            className="fileInput"
+            className={`fileInput ${formState.errors.banner ? 'error' : ''}`}
             {...register('banner', { required: false })}
           />
           <FileInput
             {...register('avatar', { required: false })}
             accept=".png,.jpg,.jpeg"
             multiple={false}
             placeholder="Click to update Avatar"
-            className="fileInput"
+            className={`fileInput ${formState.errors.avatar ? 'error' : ''}`}
           />
           <Input
             {...register('name', { required: false })}
             name="name"
             placeholder="Enter name"
             type="text"
+            className={formState.errors.name ? 'error' : ''}
           />
           <Input
             {...register('nickName', { required: false })}
             name="nickName"
             placeholder="Enter nickname"
             type="text"
+            className={formState.errors.nickName ? 'error' : ''}
           />
           <Textarea
             {...register('description', { required: false })}
             name="description"
-            placeholder="Describe yourself"
-            className="descriptionInput"
+            placeholder="Describe yourself (255 characters max, make it short and sweet)"
+            className={`descriptionInput ${formState.errors.banner ? 'error' : ''}`}
+            maxLength={255}
           />
           {
             fields.map(({ platform }) => (
@@ -102,7 +121,7 @@ const ProfileEdit = ({ data }: ProfileEditProps) => {
         <PrimaryButton
           type="submit"
           className="button"
-          disabled={formError.error}
+          disabled={formError.loading || formError.error}
         >
           {broadcastStatus.loading ? 'loading...' : 'Save'}
         </PrimaryButton>

app/components/MainMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 
 /* Internal dependencies */
@@ -8,6 +8,7 @@ import { ROUTES } from '~/routes/routes';
 import { useAccount } from '~/hooks/useAccount/useAccount';
 
 const MainMenu = () => {
+  const menuRef = useRef<HTMLElement>(null);
   const [isActive, setIsActive] = useState(false);
   const { isLoggedIn } = useAccount();
   const location = useLocation();
@@ -20,8 +21,22 @@ const MainMenu = () => {
     setIsActive(false);
   }, [location.pathname]);
 
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setIsActive(false);
+      }
+    };
+
+    document.addEventListener('click', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
+
   return (
-    <aside className="component mainMenu">
+    <aside className="component mainMenu" ref={menuRef}>
       <IconButton
         className="menuButton"
         icon={isActive ? 'cross' : 'menuCut'}
@@ -30,7 +45,7 @@ const MainMenu = () => {
       <section className={`menuContainer ${isActive ? 'active' : ''}`}>
         <div className="list">
           {
-            location.pathname !== '/agreement' && (
+            location.pathname !== ROUTES.AGREEMENT.location && (
               <>
                 <Link
                   icon="home"
@@ -50,7 +65,7 @@ const MainMenu = () => {
             )
           }
           {
-            location.pathname !== '/agreement' && !!isLoggedIn && (
+            location.pathname !== ROUTES.AGREEMENT.location && !!isLoggedIn && (
               <>
                 <Link
                   icon="user"

app/components/MainMenu/mainMenu.css

@@ -2,6 +2,7 @@
   --menu-width: 200px;
   --menu-button: var(--box-size-xs);
 
+  position: relative;
   height: var(--menu-button);
   box-sizing: border-box;
   z-index: 5;

app/components/common/Input/File.tsx

@@ -1,5 +1,5 @@
 /* External dependencies */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState, ChangeEvent } from 'react';
 
 /* Internal dependencies */
 import Icon from '../Icon';
@@ -11,23 +11,36 @@ const FileInput = ({
   multiple = true,
   className = '',
   icon = 'file',
+  onChange,
   ...restProps
-}: FileInputProps, ref) => (
-  <label className={`component fileInput ${className}`}>
-    {
-      icon && (
-        <Icon name={restProps.name ? 'check' : icon} />
-      )
+}: FileInputProps, ref) => {
+  const [fileName, setFileName] = useState('');
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFileName(e.target.files && e.target.files.length ? e.target.files[0].name : '');
+    if (typeof onChange === 'function') {
+      onChange(e);
     }
-    <input
-      type="file"
-      accept={accept}
-      multiple={multiple}
-      {...restProps}
-      ref={ref}
-    />
-    <span>{placeholder}</span>
-  </label>
-);
+  };
+
+  return (
+    <label className={`component fileInput ${className}`}>
+      {
+        icon && (
+          <Icon name={fileName ? 'check' : icon} />
+        )
+      }
+      <input
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleFileChange}
+        {...restProps}
+        ref={ref}
+      />
+      <span>{fileName || `${placeholder} (${accept})`}</span>
+    </label>
+  );
+};
 
 export default forwardRef(FileInput);