@cardano-slips/flow 0.2.0 → 0.3.0

package/src/card.css

@@ -0,0 +1,492 @@
+/*
+ * The action card, drawn from `2 · Action card` on the design sheet. Optional:
+ * a consumer who imports only `tokens.css` gets the markup and the class names
+ * and styles them however they like. Nothing here writes a colour — every value
+ * is a token, and `test/no-hard-coded-colours.test.ts` fails if that stops
+ * being true.
+ *
+ * The card is the publisher's surface (`13 · Chrome rules`): its content is
+ * their claim, so its look is theirs to own. The chrome that judges that claim
+ * — the effects panel and the mismatch block — is fixed and is not styled here.
+ *
+ * Every text rule states family, size, weight and line-height together through
+ * a `--type-*` role, so a host page's inherited stack cannot reach in.
+ */
+
+.slip-card {
+  box-sizing: border-box;
+  position: relative;
+
+  /* Widths are answered against the card's own box: it never assumes it owns the viewport. */
+  container-type: inline-size;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+
+  width: 100%;
+  max-width: 680px;
+  margin: 0;
+  padding: var(--space-20);
+
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+}
+
+.slip-card *,
+.slip-card *::before,
+.slip-card *::after {
+  box-sizing: border-box;
+}
+
+.slip-card__head {
+  display: flex;
+  gap: var(--space-12);
+  align-items: flex-start;
+}
+
+.slip-card__icon {
+  flex: none;
+  width: 48px;
+  height: 48px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  overflow: hidden;
+}
+
+.slip-card__image,
+.slip-card__pattern,
+.slip-card__monogram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.slip-card__image {
+  object-fit: cover;
+}
+
+/* The two fallbacks. Neither is a generic glyph: one is the publisher's initial, the other is no claim at all. */
+.slip-card__monogram {
+  background: var(--subtle);
+  color: var(--accent-text);
+  font: var(--type-card-title);
+}
+
+.slip-card__pattern {
+  background-image: repeating-linear-gradient(135deg, var(--stripe-a) 0 5px, var(--stripe-b) 5px 10px);
+}
+
+.slip-card__alarm {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: 1px solid var(--bad-line);
+  border-radius: var(--radius-control);
+  background: var(--bad-tint);
+  color: var(--bad);
+  font: var(--type-card-title);
+}
+
+.slip-card__identity {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.slip-card__title {
+  margin: 0;
+  color: var(--ink);
+  font: var(--type-card-title);
+  text-wrap: pretty;
+}
+
+.slip-card__origin {
+  color: var(--muted);
+  font: var(--type-technical);
+  overflow-wrap: anywhere;
+}
+
+.slip-card__description {
+  margin: 0;
+  max-width: 52ch;
+  color: var(--muted);
+  font: var(--type-body);
+  text-wrap: pretty;
+}
+
+.slip-card__note {
+  margin: 0;
+  padding-top: var(--space-12);
+  border-top: 1px solid var(--divider);
+  color: var(--muted);
+  font: var(--type-label);
+}
+
+.slip-card__reason {
+  margin: 0;
+  color: var(--muted);
+  font: var(--type-label);
+  text-wrap: pretty;
+}
+
+/* A closed card stays readable. Only the action is gone. */
+.slip-card[data-closed] .slip-card__title {
+  color: var(--muted);
+}
+
+.slip-card[data-closed] .slip-card__pattern {
+  background-image: repeating-linear-gradient(135deg, var(--stripe-off-a) 0 5px, var(--stripe-off-b) 5px 10px);
+}
+
+.slip-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-8);
+}
+
+/*
+ * One button, outlined. The sheet drew a filled primary until the palette
+ * change and now draws every action the same way, so `data-primary` marks which
+ * one leads without claiming a look the sheet no longer gives it.
+ */
+.slip-card__action {
+  flex: 0 1 auto;
+  height: 44px;
+  padding: 0 var(--space-20);
+  border: 1px solid var(--accent-action);
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: var(--accent-action);
+  font: var(--type-button);
+  letter-spacing: var(--type-button-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* Alone, a button is the width of the card; among others it is the width of its words. */
+.slip-card__action:only-child {
+  flex: 1 1 100%;
+}
+
+.slip-card__action:not(:disabled):hover {
+  border-color: var(--accent-hover);
+  background: var(--subtle);
+  color: var(--accent-hover);
+}
+
+.slip-card__action:disabled {
+  border-color: var(--border);
+  background: var(--subtle);
+  color: var(--muted);
+  cursor: not-allowed;
+}
+
+.slip-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+.slip-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.slip-field__label {
+  color: var(--muted);
+  font: var(--type-label);
+}
+
+.slip-field__control {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  height: 44px;
+  padding: 0 var(--space-12);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--card);
+}
+
+.slip-field__control:focus-within {
+  border-color: var(--accent-fill);
+}
+
+.slip-field[data-invalid] .slip-field__control {
+  border-color: var(--bad-line);
+  background: var(--bad-tint);
+}
+
+.slip-field__input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ink);
+  font: var(--type-body);
+}
+
+/* A figure is always Poppins 700 — the one type rule the token file states out loud. */
+.slip-field__input--numeral {
+  font: var(--type-numeral);
+}
+
+/* The helper line: what will be accepted on the left, whether it is required on the right. */
+.slip-field__help {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-12);
+}
+
+.slip-field__bounds,
+.slip-field__note {
+  color: var(--muted);
+  font: var(--type-label);
+}
+
+/* The error replaces the bounds rather than joining them: two lines of guidance is one too many. */
+.slip-field[data-invalid] .slip-field__bounds {
+  color: var(--bad);
+}
+
+.slip-field__code {
+  color: var(--muted);
+  font: var(--type-technical);
+}
+
+.slip-card__action:focus-visible,
+.slip-field__input:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.slip-card--loading {
+  animation: slip-pulse 1.6s ease-in-out infinite;
+}
+
+.slip-skeleton__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.slip-skeleton {
+  display: block;
+  border-radius: var(--radius-chip);
+  background: var(--skeleton);
+}
+
+.slip-skeleton--icon {
+  flex: none;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-control);
+}
+
+.slip-skeleton--title {
+  width: 72%;
+  height: 18px;
+}
+
+.slip-skeleton--origin {
+  width: 32%;
+  height: 12px;
+  background: var(--subtle);
+}
+
+.slip-skeleton--line {
+  width: 100%;
+  height: 12px;
+  background: var(--subtle);
+}
+
+.slip-skeleton--short {
+  width: 64%;
+}
+
+.slip-skeleton--action {
+  height: 44px;
+  border-radius: var(--radius-control);
+}
+
+/* The receipt is back on the card surface: the preview's job is done, so its ground goes with it. */
+.slip-receipt {
+  width: 100%;
+  max-width: 560px;
+  box-sizing: border-box;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+  color: var(--ink);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+}
+
+.slip-receipt__head {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+
+.slip-receipt__tick {
+  width: 48px;
+  height: 48px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--type-preview-title);
+  color: var(--pos);
+  background: var(--subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+}
+
+.slip-receipt__identity {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.slip-receipt__title {
+  margin: 0;
+  font: var(--type-card-title);
+}
+
+.slip-receipt__note {
+  font: var(--type-note);
+  color: var(--muted);
+}
+
+.slip-receipt__ledger {
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+}
+
+.slip-receipt__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-16);
+  padding: 12px 0;
+  font: var(--type-row);
+  color: var(--muted);
+}
+
+.slip-receipt__row + .slip-receipt__row {
+  border-top: 1px solid var(--divider);
+}
+
+.slip-receipt__amounts {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font: var(--type-countdown);
+  color: var(--ink);
+}
+
+.slip-receipt__amount[data-tone="gained"] {
+  color: var(--pos);
+}
+
+.slip-receipt__amount[data-tone="fee"],
+.slip-receipt__amount[data-tone="held"] {
+  color: var(--warn);
+}
+
+.slip-receipt__transaction {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-12);
+}
+
+.slip-receipt__kicker {
+  flex-basis: 100%;
+  font: var(--type-kicker);
+  letter-spacing: var(--type-kicker-tracking);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.slip-receipt__id {
+  font: var(--type-technical);
+}
+
+.slip-receipt__link {
+  font: var(--type-technical);
+  color: var(--accent-text);
+  text-decoration: none;
+}
+
+.slip-receipt__link:hover {
+  color: var(--accent-deep);
+  text-decoration: underline;
+}
+
+.slip-receipt__foot {
+  margin: 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--divider);
+}
+
+@keyframes slip-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slip-card--loading {
+    animation: none;
+  }
+}
+
+/* Named for a screen reader, absent for everyone else. */
+.slip-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Below 440px the card takes the 380 layout: a smaller icon and tighter rhythm. */
+@container (max-width: 440px) {
+  .slip-card {
+    gap: var(--space-12);
+  }
+
+  .slip-card__icon,
+  .slip-card__alarm,
+  .slip-skeleton--icon {
+    width: 44px;
+    height: 44px;
+  }
+
+  .slip-card__action {
+    flex: 1 1 100%;
+  }
+}

