feat: add prefill buttons to search on product landing page

See: FE-94

Author: marcel-bitfly

frontend/i18n/locales/en.json

@@ -1223,6 +1223,16 @@
                 }
             },
             "search": {
+                "examples": {
+                    "address": "Address",
+                    "latest_block": "Latest Block",
+                    "latest_epoch": "Latest Epoch",
+                    "title": "Examples:",
+                    "token": "Token",
+                    "transaction": "Transaction",
+                    "tx": "TX",
+                    "validator": "Validator"
+                },
                 "filter_aria_label": "Filter by type",
                 "input_label": "Search by Address / Tx hash / Block / Token / ENS",
                 "input_placeholder": "Search anything...",

frontend/layers/base/app/components/BaseChip.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import type { IconName } from '#layers/base/app/components/BaseIcon.vue'
+
 const {
   size = 'sm',
   variant = 'neutral',
 } = defineProps<{
+  icon?: IconName,
   isSelected: boolean,
   size?: 'sm',
   variant?: 'neutral',
@@ -12,12 +15,18 @@ const {
 <template>
   <button
     class="text-nowrap border-1 font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
+    type="button"
     :class="[
       variant === 'neutral' && 'bg-gray-100 dark:bg-gray-900 border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 aria-pressed:bg-gray-200 dark:aria-pressed:bg-gray-700 aria-pressed:border-gray-300 dark:aria-pressed:border-gray-700 aria-pressed:text-black dark:aria-pressed:text-white aria-pressed:shadow-none',
       size === 'sm' && 'px-md py-xs rounded-md ',
+      icon && 'flex items-center gap-md',
     ]"
     :aria-pressed="isSelected"
   >
+    <BaseIcon
+      v-if="icon"
+      :name="icon"
+    />
     <slot />
   </button>
 </template>

frontend/layers/base/app/components/BaseChipGroup.vue

@@ -61,7 +61,7 @@ const handleSelectFilter = (value: ChipItem['value']) => {
 
 <template>
   <ul
-    class="flex gap-md px-2xl py-lg"
+    class="flex gap-md p-2xl"
     role="group"
     :aria-label
   >

frontend/layers/base/app/components/BaseSearchInput.vue

@@ -30,15 +30,12 @@ const input = defineModel<string>({
 
 watchDebounced(
   input,
-  async () => {
+  () => {
     if (input.value.length) {
       emit('search', input.value)
       hasSearched.value = true
     }
   },
-  {
-    immediate: false,
-  },
 )
 
 const showDropdown = computed(() => isLoading || hasSearched.value)
@@ -172,6 +169,13 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
         </div>
       </RkComboboxContent>
     </RkComboboxRoot>
+
+    <div
+      v-if="$slots['search-examples']"
+      class="overflow-x-auto p-2xl z-10 bg-gray-50 dark:bg-gray-950 mt-xl rounded-xl shadow-[inset_0_-1px_0_0_rgba(255,255,255,0.18)]"
+    >
+      <slot name="search-examples" />
+    </div>
   </form>
 </template>
 
@@ -185,6 +189,7 @@ form {
 
   &:before {
     position: absolute;
+    z-index: -1;
     content: '';
     top: 0;
     left: 0;

frontend/layers/products/app/components/BlockchainSearchInput.vue

@@ -21,6 +21,7 @@ const { t: $t } = useTranslation()
 
 const emit = defineEmits<{
   (e: 'search'): void,
+  (e: 'click:example', type: 'address' | 'token' | 'transaction' | 'validator'): void,
 }>()
 
 const searchParams = defineModel<BlockchainSearchParams>({
@@ -76,6 +77,44 @@ const handleTypeFilterChange = () => {
     :results
     @search="handleSearch"
   >
+    <template #search-examples>
+      <div class="flex items-center">
+        <section class="flex gap-lg">
+          <div class="py-xs px-md +pl-lg +border-l border-gray-400 font-semibold text-gray-400">
+            {{ $t('products.landing_page.search.examples.title') }}
+          </div>
+          <BaseChip
+            :is-selected="false"
+            icon="switch-horizontal"
+            :aria-label="$t('products.landing_page.search.examples.transaction')"
+            @click="emit('click:example', 'transaction')"
+          >
+            {{ $t('products.landing_page.search.examples.tx') }}
+          </BaseChip>
+          <BaseChip
+            :is-selected="false"
+            icon="hash"
+            @click="emit('click:example', 'address')"
+          >
+            {{ $t('products.landing_page.search.examples.address') }}
+          </BaseChip>
+          <BaseChip
+            :is-selected="false"
+            icon="stack-2"
+            @click="emit('click:example', 'validator')"
+          >
+            {{ $t('products.landing_page.search.examples.validator') }}
+          </BaseChip>
+          <BaseChip
+            :is-selected="false"
+            icon="hexagon"
+            @click="emit('click:example', 'token')"
+          >
+            {{ $t('products.landing_page.search.examples.token') }}
+          </BaseChip>
+        </section>
+      </div>
+    </template>
     <template #dropdown-fixed-header>
       <BaseChipGroup
         v-model="searchParams.types"

frontend/layers/products/app/pages/products/index.vue

@@ -44,12 +44,13 @@ const searchTypes: BlockchainSearchParams['types'] = [
   'validator_by_public_key',
   'validators_by_withdrawal_credential',
 ]
+const networks = [
+  1,
+  560048,
+] satisfies ChainId[]
 const searchParams = ref<BlockchainSearchParams>({
   input: '',
-  networks: [
-    1,
-    560048,
-  ],
+  networks,
   types: searchTypes,
 })
 
@@ -64,6 +65,37 @@ const {
   method: 'POST',
   watch: false,
 })
+
+const handleExampleClick = (type: 'address' | 'token' | 'transaction' | 'validator') => {
+  if (type === 'address') {
+    searchParams.value = {
+      ...searchParams.value,
+      input: '0x5AbfEc25f74Cd88437631A7731906932776356f9',
+      types: [ 'address' ],
+    }
+  }
+  if (type === 'token') {
+    searchParams.value = {
+      ...searchParams.value,
+      input: '0x26D5Bd2dfEDa983ECD6c39899e69DAE6431Dffbb',
+      types: [ 'token' ],
+    }
+  }
+  if (type === 'transaction') {
+    searchParams.value = {
+      ...searchParams.value,
+      input: '0x4978b2aeed51747c2fd1d681e7da3fd73e7ef328c3634c1a2dc1e7829f1c2622',
+      types: [ 'transaction' ],
+    }
+  }
+  if (type === 'validator') {
+    searchParams.value = {
+      ...searchParams.value,
+      input: '5',
+      types: [ 'validator_by_index' ],
+    }
+  }
+}
 </script>
 
 <template>
@@ -93,7 +125,8 @@ const {
           :type-filters="searchTypes"
           :is-loading="status === 'pending'"
           :has-error="!!error"
-          @search="execute()"
+          @search="execute"
+          @click:example="handleExampleClick"
         />
       </ProductLandingpageSection>
       <ProductLandingpageSection class="mt-11xl">