1import { AppText as Text } from "../../components/ui/AppText";
2import { cn } from "../../lib/cn";
3import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
4
5export function ConnectionTraceId({
6 traceId,
7 tone = "muted",
8 activation = "press",
9}: {
10 readonly traceId: string;
11 readonly tone?: "muted" | "danger";
12 readonly activation?: "press" | "longPress";
13}) {
14 const copy = () => copyTextWithHaptic(traceId, { target: "connection-trace-id" });
15 return (
16 <>
17 {" Trace ID: "}
18 <Text
19 accessibilityHint={
20 activation === "longPress" ? "Long press to copy the trace ID" : "Copies the trace ID"
21 }
22 accessibilityLabel={`Copy trace ID ${traceId}`}
23 accessibilityRole="button"
24 accessibilityActions={[{ name: "activate", label: "Copy trace ID" }]}
25 onAccessibilityAction={(event) => {
26 event.stopPropagation();
27 if (event.nativeEvent.actionName === "activate") copy();
28 }}
29 className={cn(
30 "underline decoration-dotted",
31 tone === "danger" ? "text-danger-foreground" : "text-foreground-muted",
32 )}
33 onLongPress={
34 activation === "longPress"
35 ? (event) => {
36 event.stopPropagation();
37 copy();
38 }
39 : undefined
40 }
41 onPress={(event) => {
42 event.stopPropagation();
43 if (activation === "press") copy();
44 }}
45 >
46 {traceId}
47 </Text>
48 </>
49 );
50}