@naculus/connect-native 0.8.0 → 0.9.0

package/dist/ui/index.js

@@ -0,0 +1,954 @@
+// src/ui/AuthorizationConsentNative.tsx
+import {
+  describeAuthorization
+} from "@naculus/connect-appkit-core";
+import { Image, ScrollView, StyleSheet as StyleSheet2, Text as Text2, View as View2 } from "react-native";
+
+// src/ui/parts.tsx
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function toneColors(theme, tone) {
+  if (tone === "success")
+    return {
+      backgroundColor: theme.successBackground,
+      borderColor: theme.successBorder,
+      color: theme.successForeground
+    };
+  if (tone === "danger")
+    return {
+      backgroundColor: theme.dangerBackground,
+      borderColor: theme.dangerBorder,
+      color: theme.dangerForeground
+    };
+  if (tone === "warning")
+    return {
+      backgroundColor: theme.warningBackground,
+      borderColor: theme.warningBorder,
+      color: theme.warningForeground
+    };
+  return {
+    backgroundColor: theme.muted,
+    borderColor: theme.border,
+    color: theme.foreground
+  };
+}
+function Glyph({
+  children,
+  color
+}) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessible: false,
+      importantForAccessibility: "no",
+      accessibilityElementsHidden: true,
+      style: [styles.glyph, { color }],
+      children
+    }
+  );
+}
+function ActionButton({
+  label,
+  onPress,
+  theme,
+  variant = "primary",
+  disabled = false,
+  busy = false
+}) {
+  const primary = variant === "primary";
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled, busy },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [
+        styles.button,
+        {
+          backgroundColor: primary ? theme.primary : theme.background,
+          borderColor: primary ? theme.primary : theme.border,
+          opacity: disabled ? 0.55 : pressed ? 0.8 : 1
+        }
+      ],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.buttonLabel,
+            { color: primary ? theme.primaryForeground : theme.foreground }
+          ],
+          children: label
+        }
+      )
+    }
+  );
+}
+function CopyableValue({
+  value,
+  display,
+  onCopy,
+  theme,
+  color = theme.foreground
+}) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsxs(View, { style: styles.copyRow, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityLabel: value,
+        numberOfLines: 1,
+        ellipsizeMode: "middle",
+        style: [styles.mono, { color }],
+        children: display ?? value
+      }
+    ),
+    onCopy && /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: copied ? `Copied ${value}` : `Copy ${value}`,
+        hitSlop: 6,
+        onPress: () => {
+          onCopy(value);
+          setCopied(true);
+        },
+        style: ({ pressed }) => [
+          styles.iconButton,
+          { borderColor: theme.border, opacity: pressed ? 0.7 : 1 }
+        ],
+        children: /* @__PURE__ */ jsx(Glyph, { color: theme.foreground, children: copied ? "\u2713" : "\u29C9" })
+      }
+    )
+  ] });
+}
+function Callout({
+  tone,
+  glyph,
+  theme,
+  role,
+  children
+}) {
+  const colors = toneColors(theme, tone);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: role,
+      style: [
+        styles.callout,
+        {
+          backgroundColor: colors.backgroundColor,
+          borderColor: colors.borderColor
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Glyph, { color: colors.color, children: glyph }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.calloutText, { color: colors.color }], children })
+      ]
+    }
+  );
+}
+var styles = StyleSheet.create({
+  glyph: { fontSize: 16, lineHeight: 20, fontWeight: "700" },
+  button: {
+    flex: 1,
+    minHeight: 48,
+    minWidth: 44,
+    borderRadius: 10,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 16
+  },
+  buttonLabel: { fontSize: 16, fontWeight: "600" },
+  copyRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  mono: { flexShrink: 1, fontFamily: "monospace", fontSize: 13 },
+  iconButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  callout: {
+    flexDirection: "row",
+    gap: 8,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 12
+  },
+  calloutText: { flex: 1, fontSize: 14, lineHeight: 20 },
+  label: { fontSize: 12, fontWeight: "500" },
+  heading: { fontSize: 18, fontWeight: "600" },
+  chip: {
+    borderWidth: 1,
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 4
+  },
+  chipText: { fontSize: 12 }
+});
+
+// src/ui/theme.tsx
+import { createContext, useContext } from "react";
+import { useColorScheme } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var lightPaymentTheme = {
+  scheme: "light",
+  background: "#ffffff",
+  // --background 0 0% 100%
+  foreground: "#020817",
+  // --foreground 222.2 84% 4.9%
+  card: "#ffffff",
+  // --card
+  border: "#e2e8f0",
+  // --border 214.3 31.8% 91.4%
+  muted: "#f1f5f9",
+  // --muted 210 40% 96.1%
+  mutedForeground: "#475569",
+  // --muted-foreground hue, one step darker
+  primary: "#0f172a",
+  // --primary 222.2 47.4% 11.2%
+  primaryForeground: "#f8fafc",
+  // --primary-foreground 210 40% 98%
+  successBackground: "#ecfdf5",
+  successBorder: "#047857",
+  successForeground: "#064e3b",
+  dangerBackground: "#fef2f2",
+  dangerBorder: "#ef4444",
+  // --destructive 0 84.2% 60.2%
+  dangerForeground: "#991b1b",
+  warningBackground: "#fffbeb",
+  warningBorder: "#b45309",
+  warningForeground: "#451a03"
+};
+var darkPaymentTheme = {
+  scheme: "dark",
+  background: "#020817",
+  // .dark --background
+  foreground: "#f8fafc",
+  // .dark --foreground
+  card: "#020817",
+  // .dark --card
+  border: "#1e293b",
+  // .dark --border 217.2 32.6% 17.5%
+  muted: "#1e293b",
+  // .dark --muted
+  mutedForeground: "#94a3b8",
+  // .dark --muted-foreground 215 20.2% 65.1%
+  primary: "#f8fafc",
+  // .dark --primary
+  primaryForeground: "#0f172a",
+  // .dark --primary-foreground
+  successBackground: "#022c22",
+  successBorder: "#10b981",
+  successForeground: "#d1fae5",
+  dangerBackground: "#450a0a",
+  dangerBorder: "#f87171",
+  dangerForeground: "#fecaca",
+  warningBackground: "#451a03",
+  warningBorder: "#f59e0b",
+  warningForeground: "#fef3c7"
+};
+var ThemeContext = createContext(void 0);
+function NativePaymentThemeProvider({
+  theme,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: theme, children });
+}
+function useNativePaymentTheme(override) {
+  const provided = useContext(ThemeContext);
+  const scheme = useColorScheme();
+  return override ?? provided ?? (scheme === "dark" ? darkPaymentTheme : lightPaymentTheme);
+}
+
+// src/ui/AuthorizationConsentNative.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AuthorizationConsentNative({
+  authorization,
+  assets = {},
+  locale,
+  now,
+  requester,
+  preview,
+  onApprove,
+  onDecline,
+  busy = false,
+  onCopy,
+  theme: themeProp
+}) {
+  const theme = useNativePaymentTheme(themeProp);
+  const description = "expiry" in authorization ? authorization : describeAuthorization(authorization, { assets, locale, now });
+  const muted = { color: theme.mutedForeground };
+  return /* @__PURE__ */ jsxs2(View2, { style: [styles2.root, { backgroundColor: theme.background }], children: [
+    /* @__PURE__ */ jsxs2(ScrollView, { contentContainerStyle: styles2.content, children: [
+      /* @__PURE__ */ jsxs2(View2, { style: styles2.requester, children: [
+        requester.icon ? /* @__PURE__ */ jsx3(
+          Image,
+          {
+            accessibilityIgnoresInvertColors: true,
+            source: { uri: requester.icon },
+            style: styles2.avatar
+          }
+        ) : /* @__PURE__ */ jsx3(
+          View2,
+          {
+            importantForAccessibility: "no",
+            style: [styles2.avatar, { backgroundColor: theme.muted }],
+            children: /* @__PURE__ */ jsx3(Text2, { style: [styles2.initial, { color: theme.foreground }], children: requester.name.slice(0, 1).toUpperCase() })
+          }
+        ),
+        /* @__PURE__ */ jsxs2(View2, { style: styles2.flexShrink, children: [
+          /* @__PURE__ */ jsxs2(
+            Text2,
+            {
+              accessibilityRole: "header",
+              style: [styles.heading, { color: theme.foreground }],
+              children: [
+                "Allow ",
+                requester.name,
+                " to pay?"
+              ]
+            }
+          ),
+          requester.origin && /* @__PURE__ */ jsx3(Text2, { style: [styles2.small, muted], children: requester.origin })
+        ] })
+      ] }),
+      description.warnings.map((warning) => /* @__PURE__ */ jsx3(
+        Callout,
+        {
+          tone: "warning",
+          glyph: "\u26A0",
+          role: "alert",
+          theme,
+          children: /* @__PURE__ */ jsx3(Text2, { style: styles2.strong, children: warning })
+        },
+        warning
+      )),
+      preview && /* @__PURE__ */ jsxs2(
+        Callout,
+        {
+          tone: preview.allowed ? "success" : "danger",
+          glyph: preview.allowed ? "\u2713" : "\u2715",
+          theme,
+          children: [
+            /* @__PURE__ */ jsxs2(Text2, { style: styles2.strong, children: [
+              preview.allowed ? "Allowed" : "Blocked",
+              "."
+            ] }),
+            " ",
+            preview.sentence
+          ]
+        }
+      ),
+      description.grants.map((grant) => /* @__PURE__ */ jsxs2(
+        View2,
+        {
+          style: [
+            styles2.card,
+            { backgroundColor: theme.card, borderColor: theme.border }
+          ],
+          children: [
+            /* @__PURE__ */ jsx3(Text2, { style: [styles2.assetLabel, { color: theme.foreground }], children: grant.assetLabel }),
+            /* @__PURE__ */ jsxs2(View2, { style: styles2.limits, children: [
+              /* @__PURE__ */ jsxs2(View2, { style: styles2.limit, children: [
+                /* @__PURE__ */ jsx3(Text2, { style: [styles.label, muted], children: "Per payment" }),
+                /* @__PURE__ */ jsx3(Text2, { style: [styles2.amount, { color: theme.foreground }], children: grant.perPayment.formatted })
+              ] }),
+              /* @__PURE__ */ jsxs2(View2, { style: styles2.limit, children: [
+                /* @__PURE__ */ jsx3(Text2, { style: [styles.label, muted], children: "Total limit" }),
+                /* @__PURE__ */ jsx3(Text2, { style: [styles2.amount, { color: theme.foreground }], children: grant.total.formatted })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx3(Text2, { style: [styles2.term, { color: theme.foreground }], children: "Recipients" }),
+            grant.recipients.length ? grant.recipients.map((recipient) => /* @__PURE__ */ jsx3(
+              CopyableValue,
+              {
+                value: recipient.full,
+                display: recipient.shortened,
+                onCopy,
+                theme
+              },
+              recipient.full
+            )) : /* @__PURE__ */ jsx3(Text2, { style: [styles2.strong, { color: theme.dangerForeground }], children: "No recipient restriction is displayed" }),
+            /* @__PURE__ */ jsx3(Text2, { style: [styles2.term, { color: theme.foreground }], children: "Payment count" }),
+            /* @__PURE__ */ jsx3(Text2, { style: [styles2.small, muted], children: grant.count === null ? "No count limit" : `Up to ${grant.count}` }),
+            /* @__PURE__ */ jsx3(Text2, { style: [styles2.term, { color: theme.foreground }], children: "Payment methods" }),
+            /* @__PURE__ */ jsx3(View2, { style: styles2.chips, children: grant.rails.map((rail) => /* @__PURE__ */ jsx3(
+              View2,
+              {
+                style: [
+                  styles.chip,
+                  { backgroundColor: theme.muted, borderColor: theme.border }
+                ],
+                children: /* @__PURE__ */ jsx3(Text2, { style: [styles.chipText, { color: theme.foreground }], children: rail })
+              },
+              rail
+            )) })
+          ]
+        },
+        `${grant.asset}:${grant.recipients.map((r) => r.full).join(",")}:${grant.perPayment.formatted}:${grant.total.formatted}`
+      )),
+      /* @__PURE__ */ jsxs2(View2, { style: [styles2.expiry, { backgroundColor: theme.muted }], children: [
+        /* @__PURE__ */ jsxs2(Text2, { style: [styles2.strong, { color: theme.foreground }], children: [
+          "Expires ",
+          description.expiry.relative
+        ] }),
+        /* @__PURE__ */ jsx3(Text2, { style: [styles2.small, muted], children: description.expiry.absolute })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      View2,
+      {
+        testID: "payment-actions",
+        style: [
+          styles2.footer,
+          { borderTopColor: theme.border, backgroundColor: theme.background }
+        ],
+        children: [
+          /* @__PURE__ */ jsx3(
+            ActionButton,
+            {
+              label: "Decline",
+              variant: "secondary",
+              onPress: onDecline,
+              theme
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            ActionButton,
+            {
+              label: busy ? "Approving\u2026" : "Approve",
+              onPress: onApprove,
+              disabled: busy,
+              busy,
+              theme
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var styles2 = StyleSheet2.create({
+  root: { flex: 1 },
+  content: { padding: 16, gap: 12 },
+  requester: { flexDirection: "row", alignItems: "center", gap: 12 },
+  avatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  initial: { fontSize: 18, fontWeight: "600" },
+  flexShrink: { flexShrink: 1 },
+  small: { fontSize: 12 },
+  strong: { fontWeight: "700" },
+  card: { borderWidth: 1, borderRadius: 12, padding: 16, gap: 6 },
+  assetLabel: { fontSize: 14, fontWeight: "600" },
+  limits: { flexDirection: "row", gap: 12, marginVertical: 6 },
+  limit: { flex: 1 },
+  amount: {
+    fontSize: 22,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
+  },
+  term: { fontSize: 14, fontWeight: "500", marginTop: 8 },
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
+  expiry: { borderRadius: 10, padding: 12, gap: 2 },
+  footer: {
+    flexDirection: "row",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderTopWidth: 1
+  }
+});
+
+// src/ui/AuthorizationListNative.tsx
+import {
+  describeAuthorization as describeAuthorization2,
+  formatAuthorizationAmount
+} from "@naculus/connect-appkit-core";
+import { useState as useState2 } from "react";
+import { FlatList, StyleSheet as StyleSheet3, Text as Text3, View as View3 } from "react-native";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ENFORCER_LABELS = {
+  "evm-session": "EVM session key",
+  "solana-session": "Solana session key",
+  "mpp-voucher": "MPP channel key"
+};
+var STATUS_GLYPHS = {
+  active: "\u25CF",
+  pending: "\u25D0",
+  revoked: "\u2715",
+  expired: "\u25CB"
+};
+function StatusBadge({
+  status,
+  theme
+}) {
+  const colors = status === "active" ? {
+    backgroundColor: theme.primary,
+    borderColor: theme.primary,
+    color: theme.primaryForeground
+  } : status === "pending" ? {
+    backgroundColor: theme.background,
+    borderColor: theme.foreground,
+    color: theme.foreground
+  } : status === "revoked" ? toneColors(theme, "danger") : {
+    backgroundColor: theme.muted,
+    borderColor: theme.border,
+    color: theme.mutedForeground
+  };
+  return /* @__PURE__ */ jsxs3(
+    View3,
+    {
+      accessibilityLabel: `Status: ${status}`,
+      style: [
+        styles.chip,
+        styles3.badge,
+        {
+          backgroundColor: colors.backgroundColor,
+          borderColor: colors.borderColor
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx4(Glyph, { color: colors.color, children: STATUS_GLYPHS[status] }),
+        /* @__PURE__ */ jsx4(Text3, { style: [styles3.badgeText, { color: colors.color }], children: status })
+      ]
+    }
+  );
+}
+function AuthorizationListNative({
+  entries: input,
+  assets = {},
+  onRevoke,
+  revokingId,
+  locale,
+  onCopy,
+  theme: themeProp
+}) {
+  const theme = useNativePaymentTheme(themeProp);
+  const entries = Array.isArray(input) ? input : input.entries;
+  const [confirming, setConfirming] = useState2(null);
+  const [onChain, setOnChain] = useState2(/* @__PURE__ */ new Set());
+  const muted = { color: theme.mutedForeground };
+  const revoke = (entry) => void Promise.resolve(onRevoke(entry)).then((result) => {
+    setConfirming(null);
+    if (result.onChainRevocationRequired)
+      setOnChain((current) => new Set(current).add(entry.keyId));
+  });
+  const renderItem = ({ item: entry }) => {
+    const view = describeAuthorization2(entry, { assets, locale });
+    const busy = revokingId === entry.keyId;
+    const live = entry.status === "active" || entry.status === "pending";
+    return /* @__PURE__ */ jsxs3(
+      View3,
+      {
+        style: [
+          styles3.card,
+          { backgroundColor: theme.card, borderColor: theme.border }
+        ],
+        children: [
+          /* @__PURE__ */ jsxs3(View3, { style: styles3.cardHeader, children: [
+            /* @__PURE__ */ jsxs3(View3, { style: styles3.flexShrink, children: [
+              /* @__PURE__ */ jsx4(Text3, { style: [styles3.title, { color: theme.foreground }], children: view.label ?? view.grants.map((g) => g.assetLabel).join(", ") }),
+              /* @__PURE__ */ jsx4(Text3, { style: [styles3.small, muted], children: ENFORCER_LABELS[entry.enforcer] ?? entry.enforcer.replaceAll("-", " ") })
+            ] }),
+            /* @__PURE__ */ jsx4(StatusBadge, { status: entry.status, theme })
+          ] }),
+          view.grants.map((grant) => {
+            const spent = entry.spent?.[grant.asset];
+            const total = entry.grants.find(
+              (g) => g.asset === grant.asset
+            )?.maxTotal;
+            const percent = spent !== void 0 && total && total > 0n ? Math.min(Number(spent * 100n / total), 100) : 0;
+            return /* @__PURE__ */ jsxs3(
+              View3,
+              {
+                style: [styles3.grant, { backgroundColor: theme.muted }],
+                children: [
+                  view.label && /* @__PURE__ */ jsx4(Text3, { style: [styles3.strong, { color: theme.foreground }], children: grant.assetLabel }),
+                  grant.recipients.map((recipient) => /* @__PURE__ */ jsx4(
+                    CopyableValue,
+                    {
+                      value: recipient.full,
+                      display: recipient.shortened,
+                      onCopy,
+                      theme
+                    },
+                    recipient.full
+                  )),
+                  spent !== void 0 && /* @__PURE__ */ jsxs3(View3, { children: [
+                    /* @__PURE__ */ jsxs3(View3, { style: styles3.spentRow, children: [
+                      /* @__PURE__ */ jsxs3(Text3, { style: [styles3.small, { color: theme.foreground }], children: [
+                        "Spent",
+                        " ",
+                        formatAuthorizationAmount(spent, assets[grant.asset]).formatted
+                      ] }),
+                      /* @__PURE__ */ jsxs3(Text3, { style: [styles3.small, { color: theme.foreground }], children: [
+                        "Total ",
+                        grant.total.formatted
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx4(
+                      View3,
+                      {
+                        accessibilityRole: "progressbar",
+                        accessibilityLabel: `${grant.assetLabel} spent`,
+                        accessibilityValue: { min: 0, max: 100, now: percent },
+                        style: [
+                          styles3.track,
+                          { backgroundColor: theme.background }
+                        ],
+                        children: /* @__PURE__ */ jsx4(
+                          View3,
+                          {
+                            style: [
+                              styles3.fill,
+                              {
+                                width: `${percent}%`,
+                                backgroundColor: theme.primary
+                              }
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              },
+              grant.asset
+            );
+          }),
+          /* @__PURE__ */ jsxs3(Text3, { style: [styles3.small, muted], children: [
+            entry.status === "expired" ? "Expired" : entry.status === "revoked" ? "Revoked" : `Expires ${view.expiry.relative}`,
+            " ",
+            "\xB7 ",
+            view.expiry.absolute
+          ] }),
+          view.warnings.map((warning) => /* @__PURE__ */ jsx4(
+            Callout,
+            {
+              tone: "warning",
+              glyph: "\u26A0",
+              role: "alert",
+              theme,
+              children: warning
+            },
+            warning
+          )),
+          onChain.has(entry.keyId) && /* @__PURE__ */ jsx4(Callout, { tone: "warning", glyph: "\u26D3", theme, children: "Local access is revoked. Complete the on-chain revocation to stop this authorization on chain." }),
+          live && /* @__PURE__ */ jsx4(View3, { style: [styles3.actions, { borderTopColor: theme.border }], children: confirming === entry.keyId ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx4(
+              ActionButton,
+              {
+                label: "Cancel",
+                variant: "secondary",
+                onPress: () => setConfirming(null),
+                theme
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              ActionButton,
+              {
+                label: busy ? "Revoking\u2026" : "Confirm revoke",
+                disabled: busy,
+                busy,
+                onPress: () => revoke(entry),
+                theme
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx4(
+            ActionButton,
+            {
+              label: "Revoke",
+              variant: "secondary",
+              onPress: () => setConfirming(entry.keyId),
+              theme
+            }
+          ) })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx4(
+    FlatList,
+    {
+      data: entries,
+      keyExtractor: (entry) => entry.keyId,
+      renderItem,
+      extraData: [confirming, onChain, revokingId, theme],
+      contentContainerStyle: styles3.list,
+      style: { backgroundColor: theme.background },
+      ListHeaderComponent: entries.length ? /* @__PURE__ */ jsx4(
+        Text3,
+        {
+          accessibilityRole: "header",
+          style: [styles.heading, { color: theme.foreground }],
+          children: "Payment authorizations"
+        }
+      ) : void 0,
+      ListEmptyComponent: /* @__PURE__ */ jsxs3(View3, { style: [styles3.empty, { borderColor: theme.border }], children: [
+        /* @__PURE__ */ jsx4(
+          Text3,
+          {
+            accessibilityRole: "header",
+            style: [styles3.title, { color: theme.foreground }],
+            children: "No payment authorizations"
+          }
+        ),
+        /* @__PURE__ */ jsx4(Text3, { style: [styles3.body, muted], children: "Approvals you create will appear here." })
+      ] })
+    }
+  );
+}
+var styles3 = StyleSheet3.create({
+  list: { padding: 16, gap: 12 },
+  card: { borderWidth: 1, borderRadius: 12, padding: 16, gap: 10 },
+  cardHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    gap: 8
+  },
+  flexShrink: { flexShrink: 1 },
+  title: { fontSize: 16, fontWeight: "600" },
+  small: { fontSize: 12 },
+  body: { fontSize: 14, textAlign: "center" },
+  strong: { fontSize: 14, fontWeight: "500" },
+  badge: { flexDirection: "row", alignItems: "center", gap: 4 },
+  badgeText: { fontSize: 12, fontWeight: "600", textTransform: "capitalize" },
+  grant: { borderRadius: 10, padding: 12, gap: 6 },
+  spentRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: 8
+  },
+  track: { height: 8, borderRadius: 4, overflow: "hidden", marginTop: 4 },
+  fill: { height: "100%" },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 8,
+    borderTopWidth: 1,
+    paddingTop: 12
+  },
+  empty: {
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderRadius: 12,
+    padding: 32,
+    alignItems: "center",
+    gap: 4
+  }
+});
+
+// src/ui/PaymentReceiptNative.tsx
+import {
+  formatAuthorizationAmount as formatAuthorizationAmount2
+} from "@naculus/connect-appkit-core";
+import { Pressable as Pressable2, StyleSheet as StyleSheet4, Text as Text4, View as View4 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var VERIFICATION = {
+  unverified: {
+    title: "Unverified",
+    detail: "Reported by the server, not yet checked.",
+    glyph: "?",
+    tone: "neutral"
+  },
+  pending: {
+    title: "Checking",
+    detail: "Checking on chain.",
+    glyph: "\u2026",
+    tone: "neutral"
+  },
+  verified: {
+    title: "Verified",
+    detail: "Verified on chain.",
+    glyph: "\u2713",
+    tone: "success"
+  },
+  mismatch: {
+    title: "Mismatch",
+    detail: "The on-chain settlement does not match this payment.",
+    glyph: "!",
+    tone: "danger"
+  },
+  failed: {
+    title: "Verification failed",
+    detail: "The settlement could not be verified.",
+    glyph: "!",
+    tone: "danger"
+  },
+  unavailable: {
+    title: "Verification unavailable",
+    detail: "On-chain checking is unavailable. Retry later.",
+    glyph: "?",
+    tone: "neutral"
+  }
+};
+function PaymentReceiptNative({
+  record,
+  assets = {},
+  onOpenExplorer,
+  onCopy,
+  theme: themeProp
+}) {
+  const theme = useNativePaymentTheme(themeProp);
+  const status = record.verification.status;
+  const state = VERIFICATION[status];
+  const colors = toneColors(theme, state.tone);
+  const muted = { color: theme.mutedForeground };
+  const amount = record.amount === null ? "Amount not reported" : /^\d+$/.test(record.amount) ? formatAuthorizationAmount2(
+    BigInt(record.amount),
+    record.asset ? assets[record.asset] : void 0
+  ).formatted : `${record.amount} base units`;
+  return /* @__PURE__ */ jsxs4(
+    View4,
+    {
+      testID: `verification-${status}`,
+      style: [
+        styles4.card,
+        { backgroundColor: theme.card, borderColor: theme.border }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs4(View4, { style: styles4.header, children: [
+          /* @__PURE__ */ jsx5(Text4, { style: [styles4.eyebrow, muted], children: "PAYMENT RECEIPT" }),
+          /* @__PURE__ */ jsx5(
+            Text4,
+            {
+              accessibilityRole: "header",
+              style: [styles4.amount, { color: theme.foreground }],
+              children: amount
+            }
+          ),
+          /* @__PURE__ */ jsx5(Text4, { style: [styles4.small, muted], children: record.asset ? assets[record.asset]?.symbol ?? record.asset : "Asset not reported" })
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          View4,
+          {
+            testID: "verification-panel",
+            accessibilityLiveRegion: "polite",
+            accessible: true,
+            accessibilityLabel: `${state.title}. ${state.detail}${record.verification.reason ? ` Reason: ${record.verification.reason}` : ""}`,
+            style: [
+              styles4.panel,
+              {
+                backgroundColor: colors.backgroundColor,
+                borderColor: colors.borderColor
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx5(Glyph, { color: colors.color, children: state.glyph }),
+              /* @__PURE__ */ jsxs4(View4, { style: styles4.flexShrink, children: [
+                /* @__PURE__ */ jsx5(Text4, { style: [styles4.badge, { color: colors.color }], children: state.title }),
+                /* @__PURE__ */ jsx5(Text4, { style: [styles4.body, { color: colors.color }], children: state.detail }),
+                record.verification.reason && /* @__PURE__ */ jsxs4(
+                  Text4,
+                  {
+                    numberOfLines: 2,
+                    style: [styles4.body, styles4.strong, { color: colors.color }],
+                    children: [
+                      "Reason: ",
+                      record.verification.reason
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(View4, { style: styles4.field, children: [
+          /* @__PURE__ */ jsx5(Text4, { style: [styles4.small, muted], children: "Recipient" }),
+          record.payTo ? /* @__PURE__ */ jsx5(CopyableValue, { value: record.payTo, onCopy, theme }) : /* @__PURE__ */ jsx5(Text4, { style: [styles4.body, { color: theme.foreground }], children: "Not reported" })
+        ] }),
+        /* @__PURE__ */ jsxs4(View4, { style: styles4.row, children: [
+          /* @__PURE__ */ jsxs4(View4, { style: styles4.cell, children: [
+            /* @__PURE__ */ jsx5(Text4, { style: [styles4.small, muted], children: "Protocol" }),
+            /* @__PURE__ */ jsx5(Text4, { style: [styles4.body, { color: theme.foreground }], children: record.protocol === "mpp" ? "MPP" : record.protocol })
+          ] }),
+          /* @__PURE__ */ jsxs4(View4, { style: styles4.cell, children: [
+            /* @__PURE__ */ jsx5(Text4, { style: [styles4.small, muted], children: "Time" }),
+            /* @__PURE__ */ jsx5(Text4, { style: [styles4.body, { color: theme.foreground }], children: "Not recorded" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4(View4, { style: styles4.field, children: [
+          /* @__PURE__ */ jsx5(Text4, { style: [styles4.small, muted], children: "Settlement reference" }),
+          record.reference ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            /* @__PURE__ */ jsx5(
+              CopyableValue,
+              {
+                value: record.reference,
+                onCopy,
+                theme
+              }
+            ),
+            onOpenExplorer && /* @__PURE__ */ jsx5(
+              Pressable2,
+              {
+                accessibilityRole: "link",
+                accessibilityLabel: "View on explorer",
+                onPress: () => onOpenExplorer(record),
+                style: styles4.link,
+                children: /* @__PURE__ */ jsx5(Text4, { style: [styles4.linkText, { color: theme.foreground }], children: "View on explorer \u2197" })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx5(Text4, { style: [styles4.body, { color: theme.foreground }], children: "Not reported" })
+        ] })
+      ]
+    }
+  );
+}
+var styles4 = StyleSheet4.create({
+  card: { borderWidth: 1, borderRadius: 16, padding: 20, gap: 16 },
+  header: { alignItems: "center", gap: 4 },
+  eyebrow: { fontSize: 12, fontWeight: "500", letterSpacing: 0.6 },
+  amount: {
+    fontSize: 32,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"],
+    textAlign: "center"
+  },
+  small: { fontSize: 12 },
+  body: { fontSize: 14, lineHeight: 20 },
+  strong: { fontWeight: "600" },
+  // Fixed height: badge, explanation and a two-line reason fit, so the card
+  // does not jump as verification moves from pending to its final state.
+  panel: {
+    height: 128,
+    flexDirection: "row",
+    gap: 8,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 12,
+    overflow: "hidden"
+  },
+  flexShrink: { flexShrink: 1 },
+  badge: { fontSize: 13, fontWeight: "700", marginBottom: 2 },
+  field: { gap: 4 },
+  row: { flexDirection: "row", gap: 12 },
+  cell: { flex: 1, gap: 4 },
+  link: { minHeight: 44, minWidth: 44, justifyContent: "center" },
+  linkText: {
+    fontSize: 13,
+    fontWeight: "500",
+    textDecorationLine: "underline"
+  }
+});
+export {
+  AuthorizationConsentNative,
+  AuthorizationListNative,
+  NativePaymentThemeProvider,
+  PaymentReceiptNative,
+  darkPaymentTheme,
+  lightPaymentTheme,
+  useNativePaymentTheme
+};
+//# sourceMappingURL=index.js.map