Merge pull request #10434 from hassnian/issue-10420

feat(profiles): faster profile images and Option to remove img and clear profile

components/profile/ProfileDetail.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ProfileCreateModal v-model="isModalActive" @success="fetchProfile" />
+    <ProfileCreateModal
+      v-model="isModalActive"
+      @success="fetchProfile"
+      @deleted="fetchProfile" />
     <ProfileFollowModal
       :key="`${followersCount}-${followingCount}`"
       v-model="isFollowModalActive"

components/profile/create/Modal.vue

@@ -14,7 +14,8 @@
         v-if="stage === 3"
         :farcaster-user-data="farcasterUserData"
         :use-farcaster="useFarcaster"
-        @submit="handleFormSubmition" />
+        @submit="handleFormSubmition"
+        @delete="handleProfileDelete" />
       <Loading v-if="stage === 4" />
       <Success v-if="stage === 5" @close="close" />
     </ModalBody>
@@ -36,28 +37,30 @@ import {
   SocialLink,
   UpdateProfileRequest,
   createProfile,
+  deleteProfile,
   updateProfile,
+  uploadImage,
 } from '@/services/profile'
-import { rateLimitedPinFileToIPFS } from '@/services/nftStorage'
 import { appClient, createChannel } from '@/services/farcaster'
 import { StatusAPIResponse } from '@farcaster/auth-client'
 import { useDocumentVisibility } from '@vueuse/core'
 import { getBioWithLinks } from '../utils'
 
+const emit = defineEmits(['close', 'success', 'deleted'])
 const props = defineProps<{
   modelValue: boolean
 }>()
 
 const documentVisibility = useDocumentVisibility()
 const { $i18n } = useNuxtApp()
+const { accountId } = useAuth()
 
 const profile = inject<{ hasProfile: Ref<boolean> }>('userProfile')
 
 const hasProfile = computed(() => profile?.hasProfile.value)
 
 const initialStep = computed(() => (hasProfile.value ? 2 : 1))
 
-const emit = defineEmits(['close', 'success'])
 const { getSignaturePair } = useVerifyAccount()
 const vOpen = useVModel(props, 'modelValue')
 const stage = ref(initialStep.value)
@@ -69,12 +72,26 @@ const close = () => {
   emit('close')
 }
 
-const uploadImage = async (
-  imageFile: File | null,
-): Promise<string | undefined> =>
-  imageFile
-    ? sanitizeIpfsUrl(await rateLimitedPinFileToIPFS(imageFile))
-    : undefined
+const uploadProfileImage = async (
+  file: File | null,
+  type: 'image' | 'banner',
+): Promise<string | undefined> => {
+  if (!file) {
+    return undefined
+  }
+
+  const { signature, message } = await getSignaturePair()
+
+  const response = await uploadImage({
+    file,
+    type,
+    address: accountId.value,
+    signature,
+    message,
+  })
+
+  return response.url
+}
 
 const constructSocials = (profileData: ProfileFormData): SocialLink[] => {
   return [
@@ -100,11 +117,11 @@ const processProfile = async (profileData: ProfileFormData) => {
   const { signature, message } = await getSignaturePair()
 
   const imageUrl = profileData.image
-    ? await uploadImage(profileData.image)
+    ? await uploadProfileImage(profileData.image, 'image')
     : profileData.imagePreview
 
   const bannerUrl = profileData.banner
-    ? await uploadImage(profileData.banner)
+    ? await uploadProfileImage(profileData.banner, 'banner')
     : profileData.bannerPreview
 
   const profileBody: CreateProfileRequest | UpdateProfileRequest = {
@@ -114,7 +131,7 @@ const processProfile = async (profileData: ProfileFormData) => {
       ? getBioWithLinks(profileData.description)
       : profileData.description,
     image: imageUrl,
-    banner: bannerUrl,
+    banner: hasProfile.value ? bannerUrl ?? null : bannerUrl!,
     socials: constructSocials(profileData),
     signature,
     message,
@@ -125,6 +142,21 @@ const processProfile = async (profileData: ProfileFormData) => {
     : createProfile(profileBody as CreateProfileRequest)
 }
 
+const handleProfileDelete = async (address: string) => {
+  try {
+    const { signature, message } = await getSignaturePair()
+    await deleteProfile({ address, message, signature })
+    infoMessage($i18n.t('profiles.profileHasBeenCleared'), {
+      title: $i18n.t('profiles.profileReset'),
+    })
+    emit('deleted')
+    close()
+  } catch (error) {
+    warningMessage(error!.toString())
+    console.error(error)
+  }
+}
+
 const handleFormSubmition = async (profileData: ProfileFormData) => {
   stage.value = 4 // Go to loading stage
   try {

components/profile/create/SelectImageField.vue

@@ -21,22 +21,22 @@
         vSelectedFile?.name ?? 'Click To Select A File'
       }}</span>
       <NeoButton
-        v-if="vSelectedFile"
+        v-if="vSelectedFile || preview"
         class="absolute right-3 top-3"
         variant="icon"
         no-shadow
         icon="xmark"
-        @click="vSelectedFile = null" />
+        @click="clear" />
     </div>
   </NeoUpload>
 </template>
 <script setup lang="ts">
 import { NeoButton, NeoIcon, NeoUpload } from '@kodadot1/brick'
 
 const NuxtImg = resolveComponent('NuxtImg')
-
 const ONE_MB = 1024 * 1024
 
+const emit = defineEmits(['clear'])
 const props = defineProps<{
   modelValue: File | null
   preview?: string
@@ -50,6 +50,11 @@ const selectedFilePreview = computed(() =>
   vSelectedFile.value ? URL.createObjectURL(vSelectedFile.value as File) : '',
 )
 
+const clear = () => {
+  vSelectedFile.value = null
+  emit('clear')
+}
+
 const fileSelected = (file: File | null) => {
   if (file && props.maxSizeInMb && file.size > props.maxSizeInMb * ONE_MB) {
     vSelectedFile.value = null