package/src/card.ts

@@ -0,0 +1,86 @@
+/**
+ * The parts of a Slip card that need no React: which buttons a Slip asks for,
+ * whether each one may be pressed, and what a button says once the person's
+ * values are in it.
+ */
+import {
+  fillLabel,
+  type LinkedAction,
+  type ParameterValues,
+  type Reason,
+  type Slip,
+  type ValueIssue
+} from "@cardano-slips/core"
+
+/**
+ * The buttons the Slip asks for. `links` absent is one button labelled `label`
+ * whose target is the discovery URL itself — the spec's rule, not a default of
+ * ours, which is why it is written once here rather than in each component.
+ */
+export const actionsOf = (slip: Slip, discoveryUrl: string): ReadonlyArray<LinkedAction> =>
+  slip.links?.actions ?? [{ label: slip.label, href: discoveryUrl }]
+
+/**
+ * Why this action cannot be used, or undefined while it can. The top level
+ * wins: an action carrying `disabled: false` under a disabled Slip stays
+ * closed, and is never reopened by its own field.
+ */
+export const closureOf = (slip: Slip, action: LinkedAction): Reason | undefined => {
+  if (slip.disabled === true) return slip.reason
+  return action.disabled === true ? action.reason : undefined
+}
+
+/** The host that served the link. Undefined where the URL is not one we can read. */
+export const originOf = (discoveryUrl: string): string | undefined => {
+  try {
+    return new URL(discoveryUrl).host
+  } catch {
+    return undefined
+  }
+}
+
+/** The publisher's initial, for an icon that did not load. Never a generic glyph. */
+export const monogramOf = (discoveryUrl: string): string | undefined =>
+  /\p{L}|\p{N}/u.exec(originOf(discoveryUrl) ?? "")?.[0]?.toUpperCase()
+
+/**
+ * Own properties only. `ParameterName` admits `constructor`, `toString` and the
+ * rest of `Object.prototype`, and a plain object answers for every one of them —
+ * so a field nobody filled would be handed a function where a string belongs.
+ */
+export const valueOf = (values: ParameterValues, name: string): string =>
+  Object.hasOwn(values, name) ? values[name] : ""
+
+/** Just the values this action asked for, so a caller is handed no answer it did not request. */
+export const valuesFor = (action: LinkedAction, values: ParameterValues): ParameterValues => {
+  const picked: Record<string, string> = {}
+  for (const parameter of action.parameters ?? []) picked[parameter.name] = valueOf(values, parameter.name)
+  return picked
+}
+
+const spelled = ["", "one", "two", "three", "four", "five", "six", "seven", "eight"]
+
+/**
+ * Runs of whitespace collapse because a label is a template: `Contribute
+ * {amount} {token}` with nothing typed is `Contribute`, not `Contribute  `.
+ */
+const filled = (action: LinkedAction, values: ParameterValues): string =>
+  fillLabel(action, values).replace(/\s+/g, " ").trim()
+
+/**
+ * What the button says. A label made only of placeholders empties out, and the
+ * Slip's own call to action stands in rather than a blank button.
+ */
+export const actionLabel = (slip: Slip, action: LinkedAction, values: ParameterValues): string => {
+  const label = filled(action, values)
+  return label === "" ? slip.label : label
+}
+
+/**
+ * The label of a button that was pressed and cannot send. It counts fields
+ * rather than issues: one field can fail two ways and is still one thing to fix.
+ */
+export const blockedLabel = (issues: ReadonlyArray<ValueIssue>): string => {
+  const fields = new Set(issues.map((issue) => issue.name)).size
+  return `Fix ${spelled[fields] ?? String(fields)} ${fields === 1 ? "field" : "fields"} to continue`
+}

