Adds username resolution across the dapp

components/ArtistGalleryHero.vue

@@ -127,17 +127,18 @@ const {
     const curation = abc.curations.get<CollaborativeWhitelistCurationState>(
       config.public.artbycity.contracts.galleryHero
     )
-
+    
     const { cachedValue: { state } } = await curation.contract.readState()
 
     if (state.items.length < 1) { return }
 
     images.value = _.shuffle(await Promise.all(
       state.items.map(async item => {
         const publication = await abc.legacy.fetchPublication(item)
+        const profile = await abc.legacy.fetchProfile(publication.creator)
 
         return {
-          artist: publication.creator,
+          artist: profile?.displayName,
           title: publication.title,
           year: publication.year,
           src: publication.image.preview4k.startsWith('data:image')

components/ConnectButton.vue

@@ -11,9 +11,7 @@
     <v-list>
       <v-list-item>
         <v-list-item-title>
-          <code class="text-primary">
-            {{ auth.address }}
-          </code>
+          <ResolveUsername :address="auth.address" no-link />
         </v-list-item-title>
       </v-list-item>
       <v-list-item @click="onMyProfileClicked">

components/FeedItemCard.vue

@@ -68,12 +68,15 @@
                   <v-row align="end" class="fill-height pa-1 pl-4">
                     <v-col>
                       <a class="text-white font-weight-bold">
-                        {{ data?.title }}
+                        {{ artwork?.publication.title }}
                       </a>
                       <br>
                       <a class="text-white font-italic">
-                        {{ data?.creator }} 
-                      </a>
+                        <ResolveUsername 
+                          :address="artwork ? artwork.publication.creator : ''"
+                          no-link
+                        />
+                      </a>                        
                     </v-col>
                   </v-row>
                 </v-card>
@@ -110,37 +113,40 @@ const img = ref<VImg>()
 const hasError = computed(() => {
   if (pending.value) { return false }
 
-  return data.value === null
+  return artwork.value === null
 })
 
 const props = defineProps<{ id: string, to?: RouteLocationRaw }>()
 const abc = useArtByCity()
 const { protocol, host, port } = abc.arweave.api.config
 const gatewayBase = `${protocol}://${host}:${port}`
 
-const { data, pending } = useLazyAsyncData(props.id, async () => {
+const { data: artwork, pending } = useLazyAsyncData(props.id, async () => {
   const publication = await abc.legacy.fetchPublication(props.id)
-
-  return publication
+  const username = 
+    await abc.usernames.resolveUsernameFromAddress(publication.creator)
+
+  return { publication, username }
 })
 
 const src = computed(() => {
-  if (!data.value) { return '' }
+  if (!artwork.value?.publication) { return '' }
 
-  return data.value.image.preview.startsWith('data:image')
-    ? data.value.image.preview
-    : `${gatewayBase}/${data.value.image.preview}`
+  return artwork.value.publication.image.preview.startsWith('data:image')
+    ? artwork.value.publication.image.preview
+    : `${gatewayBase}/${artwork.value.publication.image.preview}`
 })
 
 const isPlayable = computed(() => {
-  if (!data.value) { return false }
+  if (!artwork.value?.publication) { return false }
 
-  return data.value.image.animated || !!data.value.audio || !!data.value.model
+  return artwork.value.publication.image.animated ||
+    !!artwork.value.publication.audio || !!artwork.value.publication.model
 })
 
 const to = computed(() => {
-  return props.to
-    || `/${data.value?.creator}/${data.value?.slug || data.value?.id}`
+  return `/${artwork.value?.username || artwork.value?.publication.creator}/${
+    artwork.value?.publication.slug || artwork.value?.publication.id
+  }` || props.to
 })
-
 </script>

components/ResolveUsername.vue

@@ -0,0 +1,35 @@
+<template>
+  <nuxt-link
+    v-if="!noLink"
+    class="text-primary"
+    :to="`/${user?.username || props.address}`"
+  >
+    <span v-if="user?.profile?.displayName || user?.username">
+      {{ user?.profile?.displayName || user?.username }}
+    </span>
+    <code v-else>
+      {{ props.address }}
+    </code>
+  </nuxt-link>
+  <template v-else>
+    <span v-if="user?.profile?.displayName || user?.username">
+      {{ user?.profile?.displayName || user?.username }}
+    </span>
+    <code v-else>
+      {{ props.address }}
+    </code>
+  </template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ address: string, noLink?: boolean}>()
+const abc = useArtByCity()
+
+const { data: user } = useLazyAsyncData(props.address, async () => {
+  const profile = await abc.legacy.fetchProfile(props.address)
+  const username =
+    await abc.usernames.resolveUsernameFromAddress(props.address)
+
+  return { profile, username }
+})
+</script>

pages/[profile]/[slugOrId].vue

@@ -127,12 +127,7 @@
             text-truncate
           "
         >
-          <nuxt-link
-            class="font-italic text-primary"
-            :to="`/${ artwork.creator }`"
-          >
-            {{ artwork.creator }}
-          </nuxt-link>
+          <ResolveUsername :address="artwork.creator" class="font-italic" />
         </v-col>
       </v-row>
       <v-row v-if="artwork.description" dense>
@@ -186,7 +181,9 @@
                   Published
                 </td>
                 <td>
-                  {{ (new Date(artwork.published)).toLocaleDateString() }}
+                  {{ (new Date(
+                    artwork.published)).toLocaleDateString()
+                  }}
                 </td>
               </tr>
               <tr>
@@ -195,7 +192,9 @@
                 </td>
                 <td class="text-truncate">
                   <a
-                    :href="`https://viewblock.io/arweave/tx/${artwork.id}`"
+                    :href="`https://viewblock.io/arweave/tx/${
+                      artwork.id
+                    }`"
                     target="_blank"
                     class="text-primary"
                   >
@@ -240,11 +239,10 @@ const gatewayBase = `${protocol}://${host}:${port}`
 const slugOrId = route.params['slugOrId'] as string
 const tab = ref<null | string>(null)
 
-const { data: artwork, pending } = useLazyAsyncData(slugOrId, async () => {
-  const publication = await abc.legacy.fetchPublicationBySlugOrId(slugOrId)
-
-  return publication
+const { data: artwork, pending } = useLazyAsyncData(slugOrId, async () => {  
+  return await abc.legacy.fetchPublicationBySlugOrId(slugOrId)
 })
+
 
 const hasError = computed(() => {
   if (pending.value) { return false }
@@ -314,7 +312,9 @@ const onImageClicked = debounce(() => {
   if (!artwork.value) { return }
 
   if (!artwork.value.image.image.startsWith('data:image')) {
-    window.open(`${gatewayBase}/${artwork.value.image.image}`, '_blank')
+    window.open(
+      `${gatewayBase}/${artwork.value.image.image}`, '_blank'
+    )
     return
   }
 

pages/curations/[curationId]/index.vue

@@ -30,12 +30,7 @@
     </v-row>
     <v-row dense>
       <v-col cols="12">
-        <nuxt-link
-          class="font-italic text-primary"
-          :to="`/${curation.state.owner}`"
-        >
-          <code>{{ curation.state.owner }}</code>
-        </nuxt-link>
+        <ResolveUsername :address="curation.state.owner" class="font-italic" />
       </v-col>
     </v-row>
     <v-row v-if="curation.desc" dense>
@@ -76,8 +71,8 @@
             <nuxt-link class="text-primary" :to="`/${curation.state.owner}`">
               <Avatar :address="curation.state.owner" />
               <br>
-              <code>{{ curation.state.owner }}</code>
             </nuxt-link>
+            <ResolveUsername :address="curation.state.owner" />
           </v-col>
           <v-col
             v-for="address in curation.state.roles.curator"
@@ -88,8 +83,8 @@
             <nuxt-link class="text-primary" :to="`/${address}`">
               <Avatar :address="address" />
               <br>
-              <code>{{ address }}</code>
             </nuxt-link>
+            <ResolveUsername :address="address" />
           </v-col>
         </v-row>
       </v-window-item>