npm - @cardano-slips/flow - Versions diffs - 0.2.0 → 0.3.0 - Mend

@cardano-slips/flow 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/README.md +53 -9
package/dist/address.d.ts +12 -0
package/dist/address.d.ts.map +1 -1
package/dist/address.js +43 -0
package/dist/address.js.map +1 -1
package/dist/card.css +492 -0
package/dist/card.d.ts +41 -0
package/dist/card.d.ts.map +1 -0
package/dist/card.js +69 -0
package/dist/card.js.map +1 -0
package/dist/complete-error.d.ts +8 -1
package/dist/complete-error.d.ts.map +1 -1
package/dist/complete-error.js +6 -1
package/dist/complete-error.js.map +1 -1
package/dist/complete.d.ts +29 -10
package/dist/complete.d.ts.map +1 -1
package/dist/complete.js +83 -9
package/dist/complete.js.map +1 -1
package/dist/derived.d.ts +8 -0
package/dist/derived.d.ts.map +1 -0
package/dist/derived.js +2 -0
package/dist/derived.js.map +1 -0
package/dist/effects-panel.d.ts +37 -0
package/dist/effects-panel.d.ts.map +1 -0
package/dist/effects-panel.js +64 -0
package/dist/effects-panel.js.map +1 -0
package/dist/effects.css +629 -0
package/dist/exchange.d.ts +54 -0
package/dist/exchange.d.ts.map +1 -0
package/dist/exchange.js +136 -0
package/dist/exchange.js.map +1 -0
package/dist/explain.d.ts +39 -0
package/dist/explain.d.ts.map +1 -0
package/dist/explain.js +172 -0
package/dist/explain.js.map +1 -0
package/dist/index.d.ts +19 -3
package/dist/index.d.ts.map +1 -1
package/dist/index.js +9 -1
package/dist/index.js.map +1 -1
package/dist/ledger.d.ts +74 -0
package/dist/ledger.d.ts.map +1 -0
package/dist/ledger.js +402 -0
package/dist/ledger.js.map +1 -0
package/dist/outcome-panel.d.ts +63 -0
package/dist/outcome-panel.d.ts.map +1 -0
package/dist/outcome-panel.js +40 -0
package/dist/outcome-panel.js.map +1 -0
package/dist/parameter-form.d.ts +26 -0
package/dist/parameter-form.d.ts.map +1 -0
package/dist/parameter-form.js +42 -0
package/dist/parameter-form.js.map +1 -0
package/dist/slip-card.d.ts +55 -0
package/dist/slip-card.d.ts.map +1 -0
package/dist/slip-card.js +89 -0
package/dist/slip-card.js.map +1 -0
package/dist/tokens.css +57 -32
package/package.json +9 -5
package/src/address.ts +53 -0
package/src/card.css +492 -0
package/src/card.ts +86 -0
package/src/complete-error.ts +14 -2
package/src/complete.ts +128 -19
package/src/derived.ts +8 -0
package/src/effects-panel.tsx +386 -0
package/src/effects.css +629 -0
package/src/exchange.ts +212 -0
package/src/explain.ts +211 -0
package/src/index.ts +39 -3
package/src/ledger.ts +503 -0
package/src/outcome-panel.tsx +263 -0
package/src/parameter-form.tsx +138 -0
package/src/slip-card.tsx +244 -0
package/src/tokens.css +57 -32

package/src/outcome-panel.tsx ADDED Viewed

