refactor: Replace profile loader from dcl-gatsby

package.json

@@ -57,13 +57,14 @@
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.21.1",
     "decentraland-gatsby": "^5.67.2",
-    "decentraland-ui": "^3.102.0",
+    "decentraland-ui": "^3.113.0",
     "discord.js": "^14.7.1",
     "dompurify": "^2.3.3",
     "dotenv": "^16.0.0",
     "ethers": "^5.7.1",
     "flickity": "^2.3.0",
     "gatsby": "4.23.0",
+    "gatsby-link": "^4.23.0",
     "gatsby-plugin-image": "^2.10.0",
     "gatsby-plugin-manifest": "^4.10.1",
     "gatsby-plugin-offline": "^5.10.1",

src/components/Common/Avatar.css

@@ -5,7 +5,8 @@
 }
 
 .Avatar {
-  height: auto;
+  width: var(--avatar-size) !important;
+  height: var(--avatar-size) !important;
   border-radius: 100%;
   background-color: #7a7a7a;
   vertical-align: middle;
@@ -20,119 +21,118 @@
   background-image: linear-gradient(110deg, #7a7a7a 18%, #949494 28%, #7a7a7a 43%);
 }
 
-.Avatar.Avatar--0,
-.Avatar.Avatar--1 {
+.dcl.Avatar.Avatar--0,
+.dcl.Avatar.Avatar--1 {
   background-color: #4e79a7;
 }
 
-.Avatar.Avatar--0.Avatar--loading,
-.Avatar.Avatar--1.Avatar--loading {
+.dcl.Avatar.Avatar--0.Avatar--loading,
+.dcl.Avatar.Avatar--1.Avatar--loading {
   background-image: linear-gradient(110deg, #4e79a7 18%, #6e93bb 28%, #4e79a7 43%);
 }
 
-.Avatar.Avatar--2,
-.Avatar.Avatar--3 {
+.dcl.Avatar.Avatar--2,
+.dcl.Avatar.Avatar--3 {
   background-color: #f28e2c;
 }
 
-.Avatar.Avatar--2.Avatar--loading,
-.Avatar.Avatar--3.Avatar--loading {
+.dcl.Avatar.Avatar--2.Avatar--loading,
+.dcl.Avatar.Avatar--3.Avatar--loading {
   background-image: linear-gradient(110deg, #f28e2c 18%, #f4a456 28%, #f28e2c 43%);
 }
 
-.Avatar.Avatar--4,
-.Avatar.Avatar--5 {
+.dcl.Avatar.Avatar--4,
+.dcl.Avatar.Avatar--5 {
   background-color: #e15759;
 }
 
-.Avatar.Avatar--4.Avatar--loading,
-.Avatar.Avatar--5.Avatar--loading {
+.dcl.Avatar.Avatar--4.Avatar--loading,
+.dcl.Avatar.Avatar--5.Avatar--loading {
   background-image: linear-gradient(110deg, #e15759 18%, #e6787a 28%, #e15759 43%);
 }
 
-.Avatar.Avatar--6,
-.Avatar.Avatar--7 {
+.dcl.Avatar.Avatar--6,
+.dcl.Avatar.Avatar--7 {
   background-color: #76b7b2;
 }
 
-.Avatar.Avatar--6.Avatar--loading,
-.Avatar.Avatar--7.Avatar--loading {
+.dcl.Avatar.Avatar--6.Avatar--loading,
+.dcl.Avatar.Avatar--7.Avatar--loading {
   background-image: linear-gradient(110deg, #76b7b2 18%, #91c5c1 28%, #76b7b2 43%);
 }
 
-.Avatar.Avatar--8,
-.Avatar.Avatar--9 {
+.dcl.Avatar.Avatar--8,
+.dcl.Avatar.Avatar--9 {
   background-color: #59a14f;
 }
 
-.Avatar.Avatar--8.Avatar--loading,
-.Avatar.Avatar--9.Avatar--loading {
+.dcl.Avatar.Avatar--8.Avatar--loading,
+.dcl.Avatar.Avatar--9.Avatar--loading {
   background-image: linear-gradient(110deg, #59a14f 18%, #77b76e 28%, #59a14f 43%);
 }
 
-.Avatar.Avatar--a,
-.Avatar.Avatar--b {
+.dcl.Avatar.Avatar--a,
+.dcl.Avatar.Avatar--b {
   background-color: #edc949;
 }
 
-.Avatar.Avatar--a.Avatar--loading,
-.Avatar.Avatar--b.Avatar--loading {
+.dcl.Avatar.Avatar--a.Avatar--loading,
+.dcl.Avatar.Avatar--b.Avatar--loading {
   background-image: linear-gradient(110deg, #edc949 18%, #f0d36d 28%, #edc949 43%);
 }
 
-.Avatar.Avatar--c,
-.Avatar.Avatar--d {
+.dcl.Avatar.Avatar--c,
+.dcl.Avatar.Avatar--d {
   background-color: #af7aa1;
 }
 
-.Avatar.Avatar--c.Avatar--loading,
-.Avatar.Avatar--d.Avatar--loading {
+.dcl.Avatar.Avatar--c.Avatar--loading,
+.dcl.Avatar.Avatar--d.Avatar--loading {
   background-image: linear-gradient(110deg, #af7aa1 18%, #bf94b3 28%, #af7aa1 43%);
 }
 
-.Avatar.Avatar--e,
-.Avatar.Avatar--f {
+.dcl.Avatar.Avatar--e,
+.dcl.Avatar.Avatar--f {
   background-color: #ff9da7;
 }
 
-.Avatar.Avatar--e.Avatar--loading,
-.Avatar.Avatar--f.Avatar--loading {
+.dcl.Avatar.Avatar--e.Avatar--loading,
+.dcl.Avatar.Avatar--f.Avatar--loading {
   background-image: linear-gradient(110deg, #ff9da7 18%, #feb0b8 28%, #ff9da7 43%);
 }
 
 .Avatar.Avatar--mini {
-  width: 20px;
+  --avatar-size: 20px;
 }
 
 .Avatar.Avatar--tiny {
-  width: 24px;
+  --avatar-size: 24px;
 }
 
 .Avatar.Avatar--small {
-  width: 32px;
+  --avatar-size: 32px;
 }
 
-.Avatar,
 .Avatar.Avatar--medium {
-  width: 44px;
+  --avatar-size: 44px;
 }
 
 .Avatar.Avatar--large {
-  width: 52px;
+  --avatar-size: 52px;
 }
 
 .Avatar.Avatar--big {
-  width: 66px;
+  --avatar-size: 66px;
 }
 
 .Avatar.Avatar--huge {
-  width: 90px;
+  --avatar-size: 90px;
 }
 
 .Avatar.Avatar--massive {
-  width: 122px;
+  --avatar-size: 122px;
 }
 
 .Avatar.Avatar--full {
-  width: 100%;
+  --avatar-size: 100%;
 }

src/components/Common/Avatar.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import classNames from 'classnames'
+import { AvatarFace } from 'decentraland-ui/dist/components/AvatarFace/AvatarFace'
 
 import useProfile from '../../hooks/useProfile'
 
@@ -18,42 +19,27 @@ export enum AvatarSize {
   Full = 'full',
 }
 
-const DEFAULT_AVATAR = 'https://decentraland.org/images/male.png'
 type Props = {
   size?: `${AvatarSize}`
-  src?: string
   address?: string
   className?: string
+  src?: string
 }
 
 export default function Avatar({ address, size, src, className }: Props) {
-  const [failed, setFailed] = useState(false)
-
   const { profile, isLoadingProfile } = useProfile(address)
-
-  const getTarget = () => {
-    const avatar = profile?.avatar?.snapshots?.face256 || profile?.avatar?.snapshots?.face
-    if (src) {
-      return src
-    } else if (failed || !avatar) {
-      return DEFAULT_AVATAR
-    }
-
-    return avatar
-  }
-
-  return (
-    <img
-      loading="lazy"
-      src={getTarget()}
-      onError={() => setFailed(true)}
-      className={classNames(
-        'Avatar',
-        `Avatar--${size || AvatarSize.Mini}`,
-        `Avatar--${((address || '')[2] || '').toLowerCase()}`,
-        !src && isLoadingProfile && `Avatar--loading`,
-        className
-      )}
-    />
+  const getClassNames = () =>
+    classNames(
+      'Avatar',
+      `Avatar--${size || AvatarSize.Mini}`,
+      `Avatar--${((address || '')[2] || '').toLowerCase()}`,
+      isLoadingProfile && `Avatar--loading`,
+      className
+    )
+
+  return src ? (
+    <img src={src} className={getClassNames()} />
+  ) : (
+    <AvatarFace avatar={profile} className={getClassNames()} />
   )
 }

src/components/User/Username.css

@@ -17,7 +17,7 @@ a.Username span.address {
   color: inherit;
 }
 
-.Username img.Avatar {
+.Username .Avatar {
   margin-right: 0.5rem;
 }
 

src/entities/Proposal/routes.ts

@@ -5,7 +5,6 @@ import handleAPI, { handleJSON } from 'decentraland-gatsby/dist/entities/Route/h
 import routes from 'decentraland-gatsby/dist/entities/Route/routes'
 import validate from 'decentraland-gatsby/dist/entities/Route/validate'
 import schema from 'decentraland-gatsby/dist/entities/Schema'
-import profiles from 'decentraland-gatsby/dist/utils/loader/profile'
 import { Request } from 'express'
 import isEthereumAddress from 'validator/lib/isEthereumAddress'
 import isUUID from 'validator/lib/isUUID'
@@ -17,6 +16,7 @@ import { DiscourseService } from '../../services/DiscourseService'
 import { ErrorService } from '../../services/ErrorService'
 import { GrantsService } from '../../services/GrantsService'
 import { ProposalInCreation, ProposalService } from '../../services/ProposalService'
+import { getProfile } from '../../utils/Catalyst'
 import Time from '../../utils/date/Time'
 import CoauthorModel from '../Coauthor/model'
 import { CoauthorStatus } from '../Coauthor/types'
@@ -315,8 +315,12 @@ export async function createProposalHiring(req: WithAuth) {
   }
 
   if (!configuration.name) {
-    const profile = await profiles.load(configuration.address)
-    configuration.name = profile?.name || undefined
+    try {
+      const profile = await getProfile(configuration.address)
+      configuration.name = profile?.name || undefined
+    } catch (error) {
+      ErrorService.report(`Can't get profile ${configuration.address}`, error)
+    }
   }
 
   return createProposal({

src/entities/Proposal/templates/index.ts

@@ -1,5 +1,4 @@
-import { Avatar } from 'decentraland-gatsby/dist/utils/api/Catalyst'
-
+import { Avatar } from '../../../utils/Catalyst/types'
 import {
   GrantProposalConfiguration,
   NewProposalBanName,

src/hooks/useProfile.ts

@@ -1,21 +1,32 @@
 import { useQuery } from '@tanstack/react-query'
-import profiles from 'decentraland-gatsby/dist/utils/loader/profile'
+
+import { ErrorClient } from '../clients/ErrorClient'
+import { createDefaultAvatar, getProfile } from '../utils/Catalyst'
 
 import { DEFAULT_QUERY_STALE_TIME } from './constants'
 
 export default function useProfile(address?: string | null) {
   const fetchProfile = async () => {
     if (!address) return null
-    return profiles.load(address)
+
+    try {
+      const profile = await getProfile(address)
+      return { profile: profile || createDefaultAvatar(address), isDefaultProfile: !profile }
+    } catch (error) {
+      ErrorClient.report(`Error fetching profile ${address}`, error)
+      return null
+    }
   }
-  const { data: profile, isLoading: isLoadingProfile } = useQuery({
+  const { data, isLoading: isLoadingProfile } = useQuery({
     queryKey: [`userProfile#${address?.toLowerCase()}`],
     queryFn: () => fetchProfile(),
     staleTime: DEFAULT_QUERY_STALE_TIME,
   })
 
-  const hasDclProfile = !!profile && !profile.isDefaultProfile
-  const profileHasName = hasDclProfile && profile!.name && profile!.name.length > 0
+  const { profile, isDefaultProfile } = data || {}
+
+  const hasDclProfile = !!profile && !isDefaultProfile
+  const profileHasName = hasDclProfile && !!profile.name && profile.name.length > 0
   const displayableAddress = profileHasName ? profile.name : address
 
   return { profile, hasDclProfile, displayableAddress, isLoadingProfile }

src/pages/proposal.css

@@ -22,10 +22,6 @@
   min-height: 24px;
 }
 
-.ProposalDetailPage__Description img {
-  max-width: 100%;
-}
-
 .ProposalImagesPreview {
   margin-bottom: 20px;
 }