@multiplatform.one/web3 8.2.1 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/web3",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Web3 wallet integration for multiplatform.one ecosystem with ConnectKit and wagmi",
   "keywords": [
     "connectkit",
@@ -120,10 +120,10 @@
     "@aave/account": "^0.2.1",
     "@coinbase/wallet-sdk": "^4.4.0",
     "@metamask/connect-evm": "^2.1.1",
-    "@multiplatform.one/connectkit": "^8.2.1",
-    "@multiplatform.one/gpg": "^8.2.1",
-    "@multiplatform.one/platform": "^8.2.1",
-    "@multiplatform.one/theme": "^8.2.1",
+    "@multiplatform.one/connectkit": "^8.3.0",
+    "@multiplatform.one/gpg": "^8.3.0",
+    "@multiplatform.one/platform": "^8.3.0",
+    "@multiplatform.one/theme": "^8.3.0",
     "@noble/ciphers": "^1.3.0",
     "@noble/curves": "^1.9.7",
     "@phosphor-icons/react": "^2.1.10",
@@ -147,8 +147,8 @@
     "wagmi": "^3.7.1"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "8.2.1",
-    "@multiplatform.one/test-utils": "8.2.1",
+    "@multiplatform.one/config": "8.3.0",
+    "@multiplatform.one/test-utils": "8.3.0",
     "@tamagui/build": "2.7.6",
     "@tanstack/react-query": "^5.104.3",
     "@testing-library/jest-dom": "^7.0.1",

package/src/connectkit/siwe/SIWEContext.tsx

@@ -61,6 +61,8 @@ export type SIWEContextValue = Required<Omit<SIWEConfig, "onSign" | "subscribeNo
     nonce: ReturnType<typeof useQuery<string | null>>;
     session: ReturnType<typeof useQuery<SIWESession | null>>;
     status: StatusState;
+    /** What ended the last sign-in, while status is ERROR or REJECTED. */
+    error: Error | null;
     signIn: () => Promise<SIWESession | false>;
     resetStatus: () => void;
   };

package/src/connectkit/siwe/SIWEProvider.tsx

@@ -26,6 +26,20 @@ const b64 = (s: string) => window.btoa(unescape(encodeURIComponent(s)));
  * connection store holds: `<SignInProvider {...kc.signInConfig(onSign)}>`,
  * or Web3Provider's `signIn` prop.
  */
