refactor state, make use of existing Profile model

src/components/pages/Profile/Account.tsx

@@ -38,9 +38,11 @@ export default function Account({
 
       <div>
         <h3 className={styles.name}>{name || accountTruncate(accountId)}</h3>
+        {accountId && (
           <code className={styles.accountId}>
             {accountId} <Copy text={accountId} />
           </code>
+        )}
         <p>
           {accountId &&
             chainIds.map((value) => (

src/components/pages/Profile/Header.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import get3BoxProfile from '../../../utils/profile'
-import { ProfileLink } from '../../../models/Profile'
+import { Profile } from '../../../models/Profile'
 import { accountTruncate } from '../../../utils/web3'
 import axios from 'axios'
 import PublisherLinks from './PublisherLinks'
@@ -14,15 +14,36 @@ const isDescriptionTextClamped = () => {
   if (el) return el.scrollHeight > el.clientHeight
 }
 
+const clearedProfile: Profile = {
+  name: null,
+  image: null,
+  description: null,
+  links: null
+}
+
+const Link3Box = ({ accountId, text }: { accountId: string; text: string }) => {
+  return (
+    <a
+      href={`https://www.3box.io/${accountId}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {text}
+    </a>
+  )
+}
+
 export default function AccountHeader({
   accountId
 }: {
   accountId: string
 }): ReactElement {
-  const [image, setImage] = useState<string>()
+  const [profile, setProfile] = useState<Profile>({
-  const [name, setName] = useState(accountTruncate(accountId))
+    name: accountTruncate(accountId),
-  const [description, setDescription] = useState<string>()
+    image: null,
-  const [links, setLinks] = useState<ProfileLink[]>()
+    description: null,
+    links: null
+  })
   const [isShowMore, setIsShowMore] = useState(false)
 
   const toogleShowMore = () => {
@@ -31,28 +52,26 @@ export default function AccountHeader({
 
   useEffect(() => {
     if (!accountId) {
-      setName(null)
+      setProfile(clearedProfile)
-      setDescription(null)
-      setImage(null)
-      setLinks([])
       return
     }
 
     const source = axios.CancelToken.source()
 
     async function getInfoFrom3Box() {
-      const profile = await get3BoxProfile(accountId, source.token)
+      const profile3Box = await get3BoxProfile(accountId, source.token)
-      if (profile) {
+      if (profile3Box) {
-        const { name, emoji, description, image, links } = profile
+        const { name, emoji, description, image, links } = profile3Box
-        setName(`${emoji || ''} ${name || accountTruncate(accountId)}`)
+        const newName = `${emoji || ''} ${name || accountTruncate(accountId)}`
-        setDescription(description || null)
+        const newProfile = {
-        setImage(image || null)
+          name: newName,
-        setLinks(links || [])
+          image,
+          description,
+          links
+        }
+        setProfile(newProfile)
       } else {
-        setName(null)
+        setProfile(clearedProfile)
-        setDescription(null)
-        setImage(null)
-        setLinks([])
       }
     }
     getInfoFrom3Box()
@@ -65,44 +84,32 @@ export default function AccountHeader({
   return (
     <div className={styles.grid}>
       <div>
-        <Account accountId={accountId} image={image} name={name} />
+        <Account
+          accountId={accountId}
+          image={profile.image}
+          name={profile.name}
+        />
         <Stats accountId={accountId} />
       </div>
 
       <div>
-        <Markdown
+        <Markdown text={profile.description} className={styles.description} />
-          text={
-            description ||
-            'No description found on [3box](https://3box.io/login).'
-          }
-          className={styles.description}
-        />
         {isDescriptionTextClamped() ? (
           <span className={styles.more} onClick={toogleShowMore}>
-            <a
+            <Link3Box accountId={accountId} text="Read more on 3box" />
-              href={`https://www.3box.io/${accountId}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Read more on 3box
-            </a>
           </span>
         ) : (
           ''
         )}
-        {links?.length > 0 && (
+        {profile.links?.length > 0 && (
-          <PublisherLinks links={links} className={styles.publisherLinks} />
+          <PublisherLinks
+            links={profile.links}
+            className={styles.publisherLinks}
+          />
         )}
       </div>
       <div className={styles.meta}>
-        Profile data from{' '}
+        Profile data from <Link3Box accountId={accountId} text="3Box Hub" />
-        <a
-          href={`https://www.3box.io/${accountId}`}
-          target="_blank"
-          rel="noreferrer"
-        >
-          3Box Hub
-        </a>
       </div>
     </div>
   )

src/components/pages/Profile/Stats.tsx

@@ -92,12 +92,12 @@ export default function Stats({
 
   return (
     <div className={styles.stats}>
-      <NumberUnit label="Published" value={numberOfAssets} />
-      <NumberUnit label="Sold" value={sold} />
       <NumberUnit
         label="Total Value Locked"
         value={<Conversion price={tvl?.price} hideApproximateSymbol />}
       />
+      <NumberUnit label="Sold" value={sold} />
+      <NumberUnit label="Published" value={numberOfAssets} />
     </div>
   )
 }

src/models/Profile.ts

@@ -4,7 +4,7 @@ export interface ProfileLink {
 }
 
 export interface Profile {
-  did: string
+  did?: string
   name?: string
   description?: string
   emoji?: string

src/utils/profile.ts

@@ -1,7 +1,6 @@
 import { Profile, ProfileLink, ResponseData3Box } from '../models/Profile'
 import axios, { AxiosResponse, CancelToken } from 'axios'
 import jwtDecode from 'jwt-decode'
-import { Logger } from '@oceanprotocol/lib'
 
 // https://docs.3box.io/api/rest-api
 const apiUri = 'https://3box.oceanprotocol.com'