import type { AnyProfileView, AppBskyActorDefs } from '@atcute/bluesky';
import { useModerationOpts } from '#/state/moderation/moderation-opts';
import { useProfileQuery } from '#/state/queries/profile';
import { useSession } from '#/state/session';
import { dateLong } from '#/locale/intl/datetime';
import * as Dialog from '#/components/Dialog';
import { Stack } from '#/components/Stack';
import { Text } from '#/components/Text';
import { useSimpleVerificationState } from '#/components/verification';
import * as css from '#/components/verification/VerificationsDialog.css';
import { Admonition } from '#/components/web/Admonition';
import { Button, ButtonText } from '#/components/web/Button';
import * as ProfileCard from '#/components/web/ProfileCard';
import { m } from '#/paraglide/messages';
export function VerificationsDialog({
handle,
profile,
}: {
handle: Dialog.DialogHandle;
profile: AnyProfileView;
}) {
return (
<Dialog.Root handle={handle}>
<Dialog.Popup size="narrow">
<DialogInner handle={handle} profile={profile} />
</Dialog.Popup>
</Dialog.Root>
);
}
function DialogInner({ handle, profile }: { handle: Dialog.DialogHandle; profile: AnyProfileView }) {
const { currentAccount } = useSession();
const { isVerified } = useSimpleVerificationState({ profile });
const isViewer = profile.did === currentAccount?.did;
const label = isViewer
? isVerified
? m['components.verification.verified.youStatus']()
: m['components.verification.verifications.yourTitle']()
: isVerified
? m['components.verification.verified.userStatus']({ name: profile.handle })
: m['components.verification.verifications.userTitle']({ name: profile.handle });
return (
<Stack gap="xl">
<Stack gap="lg">
<Stack gap="xs">
<Dialog.TitleRow>
<Dialog.Title>{label}</Dialog.Title>
<Dialog.Close />
</Dialog.TitleRow>
<Text color="textContrastMedium">
{isVerified
? m['components.verification.verified.description']()
: m['components.verification.verified.notVerified']()}
</Text>
</Stack>
{profile.verification ? (
<Stack gap="lg">
<Stack gap="md">
<Text color="textContrastMedium" size="sm" weight="semiBold">
{m['components.verification.verifications.verifiedBy']()}
</Text>
<Stack gap="lg">
{profile.verification.verifications.map((v) => (
<VerifierCard key={v.uri} outerHandle={handle} verification={v} />
))}
</Stack>
</Stack>
{profile.verification.verifications.some((v) => !v.isValid) && isViewer && (
<Admonition type="warning">
{m['components.verification.verifications.someInvalid']()}
</Admonition>
)}
</Stack>
) : null}
</Stack>
<Dialog.Actions direction="responsive">
<Button
color="primary"
label={m['common.a11y.closeDialog']()}
onClick={() => handle.close()}
size="small"
>
<ButtonText>{m['common.action.close']()}</ButtonText>
</Button>
</Dialog.Actions>
</Stack>
);
}
function VerifierCard({
outerHandle,
verification,
}: {
outerHandle: Dialog.DialogHandle;
verification: AppBskyActorDefs.VerificationView;
}) {
const moderationOpts = useModerationOpts();
const { data: profile, error } = useProfileQuery({ did: verification.issuer });
return (
<div style={{ opacity: verification.isValid ? 1 : 0.5 }}>
<ProfileCard.Outer>
<ProfileCard.Header>
{error ? (
<>
<ProfileCard.AvatarPlaceholder />
<div className={css.nameColumn}>
<Text numberOfLines={1} size="md" weight="semiBold">
{m['components.verification.trustedVerifier.unknown']()}
</Text>
<Text color="textContrastMedium" numberOfLines={1} size="md_sub">
{verification.issuer}
</Text>
</div>
</>
) : profile && moderationOpts ? (
<ProfileCard.Link
className={css.cardRow}
onPress={() => {
outerHandle.close();
}}
profile={profile}
>
<ProfileCard.Avatar disabledPreview moderationOpts={moderationOpts} profile={profile} />
<div className={css.nameColumn}>
<ProfileCard.Handle profile={profile} />
<Text color="textContrastMedium" numberOfLines={1} size="md_sub">
{dateLong.format(new Date(verification.createdAt))}
</Text>
</div>
</ProfileCard.Link>
) : (
<>
<ProfileCard.AvatarPlaceholder />
<ProfileCard.NameAndHandlePlaceholder />
</>
)}
</ProfileCard.Header>
</ProfileCard.Outer>
</div>
);
}