chore: Release

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

components/AppFooter.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ProviderName } from '@lukso/web-components/dist/components/lukso-share'
 
-const providers = ref<ProviderName[]>()
-
-onMounted(() => {
-  providers.value = ['twitter', 'discord', 'github']
-})
+const providers: ProviderName[] = ['twitter', 'discord', 'github']
 </script>
 
 <template>
-  <lukso-footer v-if="providers" :providers="providers">
+  <lukso-footer v-if="providers" :providers="JSON.stringify(providers)">
     <div
       slot="links"
       class="grid gap-4 items-center grid-cols-1 grid-rows-3 xl:grid-cols-[repeat(4,max-content)] xl:gap-10 xl:grid-rows-1"

components/ProfileCard.vue

@@ -18,42 +18,47 @@ const handleCopyAddress = () => {
       :background-url="viewedProfile?.backgroundImage?.base64"
       is-full-width
       custom-class="rounded-24 shadow-neutral-drop-shadow"
+      class="mb-22"
     >
       <div slot="content" class="flex flex-col items-center">
-        <lukso-profile
-          :profile-url="viewedProfile?.profileImage?.base64"
-          :profile-address="viewedProfile?.address"
-          class="mb-4"
-          has-identicon
-        >
-        </lukso-profile>
-        <lukso-username
-          v-if="viewedProfile?.name"
-          :name="viewedProfile?.name.toLowerCase()"
-          size="large"
-          address-color="neutral-100"
-          max-width="350"
-          :name-color="viewedProfile.backgroundImage ? 'neutral-100' : ''"
-        ></lukso-username>
-        <lukso-username
-          v-else
-          :name="$formatMessage('profile_default_name')"
-          size="large"
-          address-color="neutral-100"
-          max-width="350"
-          :name-color="viewedProfile?.backgroundImage ? 'neutral-100' : ''"
-          hide-prefix
-        ></lukso-username>
-        <lukso-username
-          :address="viewedProfile?.address"
-          size="small"
-          slice-by="40"
-          :address-color="
-            viewedProfile?.backgroundImage ? 'neutral-100' : 'neutral-20'
-          "
-          class="cursor-pointer mt-2"
-          @click="handleCopyAddress"
-        ></lukso-username>
+        <div class="relative -bottom-[140px] text-center">
+          <div class="group cursor-pointer flex flex-col items-center">
+            <lukso-profile
+              :profile-url="viewedProfile?.profileImage?.base64"
+              :profile-address="viewedProfile?.address"
+              size="x-large"
+              has-identicon
+              class="relative z-[1] flex outline outline-4 outline-neutral-100 rounded-full transition group-hover:scale-105"
+              @click="handleCopyAddress"
+            >
+            </lukso-profile>
+            <div
+              class="relative -top-10 h-0 opacity-10 paragraph-ptmono-16-regular text-24 transition group-hover:opacity-30"
+              @click="handleCopyAddress"
+            >
+              {{ viewedProfile?.address }}
+            </div>
+          </div>
+          <lukso-username
+            v-if="viewedProfile?.name"
+            :name="viewedProfile?.name.toLowerCase()"
+            :address="viewedProfile?.address"
+            address-color="neutral-80"
+            size="large"
+            max-width="350"
+            class="mt-4"
+          ></lukso-username>
+          <lukso-username
+            v-else
+            :name="$formatMessage('profile_default_name')"
+            :address="viewedProfile?.address"
+            address-color="neutral-80"
+            size="large"
+            max-width="350"
+            class="mt-4"
+            hide-prefix
+          ></lukso-username>
+        </div>
       </div>
     </lukso-card>
   </div>

package.json

@@ -1,14 +1,13 @@
 {
   "name": "wallet.universalprofile.cloud",
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@4.0.1",
   "private": true,
   "type": "module",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "npm-run-all nuxt:prepare typechain",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:*:fix\"",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:{eslint,css,fmt,types}\"",
     "lint:eslint": "eslint --ext '.js,.vue,.ts' .",
@@ -32,7 +31,7 @@
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@formatjs/intl": "^2.9.6",
     "@lukso/lsp-smart-contracts": "0.12.1",
-    "@lukso/web-components": "1.49.1",
+    "@lukso/web-components": "1.49.2",
     "@nuxt/devtools": "^0.7.6",
     "@nuxtjs/algolia": "^1.9.0",
     "@nuxtjs/device": "^3.1.1",

translations/en_US.json

@@ -27,7 +27,7 @@
   "token_details_token_id": "Token ID",
   "send_button": "Send {amount} {symbol}",
   "asset_supply_title": "Total Token Supply",
-  "header_discovery": "Discovery",
+  "header_discovery": "Discover",
   "not_found_text": "We can’t seem to find the page you’re looking for!",
   "asset_filter_owned_assets": "Owned assets",
   "asset_standard_info_LSP8_details": "Info about the standard goes here....",

utils/getImages.ts

@@ -1,7 +1,6 @@
 import { ImageMetadata } from '@lukso/lsp-smart-contracts'
 
 import { ImageMetadataEncoded } from '@/types/assets'
-import { formatUrl } from '@/utils/formatUrl'
 import { Asset } from '@/models/asset'
 import { ImageRepository } from '@/repositories/image'
 
@@ -24,13 +23,15 @@ const fetchBlobAndConvertToBase64 = async (
 }
 
 export const fetchAndConvertImage = async (imageUrl: string) => {
-  const request = new Request(formatUrl(imageUrl))
+  const request = new Request(resolveUrl(imageUrl))
   return (await fetchBlobAndConvertToBase64(request)) as Base64EncodedImage
 }
 
 /**
  * Gets a correct image url from an array of possible image
  * by checking the height of the image.
+ * It try to find retina version of the image first, then normal version of the image
+ * and lastly the biggest image available.
  *
  * @param {ImageMetadata[]} images - an array of images to check
  * @param {number} height - the desired height of the image
@@ -40,7 +41,6 @@ export const getImageBySize = (
   images: ImageMetadata[],
   height: number
 ): ImageMetadata | undefined => {
-  const retinaHeight = height * 2
   const sortedImagesAscending = images.sort((a, b) => {
     if (a.height < b.height) {
       return -1
@@ -51,13 +51,26 @@ export const getImageBySize = (
     return 0
   })
 
-  for (const image of sortedImagesAscending) {
-    if (image.height > retinaHeight) {
-      return image
-    }
+  // check if we can get retina size image
+  const retinaImage = sortedImagesAscending.find(
+    image => image.height > height * 2
+  )
+
+  if (retinaImage) {
+    return retinaImage
+  }
+
+  // check if we can get normal size image
+  const normalImage = sortedImagesAscending.find(image => image.height > height)
+
+  if (normalImage) {
+    return normalImage
   }
 
-  return images.length > 0 ? images[0] : undefined
+  // lastly return biggest image available
+  return sortedImagesAscending.length > 0
+    ? sortedImagesAscending.pop()
+    : undefined
 }
 
 /**
@@ -101,7 +114,7 @@ export const getAndConvertImage = async (
   if (optimalImage) {
     return {
       ...optimalImage,
-      base64: formatUrl(optimalImage.url),
+      base64: resolveUrl(optimalImage.url),
       // base64: await fetchAndConvertImage(optimalImage.url), // TODO add base when cache storage is added
       id: getImageId(optimalImage),
     } as ImageMetadataEncoded

utils/urlResolver.ts

@@ -0,0 +1,71 @@
+export const resolveUrl = (url: string) => {
+  const resolver = new UrlResolver([['ipfs://', IPFS_URL]])
+
+  return resolver.resolveUrl(url)
+}
+
+// TODO refactor this when below classes will be published in own repo
+
+export class UrlConverter {
+  protected destination: string
+  protected match?: RegExp | string
+
+  constructor(destination: string | URL, match?: RegExp | string) {
+    this.destination =
+      destination instanceof URL ? destination.toString() : destination
+    if (this.destination.at(-1) != '/') {
+      this.destination += '/'
+    }
+    this.match = match
+  }
+
+  resolveUrl(match: RegExp | string, url: string): string {
+    match = this.match || match
+    return url.replaceAll(match, this.destination.toString())
+  }
+}
+
+export class UrlResolver {
+  private converters: Array<{
+    match: string | RegExp
+    converter: UrlConverter
+  }> = []
+  constructor(converters: Array<[string | RegExp, UrlConverter | string]>) {
+    for (const item of converters) {
+      const [match, _converter] = item
+      if (match == undefined) {
+        throw new TypeError('Match criteria not defined')
+      }
+      const converter =
+        typeof _converter === 'string'
+          ? new UrlConverter(_converter)
+          : _converter
+      if (!(converter instanceof UrlConverter)) {
+        throw new TypeError('Invalid converter')
+      }
+      this.converters.push({ match, converter })
+    }
+  }
+
+  resolveUrl(url: string): string {
+    const current = new Set<{
+      match: string | RegExp
+      converter: UrlConverter
+    }>(this.converters)
+    let found = true
+    while (found) {
+      found = false
+      for (const entry of current) {
+        const { match, converter } = entry
+        if (match instanceof RegExp ? match.test(url) : url.startsWith(match)) {
+          url = converter.resolveUrl(match, url)
+          // This converter matches, so don't use it again.
+          current.delete(entry)
+          found = true
+          break
+        }
+      }
+    }
+    return url
+  }
+}