701 lines
21 KiB
Plaintext
701 lines
21 KiB
Plaintext
|
---
|
||
|
|
import { ServiceVisibility } from '@prisma/client'
|
||
|
|
import { z } from 'astro:schema'
|
||
|
|
import { groupBy, orderBy } from 'lodash-es'
|
||
|
|
import seedrandom from 'seedrandom'
|
||
|
|
|
||
|
|
import Button from '../components/Button.astro'
|
||
|
|
import Pagination from '../components/Pagination.astro'
|
||
|
|
import ServiceFiltersPill from '../components/ServiceFiltersPill.astro'
|
||
|
|
import ServicesFilters from '../components/ServicesFilters.astro'
|
||
|
|
import ServicesSearchResults from '../components/ServicesSearchResults.astro'
|
||
|
|
import {
|
||
|
|
currencies,
|
||
|
|
currenciesZodEnumBySlug,
|
||
|
|
currencySlugToId,
|
||
|
|
getCurrencyInfo,
|
||
|
|
} from '../constants/currencies'
|
||
|
|
import { getNetworkInfo, networks } from '../constants/networks'
|
||
|
|
import {
|
||
|
|
getVerificationStatusInfo,
|
||
|
|
verificationStatuses,
|
||
|
|
verificationStatusesZodEnumBySlug,
|
||
|
|
verificationStatusSlugToId,
|
||
|
|
} from '../constants/verificationStatus'
|
||
|
|
import BaseLayout from '../layouts/BaseLayout.astro'
|
||
|
|
import { areEqualArraysWithoutOrder, zodEnumFromConstant } from '../lib/arrays'
|
||
|
|
import { parseIntWithFallback } from '../lib/numbers'
|
||
|
|
import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
|
||
|
|
import { prisma } from '../lib/prisma'
|
||
|
|
import { makeSortSeed } from '../lib/sortSeed'
|
||
|
|
import { transformCase } from '../lib/strings'
|
||
|
|
|
||
|
|
import type { AttributeType, Prisma } from '@prisma/client'
|
||
|
|
|
||
|
|
const MIN_CATEGORIES_TO_SHOW = 8
|
||
|
|
const MIN_ATTRIBUTES_TO_SHOW = 8
|
||
|
|
|
||
|
|
const PAGE_SIZE = 30
|
||
|
|
|
||
|
|
const sortOptions = [
|
||
|
|
{
|
||
|
|
value: 'score-desc',
|
||
|
|
label: 'Score (High → Low)',
|
||
|
|
orderBy: {
|
||
|
|
key: 'overallScore',
|
||
|
|
direction: 'desc',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'score-asc',
|
||
|
|
label: 'Score (Low → High)',
|
||
|
|
orderBy: {
|
||
|
|
key: 'overallScore',
|
||
|
|
direction: 'asc',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'name-asc',
|
||
|
|
label: 'Name (A → Z)',
|
||
|
|
orderBy: {
|
||
|
|
key: 'name',
|
||
|
|
direction: 'asc',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'name-desc',
|
||
|
|
label: 'Name (Z → A)',
|
||
|
|
orderBy: {
|
||
|
|
key: 'name',
|
||
|
|
direction: 'desc',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'recent',
|
||
|
|
label: 'Date listed (New → Old)',
|
||
|
|
orderBy: {
|
||
|
|
key: 'listedAt',
|
||
|
|
direction: 'desc',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'oldest',
|
||
|
|
label: 'Date listed (Old → New)',
|
||
|
|
orderBy: {
|
||
|
|
key: 'listedAt',
|
||
|
|
direction: 'asc',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
] as const satisfies {
|
||
|
|
value: string
|
||
|
|
label: string
|
||
|
|
orderBy: {
|
||
|
|
key: keyof Prisma.ServiceSelect
|
||
|
|
direction: 'asc' | 'desc'
|
||
|
|
}
|
||
|
|
}[]
|
||
|
|
|
||
|
|
const defaultSortOption = sortOptions[0]
|
||
|
|
|
||
|
|
const modeOptions = [
|
||
|
|
{
|
||
|
|
value: 'or',
|
||
|
|
label: 'OR',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'and',
|
||
|
|
label: 'AND',
|
||
|
|
},
|
||
|
|
] as const satisfies {
|
||
|
|
value: string
|
||
|
|
label: string
|
||
|
|
}[]
|
||
|
|
|
||
|
|
const attributeOptions = [
|
||
|
|
{
|
||
|
|
value: 'yes',
|
||
|
|
prefix: 'Has',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'no',
|
||
|
|
prefix: 'Not',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '',
|
||
|
|
prefix: '',
|
||
|
|
},
|
||
|
|
] as const satisfies {
|
||
|
|
value: string
|
||
|
|
prefix: string
|
||
|
|
}[]
|
||
|
|
|
||
|
|
const {
|
||
|
|
data: filters,
|
||
|
|
hasDefaultData: hasDefaultFilters,
|
||
|
|
redirectUrl,
|
||
|
|
} = zodParseQueryParamsStoringErrors(
|
||
|
|
{
|
||
|
|
categories: z.array(z.string()),
|
||
|
|
verification: z
|
||
|
|
.array(verificationStatusesZodEnumBySlug.transform((slug) => verificationStatusSlugToId(slug)))
|
||
|
|
.default(
|
||
|
|
verificationStatuses
|
||
|
|
.filter((verification) => verification.default)
|
||
|
|
.map((verification) => verification.slug)
|
||
|
|
),
|
||
|
|
'min-score': z.coerce.number().default(0),
|
||
|
|
'user-rating': z.coerce.number().int().min(0).max(5).default(0),
|
||
|
|
q: z.string().default(''),
|
||
|
|
currencies: z.array(currenciesZodEnumBySlug.transform((slug) => currencySlugToId(slug))),
|
||
|
|
'currency-mode': zodEnumFromConstant(modeOptions, 'value').default('or'),
|
||
|
|
'attribute-mode': zodEnumFromConstant(modeOptions, 'value').default('or'),
|
||
|
|
sort: zodEnumFromConstant(sortOptions, 'value').default(defaultSortOption.value),
|
||
|
|
'sort-seed': z
|
||
|
|
.string()
|
||
|
|
.transform((seed) => (Astro.url.searchParams.has('page') ? seed : makeSortSeed()))
|
||
|
|
.default(makeSortSeed()),
|
||
|
|
'max-kyc': z.coerce.number().int().min(0).max(4).default(4),
|
||
|
|
networks: z.array(zodEnumFromConstant(networks, 'slug')),
|
||
|
|
attr: z
|
||
|
|
.record(z.coerce.number().int().positive(), zodEnumFromConstant(attributeOptions, 'value'))
|
||
|
|
.optional(),
|
||
|
|
page: z.coerce.number().int().min(1).default(1),
|
||
|
|
},
|
||
|
|
Astro,
|
||
|
|
{
|
||
|
|
ignoredKeysForDefaultData: ['sort-seed'],
|
||
|
|
cleanUrl: {
|
||
|
|
removeUneededObjectParams: true,
|
||
|
|
removeParams: {
|
||
|
|
verification: { if: 'default' },
|
||
|
|
q: { if: 'default' },
|
||
|
|
sort: { if: 'default' },
|
||
|
|
'currency-mode': { if: 'another-is-unset', prop: 'currencies' },
|
||
|
|
'attribute-mode': { if: 'another-is-unset', prop: 'attr' },
|
||
|
|
'min-score': { if: 'default' },
|
||
|
|
'user-rating': { if: 'default' },
|
||
|
|
'max-kyc': { if: 'default' },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
if (redirectUrl) return Astro.redirect(redirectUrl.toString())
|
||
|
|
|
||
|
|
export type ServicesFiltersObject = typeof filters
|
||
|
|
|
||
|
|
const [categories, [services, totalServices, hadToIncludeCommunityContributed]] =
|
||
|
|
await Astro.locals.banners.tryMany([
|
||
|
|
[
|
||
|
|
'Unable to load category filters.',
|
||
|
|
() =>
|
||
|
|
prisma.category.findMany({
|
||
|
|
select: {
|
||
|
|
name: true,
|
||
|
|
slug: true,
|
||
|
|
icon: true,
|
||
|
|
_count: {
|
||
|
|
select: {
|
||
|
|
services: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'Unable to load services.',
|
||
|
|
async () => {
|
||
|
|
const groupedAttributes = groupBy(
|
||
|
|
Object.entries(filters.attr ?? {}).flatMap(([key, value]) => {
|
||
|
|
const id = parseIntWithFallback(key)
|
||
|
|
if (id === null) return []
|
||
|
|
return [{ id, value }]
|
||
|
|
}),
|
||
|
|
'value'
|
||
|
|
)
|
||
|
|
const where = {
|
||
|
|
listedAt: {
|
||
|
|
lte: new Date(),
|
||
|
|
},
|
||
|
|
categories: filters.categories.length ? { some: { slug: { in: filters.categories } } } : undefined,
|
||
|
|
verificationStatus: {
|
||
|
|
in: filters.verification,
|
||
|
|
},
|
||
|
|
serviceVisibility: ServiceVisibility.PUBLIC,
|
||
|
|
overallScore: { gte: filters['min-score'] },
|
||
|
|
acceptedCurrencies: filters.currencies.length
|
||
|
|
? filters['currency-mode'] === 'and'
|
||
|
|
? { hasEvery: filters.currencies }
|
||
|
|
: { hasSome: filters.currencies }
|
||
|
|
: undefined,
|
||
|
|
kycLevel: {
|
||
|
|
lte: filters['max-kyc'],
|
||
|
|
},
|
||
|
|
AND: [
|
||
|
|
...(filters['user-rating'] > 0
|
||
|
|
? [
|
||
|
|
{
|
||
|
|
averageUserRating: {
|
||
|
|
gte: filters['user-rating'],
|
||
|
|
},
|
||
|
|
} satisfies Prisma.ServiceWhereInput,
|
||
|
|
]
|
||
|
|
: []),
|
||
|
|
...(filters.q
|
||
|
|
? [
|
||
|
|
{
|
||
|
|
OR: [
|
||
|
|
{ name: { contains: filters.q, mode: 'insensitive' as const } },
|
||
|
|
{ description: { contains: filters.q, mode: 'insensitive' as const } },
|
||
|
|
],
|
||
|
|
} satisfies Prisma.ServiceWhereInput,
|
||
|
|
]
|
||
|
|
: []),
|
||
|
|
...(filters.networks.length
|
||
|
|
? [
|
||
|
|
{
|
||
|
|
OR: [
|
||
|
|
...(filters.networks.includes('onion') ? [{ onionUrls: { isEmpty: false } }] : []),
|
||
|
|
...(filters.networks.includes('i2p') ? [{ i2pUrls: { isEmpty: false } }] : []),
|
||
|
|
...(filters.networks.includes('clearnet') ? [{ serviceUrls: { isEmpty: false } }] : []),
|
||
|
|
],
|
||
|
|
} satisfies Prisma.ServiceWhereInput,
|
||
|
|
]
|
||
|
|
: []),
|
||
|
|
...(filters.attr && (groupedAttributes.yes?.length ?? 0) + (groupedAttributes.no?.length ?? 0) > 0
|
||
|
|
? [
|
||
|
|
{
|
||
|
|
AND: [
|
||
|
|
...(groupedAttributes.yes && groupedAttributes.yes.length > 0
|
||
|
|
? [
|
||
|
|
{
|
||
|
|
[filters['attribute-mode'] === 'and' ? 'AND' : 'OR']: groupedAttributes.yes.map(
|
||
|
|
({ id }) =>
|
||
|
|
({
|
||
|
|
attributes: {
|
||
|
|
some: {
|
||
|
|
attribute: {
|
||
|
|
id,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}) satisfies Prisma.ServiceWhereInput
|
||
|
|
),
|
||
|
|
},
|
||
|
|
]
|
||
|
|
: []),
|
||
|
|
...(groupedAttributes.no && groupedAttributes.no.length > 0
|
||
|
|
? [
|
||
|
|
{
|
||
|
|
[filters['attribute-mode'] === 'and' ? 'AND' : 'OR']: groupedAttributes.no.map(
|
||
|
|
({ id }) =>
|
||
|
|
({
|
||
|
|
attributes: {
|
||
|
|
none: {
|
||
|
|
attribute: {
|
||
|
|
id,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}) satisfies Prisma.ServiceWhereInput
|
||
|
|
),
|
||
|
|
},
|
||
|
|
]
|
||
|
|
: []),
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
: []),
|
||
|
|
],
|
||
|
|
} as const satisfies Prisma.ServiceWhereInput
|
||
|
|
|
||
|
|
const select = {
|
||
|
|
id: true,
|
||
|
|
...(Object.fromEntries(sortOptions.map((option) => [option.orderBy.key, true])) as Record<
|
||
|
|
(typeof sortOptions)[number]['orderBy']['key'],
|
||
|
|
true
|
||
|
|
>),
|
||
|
|
} as const satisfies Prisma.ServiceSelect
|
||
|
|
|
||
|
|
let [unsortedServices, totalServices] = await prisma.service.findManyAndCount({
|
||
|
|
where,
|
||
|
|
select,
|
||
|
|
})
|
||
|
|
let hadToIncludeCommunityContributed = false
|
||
|
|
|
||
|
|
if (totalServices === 0 && !where.verificationStatus.in.includes('COMMUNITY_CONTRIBUTED')) {
|
||
|
|
const [unsortedServiceCommunityServices, totalCommunityServices] =
|
||
|
|
await prisma.service.findManyAndCount({
|
||
|
|
where: {
|
||
|
|
...where,
|
||
|
|
verificationStatus: {
|
||
|
|
...where.verificationStatus,
|
||
|
|
in: [...where.verificationStatus.in, 'COMMUNITY_CONTRIBUTED'],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
select,
|
||
|
|
})
|
||
|
|
|
||
|
|
if (totalCommunityServices !== 0) {
|
||
|
|
hadToIncludeCommunityContributed = true
|
||
|
|
unsortedServices = unsortedServiceCommunityServices
|
||
|
|
totalServices = totalCommunityServices
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const rng = seedrandom(filters['sort-seed'])
|
||
|
|
const selectedSort = sortOptions.find((sort) => sort.value === filters.sort) ?? defaultSortOption
|
||
|
|
|
||
|
|
const sortedServices = orderBy(
|
||
|
|
unsortedServices,
|
||
|
|
[selectedSort.orderBy.key, () => rng()],
|
||
|
|
[selectedSort.orderBy.direction, 'asc']
|
||
|
|
).slice((filters.page - 1) * PAGE_SIZE, filters.page * PAGE_SIZE)
|
||
|
|
|
||
|
|
const unsortedServicesWithInfo = await prisma.service.findMany({
|
||
|
|
where: {
|
||
|
|
id: {
|
||
|
|
in: sortedServices.map((service) => service.id),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
select: {
|
||
|
|
name: true,
|
||
|
|
slug: true,
|
||
|
|
description: true,
|
||
|
|
overallScore: true,
|
||
|
|
privacyScore: true,
|
||
|
|
trustScore: true,
|
||
|
|
kycLevel: true,
|
||
|
|
imageUrl: true,
|
||
|
|
verificationStatus: true,
|
||
|
|
acceptedCurrencies: true,
|
||
|
|
attributes: {
|
||
|
|
select: {
|
||
|
|
attribute: {
|
||
|
|
select: {
|
||
|
|
id: true,
|
||
|
|
slug: true,
|
||
|
|
title: true,
|
||
|
|
category: true,
|
||
|
|
type: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
categories: {
|
||
|
|
select: {
|
||
|
|
name: true,
|
||
|
|
icon: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
const sortedServicesWithInfo = orderBy(
|
||
|
|
unsortedServicesWithInfo,
|
||
|
|
[
|
||
|
|
selectedSort.orderBy.key,
|
||
|
|
// Now we can shuffle indeternimistically, because the pagination was already applied
|
||
|
|
() => Math.random(),
|
||
|
|
],
|
||
|
|
[selectedSort.orderBy.direction, 'asc']
|
||
|
|
)
|
||
|
|
|
||
|
|
return [sortedServicesWithInfo, totalServices, hadToIncludeCommunityContributed] as const
|
||
|
|
},
|
||
|
|
[[] as [], 0, false] as const,
|
||
|
|
],
|
||
|
|
])
|
||
|
|
|
||
|
|
const attributeIcons = {
|
||
|
|
GOOD: {
|
||
|
|
icon: 'ri:check-line',
|
||
|
|
iconClass: 'text-green-400',
|
||
|
|
},
|
||
|
|
BAD: {
|
||
|
|
icon: 'ri:close-line',
|
||
|
|
iconClass: 'text-red-400',
|
||
|
|
},
|
||
|
|
WARNING: {
|
||
|
|
icon: 'ri:alert-line',
|
||
|
|
iconClass: 'text-yellow-400',
|
||
|
|
},
|
||
|
|
INFO: {
|
||
|
|
icon: 'ri:information-line',
|
||
|
|
iconClass: 'text-blue-400',
|
||
|
|
},
|
||
|
|
} as const satisfies Record<AttributeType, { icon: string; iconClass: string }>
|
||
|
|
|
||
|
|
const attributes = await Astro.locals.banners.try(
|
||
|
|
'Unable to load attribute filters.',
|
||
|
|
() =>
|
||
|
|
prisma.attribute.findMany({
|
||
|
|
select: {
|
||
|
|
id: true,
|
||
|
|
slug: true,
|
||
|
|
title: true,
|
||
|
|
category: true,
|
||
|
|
type: true,
|
||
|
|
_count: {
|
||
|
|
select: {
|
||
|
|
services: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
orderBy: [{ category: 'asc' }, { type: 'asc' }, { title: 'asc' }],
|
||
|
|
}),
|
||
|
|
[]
|
||
|
|
)
|
||
|
|
|
||
|
|
const attributesByCategory = orderBy(
|
||
|
|
Object.entries(
|
||
|
|
groupBy(
|
||
|
|
attributes.map((attr) => ({
|
||
|
|
...attr,
|
||
|
|
...attributeIcons[attr.type],
|
||
|
|
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||
|
|
value: filters.attr?.[attr.id] || undefined,
|
||
|
|
})),
|
||
|
|
'category'
|
||
|
|
)
|
||
|
|
).map(([category, attributes]) => ({
|
||
|
|
category,
|
||
|
|
attributes: orderBy(
|
||
|
|
attributes,
|
||
|
|
['value', 'type', '_count.services', 'title'],
|
||
|
|
['asc', 'asc', 'desc', 'asc']
|
||
|
|
).map((attr, i) => ({
|
||
|
|
...attr,
|
||
|
|
showAlways: i < MIN_ATTRIBUTES_TO_SHOW || attr.value !== undefined,
|
||
|
|
})),
|
||
|
|
})),
|
||
|
|
['category'],
|
||
|
|
['asc']
|
||
|
|
)
|
||
|
|
|
||
|
|
const categoriesSorted = orderBy(
|
||
|
|
categories?.map((category) => {
|
||
|
|
const checked = filters.categories.includes(category.slug)
|
||
|
|
|
||
|
|
return {
|
||
|
|
...category,
|
||
|
|
checked,
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
['checked', '_count.services', 'name'],
|
||
|
|
['desc', 'desc', 'asc']
|
||
|
|
).map((category, i) => ({
|
||
|
|
...category,
|
||
|
|
showAlways: i < MIN_CATEGORIES_TO_SHOW || category.checked,
|
||
|
|
}))
|
||
|
|
|
||
|
|
const filtersOptions = {
|
||
|
|
currencies,
|
||
|
|
categories: categoriesSorted,
|
||
|
|
sort: sortOptions,
|
||
|
|
modeOptions,
|
||
|
|
network: networks,
|
||
|
|
verification: verificationStatuses,
|
||
|
|
attributesByCategory,
|
||
|
|
} as const
|
||
|
|
|
||
|
|
export type ServicesFiltersOptions = typeof filtersOptions
|
||
|
|
|
||
|
|
//
|
||
|
|
---
|
||
|
|
|
||
|
|
<BaseLayout
|
||
|
|
pageTitle="Find KYC-free Services"
|
||
|
|
description="Find services that don't require KYC (Know Your Customer) verification for better privacy and control over your data."
|
||
|
|
widthClassName="max-w-none"
|
||
|
|
htmx
|
||
|
|
showSplashText
|
||
|
|
breadcrumbs={[
|
||
|
|
{
|
||
|
|
name: 'Services',
|
||
|
|
url: '/',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:gap-8">
|
||
|
|
<div class="flex items-stretch sm:hidden">
|
||
|
|
{
|
||
|
|
!hasDefaultFilters ? (
|
||
|
|
<div class="-ml-4 flex flex-1 items-center gap-2 overflow-x-auto mask-r-from-[calc(100%-var(--spacing)*16)] pr-12 pl-4">
|
||
|
|
{filters.q && (
|
||
|
|
<ServiceFiltersPill text={`"${filters.q}"`} searchParamName="q" searchParamValue={filters.q} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{!areEqualArraysWithoutOrder(
|
||
|
|
filters.verification,
|
||
|
|
filtersOptions.verification
|
||
|
|
.filter((verification) => verification.default)
|
||
|
|
.map((verification) => verification.value)
|
||
|
|
) &&
|
||
|
|
filters.verification.map((verificationStatus) => {
|
||
|
|
const verificationStatusInfo = getVerificationStatusInfo(verificationStatus)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={verificationStatusInfo.label}
|
||
|
|
icon={verificationStatusInfo.icon}
|
||
|
|
iconClass={verificationStatusInfo.classNames.icon}
|
||
|
|
searchParamName="verification"
|
||
|
|
searchParamValue={verificationStatusInfo.slug}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
|
||
|
|
{filters.categories.map((categorySlug) => {
|
||
|
|
const category = categories?.find((c) => c.slug === categorySlug)
|
||
|
|
if (!category) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={category.name}
|
||
|
|
icon={category.icon}
|
||
|
|
searchParamName="categories"
|
||
|
|
searchParamValue={categorySlug}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
{filters.currencies.map((currencyId) => {
|
||
|
|
const currency = getCurrencyInfo(currencyId)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={currency.name}
|
||
|
|
searchParamName="currencies"
|
||
|
|
searchParamValue={currency.slug}
|
||
|
|
icon={currency.icon}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
{filters.networks.map((network) => {
|
||
|
|
const networkOption = getNetworkInfo(network)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={networkOption.name}
|
||
|
|
icon={networkOption.icon}
|
||
|
|
searchParamName="networks"
|
||
|
|
searchParamValue={network}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
{filters['max-kyc'] < 4 && (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={`KYC Lvl ≤ ${filters['max-kyc'].toLocaleString()}`}
|
||
|
|
icon="ri:shield-keyhole-line"
|
||
|
|
searchParamName="max-kyc"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{filters['user-rating'] > 0 && (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={`Rating ≥ ${filters['user-rating'].toLocaleString()}★`}
|
||
|
|
icon="ri:star-fill"
|
||
|
|
searchParamName="user-rating"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{filters['min-score'] > 0 && (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={`Score ≥ ${filters['min-score'].toLocaleString()}`}
|
||
|
|
icon="ri:medal-line"
|
||
|
|
searchParamName="min-score"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{filters['attribute-mode'] === 'and' && filters.attr && Object.keys(filters.attr).length > 1 && (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text="Attributes: AND"
|
||
|
|
icon="ri:filter-3-line"
|
||
|
|
searchParamName="attribute-mode"
|
||
|
|
searchParamValue="and"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{filters.attr &&
|
||
|
|
Object.entries(filters.attr)
|
||
|
|
.filter((entry): entry is [string, 'no' | 'yes'] => entry[1] === 'yes' || entry[1] === 'no')
|
||
|
|
.map(([attributeId, attributeValue]) => {
|
||
|
|
const attribute = attributes.find((attr) => String(attr.id) === attributeId)
|
||
|
|
if (!attribute) return null
|
||
|
|
const valueInfo = attributeOptions.find((option) => option.value === attributeValue)
|
||
|
|
const prefix = valueInfo?.prefix ?? transformCase(attributeValue, 'title')
|
||
|
|
return (
|
||
|
|
<ServiceFiltersPill
|
||
|
|
text={`${prefix}: ${attribute.title}`}
|
||
|
|
searchParamName={`attr-${attributeId}`}
|
||
|
|
searchParamValue={attributeValue}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div class="text-day-500 flex flex-1 items-center">No filters</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
<Button as="label" for="show-filters" label="Filters" icon="ri:filter-3-line" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
id="show-filters"
|
||
|
|
name="show-filters"
|
||
|
|
class="peer hidden"
|
||
|
|
checked={Astro.url.searchParams.has('show-filters')}
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
class="bg-night-700 fixed top-0 left-0 z-50 h-dvh w-dvw shrink-0 translate-y-full overflow-y-auto overscroll-contain border-t border-green-500/30 px-8 pt-4 transition-transform peer-checked:translate-y-0 sm:relative sm:z-auto sm:h-auto sm:w-64 sm:translate-y-0 sm:overflow-visible sm:border-none sm:bg-none sm:p-0"
|
||
|
|
>
|
||
|
|
<ServicesFilters
|
||
|
|
searchResultsId="search-results"
|
||
|
|
showFiltersId="show-filters"
|
||
|
|
filters={{
|
||
|
|
...filters,
|
||
|
|
'sort-seed': makeSortSeed(),
|
||
|
|
}}
|
||
|
|
options={filtersOptions}
|
||
|
|
hasDefaultFilters={hasDefaultFilters}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ServicesSearchResults
|
||
|
|
services={services}
|
||
|
|
id="search-results"
|
||
|
|
currentPage={filters.page}
|
||
|
|
total={totalServices}
|
||
|
|
pageSize={PAGE_SIZE}
|
||
|
|
sortSeed={filters['sort-seed']}
|
||
|
|
filters={filters}
|
||
|
|
hadToIncludeCommunityContributed={hadToIncludeCommunityContributed}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{
|
||
|
|
totalServices > PAGE_SIZE && (
|
||
|
|
<Pagination
|
||
|
|
currentPage={filters.page}
|
||
|
|
totalPages={Math.ceil(totalServices / PAGE_SIZE)}
|
||
|
|
sortSeed={filters['sort-seed']}
|
||
|
|
class="js:hidden mt-8"
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</BaseLayout>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
////////////////////////////////////////////////////////////
|
||
|
|
// Optional script for removing sort-seed from URL. //
|
||
|
|
// This helps keep URLs cleaner when sharing. //
|
||
|
|
////////////////////////////////////////////////////////////
|
||
|
|
|
||
|
|
import { addOnLoadEventListener } from '../lib/onload'
|
||
|
|
|
||
|
|
addOnLoadEventListener(() => {
|
||
|
|
const url = new URL(window.location.href)
|
||
|
|
if (url.searchParams.has('sort-seed')) {
|
||
|
|
url.searchParams.delete('sort-seed')
|
||
|
|
window.history.replaceState({}, '', url)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|