External/kycnotme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 2025-05-22-Uvv4

Browse Source
This commit is contained in:
pluja
2025-05-22 19:19:07 +00:00
parent a69c0aeed4
commit 2362d2cc73
9 changed files with 224 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Header.astro
View File

@@ -119,7 +119,7 @@ const splashText = showSplashText ? sample(splashTexts) : null
<Tooltip
as="a"
href="/admin"
class="text-red-500 transition-colors hover:text-red-400"
class="flex h-full items-center text-red-500 transition-colors hover:text-red-400"
transition:name="header-admin-link"
text="Admin Dashboard"
position="left"

6
web/src/components/InputText.astro
View File

@@ -10,7 +10,9 @@ import InputWrapper from './InputWrapper.astro'
import type { ComponentProps, HTMLAttributes } from 'astro/types'
type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
inputProps?: Omit<HTMLAttributes<'input'>, 'name'>
inputProps?: Omit<HTMLAttributes<'input'>, 'name'> & {
'transition:persist'?: boolean
}
inputIcon?: string
inputIconClass?: string
}
@@ -26,7 +28,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
inputIcon ? (
<div class="relative">
<input
transition:persist
transition:persist={inputProps?.['transition:persist'] === false ? undefined : true}
{...omit(inputProps, ['class', 'id', 'name'])}
id={inputId}
class={cn(

27
web/src/components/InputWrapper.astro
View File

@@ -18,6 +18,7 @@ type Props = HTMLAttributes<'div'> & {
error?: string[] | string
icon?: string
inputId?: string
hideLabel?: boolean
}
const {
@@ -30,6 +31,7 @@ const {
icon,
class: className,
inputId,
hideLabel,
...htmlProps
} = Astro.props
@@ -37,17 +39,20 @@ const hasError = !!error && error.length > 0
---
<fieldset class={cn('space-y-1', className)} {...htmlProps}>
<div class={cn('contents', !!descriptionLabel && 'flex flex-wrap items-center gap-x-4')}>
<legend class={cn('font-title block text-sm font-medium', hasError && 'text-red-500')}>
{icon && <Icon name={icon} class="inline-block size-4 align-[-0.2em]" />}
<label for={inputId}>{label}</label>{required && '*'}
</legend>
{
!!descriptionLabel && (
<span class="text-day-400 flex-1 basis-24 text-xs text-pretty">{descriptionLabel}</span>
)
}
</div>
{
!hideLabel && (
<div class={cn('contents', !!descriptionLabel && 'flex flex-wrap items-center gap-x-4')}>
<legend class={cn('font-title block text-sm font-medium', hasError && 'text-red-500')}>
{icon && <Icon name={icon} class="inline-block size-4 align-[-0.2em]" />}
<label for={inputId}>{label}</label>
{required && '*'}
</legend>
{!!descriptionLabel && (
<span class="text-day-400 flex-1 basis-24 text-xs text-pretty">{descriptionLabel}</span>
)}
</div>
)
}
<slot />

4
web/src/components/PillsRadioGroup.astro
View File

@@ -9,10 +9,11 @@ type Props = HTMLAttributes<'div'> & {
value: HTMLAttributes<'input'>['value']
label: string
}[]
inputProps?: Omit<HTMLAttributes<'input'>, 'checked' | 'class' | 'name' | 'type' | 'value'>
selectedValue?: string | null
}
const { name, options, selectedValue, class: className, ...rest } = Astro.props
const { name, options, selectedValue, inputProps, class: className, ...rest } = Astro.props
---
<div
@@ -31,6 +32,7 @@ const { name, options, selectedValue, class: className, ...rest } = Astro.props
value={option.value}
checked={selectedValue === option.value}
class="peer sr-only"
{...inputProps}
/>
<span class="peer-checked:bg-night-400 inline-block cursor-pointer px-1.5 py-0.5 text-white peer-checked:text-green-500">
{option.label}

35
web/src/components/ServicesFilters.astro
View File

@@ -34,7 +34,8 @@ const {
<form
method="GET"
hx-get={Astro.url.pathname}
hx-trigger={`input delay:500ms from:input[type='text'], keyup[key=='Enter'], change from:input:not([data-show-more-input], #${showFiltersId}), change from:select`}
hx-trigger={// NOTE: I need to do the [data-trigger-on-change] hack, because HTMX doesnt suport the :not() selector, and I need to exclude the Show more buttons, and not trigger for inputs outside the form
"input delay:500ms from:([data-services-filters-form] input[type='text']), keyup[key=='Enter'], change from:([data-services-filters-form] [data-trigger-on-change])"}
hx-target={`#${searchResultsId}`}
hx-select={`#${searchResultsId}`}
hx-push-url="true"
@@ -44,7 +45,11 @@ const {
.filter((verification) => verification.default)
.map((verification) => verification.slug)}
{...formProps}
class={cn('', className)}
class={cn(
// Check the scam filter when there is a text quey and the user has checked verified and approved
'has-[input[name=q]:not(:placeholder-shown)]:has-[&_input[name=verification][value=verified]:checked]:has-[&_input[name=verification][value=approved]:checked]:[&_input[name=verification][value=scam]]:checkbox-force-checked',
className
)}
>
<div class="mb-4 flex items-center justify-between">
<h2 class="font-title text-xl text-green-500">FILTERS</h2>
@@ -64,6 +69,7 @@ const {
name="sort"
id="sort"
class="border-night-600 bg-night-900 w-full rounded-md border p-2 text-white focus:border-green-500 focus:outline-hidden"
data-trigger-on-change
>
{
options.sort.map((option) => (
@@ -108,6 +114,7 @@ const {
name="categories"
value={category.slug}
checked={category.checked}
data-trigger-on-change
/>
<span class="peer-checked:font-bold">
{category.name}
@@ -121,13 +128,7 @@ const {
{
options.categories.filter((category) => category.showAlways).length < options.categories.length && (
<>
<input
type="checkbox"
id="show-more-categories"
class="peer sr-only"
hx-preserve
data-show-more-input
/>
<input type="checkbox" id="show-more-categories" class="peer sr-only" hx-preserve />
<label
for="show-more-categories"
class="peer-focus-visible:ring-offset-night-700 mt-2 block cursor-pointer rounded-sm text-sm text-green-500 peer-checked:hidden peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
@@ -158,6 +159,7 @@ const {
name="verification"
value={verification.slug}
checked={filters.verification.includes(verification.value)}
data-trigger-on-change
/>
<Icon name={verification.icon} class={cn('size-4', verification.classNames.icon)} />
<span class="peer-checked:font-bold">{verification.labelShort}</span>
@@ -176,6 +178,9 @@ const {
options={options.modeOptions}
selectedValue={filters['currency-mode']}
class="-my-2"
inputProps={{
'data-trigger-on-change': true,
}}
/>
</div>
<div>
@@ -188,6 +193,7 @@ const {
name="currencies"
value={currency.slug}
checked={filters.currencies?.some((id) => id === currency.id)}
data-trigger-on-change
/>
<Icon name={currency.icon} class="size-4" />
<span class="peer-checked:font-bold">{currency.name}</span>
@@ -210,6 +216,7 @@ const {
name="networks"
value={network.slug}
checked={filters.networks?.some((slug) => slug === network.slug)}
data-trigger-on-change
/>
<Icon name={network.icon} class="size-4" />
<span class="peer-checked:font-bold">{network.name}</span>
@@ -233,6 +240,7 @@ const {
id="max-kyc"
value={filters['max-kyc'] ?? 4}
class="w-full accent-green-500"
data-trigger-on-change
/>
</div>
<div class="text-day-400 mt-1 flex justify-between px-1 text-xs">
@@ -261,6 +269,7 @@ const {
id="user-rating"
value={filters['user-rating']}
class="w-full accent-green-500"
data-trigger-on-change
/>
</div>
<div class="text-day-400 mt-1 flex justify-between px-2 text-xs">
@@ -289,6 +298,9 @@ const {
options={options.modeOptions}
selectedValue={filters['attribute-mode']}
class="-my-2"
inputProps={{
'data-trigger-on-change': true,
}}
/>
</div>
{
@@ -318,6 +330,7 @@ const {
value=""
checked={!attribute.value}
aria-label="Ignore"
data-trigger-on-change
/>
<input
type="radio"
@@ -327,6 +340,7 @@ const {
class="peer/yes sr-only"
checked={attribute.value === 'yes'}
aria-label="Include"
data-trigger-on-change
/>
<input
type="radio"
@@ -336,6 +350,7 @@ const {
class="peer/no sr-only"
checked={attribute.value === 'no'}
aria-label="Exclude"
data-trigger-on-change
/>
<div class="pointer-events-none absolute inset-y-0 -left-[2px] hidden w-[calc(var(--spacing)*4.5*2+1px)] rounded-md border-2 border-blue-500 peer-focus-visible/empty:block peer-focus-visible/no:block peer-focus-visible/yes:block" />
@@ -420,7 +435,6 @@ const {
id={`show-more-attributes-${category}`}
class="peer sr-only"
hx-preserve
data-show-more-input
/>
<label
for={`show-more-attributes-${category}`}
@@ -455,6 +469,7 @@ const {
id="min-score"
value={filters['min-score']}
class="w-full accent-green-500"
data-trigger-on-change
/>
</div>
<div class="-mx-1.5 mt-2 flex justify-between px-1">

20
web/src/components/ServicesSearchResults.astro
View File

@@ -19,7 +19,7 @@ type Props = HTMLAttributes<'div'> & {
pageSize: number
sortSeed?: string
filters: ServicesFiltersObject
hadToIncludeCommunityContributed: boolean
includeScams: boolean
}
const {
@@ -31,14 +31,15 @@ const {
sortSeed,
class: className,
filters,
hadToIncludeCommunityContributed,
includeScams,
...divProps
} = Astro.props
const hasScams = filters.verification.includes('VERIFICATION_FAILED')
const hasCommunityContributed =
const hasScams =
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
filters.verification.includes('COMMUNITY_CONTRIBUTED') || hadToIncludeCommunityContributed
filters.verification.includes('VERIFICATION_FAILED') || includeScams
const hasCommunityContributed = filters.verification.includes('COMMUNITY_CONTRIBUTED')
const totalPages = Math.ceil(total / pageSize) || 1
---
@@ -66,7 +67,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
<Icon name="ri:alert-fill" class="-mr-1 inline-block size-4 text-red-500" />
<Icon name="ri:question-line" class="mr-2 inline-block size-4 text-yellow-500" />
Showing SCAM and unverified community-contributed services.
{hadToIncludeCommunityContributed && 'Because there were no other results.'}
{includeScams && 'Because there is a text query.'}
</div>
)
}
@@ -75,7 +76,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
hasScams && !hasCommunityContributed && (
<div class="font-title mb-6 rounded-lg border border-red-500/30 bg-red-950 p-4 text-sm text-red-500">
<Icon name="ri:alert-fill" class="mr-2 inline-block size-4 text-red-500" />
Showing SCAM services!
{includeScams ? 'Showing SCAM services because there is a text query.' : 'Showing SCAM services!'}
</div>
)
}
@@ -84,10 +85,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
!hasScams && hasCommunityContributed && (
<div class="font-title mb-6 rounded-lg border border-yellow-500/30 bg-yellow-950 p-4 text-sm text-yellow-500">
<Icon name="ri:question-line" class="mr-2 inline-block size-4" />
{hadToIncludeCommunityContributed
? 'Showing unverified community-contributed services, because there were no other results. Some might be scams.'
: 'Showing unverified community-contributed services, some might be scams.'}
Showing unverified community-contributed services, some might be scams.
</div>
)
}