+// A transport wraps the wallet's own refusal (viem's HttpRequestError around a
+// 4001), so the code can sit anywhere down the cause chain.
+function isUserRejection(error: unknown): boolean {
+  for (
+    let cause = error as { code?: unknown; cause?: unknown } | undefined, depth = 0;
+    cause && depth < 8;
+    cause = cause.cause as typeof cause, depth++
+  ) {
+    if (cause.code === -32000 || cause.code === 4001 || cause.code === "ACTION_REJECTED")
+      return true;
+  }
+  return false;
+}
+
 export const SIWEProvider = ({
   children,
   enabled = true,
@@ -39,7 +53,11 @@ export const SIWEProvider = ({
   ...siweConfig
 }: Props) => {
   const [status, setStatus] = useState<StatusState>(StatusState.READY);
-  const resetStatus = () => setStatus(StatusState.READY);
+  const [error, setError] = useState<Error | null>(null);
+  const resetStatus = () => {
+    setStatus(StatusState.READY);
+    setError(null);
+  };
 
   // Only allow for mounting SIWEProvider once, so we avoid weird global state
   // collisions.
@@ -111,15 +129,8 @@ export const SIWEProvider = ({
 
   const onError = (error: any) => {
     console.error("signIn error", error, error.message);
-    switch (error.code) {
-      case -32000: // user rejected, as some wallets report it
-      case 4001: // MetaMask: user rejected
-      case "ACTION_REJECTED": // MetaMask: user rejected
-        setStatus(StatusState.REJECTED);
-        break;
-      default:
-        setStatus(StatusState.ERROR);
-    }
+    setError(error instanceof Error ? error : new Error(String(error)));
+    setStatus(isUserRejection(error) ? StatusState.REJECTED : StatusState.ERROR);
   };
 
   const signIn = async () => {
@@ -135,6 +146,7 @@ export const SIWEProvider = ({
       if (!chainId) throw new Error("No chainId found");
 
       setStatus(StatusState.LOADING);
+      setError(null);
 
       // Fetch this sign-in's own nonce. A server that consumes its nonce on
       // verify refuses the one cached at mount the second time, so a cached
@@ -249,6 +261,7 @@ export const SIWEProvider = ({
         signIn,
         signOut: signOutAndRefetch,
         status,
+        error,
         resetStatus,
       }}
     >

package/src/keycloak/KeycloakWalletLogin.spec.tsx

@@ -423,3 +423,113 @@ describe("KeycloakWalletLogin after the page reloads during the wallet trip", ()
     expect(screen.queryByText("Mock Connector")).toBeNull();
   });
 });
+
+describe("KeycloakWalletLogin when a sign-in fails (FZ-1825)", () => {
+  function failingFetch(answer: { nonce?: () => Response; sign?: Error }) {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        if (String(input).endsWith("/nonce"))
+          return answer.nonce?.() ?? new Response("nonce123abc");
+        const body = String(
+          init?.body ?? (input instanceof Request ? await input.clone().text() : ""),
+        );
+        if (answer.sign && /"method":"(eth_sign|personal_sign)"/.test(body)) throw answer.sign;
+        return new Response("not found", { status: 404 });
+      }),
+    );
+  }
+
+  async function connectedLogin() {
+    const rendered = renderLogin({ wagmiConfig: makeConfig(memoryStorage(), true) });
+    await waitFor(() => expect(rendered.config.state.status).toBe("connected"));
+    return rendered;
+  }
+
+  it("keeps an empty live region under the wallet button before anything fails", async () => {
+    await connectedLogin();
+    const region = document.getElementById("mpo-wallet-login-error");
+    expect(region?.getAttribute("aria-live")).toBe("polite");
+    expect(region?.textContent).toBe("");
+  });
+
+  it("a rejected signature says so under the button, which stays usable", async () => {
+    failingFetch({
+      sign: Object.assign(new Error("User rejected the request."), { code: 4001 }),
+    });
+    const { walletButton } = await connectedLogin();
+    const region = document.getElementById("mpo-wallet-login-error")!;
+
+    fireEvent.click(walletButton);
+    await waitFor(() => expect(region.textContent).toBe("You declined the signature. Try again."));
+    expect(document.getElementById("mpo-wallet-login-error")).toBe(region);
+    expect(walletButton.disabled).toBe(false);
+    expect(walletButton.textContent).toBe("Sign in with Wallet");
+
+    failingFetch({});
+    fireEvent.click(walletButton);
+    await waitFor(() => expect(region.textContent).toBe(""));
+  });
+
+  // The sign-in joins the page's mount-time nonce fetch, which react-query
+  // retries three times with backoff before it fails (about seven seconds).
+  it.each([
+    ["a 503 nonce", () => new Response("down", { status: 503 })],
+    ["an empty siww nonce", () => new Response("")],
+    [
+      "an unreachable server",
+      () => {
+        throw new TypeError("Failed to fetch");
+      },
+    ],
+  ] as const)(
+    "%s says the sign-in server couldn't be reached, in plain words",
+    { timeout: 20_000 },
+    async (_case, nonce) => {
+      const logged = vi.spyOn(console, "error").mockImplementation(() => {});
+      failingFetch({ nonce });
+      const { walletButton } = await connectedLogin();
+
+      fireEvent.click(walletButton);
+      const region = document.getElementById("mpo-wallet-login-error")!;
+      await waitFor(
+        () => expect(region.textContent).toBe("Couldn't reach the sign-in server. Try again."),
+        { timeout: 15_000 },
+      );
+      expect(region.textContent).not.toMatch(/keycloak|nonce|\d{3}/i);
+      expect(walletButton.disabled).toBe(false);
+      expect(logged.mock.calls.some(([label]) => label === "signIn error")).toBe(true);
+    },
+  );
+
+  it("any other failure says the sign-in failed, without the server's words", async () => {
+    failingFetch({
+      sign: Object.assign(new Error("Internal JSON-RPC error."), { code: -32603 }),
+    });
+    const { walletButton } = await connectedLogin();
+
+    fireEvent.click(walletButton);
+    const region = document.getElementById("mpo-wallet-login-error")!;
+    await waitFor(() => expect(region.textContent).toBe("Couldn't sign in. Try again."));
+  });
+
+  it("paints the failure line in the field error ink, or the page's own class", async () => {
+    failingFetch({
+      sign: Object.assign(new Error("User rejected the request."), { code: 4001 }),
+    });
+    const { walletButton } = await connectedLogin();
+    fireEvent.click(walletButton);
+    const region = document.getElementById("mpo-wallet-login-error")!;
+    await waitFor(() => expect(region.textContent).not.toBe(""));
+    // jsdom drops light-dark() colours; the Storybook shots on FZ-1825 measure the ink.
+    expect(region.style.colorScheme).toBe("light dark");
+    cleanup();
+
+    renderLogin({ wagmiConfig: makeConfig(memoryStorage(), true), errorClassName: "kc-error" });
+    const themed = document.getElementById("mpo-wallet-login-error")!;
+    expect(themed.className).toBe("");
+    fireEvent.click(document.getElementById("mpo-wallet-login") as HTMLButtonElement);
+    await waitFor(() => expect(themed.className).toBe("kc-error"));
+    expect(themed.getAttribute("style")).toBeNull();
+  });
+});

package/src/keycloak/KeycloakWalletLogin.stories.tsx

@@ -0,0 +1,93 @@
+import type { ReactElement } from "react";
+import { userEvent, within } from "storybook/test";
+import { createConfig, createStorage, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { mock } from "wagmi/connectors";
+import { KeycloakWalletLogin } from "./KeycloakWalletLogin";
+
+const KEYCLOAK = "https://keycloak-wallet-login.mock.test";
+const ACCOUNT = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
+
+function memoryStorage() {
+  const map = new Map<string, string>();
+  return {
+    getItem: (key: string) => map.get(key) ?? null,
+    setItem: (key: string, value: string) => void map.set(key, value),
+    removeItem: (key: string) => void map.delete(key),
+  };
+}
+
+function connectedWallet() {
+  return createConfig({
+    chains: [mainnet],
+    connectors: [
+      mock({ accounts: [ACCOUNT], features: { reconnect: true, defaultConnected: true } }),
+    ],
+    transports: { [mainnet.id]: http() },
+    storage: createStorage({ storage: memoryStorage() }),
+  });
+}
+
+function answerKeycloak(nonce: () => Response) {
+  return () => {
+    const realFetch = window.fetch;
+    window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      if (url.endsWith("/nonce")) return nonce();
+      const body = String(init?.body ?? "");
+      if (/"method":"(eth_sign|personal_sign)"/.test(body)) {
+        throw Object.assign(new Error("User rejected the request."), { code: 4001 });
+      }
+      if (!url.startsWith(KEYCLOAK)) return realFetch(input, init);
+      return new Response("not found", { status: 404 });
+    };
+    return () => {
+      window.fetch = realFetch;
+    };
+  };
+}
+
+async function pressWallet({ canvasElement }: { canvasElement: HTMLElement }) {
+  const canvas = within(canvasElement);
+  await userEvent.click(await canvas.findByRole("button", { name: /sign in with wallet/i }));
+  await canvas.findByText(/try again/i, {}, { timeout: 20_000 });
+}
+
+const meta = {
+  title: "Web3/KeycloakWalletLogin",
+  component: KeycloakWalletLogin,
+  tags: ["!test"],
+  parameters: { layout: "centered" },
+  decorators: [
+    (Story: () => ReactElement) => (
+      <div style={{ width: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+export default meta;
+
+export const Idle = {
+  beforeEach: answerKeycloak(() => new Response("nonce123abc")),
+  render: () => (
+    <KeycloakWalletLogin baseUrl={KEYCLOAK} realm="main" wagmiConfig={connectedWallet()} />
+  ),
+};
+
+export const Declined = {
+  beforeEach: answerKeycloak(() => new Response("nonce123abc")),
+  render: () => (
+    <KeycloakWalletLogin baseUrl={KEYCLOAK} realm="main" wagmiConfig={connectedWallet()} />
+  ),
+  play: pressWallet,
+};
+
+export const ServerUnreachable = {
+  beforeEach: answerKeycloak(() => new Response("down", { status: 503 })),
+  render: () => (
+    <KeycloakWalletLogin baseUrl={KEYCLOAK} realm="main" wagmiConfig={connectedWallet()} />
+  ),
+  play: pressWallet,
+};

package/src/keycloak/KeycloakWalletLogin.theme.spec.tsx

@@ -0,0 +1,118 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createConfig, createStorage, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { mock } from "wagmi/connectors";
+import { KeycloakWalletLogin, type KeycloakWalletLoginProps } from "./KeycloakWalletLogin";
+
+const ACCOUNT = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
+
+type ColorScheme = "light" | "dark";
+
+function memoryStorage() {
+  const map = new Map<string, string>();
+  return {
+    getItem: (key: string) => map.get(key) ?? null,
+    setItem: (key: string, value: string) => void map.set(key, value),
+    removeItem: (key: string) => void map.delete(key),
+    clear: () => map.clear(),
+  };
+}
+
+function setColorScheme(scheme: ColorScheme) {
+  const happy = (window as unknown as { happyDOM: { settings: { device: object } } }).happyDOM;
+  Object.assign(happy.settings.device, { prefersColorScheme: scheme });
+}
+
+function renderLogin(props: KeycloakWalletLoginProps = {}) {
+  const config = createConfig({
+    chains: [mainnet],
+    connectors: [mock({ accounts: [ACCOUNT] })],
+    transports: { [mainnet.id]: http() },
+    storage: createStorage({ storage: memoryStorage() }),
+  });
+  render(
+    <KeycloakWalletLogin
+      baseUrl="https://kc.example.com"
+      realm="main"
+      resource="wallet"
+      wagmiConfig={config}
+      {...props}
+    />,
+  );
+  return {
+    wallet: document.getElementById("mpo-wallet-login") as HTMLButtonElement,
+    gpg: document.getElementById("mpo-gpg-login") as HTMLButtonElement,
+  };
+}
+
+/**
+ * happy-dom resolves a custom property only on the element that declares it,
+ * so a `var()` in the button's style is looked up the ancestor chain here, the
+ * way a browser's cascade inherits it.
+ */
+function computed(element: HTMLElement, property: string) {
+  const declared = element.style.getPropertyValue(property);
+  const name = /^var\((--[\w-]+)\)$/.exec(declared)?.[1];
+  if (!name) return window.getComputedStyle(element).getPropertyValue(property);
+  for (let node: HTMLElement | null = element; node; node = node.parentElement) {
+    const value = window.getComputedStyle(node).getPropertyValue(name).trim();
+    if (value) return value;
+  }
+  return "";
+}
+
+function painted(button: HTMLElement) {
+  return { background: computed(button, "background"), color: computed(button, "color") };
+}
+
+/** ConnectKit writes each colour token in display-p3 where the engine supports it. */
+function p3(hex: string) {
+  const [r, g, b] = [1, 3, 5].map((at) => Number.parseInt(hex.slice(at, at + 2), 16) / 255);
+  return `color(display-p3 ${r} ${g} ${b})`;
+}
+
+beforeEach(() => {
+  vi.stubGlobal("localStorage", memoryStorage());
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => new Response("not found", { status: 404 })),
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  setColorScheme("light");
+});
+
+describe("KeycloakWalletLogin buttons follow the ConnectKit theme", () => {
+  it("paint the dark primary-button surface and ink in a dark scheme", () => {
+    setColorScheme("dark");
+    const { wallet, gpg } = renderLogin();
+
+    for (const button of [wallet, gpg]) {
+      expect(painted(button)).toEqual({ background: p3("#383838"), color: p3("#ffffff") });
+    }
+  });
+
+  it("paint the light primary-button surface and ink in a light scheme", () => {
+    setColorScheme("light");
+    const { wallet, gpg } = renderLogin();
+
+    for (const button of [wallet, gpg]) {
+      expect(painted(button)).toEqual({ background: p3("#F6F7F9"), color: p3("#373737") });
+    }
+  });
+
+  it("a buttonClassName keeps the host's look and takes no theme paint", () => {
+    setColorScheme("dark");
+    const { wallet, gpg } = renderLogin({ buttonClassName: "kc-button" });
+
+    for (const button of [wallet, gpg]) {
+      expect(button.getAttribute("style")).toBeNull();
+      expect(button.closest("[data-mpo-wallet-theme]")).toBeNull();
+    }
+  });
+});

package/src/keycloak/KeycloakWalletLogin.tsx

@@ -1,6 +1,7 @@
+import { ResetContainer, useContext as useConnectKit } from "@multiplatform.one/connectkit";
 import { GpgProvider } from "@multiplatform.one/gpg";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { type CSSProperties, useMemo } from "react";
+import { type CSSProperties, type ReactNode, useMemo } from "react";
 import type { Chain } from "viem";
 import { type Config, WagmiProvider, createConfig } from "wagmi";
 import { arbitrum, mainnet, optimism, polygon } from "wagmi/chains";
@@ -13,7 +14,7 @@ import type { MobileConnectOptions } from "../connectkit/openConnector";
 import { ConnectKitProvider } from "../connectkit/web3Provider";
 import type { BrowserFlowOptions } from "./browserFlow";
 import { deriveKeycloakFromLocation, keycloakWallet } from "./keycloakWallet";
-import type { KeycloakWalletResource } from "./types";
+import { KeycloakWalletError, type KeycloakWalletResource } from "./types";
 import { useWalletLogin } from "./useWalletLogin";
 
 export interface KeycloakWalletLoginProps {
@@ -43,6 +44,8 @@ export interface KeycloakWalletLoginProps {
   className?: string;
   /** Replaces the built-in button look, e.g. the theme's `kcButtonClass`. */
   buttonClassName?: string;
+  /** Replaces the built-in failure line look, e.g. the theme's `kcInputErrorMessageClass`. */
+  errorClassName?: string;
   /** The wagmi config to sign with; built from the app props and `chains` when absent. */
   wagmiConfig?: Config;
 }
@@ -87,12 +90,42 @@ const buttonStyle: CSSProperties = {
   marginTop: 8,
   fontSize: 14,
   cursor: "pointer",
-  border: "1px solid #c4c4c4",
+  border: "none",
   borderRadius: 4,
-  background: "#fff",
+  background: "var(--ck-primary-button-background)",
+  color: "var(--ck-primary-button-color)",
 };
 
+const themeScopeStyle: CSSProperties = { display: "block" };
+
 const noticeStyle: CSSProperties = { margin: "8px 0 0", fontSize: 13 };
+const hiddenNoticeStyle: CSSProperties = { margin: 0 };
+// MPO's field error ink ($red10 light and dark, form-colors.md) for a page that brings no class of its own.
+const errorStyle: CSSProperties = {
+  ...noticeStyle,
+  colorScheme: "light dark",
+  color: "light-dark(#dc3e42, #ec5d5e)",
+};
+
+const declinedMessage = "You declined the signature. Try again.";
+const unreachableMessage = "Couldn't reach the sign-in server. Try again.";
+const failedMessage = "Couldn't sign in. Try again.";
+
+/** The words a failed wallet sign-in shows; the raw reason stays on the error and in the console. */
+export function walletLoginFailureMessage(
+  status: StatusState,
+  error: Error | null,
+): string | undefined {
+  if (status === StatusState.REJECTED) return declinedMessage;
+  if (status !== StatusState.ERROR) return undefined;
+  if (error instanceof TypeError) return unreachableMessage;
+  if (error instanceof KeycloakWalletError && (error.status < 300 || error.status >= 500)) {
+    return unreachableMessage;
+  }
+  return failedMessage;
+}
+
+const themedNoticeStyle: CSSProperties = { ...noticeStyle, color: "var(--ck-body-color)" };
 
 /**
  * Wallet and GPG sign-in for a Keycloak login page, on the browser flow: the
@@ -174,12 +207,14 @@ function LoginButtons({
   gpgLabel = "Sign in with GPG",
   className,
   buttonClassName,
+  errorClassName,
 }: KeycloakWalletLoginProps) {
-  const { login, status, dropped } = useWalletLogin();
+  const { login, status, dropped, error } = useWalletLogin();
   const { openGpg } = useWeb3Modal();
   const style = buttonClassName ? undefined : buttonStyle;
   const busy = status === StatusState.LOADING || status === StatusState.SUCCESS;
-  return (
+  const failure = dropped || busy ? undefined : walletLoginFailureMessage(status, error);
+  const buttons = (
     <div className={className ?? "mpo-keycloak-wallet-login"}>
       <button
         type="button"
@@ -195,8 +230,20 @@ function LoginButtons({
         <WalletIcon />
         <span>{busy ? "Signing…" : walletLabel}</span>
       </button>
+      <p
+        id="mpo-wallet-login-error"
+        aria-live="polite"
+        className={failure ? errorClassName : undefined}
+        style={!failure ? hiddenNoticeStyle : errorClassName ? undefined : errorStyle}
+      >
+        {failure}
+      </p>
       {dropped && !busy && (
-        <p id="mpo-wallet-login-dropped" role="status" style={noticeStyle}>
+        <p
+          id="mpo-wallet-login-dropped"
+          role="status"
+          style={style ? themedNoticeStyle : noticeStyle}
+        >
           The wallet connection was lost. Tap {walletLabel} to connect again.
         </p>
       )}
@@ -217,6 +264,22 @@ function LoginButtons({
       )}
     </div>
   );
+  return buttonClassName ? buttons : <ThemeScope>{buttons}</ThemeScope>;
+}
+
+function ThemeScope({ children }: { children: ReactNode }) {
+  const { theme, mode, customTheme } = useConnectKit();
+  return (
+    <ResetContainer
+      data-mpo-wallet-theme=""
+      $useTheme={theme}
+      $useMode={mode}
+      $customTheme={customTheme}
+      style={themeScopeStyle}
+    >
+      {children}
+    </ResetContainer>
+  );
 }
 
 function WalletIcon() {

package/src/keycloak/useWalletLogin.ts

@@ -29,6 +29,8 @@ export interface UseWalletLoginResult {
    * connects afresh and clears it.
    */
   dropped: boolean;
+  /** What ended the last signature, while status is ERROR or REJECTED. */
+  error: Error | null;
 }
 
 function readIntent(key: string, ttl: number): boolean {
@@ -98,7 +100,8 @@ export function useWalletLogin(opts: UseWalletLoginOptions = {}): UseWalletLogin
     setDropped(false);
     // A failed signature leaves SIWE on ERROR, which the sign-in step would
     // show the next attempt as "Unknown Error".
-    if (!signIn && siwe?.status === StatusState.ERROR) siwe.resetStatus();
+    if (!signIn && (siwe?.status === StatusState.ERROR || siwe?.status === StatusState.REJECTED))
+      siwe.resetStatus();
     if (isConnected) {
       await sign();
       return;
@@ -129,5 +132,6 @@ export function useWalletLogin(opts: UseWalletLoginOptions = {}): UseWalletLogin
     isConnected,
     address,
     dropped,
+    error: signIn ? null : (siwe?.error ?? null),
   };
 }

package/types/connectkit/siwe/SIWEContext.d.ts

@@ -42,6 +42,8 @@ export type SIWEContextValue = Required<Omit<SIWEConfig, "onSign" | "subscribeNo
     nonce: ReturnType<typeof useQuery<string | null>>;
     session: ReturnType<typeof useQuery<SIWESession | null>>;
     status: StatusState;
+    /** What ended the last sign-in, while status is ERROR or REJECTED. */
+    error: Error | null;
     signIn: () => Promise<SIWESession | false>;
     resetStatus: () => void;
 };

package/types/connectkit/siwe/SIWEContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SIWEContext.d.ts","sourceRoot":"","sources":["../../../src/connectkit/siwe/SIWEContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IAKvB,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,KAAK,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC/B,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAClF,UAAU,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAGhC,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB,oBAAoB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAI/C,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,qBAAqB,CAAC,CAAC,GACzF,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,qBAAqB,CAAC,GAAG;IACnD,KAAK,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAClD,OAAO,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACzD,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC;IAC3C,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEJ,eAAO,MAAM,WAAW,kDAA+C,CAAC"}
+{"version":3,"file":"SIWEContext.d.ts","sourceRoot":"","sources":["../../../src/connectkit/siwe/SIWEContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IAKvB,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,KAAK,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC/B,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAClF,UAAU,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAGhC,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB,oBAAoB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAKjC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;KACjB,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAI/C,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,qBAAqB,CAAC,CAAC,GACzF,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,qBAAqB,CAAC,GAAG;IACnD,KAAK,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAClD,OAAO,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;IACzD,MAAM,EAAE,WAAW,CAAC;IACpB,sEAAsE;IACtE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC;IAC3C,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEJ,eAAO,MAAM,WAAW,kDAA+C,CAAC"}

package/types/connectkit/siwe/SIWEProvider.d.ts

@@ -7,12 +7,6 @@ type Props = SIWEConfig & {
 };
 export declare const SIWE_NONCE_QUERY_KEY = "ckSiweNonce";
 export declare const SIWE_SESSION_QUERY_KEY = "ckSiweSession";
-/**
- * Sign-in over wagmi's account, mounted outside ConnectKitProvider.
- * @deprecated Goes in a later major. `SignInProvider` signs with whichever family the
- * connection store holds: `<SignInProvider {...kc.signInConfig(onSign)}>`,
- * or Web3Provider's `signIn` prop.
- */
 export declare const SIWEProvider: ({ children, enabled, nonceRefetchInterval, sessionRefetchInterval, signOutOnDisconnect, signOutOnAccountChange, signOutOnNetworkChange, onSignIn, onSignOut, ...siweConfig }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SIWEProvider.d.ts.map

package/types/connectkit/siwe/SIWEProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SIWEProvider.d.ts","sourceRoot":"","sources":["../../../src/connectkit/siwe/SIWEProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAMnE,OAAO,EAAe,UAAU,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAIlF,KAAK,KAAK,GAAG,UAAU,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,gBAAgB,CAAC;AAClD,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AAKtD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,8KAW1B,KAAK,4CA0NP,CAAC"}
+{"version":3,"file":"SIWEProvider.d.ts","sourceRoot":"","sources":["../../../src/connectkit/siwe/SIWEProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAMnE,OAAO,EAAe,UAAU,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAIlF,KAAK,KAAK,GAAG,UAAU,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,gBAAgB,CAAC;AAClD,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AAyBtD,eAAO,MAAM,YAAY,GAAI,8KAW1B,KAAK,4CAyNP,CAAC"}

package/types/keycloak/KeycloakWalletLogin.d.ts

@@ -1,8 +1,9 @@
 import type { Chain } from "viem";
 import { type Config } from "wagmi";
+import { StatusState } from "../connectkit/siwe/SIWEContext";
 import type { MobileConnectOptions } from "../connectkit/openConnector";
 import type { BrowserFlowOptions } from "./browserFlow";
-import type { KeycloakWalletResource } from "./types";
+import { type KeycloakWalletResource } from "./types";
 export interface KeycloakWalletLoginProps {
     /** Defaults to the Keycloak base of the page it runs on. */
     baseUrl?: string;
@@ -30,11 +31,15 @@ export interface KeycloakWalletLoginProps {
     className?: string;
     /** Replaces the built-in button look, e.g. the theme's `kcButtonClass`. */
     buttonClassName?: string;
+    /** Replaces the built-in failure line look, e.g. the theme's `kcInputErrorMessageClass`. */
+    errorClassName?: string;
     /** The wagmi config to sign with; built from the app props and `chains` when absent. */
     wagmiConfig?: Config;
 }
 /** The wagmi config `<KeycloakWalletLogin>` builds when it is given none. */
 export declare function createKeycloakWalletConfig({ appName, appDescription, appUrl, appIcon, chains, }?: Pick<KeycloakWalletLoginProps, "appName" | "appDescription" | "appUrl" | "appIcon" | "chains">): Config;
+/** The words a failed wallet sign-in shows; the raw reason stays on the error and in the console. */
+export declare function walletLoginFailureMessage(status: StatusState, error: Error | null): string | undefined;
 /**
  * Wallet and GPG sign-in for a Keycloak login page, on the browser flow: the
  * signed credential posts to the page's authenticator. Carries its own wagmi,