package/src/complete-error.ts

@@ -8,17 +8,23 @@ import { type ClientErrorCode } from "@cardano-slips/core"
 import type { Reason } from "@cardano-slips/verifier"
 import { Data } from "effect"
 
+import type { Derived } from "./derived.js"
+
 export type CompletionRefusal =
   /** The wallet reported no unspent outputs, so there is nothing to build from. */
   | "NoUtxos"
   /** What `getUtxos` answered is not something these bytes can be read as. */
   | "UnreadableUtxos"
+  /** The wallet would not say which addresses are its own, or named one that cannot be read. */
+  | "UnreadableAddresses"
   /** The effects could not be derived from the transaction, or compared with the declaration. */
   | "CannotJudge"
   /** The derived effects disagree with what the endpoint declared. Nothing signs after this. */
   | "Blocked"
   /** The caller could not put the effects in front of a person, so nothing may be signed. */
   | "NotShown"
+  /** The person closed the transaction without signing it. Not a fault. */
+  | "Cancelled"
   /** The funds kept moving, and the transaction has been rebuilt as often as it will be. */
   | "OutOfAttempts"
 
@@ -29,9 +35,11 @@ export type CompletionRefusal =
 export const completionRefusals: Readonly<Record<CompletionRefusal, true>> = {
   NoUtxos: true,
   UnreadableUtxos: true,
+  UnreadableAddresses: true,
   CannotJudge: true,
   Blocked: true,
   NotShown: true,
+  Cancelled: true,
   OutOfAttempts: true
 }
 
