Merge branch 'main' into issue-10359

.github/actions/pnpm-install/action.yml

@@ -14,7 +14,7 @@ runs:
       name: Install pnpm
       id: pnpm-install
       with:
-        version: 8
+        version: 9
 
     - name: Get pnpm store directory
       id: pnpm-cache

Dockerfile

@@ -2,7 +2,7 @@
 FROM node:20
 
 # Set the same pnpm version as the version in the package.json
-ENV PNPM_VERSION 8.6.0
+ENV PNPM_VERSION 9.4.0
 
 RUN npm i -g pnpm@$PNPM_VERSION
 WORKDIR /app

assets/styles/components/_gallery-item.scss

@@ -32,10 +32,6 @@
       border: 1px solid theme('border-color');
     }
   }
-
-  .icon-action {
-    width: 2.188rem;
-  }
 }
 
 .gallery-item-desc-markdown {

components/base/MediaItem.vue

@@ -31,7 +31,7 @@
     </div>
     <div
       v-if="hasNormalTag"
-      class="bg-k-shade border-k-grey text-text-color flex items-center justify-center border rounded-md absolute right-3 top-3 image is-24x24 z-[99]">
+      class="bg-k-shade border-k-grey text-text-color flex items-center justify-center border rounded-md absolute right-3 top-3 image is-24x24 z-[18]">
       <NeoIcon icon="image" pack="far" class="text-sm font-medium" />
     </div>
     <NeoButton

components/collection/drop/GenerativePreview.vue

@@ -2,12 +2,19 @@
   <div
     data-partykit="generative-preview-card"
     class="border bg-background-color shadow-primary p-5 pb-6 w-full h-min md:w-[444px] lg:w-[490px] relative">
-    <BaseMediaItem
-      :src="sanitizeIpfsUrl(displayUrl)"
-      :mime-type="generativeImageUrl ? 'text/html' : ''"
-      preview
-      is-detail
-      class="border" />
+    <div class="relative">
+      <BaseMediaItem
+        :src="sanitizeIpfsUrl(displayUrl)"
+        :mime-type="generativeImageUrl ? 'text/html' : ''"
+        :class="{ 'opacity-0': !imageDataLoaded }"
+        class="border"
+        preview
+        is-detail />
+      <SkeletonLoader
+        v-if="!imageDataLoaded"
+        :title="$t('drops.loadingGenerativeArt')"
+        class="!absolute w-full top-0" />
+    </div>
 
     <NeoButton
       v-if="dropStore.isCapturingImage"

components/common/ConnectWallet/ConnectEvm.vue

@@ -28,8 +28,9 @@ const { urlPrefix, setUrlPrefix } = usePrefix()
 const { modal } = useWeb3Modal()
 
 watch([address, isConnected, chainId], ([address, isConnected, chainId]) => {
-  if (address && isConnected && chainId) {
-    const chainPrefix = CHAIN_ID_TO_PREFIX[chainId]
+  const chainPrefix = CHAIN_ID_TO_PREFIX?.[chainId ?? '']
+
+  if (address && isConnected && chainId && chainPrefix) {
     const isCorrectChainConnected = chainPrefix === urlPrefix.value
 
     if (!isCorrectChainConnected) {

components/common/ShareDropdown.vue

@@ -2,7 +2,7 @@
   <NeoDropdown position="bottom-left" :mobile-modal="mobileModal">
     <template #trigger="{ active }">
       <NeoButton
-        :class="isMobile ? 'icon-action' : ''"
+        :class="isMobile ? 'w-10 h-10' : ''"
         :label="label"
         :icon="icon"
         :no-shadow="noShadow"

components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue

@@ -9,7 +9,7 @@
     <NeoDropdown position="bottom-left" :mobile-modal="false">
       <template #trigger="{ active }">
         <NeoButton
-          class="icon-action"
+          class="w-10 h-10"
           icon="ellipsis-vertical"
           :active="active" />
       </template>

components/items/ItemsGrid/ItemsGridImage.vue

@@ -30,14 +30,14 @@
           data-testid="item-buy"
           no-shadow
           :loading="showActionSection"
-          class="flex-grow btn-height"
+          class="flex-grow"
           loading-with-label
           @click.prevent="onClickBuy">
         </NeoButton>
         <NeoButton
           data-testid="item-add-to-cart"
           no-shadow
-          class="fixed-width p-1 border-l-0 btn-height override-wrapper-width"
+          class="p-1 !border-l-0"
           @click.prevent="onClickShoppingCart">
           <NeoIcon
             class="w-4 h-4"
@@ -54,7 +54,7 @@
           :label="listLabel"
           data-testid="item-buy"
           no-shadow
-          class="flex-grow btn-height"
+          class="flex-grow"
           @click.prevent="onClickListingCart">
         </NeoButton>
       </div>
@@ -168,11 +168,6 @@ const onClickListingCart = () => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-:deep(.override-wrapper-width) {
-  .o-btn__wrapper {
-    width: unset !important;
-  }
-}
 .in-cart-border {
   @include ktheme() {
     outline: 2px solid theme('k-blue') !important;
@@ -182,14 +177,6 @@ const onClickListingCart = () => {
   }
 }
 
-.fixed-width {
-  min-width: 35px;
-}
-
-.btn-height {
-  height: 35px;
-}
-
 .hover-color {
   &:hover {
     @include ktheme() {

components/items/ItemsGrid/ItemsGridImageTokenEntity.vue

@@ -29,14 +29,14 @@
           data-testid="item-buy"
           no-shadow
           :loading="showActionSection"
-          class="flex-grow btn-height"
+          class="flex-grow"
           loading-with-label
           @click.prevent="onClickBuy">
         </NeoButton>
         <NeoButton
           data-testid="item-add-to-cart"
           no-shadow
-          class="fixed-width p-1 border-l-0 btn-height override-wrapper-width"
+          class="p-1 !border-l-0"
           @click.prevent="onClickShoppingCart">
           <NeoIcon
             class="w-4 h-4"
@@ -55,7 +55,7 @@
             :label="listLabel"
             data-testid="item-buy"
             no-shadow
-            class="flex-grow btn-height"
+            class="flex-grow"
             @click.prevent="onClickListingCart">
           </NeoButton>
         </template>
@@ -65,7 +65,7 @@
             :label="listLabel"
             data-testid="item-buy"
             no-shadow
-            class="flex-grow btn-height"
+            class="flex-grow"
             @click.prevent="onClickListingCart">
           </NeoButton>
         </template>
@@ -223,11 +223,6 @@ onMounted(async () => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-:deep(.override-wrapper-width) {
-  .o-btn__wrapper {
-    width: unset !important;
-  }
-}
 .in-cart-border {
   @include ktheme() {
     outline: 2px solid theme('k-blue') !important;
@@ -237,14 +232,6 @@ onMounted(async () => {
   }
 }
 
-.fixed-width {
-  min-width: 35px;
-}
-
-.btn-height {
-  height: 35px;
-}
-
 .hover-color {
   &:hover {
     @include ktheme() {

components/profile/ProfileActivitySummery.vue

@@ -10,7 +10,7 @@
         {{ $t(item.label) }}
       </span>
       <div
-        class="text-lg font-bold"
+        class="text-md md:text-lg font-bold"
         :class="{ 'group-hover:underline underline-offset-4': item.onClick }">
         <component
           :is="item.component"

components/profile/ProfileBannerSkeleton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative !h-[360px] border-b">
+  <div class="relative md:!h-[360px] !h-40 border-b">
     <NeoSkeleton
       class="h-full absolute"
       item-class="!h-full w-full m-0"

components/profile/ProfileDetail.vue

@@ -13,22 +13,22 @@
 
     <div
       v-else
-      class="bg-no-repeat bg-cover bg-center h-[360px] border-b bg-neutral-3 dark:bg-neutral-11"
+      class="bg-no-repeat bg-cover bg-center md:h-[360px] h-40 border-b bg-neutral-3 dark:bg-neutral-11"
       :style="{
         backgroundImage: userProfile?.banner
           ? `url(${userProfile.banner})`
           : undefined,
       }">
       <div
-        class="collection-banner-content flex items-end h-full pb-7 max-sm:mx-5 mx-12 2xl:mx-auto max-w-[89rem]">
+        class="collection-banner-content flex md:items-end items-center h-full md:pb-7 max-sm:mx-5 mx-12 2xl:mx-auto max-w-[89rem]">
         <div
           class="!rounded-full overflow-hidden p-2.5 bg-background-color border aspect-square">
           <BaseMediaItem
             v-if="userProfile?.image"
             :src="userProfile.image"
             :image-component="NuxtImg"
             :title="'User Avatar'"
-            class="w-[124px] h-[124px] object-cover rounded-full" />
+            class="md:w-[124px] md:h-[124px] h-[78px] w-[78px] object-cover rounded-full" />
           <Avatar v-else :value="id" :size="124" class="mb-[-7px]" />
         </div>
       </div>
@@ -40,7 +40,7 @@
 
       <div v-else class="flex flex-col gap-6">
         <!-- Identity Link -->
-        <h1 class="title is-3 mb-0" data-testid="profile-user-identity">
+        <h1 class="title is-4 md:is-3 mb-0" data-testid="profile-user-identity">
           <span v-if="userProfile?.name">{{ userProfile.name }}</span>
           <Identity
             v-else
@@ -61,7 +61,7 @@
             <ProfileFollowButton
               v-else
               ref="followButton"
-              :target="id as string"
+              :target="id"
               @follow:success="handleFollowRefresh"
               @follow:fail="openProfileCreateModal"
               @unfollow:success="handleFollowRefresh" />
@@ -471,7 +471,7 @@ const followButton = ref()
 const counts = ref({})
 const hasAssetPrefixMap = ref<Partial<Record<ProfileTab, Prefix[]>>>({})
 const loadingOtherNetwork = ref(false)
-const id = computed(() => route.params.id || '')
+const id = computed(() => route.params.id.toString() || '')
 const email = ref('')
 const twitter = ref('')
 const displayName = ref('')

components/profile/follow/UserRow.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="flex items-center justify-between">
-    <NuxtLink
-      class="flex"
-      :to="`/${urlPrefix}/u/${getss58AddressByPrefix(user.address, urlPrefix)}`">
-      <NuxtImg
-        :src="user.image"
-        placholder
-        alt="follower avatar"
-        class="w-12 h-12 rounded-full border object-cover mr-4" />
+    <NuxtLink class="flex" :to="`/${urlPrefix}/u/${prefixUserAddress}`">
+      <ProfileAvatar class="!mr-4" :address="user.address" :size="48" />
       <div class="flex flex-col gap-[6px]">
         <span
           class="text-k-black font-bold truncate max-w-[10rem] max-sm:max-w-[8rem]"
-          >{{ user.name }}</span
+          >{{ user.name || shortAddress(prefixUserAddress) }}</span
         >
         <p class="text-sm">
           {{ followersCount }}
@@ -53,6 +47,8 @@ import {
 import { ButtonConfig } from '@/components/profile/types'
 import { getss58AddressByPrefix } from '@/utils/account'
 import { openProfileCreateModal } from '@/components/profile/create/openProfileModal'
+import shortAddress from '@/utils/shortAddress'
+
 const { accountId } = useAuth()
 const { $i18n } = useNuxtApp()
 const { doAfterLogin } = useDoAfterlogin(getCurrentInstance())
@@ -70,6 +66,10 @@ const showFollowing = ref(false)
 
 const { urlPrefix } = usePrefix()
 
+const prefixUserAddress = computed(() =>
+  getss58AddressByPrefix(props.user.address, urlPrefix.value),
+)
+
 const { data: followersCount, refresh: refreshCount } = useAsyncData(
   `followerCountOf/${props.user.address}`,
   () =>

components/shared/SkeletonLoader.vue

@@ -71,9 +71,13 @@ const calculateTextContainerWidth = () => {
 
   nextTick(() => {
     const title = titleRef.value?.clientWidth || 0
-    const subtitle =
-      (subtitleRef.value?.clientWidth || 0) + DOTS_PLUS_MARGIN_WIDTH
-    textContainerWidth.value = subtitle > title ? `${subtitle}px` : undefined
+    const substitle = subtitleRef.value?.clientWidth || 0
+    const subtitlePlusDots = substitle + DOTS_PLUS_MARGIN_WIDTH
+
+    textContainerWidth.value =
+      substitle && subtitlePlusDots > title
+        ? `${subtitlePlusDots}px`
+        : undefined
   })
 }
 

composables/useWagmi.ts

@@ -1,6 +1,6 @@
 import { defaultWagmiConfig } from '@web3modal/wagmi/vue'
 import { base, immutableZkEvm } from 'viem/chains'
-import { reconnect } from '@wagmi/core'
+import { reconnect as reconnectWagmi } from '@wagmi/core'
 import { useAccount, useDisconnect } from 'use-wagmi'
 import { DisconnectMutateAsync } from 'use-wagmi/query'
 
@@ -23,8 +23,12 @@ const buildWagmiConfig = () => {
 
 const config = buildWagmiConfig() as any
 
-export default () => {
-  reconnect(config)
+export default (
+  { reconnect }: { reconnect: boolean } = { reconnect: false },
+) => {
+  if (reconnect) {
+    reconnectWagmi(config)
+  }
 
   const { isConnected, address, isConnecting, chainId } = useAccount({
     config,
@@ -34,5 +38,12 @@ export default () => {
     () => useDisconnect({ config }).disconnectAsync,
   ) as Promise<DisconnectMutateAsync>
 
-  return { config, isConnected, isConnecting, address, disconnect, chainId }
+  return {
+    config,
+    isConnected,
+    isConnecting,
+    address,
+    disconnect,
+    chainId,
+  }
 }

composables/useWeb3Modal.ts

@@ -4,10 +4,12 @@ const modal = ref()
 
 export default () => {
   const { config } = useWagmi()
+  const { urlPrefix } = usePrefix()
 
   createWeb3Modal({
     wagmiConfig: config,
     projectId: useRuntimeConfig().public.walletConnectProjectId,
+    defaultChain: PREFIX_TO_CHAIN[urlPrefix.value],
   })
 
   if (!modal.value) {

locales/en.json

@@ -1421,7 +1421,8 @@
     "phases": {
       "private": "Allowlist",
       "public": "Public Mint"
-    }
+    },
+    "loadingGenerativeArt": "Loading Generative Art"
   },
   "confirmPurchase": {
     "action": "Confirm Purchase",