fix: roles form missing image upload and empty wallet address bug

web-components/src/components/image-crop/index.tsx

@@ -100,6 +100,7 @@ export default function ImageCrop({
    */
   const onLoad = useCallback(
     (img: HTMLImageElement) => {
+      console.log(img);
       imgRef.current = img;
       const imgWidth = img.width;
       const imgHeight = img.height;
@@ -152,7 +153,7 @@ export default function ImageCrop({
           onComplete={setCompletedCrop}
           circularCrop={circularCrop}
           crossorigin="anonymous"
-          imageStyle={{ maxHeight: mobileMatches ? 380 : 500 }}
+          imageStyle={{ width: '100%', maxHeight: mobileMatches ? 380 : 500 }}
         />
       </div>
       {children}

web-components/src/components/inputs/new/ImageField/ImageField.tsx

@@ -25,7 +25,7 @@ interface Props {
   fixedCrop?: Partial<Crop>;
   children: ReactNode;
   setValue: (value: string) => void;
-  onUpload?: (imageFile: File) => Promise<string>;
+  onUpload?: (imageFile: File) => Promise<string | undefined>;
   sx?: {
     label?: SxProps<Theme>;
     button?: SxProps<Theme>;

web-marketplace/src/components/organisms/RolesForm/RolesForm.tsx

@@ -14,6 +14,7 @@ import OnBoardingCard from 'web-components/src/components/cards/OnBoardingCard';
 import EditIcon from 'web-components/src/components/icons/EditIcon';
 import TextField from 'web-components/src/components/inputs/new/TextField/TextField';
 
+import { apiUri } from 'lib/apiUri';
 import { errorBannerTextAtom } from 'lib/atoms/error.atoms';
 import { useAuth } from 'lib/auth/auth';
 import { getAccountByAddrQuery } from 'lib/queries/react-query/registry-server/graphql/getAccountByAddrQuery/getAccountByAddrQuery';
@@ -31,17 +32,20 @@ import { ProfileModalSchemaType } from './components/ProfileModal/ProfileModal.s
 import { RoleField } from './components/RoleField/RoleField';
 import { useSaveProfile } from './hooks/useSaveProfile';
 import { rolesFormSchema, RolesFormSchemaType } from './RolesForm.schema';
+import { useHandleUpload } from '../MediaForm/hooks/useHandleUpload';
 
 interface RolesFormProps {
   submit: (props: RoleSubmitProps) => Promise<void>;
   onNext?: () => void;
   onPrev?: () => void;
   initialValues?: RolesFormSchemaType;
   isOnChain: boolean;
+  projectId?: string;
 }
 
 const RolesForm: React.FC<React.PropsWithChildren<RolesFormProps>> = ({
   initialValues,
+  projectId,
   submit,
   onNext,
   onPrev,
@@ -127,6 +131,13 @@ const RolesForm: React.FC<React.PropsWithChildren<RolesFormProps>> = ({
 
   const saveProfile = useSaveProfile();
 
+  const [offChainProjectId, setOffChainProjectId] = useState(projectId);
+  const { handleUpload } = useHandleUpload({
+    offChainProjectId,
+    apiServerUrl: apiUri,
+    setOffChainProjectId,
+  });
+
   return (
     <Form
       form={form}
@@ -160,6 +171,7 @@ const RolesForm: React.FC<React.PropsWithChildren<RolesFormProps>> = ({
           accounts={accountsProjectDeveloper}
           saveProfile={saveProfile}
           activeAccountId={activeAccountId}
+          onUpload={handleUpload}
           {...form.register('projectDeveloper')}
         />
         <RoleField
@@ -174,6 +186,7 @@ const RolesForm: React.FC<React.PropsWithChildren<RolesFormProps>> = ({
           accounts={accountsVerifier}
           saveProfile={saveProfile}
           activeAccountId={activeAccountId}
+          onUpload={handleUpload}
           {...form.register('verifier')}
         />
         {isOnChain && admin && (

web-marketplace/src/components/organisms/RolesForm/components/ProfileModal/ProfileModal.schema.ts

@@ -8,7 +8,7 @@ export const profileModalSchema = z.object({
   id: z.string().optional(),
   creatorId: z.string().nullable().optional(),
   profileType: z.custom<AccountType>(),
-  name: z.string(),
+  name: z.string().min(1),
   profileImage: z.string(),
   description: z.string().max(160).optional(),
   address: optionalAddressSchema,

web-marketplace/src/components/organisms/RolesForm/components/ProfileModal/ProfileModal.tsx

@@ -26,7 +26,7 @@ interface ProfileModalProps {
   initialValues?: ProfileModalSchemaType;
   onClose: () => void;
   onSubmit: (profile: ProfileModalSchemaType) => void;
-  onUpload?: (imageFile: File) => Promise<string>;
+  onUpload?: (imageFile: File) => Promise<string | undefined>;
 }
 
 function ProfileModal({

web-marketplace/src/components/organisms/RolesForm/components/RoleField/RoleField.AddNewProfile.tsx

@@ -25,6 +25,7 @@ export const AddNewProfile: React.FC<AddNewProfileProps> = ({
         profileType: AccountType.User,
         name: '',
         profileImage: DEFAULT_PROFILE_USER_AVATAR,
+        address: null,
       });
     }}
   >

web-marketplace/src/components/organisms/RolesForm/components/RoleField/RoleField.tsx

@@ -49,6 +49,7 @@ interface Props {
     profile: ProfileModalSchemaType,
     initialValue?: ProfileModalSchemaType | null,
   ) => Promise<{ id: string; creatorId: string } | undefined>;
+  onUpload?: (imageFile: File) => Promise<string | undefined>;
 }
 
 export const RoleField = forwardRef<HTMLInputElement, Props>(
@@ -67,6 +68,7 @@ export const RoleField = forwardRef<HTMLInputElement, Props>(
       accounts,
       saveProfile,
       activeAccountId,
+      onUpload,
     }: Props,
     ref,
   ) => {
@@ -210,6 +212,7 @@ export const RoleField = forwardRef<HTMLInputElement, Props>(
         {profileAdd && (
           <ProfileModal
             initialValues={profileAdd}
+            onUpload={onUpload}
             onClose={closeProfileModal}
             onSubmit={async profile => {
               const account = await saveProfile(profile);

web-marketplace/src/pages/Roles/Roles.tsx

@@ -96,6 +96,7 @@ const Roles: React.FC<React.PropsWithChildren<unknown>> = () => {
           isOnChain={
             !editContextLoading && !!onChainProject && !!wallet?.address
           }
+          projectId={offChainProject?.id}
         />
       </WithLoader>
     </ProjectFormTemplate>