69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import { KeyRound } from 'lucide-react';
|
|
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { useNostrLogin } from '@/lib/nostrLogin';
|
|
import { isInteractiveSigner } from '@/lib/signerCapabilities';
|
|
import { cn } from '@/lib/utils';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
interface AmberApprovalHintProps {
|
|
/**
|
|
* How many separate signer approvals this action will require. When known and
|
|
* > 1 it's shown to set expectations (e.g. an encrypted group message signs
|
|
* once per recipient). Omit for a generic "may ask you to approve" note.
|
|
*/
|
|
approvals?: number;
|
|
/** Short label for the action, e.g. "send this message". */
|
|
action?: string;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* A tiny, honest heads-up shown ONLY to interactive-signer (Amber) users before
|
|
* an action that is inherently multi-approval.
|
|
*
|
|
* Some flows are cryptographically obliged to hit the signer several times — a
|
|
* NIP-17 DM seals + signs once per recipient (and once to self); an encrypted
|
|
* crew message signs an author proof then encrypts once per member. With a
|
|
* silent signer (extension / nsec / bunker) these are instant and invisible, so
|
|
* there's nothing to warn about. With Amber, each op is a foreground Approve
|
|
* screen, so without this the user sees Amber "pop up several times" for one
|
|
* Send and reasonably assumes something is broken.
|
|
*
|
|
* We DON'T try to reduce the count (that would weaken the encryption/authorship
|
|
* model) — we just tell the truth up front. Renders nothing for silent signers.
|
|
*/
|
|
export function AmberApprovalHint({ approvals, action, className }: AmberApprovalHintProps) {
|
|
const { user } = useCurrentUser();
|
|
const { logins } = useNostrLogin();
|
|
const { t } = useTranslation();
|
|
|
|
if (!isInteractiveSigner(user, logins)) return null;
|
|
|
|
const multi = typeof approvals === 'number' && approvals > 1;
|
|
const actionText = action ?? t('settingsUi.amberHint.defaultAction');
|
|
|
|
return (
|
|
<p
|
|
className={cn(
|
|
'flex items-start gap-1.5 text-[11px] leading-snug text-muted-foreground',
|
|
className,
|
|
)}
|
|
>
|
|
<KeyRound className="mt-0.5 h-3 w-3 shrink-0 text-amber-400" />
|
|
<span>
|
|
{multi ? (
|
|
<>
|
|
{t('settingsUi.amberHint.multiBefore')}{' '}
|
|
<strong className="font-semibold text-amber-300">
|
|
{t('settingsUi.amberHint.multiTimes', { approvals })}
|
|
</strong>{' '}
|
|
{t('settingsUi.amberHint.multiAfter', { action: actionText })}
|
|
</>
|
|
) : (
|
|
<>{t('settingsUi.amberHint.single', { action: actionText })}</>
|
|
)}
|
|
</span>
|
|
</p>
|
|
);
|
|
}
|