fix(user): user can remove profile picture

src/components/User/Avatar.module.scss

@@ -1,5 +1,9 @@
 @import "../../styles/Variables";
 
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
 .container {
   border-radius: 999px;
   overflow: hidden;
@@ -70,7 +74,26 @@
   }
 }
 
+.remove {
+  background: none;
+  border: none;
+  color: var(--color-black);
+  font-weight: bold;
+  cursor: pointer;
+  margin-top: 4px;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+@media (max-width: $breakpoint-md) {
+  .remove {
+    max-width: 250px;
+  }
+}
 @media (max-width: $breakpoint-sm) {
+  .remove {
+    max-width: 162px;
+  }
   .avatar-upload {
     i {
       height: 48px;

src/components/User/AvatarUpload.tsx

@@ -2,12 +2,12 @@ import effect from "../../styles/Effects.module.scss"
 import style from "./Avatar.module.scss"
 import cs from "classnames"
 import { ipfsGatewayUrl } from "../../services/Ipfs"
-import { MouseEventHandler, useMemo, useRef } from "react"
+import { MouseEventHandler, useCallback, useMemo, useRef } from "react"
 
 interface Props {
   currentIpfs?: string
-  file?: File | null
-  onChange: (file: File) => void
+  file?: File | "ipfs" | null
+  onChange: (file: File | null) => void
   className?: string
 }
 
@@ -23,10 +23,15 @@ export function AvatarUpload({
   // - is there a file ? if so get a local url to display it
   // - is there a current ipfs url to display url
   // - url is empty
-  const url = useMemo<string | null>(
-    () => (file ? URL.createObjectURL(file) : ipfsGatewayUrl(currentIpfs)),
-    [currentIpfs, file]
-  )
+  const url = useMemo<string | null>(() => {
+    if (file && file !== "ipfs") {
+      return URL.createObjectURL(file)
+    }
+    if (file === "ipfs") {
+      return ipfsGatewayUrl(currentIpfs)
+    }
+    return null
+  }, [currentIpfs, file])
 
   const onFileChange = () => {
     if (inputFileRef.current) {
@@ -42,8 +47,11 @@ export function AvatarUpload({
     inputFileRef.current?.click()
   }
 
+  const handleRemovePicture = useCallback(() => {
+    onChange(null)
+  }, [onChange])
   return (
-    <>
+    <div className={style.wrapper}>
       <button
         type="button"
         className={cs(
@@ -63,6 +71,15 @@ export function AvatarUpload({
         <span>upload {url ? "a new" : "an"} image</span>
         {url && <i className="fa-solid fa-arrow-up-from-bracket" />}
       </button>
+      {url && (
+        <button
+          type="button"
+          className={style.remove}
+          onClick={handleRemovePicture}
+        >
+          remove image
+        </button>
+      )}
       <input
         ref={inputFileRef}
         type="file"
@@ -71,6 +88,6 @@ export function AvatarUpload({
         accept="image/*"
         onChange={onFileChange}
       />
-    </>
+    </div>
   )
 }

src/containers/EditProfile.tsx

@@ -78,7 +78,7 @@ export function EditProfile() {
     }
   }, [safeData])
 
-  const [avatarFile, setAvatarFile] = useState<File | null>(null)
+  const [avatarFile, setAvatarFile] = useState<File | "ipfs" | null>("ipfs")
   const [data, setData] = useState({
     name: user.name || "",
     description: user.description || "",
@@ -103,9 +103,9 @@ export function EditProfile() {
         validationSchema={Schema}
         onSubmit={(values) => {
           const f = new FormData()
-          if (avatarFile) {
+          if (avatarFile && avatarFile !== "ipfs") {
             f.append("avatarFile", avatarFile)
-          } else if (user.avatarUri) {
+          } else if (avatarFile === "ipfs" && user.avatarUri) {
             f.append("avatarIpfs", user.avatarUri)
           }
           f.append("description", values.description)
@@ -200,7 +200,11 @@ export function EditProfile() {
             </div>
             <Spacing size="3x-large" sm="x-large" />
             <div className={style.warn}>
-              <strong>tzProfiles</strong> can take a while to synchronize, sometimes up to 1 day.<br/>If you've updated your tzProfile recently but the changes are not reflected here, please wait a little bit.
+              <strong>tzProfiles</strong> can take a while to synchronize,
+              sometimes up to 1 day.
+              <br />
+              If you've updated your tzProfile recently but the changes are not
+              reflected here, please wait a little bit.
             </div>
           </Form>
         )}