fix: channel cover picture upload

apps/web/src/components/Channel/BasicInfo/index.tsx

@@ -12,9 +12,10 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { FiSettings } from 'react-icons/fi'
 import { Analytics, TRACK } from 'utils'
-import getCoverPicture from 'utils/functions/getCoverPicture'
+import getChannelCoverPicture from 'utils/functions/getChannelCoverPicture'
 import getProfilePicture from 'utils/functions/getProfilePicture'
 import imageCdn from 'utils/functions/imageCdn'
+import sanitizeIpfsUrl from 'utils/functions/sanitizeIpfsUrl'
 
 import MutualSubscribers from '../Mutual/MutualSubscribers'
 
@@ -43,7 +44,9 @@ const BasicInfo: FC<Props> = ({ channel }) => {
         <span>
           <div
             style={{
-              backgroundImage: `url(${imageCdn(getCoverPicture(channel))})`
+              backgroundImage: `url(${imageCdn(
+                sanitizeIpfsUrl(getChannelCoverPicture(channel))
+              )})`
             }}
             className="absolute w-full bg-white bg-center bg-no-repeat bg-cover rounded-lg dark:bg-gray-900 h-44 md:h-72"
           >

apps/web/src/components/Settings/BasicInfo.tsx

@@ -37,7 +37,7 @@ import {
   TRACK
 } from 'utils'
 import { VERIFIED_CHANNELS } from 'utils/data/verified'
-import getCoverPicture from 'utils/functions/getCoverPicture'
+import getChannelCoverPicture from 'utils/functions/getChannelCoverPicture'
 import { getValueFromKeyInAttributes } from 'utils/functions/getFromAttributes'
 import imageCdn from 'utils/functions/imageCdn'
 import omitKey from 'utils/functions/omitKey'
@@ -85,7 +85,7 @@ const BasicInfo = ({ channel }: Props) => {
   const [copy] = useCopyToClipboard()
   const [loading, setLoading] = useState(false)
   const [uploading, setUploading] = useState(false)
-  const [coverImage, setCoverImage] = useState(getCoverPicture(channel))
+  const [coverImage, setCoverImage] = useState(getChannelCoverPicture(channel))
   const selectedChannel = useAppStore((state) => state.selectedChannel)
 
   const {
@@ -272,13 +272,13 @@ const BasicInfo = ({ channel }: Props) => {
           src={
             sanitizeIpfsUrl(coverImage) ??
             imageCdn(
-              sanitizeIpfsUrl(channel?.coverPicture?.original?.url),
+              sanitizeIpfsUrl(getChannelCoverPicture(channel)),
               'thumbnail'
             )
           }
           className="object-cover object-center w-full h-48 bg-white rounded-xl md:h-56 dark:bg-gray-900"
           draggable={false}
-          alt={`${channel.handle} Cover`}
+          alt={`${channel.handle}'s cover`}
         />
         <label
           htmlFor="chooseCover"

packages/utils/functions/getChannelCoverPicture.ts

@@ -0,0 +1,11 @@
+import type { Profile } from 'lens'
+
+import { STATIC_ASSETS } from '../constants'
+
+const getChannelCoverPicture = (channel: Profile): string => {
+  return channel.coverPicture && channel.coverPicture.__typename === 'MediaSet'
+    ? channel?.coverPicture?.original?.url
+    : `${STATIC_ASSETS}/images/coverGradient.jpeg`
+}
+
+export default getChannelCoverPicture