@@ -0,0 +1,263 @@
+"use client"
+/**
+ * What happens after the person presses sign — `10 · Signing and outcomes`.
+ * Every state but the receipt keeps the effects on screen, because waiting is
+ * not a modal: a spinner over a hidden ledger asks for trust the panel exists
+ * to avoid needing.
+ */
+import type { Network } from "@cardano-slips/core"
+import { useId } from "react"
+import type { Derived } from "./derived.js"
+import { Ledger } from "./effects-panel.js"
+import { ledgerOf } from "./ledger.js"
+export type Outcome =
+  /** The wallet is open over the page, asked for a signature. */
+  | { readonly _tag: "Waiting"; readonly wallet: string }
+  /** The person said no in the wallet. Not a failure: the offer stands. */
+  | { readonly _tag: "Declined" }
+  /** Signed, and on its way to the network. */
+  | { readonly _tag: "Submitting"; readonly transactionId: string }
+  /** The funds moved; a fresh transaction is being built and will be shown before it is signed. */
+  | { readonly _tag: "Rebuilding"; readonly number: number; readonly of: number }
+  /** The network refused it. `reason` is the node's own words, shown as they came. */
+  | { readonly _tag: "Refused"; readonly reason: string }
+export type OutcomePanelProps = {
+  readonly claim: string
+  readonly derived: Derived
+  readonly outcome: Outcome
+  /** Cancel while waiting or rebuilding; Close once declined or refused. */
+  readonly onClose?: () => void
+  /** Review and sign again after a decline; start again after a refusal. */
+  readonly onAgain?: () => void
+}
+const Spinner = (): React.JSX.Element => <span className="slip-panel__spin" aria-hidden="true" />
+const Head = ({
+  kicker,
+  lead,
+  title,
+  titleId,
+  tone
+}: {
+  readonly kicker: string
+  readonly title: string
+  readonly titleId: string
+  readonly lead?: string
+  readonly tone?: "bad" | "warn"
+}): React.JSX.Element => (
+  <div className="slip-panel__claim">
+    <p className="slip-panel__kicker" data-tone={tone}>
+      {kicker}
+    </p>
+    <h2 className="slip-panel__title" id={titleId}>
+      {title}
+    </h2>
+    {lead === undefined ? undefined : <p className="slip-panel__lead">{lead}</p>}
+  </div>
+)
+export const OutcomePanel = ({ claim, derived, onAgain, onClose, outcome }: OutcomePanelProps): React.JSX.Element => {
+  const title = useId()
+  const rows = ledgerOf(derived)
+  switch (outcome._tag) {
+    case "Waiting":
+      return (
+        <section className="slip-root slip-panel" data-outcome="waiting" aria-labelledby={title} aria-busy="true">
+          <Head kicker="What you're signing" title={claim} titleId={title} />
+          <Ledger rows={rows} />
+          <div className="slip-panel__wallet" role="status">
+            <Spinner />
+            <div className="slip-panel__wallet-words">
+              <span>Approve in your wallet</span>
+              <span className="slip-panel__note">{outcome.wallet} is open. Nothing is sent until you do.</span>
+            </div>
+          </div>
+          <button type="button" className="slip-panel__button" data-kind="cancel" onClick={onClose}>
+            Cancel
+          </button>
+        </section>
+      )
+    case "Declined":
+      return (
+        <section className="slip-root slip-panel" data-outcome="declined" aria-labelledby={title}>
+          <Head
+            kicker="Not signed"
+            title="You declined in your wallet"
+            titleId={title}
+            lead="Nothing was sent and nothing left your wallet. The link still works if you want to look again."
+          />
+          <div className="slip-panel__stale">
+            <Ledger rows={rows} />
+          </div>
+          <div className="slip-panel__buttons">
+            <button type="button" className="slip-panel__button" data-kind="close" onClick={onClose}>
+              Close
+            </button>
+            <button type="button" className="slip-panel__button" data-kind="primary" onClick={onAgain}>
+              Review and sign again
+            </button>
+          </div>
+        </section>
+      )
+    case "Submitting":
+      return (
+        <section className="slip-root slip-panel" data-outcome="submitting" aria-labelledby={title} aria-busy="true">
+          <Head kicker="Submitting" title="Sending your signed transaction" titleId={title} />
+          <ol className="slip-panel__steps">
+            <li className="slip-panel__step">
+              <span className="slip-panel__tick" aria-hidden="true">
+                ✓
+              </span>
+              <span>Signature checked against the transaction you read</span>
+            </li>
+            <li className="slip-panel__step" role="status">
+              <Spinner />
+              <span>Handing it to the network</span>
+            </li>
+          </ol>
+          {/* The id is what a person can carry away if the page dies mid-submit, so it is here in full. */}
+          <div className="slip-panel__transaction">
+            <span className="slip-panel__note">Transaction</span>
+            <span className="slip-panel__transaction-id">{outcome.transactionId}</span>
+          </div>
+        </section>
+      )
+    case "Rebuilding":
+      return (
+        <section className="slip-root slip-panel" data-outcome="rebuilding" aria-labelledby={title} aria-busy="true">
+          <Head
+            kicker="Rebuilding"
+            tone="warn"
+            title="Your funds moved while you were signing"
+            titleId={title}
+            lead="Something else spent the outputs this transaction used. Nothing was signed twice and nothing left your wallet."
+          />
+          <div className="slip-panel__wallet" role="status">
+            <Spinner />
+            <div className="slip-panel__wallet-words">
+              <span>Building a fresh transaction</span>
+              <span className="slip-panel__note">
+                Attempt {outcome.number} of {outcome.of}
+              </span>
+            </div>
+          </div>
+          <p className="slip-panel__note">
+            It will have different amounts and a different id, so you'll see its effects checked before your wallet is
+            asked again.
+          </p>
+          <div className="slip-panel__stale">
+            <Ledger rows={rows} />
+          </div>
+          <button type="button" className="slip-panel__button" data-kind="cancel" onClick={onClose}>
+            Cancel
+          </button>
+        </section>
+      )
+    case "Refused":
+      return (
+        <section className="slip-root slip-panel" data-outcome="refused" aria-labelledby={title}>
+          <Head
+            kicker="Not submitted"
+            tone="bad"
+            title="The network wouldn't accept this transaction"
+            titleId={title}
+            lead="You signed it, but it never took effect and nothing left your wallet. Your signature cannot be reused."
+          />
+          <pre className="slip-panel__reason">{outcome.reason}</pre>
+          <div className="slip-panel__buttons">
+            <button type="button" className="slip-panel__button" data-kind="close" onClick={onClose}>
+              Close
+            </button>
+            <button type="button" className="slip-panel__button" data-kind="primary" onClick={onAgain}>
+              Start again
+            </button>
+          </div>
+        </section>
+      )
+  }
+}
+export type SlipReceiptProps = {
+  readonly claim: string
+  readonly derived: Derived
+  readonly transactionId: string
+  readonly network: Network
+  /** Where this transaction can be looked up: the only durable copy anyone keeps. */
+  readonly explorer: { readonly name: string; readonly url: string }
+}
+/** A transaction id is hex with no separator, so it is shortened from both ends. */
+const shortId = (id: string): string => (id.length <= 12 ? id : `${id.slice(0, 4)}…${id.slice(-4)}`)
+/** One spelling for every surface that names a network, so the receipt and the top bar never disagree. */
+export const networkNames: Readonly<Record<Network, string>> = {
+  mainnet: "Mainnet",
+  preprod: "Preprod",
+  preview: "Preview"
+}
+/**
+ * `10 · d`, back on the card surface. It says sent rather than confirmed: the
+ * node accepted the transaction, and nothing here watches the chain for it.
+ */
+export const SlipReceipt = ({
+  claim,
+  derived,
+  explorer,
+  network,
+  transactionId
+}: SlipReceiptProps): React.JSX.Element => {
+  const title = useId()
+  return (
+    <section className="slip-root slip-receipt" aria-labelledby={title}>
+      <div className="slip-receipt__head">
+        <span className="slip-receipt__tick" aria-hidden="true">
+          ✓
+        </span>
+        <div className="slip-receipt__identity">
+          <h2 className="slip-receipt__title" id={title}>
+            {claim}
+          </h2>
+          <span className="slip-receipt__note">Sent to {networkNames[network]}</span>
+        </div>
+      </div>
+      <div className="slip-receipt__ledger">
+        {ledgerOf(derived).map((row) => (
+          <div key={row.key} className="slip-receipt__row">
+            <span className="slip-receipt__label">{row.label}</span>
+            <span className="slip-receipt__amounts">
+              {row.identifier ?? undefined}
+              {row.amounts.map((amount, index) => (
+                <span key={index} className="slip-receipt__amount" data-tone={amount.tone}>
+                  {amount.text}
+                </span>
+              ))}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className="slip-receipt__transaction">
+        <span className="slip-receipt__kicker">Transaction</span>
+        <span className="slip-receipt__id" title={transactionId}>
+          {shortId(transactionId)}
+        </span>
+        <a className="slip-receipt__link" href={explorer.url} target="_blank" rel="noreferrer">
+          View on {explorer.name}
+        </a>
+      </div>
+      <p className="slip-receipt__note slip-receipt__foot">
+        No account was created and nothing was stored. This page keeps none of it.
+      </p>
+    </section>
+  )
+}

package/src/parameter-form.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+"use client"
+/**
+ * The form a linked action's `parameters` describe. It holds no state: what a
+ * person typed, and which errors are ripe to show, belong to the card.
+ */
+import type { Parameter, ParameterValues } from "@cardano-slips/core"
+import { valueOf } from "./card.js"
+/** A sentence about one field. `code` is the endpoint's, and is for us rather than for the person. */
+export type FieldError = {
+  readonly message: string
+  readonly code?: string
+}
+export type ParameterFormProps = {
+  readonly parameters: ReadonlyArray<Parameter>
+  readonly values: ParameterValues
+  /** By parameter name. What is here is shown; deciding when is the card's job. */
+  readonly errors?: Readonly<Record<string, FieldError>>
+  readonly onChange: (name: string, value: string) => void
+  /** Prefixes every generated id, so two cards on one page do not collide. */
+  readonly idPrefix?: string
+}
+/**
+ * The bounds line. The spec requires it beside the field rather than only on
+ * failure, so a person can tell what will be accepted before they type.
+ */
+export const boundsOf = (parameter: Parameter): string | undefined => {
+  if (parameter.type === "select") {
+    const labels = parameter.options.map((option) => option.label)
+    if (labels.length > 3) return `${labels.length} options`
+    if (labels.length === 1) return labels[0]
+    return `${labels.slice(0, -1).join(", ")} or ${labels.at(-1)}`
+  }
+  // On `text` the bounds count characters; on `number` they bound the value.
+  const unit = parameter.type === "text" ? " characters" : ""
+  if (parameter.min !== undefined && parameter.max !== undefined) {
+    return `Between ${parameter.min} and ${parameter.max}${unit}`
+  }
+  // The same words `checkValues` uses, so the bounds and the sentence a broken
+  // value produces read as one voice rather than two.
+  if (parameter.min !== undefined) return `At least ${parameter.min}${unit}`
+  if (parameter.max !== undefined) return `At most ${parameter.max}${unit}`
+  return undefined
+}
+const errorOf = (errors: Readonly<Record<string, FieldError>> | undefined, name: string): FieldError | undefined =>
+  errors !== undefined && Object.hasOwn(errors, name) ? errors[name] : undefined
+type FieldProps = {
+  readonly parameter: Parameter
+  readonly value: string
+  readonly error: FieldError | undefined
+  readonly id: string
+  readonly onChange: (name: string, value: string) => void
+}
+const Field = ({ parameter, value, error, id, onChange }: FieldProps): React.JSX.Element => {
+  const helpId = `${id}-help`
+  const invalid = error === undefined ? undefined : ""
+  const change = (next: string): void => onChange(parameter.name, next)
+  return (
+    <div className="slip-field" data-invalid={invalid}>
+      <label className="slip-field__label" htmlFor={id}>
+        {parameter.label}
+      </label>
+      <div className="slip-field__control">
+        {parameter.type === "select" ? (
+          <select
+            id={id}
+            className="slip-field__input"
+            value={value}
+            aria-describedby={helpId}
+            aria-invalid={error === undefined ? undefined : true}
+            onChange={(event) => change(event.target.value)}
+          >
+            {parameter.required === true && value !== "" ? undefined : <option value="" />}
+            {parameter.options.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            id={id}
+            className={
+              parameter.type === "number" ? "slip-field__input slip-field__input--numeral" : "slip-field__input"
+            }
+            type="text"
+            // Never `type="number"`: it hands back an empty string for anything
+            // the browser dislikes, which hides the very value `checkValues` is
+            // there to judge — and the person never learns what was wrong.
+            inputMode={parameter.type === "number" ? "decimal" : undefined}
+            value={value}
+            aria-describedby={helpId}
+            aria-invalid={error === undefined ? undefined : true}
+            onChange={(event) => change(event.target.value)}
+          />
+        )}
+      </div>
+      <div className="slip-field__help" id={helpId}>
+        <span className="slip-field__bounds">{error?.message ?? boundsOf(parameter)}</span>
+        {error?.code === undefined ? (
+          <span className="slip-field__note">{parameter.required === true ? "Required" : "Optional"}</span>
+        ) : (
+          <span className="slip-field__code">{error.code}</span>
+        )}
+      </div>
+    </div>
+  )
+}
+export const ParameterForm = ({
+  parameters,
+  values,
+  errors,
+  onChange,
+  idPrefix = "slip"
+}: ParameterFormProps): React.JSX.Element => (
+  <div className="slip-fields">
+    {parameters.map((parameter) => (
+      <Field
+        key={parameter.name}
+        parameter={parameter}
+        value={valueOf(values, parameter.name)}
+        error={errorOf(errors, parameter.name)}
+        id={`${idPrefix}-${parameter.name}`}
+        onChange={onChange}
+      />
+    ))}
+  </div>
+)

package/src/slip-card.tsx ADDED Viewed

@@ -0,0 +1,244 @@
+"use client"
+/**
+ * The rendered face of a Slip link — `2 · Action card` on the design sheet.
+ * It renders what the endpoint declared and collects what the endpoint asked
+ * for; it makes no claim about the transaction, which is the effects panel's
+ * job and is checked against the bytes rather than against this card.
+ *
+ * The Slip is assumed to have been decoded and passed `checkTemplates`: a
+ * response with a placeholder naming no parameter is one a client never renders.
+ */
+import { checkValues, fillHref, type LinkedAction, type ParameterValues, type Slip } from "@cardano-slips/core"
+import { Either } from "effect"
+import { useState } from "react"
+import { actionLabel, actionsOf, blockedLabel, closureOf, monogramOf, originOf, valuesFor } from "./card.js"
+import { type FieldError, ParameterForm } from "./parameter-form.js"
+/** What the person chose, ready to `POST`. */
+export type SlipSubmission = {
+  readonly action: LinkedAction
+  /** Only what this action asked for. A caller is handed no answer it did not request. */
+  readonly values: ParameterValues
+  /** Absolute, with every placeholder percent-encoded, so no typed value can move the request. */
+  readonly href: string
+}
+export type SlipCardProps = {
+  readonly slip: Slip
+  /**
+   * Where the metadata came from. Every `href` resolves against it and its host
+   * is the publisher the card names, so the card cannot be rendered without it.
+   */
+  readonly discoveryUrl: string
+  readonly onSubmit?: (submission: SlipSubmission) => void
+  /**
+   * What the endpoint refused, by parameter name. The only failure that lands
+   * on a field instead of replacing the card, because there is something to fix.
+   * It is the caller's to clear, since only the caller knows which answer the
+   * endpoint was refusing.
+   */
+  readonly rejected?: Readonly<Record<string, FieldError>>
+  /** True while a request is in flight: every button stops taking presses. */
+  readonly busy?: boolean
+  /** Prefixes generated ids, so two cards on one page do not collide. */
+  readonly idPrefix?: string
+}
+/** The line that is the whole point of the card, and the reason it is worth pressing. */
+const promise = "You'll see the exact effects, checked against this card, before you sign."
+/** Nothing to choose between means the one action is already the open one. */
+const opened = (count: number): number | undefined => (count === 1 ? 0 : undefined)
+export const SlipCard = ({
+  slip,
+  discoveryUrl,
+  onSubmit,
+  rejected,
+  busy = false,
+  idPrefix = "slip"
+}: SlipCardProps): React.JSX.Element => {
+  const actions = actionsOf(slip, discoveryUrl)
+  const [values, setValues] = useState<ParameterValues>({})
+  // Errors stay quiet until a send is attempted: a card that opens red is
+  // scolding someone for not having typed yet.
+  const [attempted, setAttempted] = useState(false)
+  const [open, setOpen] = useState<number | undefined>(opened(actions.length))
+  const [failedIcon, setFailedIcon] = useState<string | undefined>(undefined)
+  // Resetting during render is React's own answer to a prop moving out from
+  // under the state derived from it. A second Slip must not open pre-filled
+  // with the first one's answers, and remembering to pass a `key` is not a
+  // thing to leave to whoever embeds this.
+  const [shown, setShown] = useState(discoveryUrl)
+  if (shown !== discoveryUrl) {
+    setShown(discoveryUrl)
+    setValues({})
+    setAttempted(false)
+    setOpen(opened(actions.length))
+    setFailedIcon(undefined)
+  }
+  const closed = slip.disabled === true
+  const parameters = (open === undefined ? undefined : actions[open]?.parameters) ?? []
+  const issues = checkValues(parameters, values)
+  const blocked = attempted && issues.length > 0
+  // `??=` would be wrong here: a parameter may be called `constructor`, and a
+  // plain object already answers to that with something that is not nullish.
+  const errors: Record<string, FieldError> = {}
+  const note = (name: string, error: FieldError): void => {
+    if (!Object.hasOwn(errors, name)) errors[name] = error
+  }
+  if (attempted) for (const issue of issues) note(issue.name, { message: issue.message })
+  for (const [name, error] of Object.entries(rejected ?? {})) note(name, error)
+  const press = (index: number): void => {
+    const action = actions[index]
+    // The spec: an action without parameters is submitted as soon as it is
+    // chosen. One that has them opens its form instead of sending blind.
+    if (action.parameters !== undefined && index !== open) {
+      setOpen(index)
+      setAttempted(false)
+      return
+    }
+    const target = fillHref(action, values, discoveryUrl)
+    if (Either.isLeft(target)) {
+      setAttempted(true)
+      return
+    }
+    onSubmit?.({ action, values: valuesFor(action, values), href: target.right })
+  }
+  const monogram = monogramOf(discoveryUrl)
+  const origin = originOf(discoveryUrl)
+  return (
+    <div className="slip-root slip-card" data-closed={closed ? "" : undefined} data-busy={busy ? "" : undefined}>
+      <div className="slip-card__head">
+        <div className="slip-card__icon">
+          {failedIcon !== slip.icon ? (
+            <img className="slip-card__image" src={slip.icon} alt="" onError={() => setFailedIcon(slip.icon)} />
+          ) : monogram === undefined ? (
+            <span className="slip-card__pattern" />
+          ) : (
+            <span className="slip-card__monogram">{monogram}</span>
+          )}
+        </div>
+        <div className="slip-card__identity">
+          <h2 className="slip-card__title">{slip.title}</h2>
+          {origin === undefined ? undefined : <span className="slip-card__origin">{origin}</span>}
+        </div>
+      </div>
+      {/* Plain text by the spec: a description carries no markup, so none is parsed. */}
+      <p className="slip-card__description">{slip.description}</p>
+      {parameters.length === 0 ? undefined : (
+        <ParameterForm
+          parameters={parameters}
+          values={values}
+          errors={errors}
+          idPrefix={idPrefix}
+          onChange={(name, value) => setValues((held) => ({ ...held, [name]: value }))}
+        />
+      )}
+      <div className="slip-card__actions">
+        {actions.map((action, index) => {
+          const closure = closureOf(slip, action)
+          const stopped = index === (open ?? 0) && blocked
+          return (
+            <button
+              key={index}
+              type="button"
+              className="slip-card__action"
+              data-primary={index === (open ?? 0) ? "" : undefined}
+              disabled={busy || closure !== undefined || stopped}
+              onClick={() => press(index)}
+            >
+              {stopped ? blockedLabel(issues) : actionLabel(slip, action, values)}
+            </button>
+          )
+        })}
+      </div>
+      {/*
+        A closed Slip states its reason once, however many actions it carries;
+        an open one states the reason of each option that is closed on its own.
+        Neither hides the action: a shared link is seen by many people at once.
+      */}
+      {closed ? (
+        <p className="slip-card__reason">{slip.reason?.message}</p>
+      ) : (
+        actions.map((action, index) =>
+          action.disabled === true && action.reason !== undefined ? (
+            <p className="slip-card__reason" key={index}>
+              {action.reason.message}
+            </p>
+          ) : undefined
+        )
+      )}
+      {closed ? undefined : <p className="slip-card__note">{promise}</p>}
+    </div>
+  )
+}
+/** The same box and the same rhythm while the metadata is in flight, so nothing shifts when it lands. */
+export const SlipCardSkeleton = (): React.JSX.Element => (
+  <div className="slip-root slip-card slip-card--loading" role="status" aria-busy="true">
+    <span className="slip-hidden">Loading this Slip</span>
+    <div className="slip-card__head">
+      <span className="slip-skeleton slip-skeleton--icon" />
+      <div className="slip-card__identity">
+        <span className="slip-skeleton slip-skeleton--title" />
+        <span className="slip-skeleton slip-skeleton--origin" />
+      </div>
+    </div>
+    <div className="slip-skeleton__lines">
+      <span className="slip-skeleton slip-skeleton--line" />
+      <span className="slip-skeleton slip-skeleton--line slip-skeleton--short" />
+    </div>
+    <span className="slip-skeleton slip-skeleton--action" />
+  </div>
+)
+export type SlipCardErrorProps = {
+  /** The endpoint that did not answer, in full: the person is being asked to judge it. */
+  readonly url: string
+  readonly message: string
+  readonly onRetry?: () => void
+}
+/**
+ * The endpoint did not answer, or answered with something that is not a Slip.
+ * This replaces the card rather than landing on a field, because there is
+ * nothing here for the person to fix.
+ */
+export const SlipCardError = ({ url, message, onRetry }: SlipCardErrorProps): React.JSX.Element => (
+  <div className="slip-root slip-card slip-card--failed" role="alert">
+    <div className="slip-card__head">
+      <span className="slip-card__alarm" aria-hidden="true">
+        !
+      </span>
+      <div className="slip-card__identity">
+        <h2 className="slip-card__title">This Slip didn't load</h2>
+        <span className="slip-card__origin">{url}</span>
+      </div>
+    </div>
+    <p className="slip-card__description">{message}</p>
+    {onRetry === undefined ? undefined : (
+      <div className="slip-card__actions">
+        <button type="button" className="slip-card__action" onClick={onRetry}>
+          Try again
+        </button>
+      </div>
+    )}
+  </div>
+)