Merge branch 'main' into fix/collection/responsive

components/search/SearchProfiles.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="isLoading">
+    <SearchResultItem v-for="item in 5" :key="item" is-loading />
+  </div>
+  <div v-else-if="!profileSuggestions?.length" class="mx-6 mt-4">
+    {{ $t('search.profileNotFound', [name]) }}
+  </div>
+  <div v-else>
+    <div
+      v-for="item in profileSuggestions"
+      :key="item.address"
+      class="link-item"
+      @click="openProfilePage(item.address)">
+      <SearchResultItem :image="item.image">
+        <template #content>
+          <div class="flex flex-row justify-between pt-2 pr-2">
+            <span
+              class="font-bold max-w-[34ch] overflow-hidden text-ellipsis whitespace-nowrap"
+              >{{ item.name }}</span
+            >
+          </div>
+          <div class="flex flex-row justify-between pr-2">
+            <span
+              class="max-w-[34ch] overflow-hidden text-ellipsis whitespace-nowrap"
+              >{{ item?.description }}</span
+            >
+          </div>
+        </template>
+      </SearchResultItem>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { searchProfiles } from '@/services/profile'
+import type { Profile } from '@/services/profile'
+import { useQuery } from '@tanstack/vue-query'
+import { isEthereumAddress } from '@polkadot/util-crypto'
+
+const emit = defineEmits(['close'])
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+})
+
+const router = useRouter()
+const { urlPrefix } = usePrefix()
+const { isEvm } = useIsChain(urlPrefix)
+
+const { data: profileSuggestions, isLoading } = useQuery<Profile[]>({
+  queryKey: ['search-profiles', computed(() => props.name)],
+  queryFn: () =>
+    props.name ? searchProfiles(props.name, 10).then((res) => res?.data) : [],
+})
+
+const openProfilePage = (address: string) => {
+  if (isEthereumAddress(address)) {
+    const prefix = isEvm.value ? urlPrefix.value : 'base'
+    router.push(`/${prefix}/u/${address}`)
+  } else {
+    const prefix = isEvm.value ? 'ahp' : urlPrefix.value
+    router.push(`/${prefix}/u/${address}`)
+  }
+  emit('close')
+}
+</script>

components/search/SearchSuggestion.vue

@@ -165,15 +165,10 @@
         </nuxt-link>
       </NeoTabItem>
       <NeoTabItem
-        disabled
         value="User"
+        label="User"
         item-header-class="text-left block mb-0 pb-4 px-0 pt-0">
-        <template #header>
-          {{ $t('user') }}
-          <span class="small-soon-text">
-            {{ $t('soon') }}
-          </span>
-        </template>
+        <SearchProfiles :name="name" @close="$emit('close')" />
       </NeoTabItem>
     </NeoTabs>
     <div v-if="!name" class="search-history pt-5">

locales/en.json

@@ -125,7 +125,8 @@
     "landingTitle2": "Generative Art",
     "landingTitle3": "Marketplace",
     "collectionNotFound": "Our search agents have not found anything with \"{0}\" in collection name",
-    "nftNotFound": "Our search agents have not found anything with \"{0}\" in NFT name"
+    "nftNotFound": "Our search agents have not found anything with \"{0}\" in NFT name",
+    "profileNotFound": "Our search agents have not found anyone with \"{0}\" in user name"
   },
   "transfers": {
     "recipient": "Recipient",

services/profile.ts

@@ -104,6 +104,12 @@ export const fetchProfileByAddress = (address: string) =>
     method: 'GET',
   })
 
+export const searchProfiles = (query: string, limit = 5, offset = 0) =>
+  api<{ data: Profile[] }>('/profiles/search', {
+    method: 'GET',
+    query: { q: query, limit, offset },
+  })
+
 export const fetchFollowersOf = (
   address: string,
   options?: { limit?: number; offset?: number; exclude?: string[] },