36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
|
||
|
|
import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
|
||
|
|
|
||
|
|
type MemberVerificationBadgeProps = {
|
||
|
|
userId: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
|
||
|
|
const vs = useUserVerifiedStatus(userId);
|
||
|
|
if (vs === 'unknown') return null;
|
||
|
|
const color =
|
||
|
|
vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
|
||
|
|
const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
|
||
|
|
return (
|
||
|
|
<TooltipProvider
|
||
|
|
position="Top"
|
||
|
|
tooltip={
|
||
|
|
<Tooltip>
|
||
|
|
<Text size="T200">{label}</Text>
|
||
|
|
</Tooltip>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{(ref) => (
|
||
|
|
<span
|
||
|
|
ref={ref}
|
||
|
|
title={label}
|
||
|
|
style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
|
||
|
|
>
|
||
|
|
<Icon size="100" src={Icons.ShieldUser} style={{ color }} />
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</TooltipProvider>
|
||
|
|
);
|
||
|
|
}
|