[PROD] Release (#94)

components/AppNotFound.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { formatMessage } = useIntl()
+
+const handleVisitHomepage = () => {
+  navigateTo(homeRoute())
+}
+
+const handleGetHelp = () => {
+  window.open(formatMessage('not_found_get_help_url'), '_blank')
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center justify-center h-full px-6 transition-opacity animate-fade-in"
+  >
+    <img
+      src="/images/up-error-large.png"
+      alt=""
+      class="w-full px-20 pt-10 sm:w-[341px] sm:px-0"
+    />
+    <div class="pb-2 heading-apax-24-medium">
+      {{ $formatMessage('not_found_title') }}
+    </div>
+    <div class="pb-10 paragraph-inter-16-regular text-center">
+      {{ $formatMessage('not_found_text') }}
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 w-full sm:w-auto pb-8 sm:pb-20">
+      <lukso-button
+        variant="landing"
+        @click="handleVisitHomepage"
+        is-full-width
+      >
+        {{ $formatMessage('not_found_homepage') }}
+      </lukso-button>
+      <lukso-button variant="text" @click="handleGetHelp" is-full-width>
+        {{ $formatMessage('not_found_get_help') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>

components/ProfileDetails.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { profile } = useViewedProfileStore()
+
+const hasLinks = computed(() => profile?.links && profile.links?.length > 0)
+const hasDescription = computed(
+  () => profile?.description && profile.description !== ''
+)
+</script>
+
+<template>
+  <div v-if="hasDescription || hasLinks" class="py-6 w-1/2 mx-auto">
+    <div v-if="hasDescription" class="paragraph-inter-12-medium text-center">
+      {{ profile.description }}
+    </div>
+    <ul
+      v-if="hasLinks"
+      class="gap-x-4 gap-y-2 mt-3 flex justify-center flex-wrap"
+    >
+      <li
+        v-for="(link, index) in profile.links"
+        :key="index"
+        class="inline-flex"
+      >
+        <lukso-button size="small" :href="link.url" is-link variant="secondary"
+          >{{ link.title }}
+          <lukso-icon name="link-3" size="small" class="ml-2"></lukso-icon>
+        </lukso-button>
+      </li>
+    </ul>
+  </div>
+</template>

components/profile.vue

@@ -28,20 +28,30 @@ const handleCopyAddress = () => {
         >
         </lukso-profile>
         <lukso-username
-          :name="profile.name || $formatMessage('profile_default_name')"
+          v-if="profile.name"
+          :name="profile.name.toLowerCase()"
           size="large"
           address-color="neutral-100"
           max-width="350"
           :name-color="profile.backgroundImageUrl ? 'neutral-100' : ''"
         ></lukso-username>
+        <lukso-username
+          v-else
+          :name="$formatMessage('profile_default_name')"
+          size="large"
+          address-color="neutral-100"
+          max-width="350"
+          :name-color="profile.backgroundImageUrl ? 'neutral-100' : ''"
+          hide-prefix
+        ></lukso-username>
         <lukso-username
           :address="profile.address"
           size="small"
           slice-by="40"
           :address-color="
             profile.backgroundImageUrl ? 'neutral-100' : 'neutral-20'
           "
-          class="cursor-pointer"
+          class="cursor-pointer mt-2"
           @click="handleCopyAddress"
         ></lukso-username>
       </div>

package.json

@@ -31,7 +31,7 @@
     "@formatjs/intl": "^2.9.0",
     "@lukso/lsp-factory.js": "3.1.1",
     "@lukso/lsp-smart-contracts": "0.11.1",
-    "@lukso/web-components": "1.34.1",
+    "@lukso/web-components": "1.36.0",
     "@nuxt/devtools": "^0.7.4",
     "@nuxtjs/device": "^3.1.0",
     "@nuxtjs/plausible": "^0.2.1",

pages/404.vue

@@ -1,41 +1,3 @@
-<script setup lang="ts">
-const { formatMessage } = useIntl()
-
-const handleVisitHomepage = () => {
-  navigateTo(homeRoute())
-}
-
-const handleGetHelp = () => {
-  window.open(formatMessage('not_found_get_help_url'), '_blank')
-}
-</script>
-
 <template>
-  <div
-    class="flex flex-col items-center justify-center h-full px-6 transition-opacity animate-fade-in"
-  >
-    <img
-      src="/images/up-error-large.png"
-      alt=""
-      class="w-full px-20 pt-10 sm:w-[341px] sm:px-0"
-    />
-    <div class="pb-2 heading-apax-24-medium">
-      {{ $formatMessage('not_found_title') }}
-    </div>
-    <div class="pb-10 paragraph-inter-16-regular text-center">
-      {{ $formatMessage('not_found_text') }}
-    </div>
-    <div class="grid gap-4 sm:grid-cols-2 w-full sm:w-auto pb-8 sm:pb-20">
-      <lukso-button
-        variant="landing"
-        @click="handleVisitHomepage"
-        is-full-width
-      >
-        {{ $formatMessage('not_found_homepage') }}
-      </lukso-button>
-      <lukso-button variant="text" @click="handleGetHelp" is-full-width>
-        {{ $formatMessage('not_found_get_help') }}
-      </lukso-button>
-    </div>
-  </div>
+  <AppNotFound />
 </template>

pages/[...slug].vue

@@ -0,0 +1,3 @@
+<template>
+  <AppNotFound />
+</template>

pages/[profileAddress]/index.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 
 import { AssetFilter } from '@/types/assets'
+import { REFERRERS } from '@/types/enums'
 
 const { status } = useViewedProfileStore()
 
@@ -45,6 +46,10 @@ const hasEmptyNfts = computed(
     (assetFilter.value === AssetFilter.owned && ownedNftsCount.value) ||
     (assetFilter.value === AssetFilter.created && createdNftsCount.value)
 )
+
+const showProfileDetails = computed(
+  () => useRouter().currentRoute.value.query.referrer === REFERRERS.INDEXER
+)
 </script>
 
 <template>
@@ -57,6 +62,7 @@ const hasEmptyNfts = computed(
       }"
     >
       <Profile />
+      <ProfileDetails v-if="showProfileDetails" />
       <div>
         <div>
           <div class="pt-10 gap-4 flex">

pages/[profileAddress]/nft/[nftAddress]/tokenId/[tokenId].vue

@@ -17,7 +17,6 @@ const nft = ref<Nft>()
 
 watchEffect(() => {
   nft.value = getNft(nftAddress, tokenId)
-  console.log(nft.value)
 })
 </script>
 

translations/en_US.json

@@ -41,7 +41,7 @@
   "header_my_profile": "My profile",
   "send_success_button": "Send another token",
   "send_success_title": "Sending complete!",
-  "profile_default_name": "anonymous account",
+  "profile_default_name": "anonymous-profile",
   "footer_terms_text": "Terms & Conditions",
   "assets_empty_state_description": "To find out how to create your own assets such as Tokens and NFT’s on <span class=\"paragraph-inter-16-semi-bold\">LUKSO</span> head over to our <a href=\"https://docs.lukso.tech/guides/digital-assets/create-lsp7-digital-asset/\" target=\"_blank\" class=\"text-purple-51 hover:text-purple-41 underline paragraph-inter-16-semi-bold\">documentation</a>. ",
   "connect_or_install_button_coming_soon": "Coming soon...",

types/enums.ts

@@ -8,3 +8,8 @@ export enum STORAGE_KEY {
   CONNECTION_EXPIRY = 'LUKSO_WALLET:connectionExpiry',
   RECONNECT_ADDRESS = 'LUKSO_WALLET:reconnectAddress',
 }
+
+// We use ?referrer=XXX in the URL queries to enable/disable specific features
+export enum REFERRERS {
+  INDEXER = 'indexer',
+}

yarn.lock

@@ -1653,12 +1653,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/web-components@npm:1.34.1":
-  version: 1.34.1
-  resolution: "@lukso/web-components@npm:1.34.1"
+"@lukso/web-components@npm:1.36.0":
+  version: 1.36.0
+  resolution: "@lukso/web-components@npm:1.36.0"
   dependencies:
     ethereum-blockies-base64: ^1.0.2
-  checksum: e233bd5eaec440f8d6a92eb402dfe3e264c474ed788b7d4dba9f4c9af9503fb8ba0ce4b240fb0caaa612fb1476238c26a58196e3518b1751f79ca14448b0e29a
+  checksum: b53aaf3b6c44cfdf3825ba3cc0eefbffd168dd662f98fbd00d4f81ced8144a315772d1e42c8a571cbcdd34c5ce561b8c9f92769ada9b01d9dec58dbc4eb983db
   languageName: node
   linkType: hard
 
@@ -15946,7 +15946,7 @@ __metadata:
     "@formatjs/intl": ^2.9.0
     "@lukso/lsp-factory.js": 3.1.1
     "@lukso/lsp-smart-contracts": 0.11.1
-    "@lukso/web-components": 1.34.1
+    "@lukso/web-components": 1.36.0
     "@nuxt/devtools": ^0.7.4
     "@nuxtjs/device": ^3.1.0
     "@nuxtjs/plausible": ^0.2.1