@multiplatform.one/web3 8.2.1 → 8.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/web3",
-  "version": "8.2.1",
+  "version": "8.2.2",
   "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.2.2",
+    "@multiplatform.one/gpg": "^8.2.2",
+    "@multiplatform.one/platform": "^8.2.2",
+    "@multiplatform.one/theme": "^8.2.2",
     "@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.2.2",
+    "@multiplatform.one/test-utils": "8.2.2",
     "@tamagui/build": "2.7.6",
     "@tanstack/react-query": "^5.104.3",
     "@testing-library/jest-dom": "^7.0.1",

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";
@@ -87,13 +88,18 @@ 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 themedNoticeStyle: CSSProperties = { ...noticeStyle, color: "var(--ck-body-color)" };
+
 /**
  * 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,
@@ -179,7 +185,7 @@ function LoginButtons({
   const { openGpg } = useWeb3Modal();
   const style = buttonClassName ? undefined : buttonStyle;
   const busy = status === StatusState.LOADING || status === StatusState.SUCCESS;
-  return (
+  const buttons = (
     <div className={className ?? "mpo-keycloak-wallet-login"}>
       <button
         type="button"
@@ -196,7 +202,11 @@ function LoginButtons({
         <span>{busy ? "Signing…" : walletLabel}</span>
       </button>
       {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 +227,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/types/keycloak/KeycloakWalletLogin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeycloakWalletLogin.d.ts","sourceRoot":"","sources":["../../src/keycloak/KeycloakWalletLogin.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,KAAK,MAAM,EAA+B,MAAM,OAAO,CAAC;AAOjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,MAAM,WAAW,wBAAwB;IACvC,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IACtC,kFAAkF;IAClF,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,6EAA6E;AAC7E,wBAAgB,0BAA0B,CAAC,EACzC,OAAmB,EACnB,cAA2C,EAC3C,MAAuE,EACvE,OAAO,EACP,MAAsB,GACvB,GAAE,IAAI,CACL,wBAAwB,EACxB,SAAS,GAAG,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAC1D,GAAG,MAAM,CAgBd;AAmBD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAkElE"}
+{"version":3,"file":"KeycloakWalletLogin.d.ts","sourceRoot":"","sources":["../../src/keycloak/KeycloakWalletLogin.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,KAAK,MAAM,EAA+B,MAAM,OAAO,CAAC;AAOjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,MAAM,WAAW,wBAAwB;IACvC,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IACtC,kFAAkF;IAClF,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,6EAA6E;AAC7E,wBAAgB,0BAA0B,CAAC,EACzC,OAAmB,EACnB,cAA2C,EAC3C,MAAuE,EACvE,OAAO,EACP,MAAsB,GACvB,GAAE,IAAI,CACL,wBAAwB,EACxB,SAAS,GAAG,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAC1D,GAAG,MAAM,CAgBd;AAwBD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAkElE"}