@@ -44,7 +52,9 @@ export const slipErrorCodeFor = (refusal: CompletionRefusal): ClientErrorCode |
     case "CannotJudge":
       return "CANNOT_BALANCE"
     case "UnreadableUtxos":
+    case "UnreadableAddresses":
     case "NotShown":
+    case "Cancelled":
     case "OutOfAttempts":
       return undefined
   }
@@ -52,13 +62,14 @@ export const slipErrorCodeFor = (refusal: CompletionRefusal): ClientErrorCode |
 
 /**
  * `reasons` is what the transaction actually does against what was declared,
- * for the block to render. There is no way to carry on from one — a mismatch
+ * and `derived` is the whole of what it does, for the block to render. There is no way to carry on from one — a mismatch
  * hard-blocks, with no override, no allowlist and no confirmation.
  */
 export class CompletionError extends Data.TaggedError("CompletionError")<{
   readonly refusal: CompletionRefusal
   readonly detail: string
   readonly reasons?: ReadonlyArray<Reason>
+  readonly derived?: Derived
   readonly cause?: unknown
 }> {
   override get message(): string {
@@ -73,11 +84,12 @@ export class CompletionError extends Data.TaggedError("CompletionError")<{
 export const refuse = (
   refusal: CompletionRefusal,
   detail: string,
-  extra: { readonly reasons?: ReadonlyArray<Reason>; readonly cause?: unknown } = {}
+  extra: { readonly reasons?: ReadonlyArray<Reason>; readonly derived?: Derived; readonly cause?: unknown } = {}
 ): CompletionError =>
   new CompletionError({
     refusal,
     detail,
     ...(extra.reasons === undefined ? {} : { reasons: extra.reasons }),
+    ...(extra.derived === undefined ? {} : { derived: extra.derived }),
     ...(extra.cause === undefined ? {} : { cause: extra.cause })
   })