@open-federation/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,197 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  OpenFederationProvider: () => OpenFederationProvider,
+  SignInWithOpenFederation: () => SignInWithOpenFederation,
+  useOFClient: () => useOFClient,
+  useOFSession: () => useOFSession,
+  useOFWallet: () => useOFWallet
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var OpenFederationContext = (0, import_react.createContext)(null);
+function OpenFederationProvider({ client, children }) {
+  const [user, setUser] = (0, import_react.useState)(null);
+  const [ready, setReady] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    let mounted = true;
+    (async () => {
+      const u = await client.getUser();
+      if (!mounted) return;
+      setUser(u);
+      setReady(true);
+    })();
+    const unsubscribe = client.onAuthChange((u) => {
+      if (mounted) setUser(u);
+    });
+    return () => {
+      mounted = false;
+      unsubscribe();
+    };
+  }, [client]);
+  const value = (0, import_react.useMemo)(() => ({ client, user, ready }), [client, user, ready]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpenFederationContext.Provider, { value, children });
+}
+function useOpenFederationContext() {
+  const ctx = (0, import_react.useContext)(OpenFederationContext);
+  if (!ctx) {
+    throw new Error(
+      "OpenFederation hooks/components must be used inside <OpenFederationProvider>. Wrap your app root with it."
+    );
+  }
+  return ctx;
+}
+
+// src/hooks.ts
+var import_react2 = require("react");
+function useOFClient() {
+  return useOpenFederationContext().client;
+}
+function useOFSession() {
+  const { client, user, ready } = useOpenFederationContext();
+  const login = (0, import_react2.useCallback)((opts) => client.login(opts), [client]);
+  const register = (0, import_react2.useCallback)((opts) => client.register(opts), [client]);
+  const logout = (0, import_react2.useCallback)(() => client.logout(), [client]);
+  return {
+    user,
+    ready,
+    isAuthenticated: user !== null,
+    client,
+    login,
+    register,
+    logout
+  };
+}
+function useOFWallet() {
+  const { client, user } = useOpenFederationContext();
+  const [wallets, setWallets] = (0, import_react2.useState)([]);
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const refresh = (0, import_react2.useCallback)(async () => {
+    if (!user) {
+      setWallets([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await client.listWalletLinks();
+      setWallets(res.walletLinks);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, user]);
+  (0, import_react2.useEffect)(() => {
+    refresh();
+  }, [refresh]);
+  const signIn = (0, import_react2.useCallback)(
+    (opts) => client.signInWithOpenFederation(opts),
+    [client]
+  );
+  return { wallets, loading, error, refresh, signIn };
+}
+
+// src/sign-in-button.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.5rem",
+  padding: "0.625rem 1rem",
+  border: "1px solid rgba(0,0,0,0.1)",
+  borderRadius: "0.5rem",
+  background: "#111",
+  color: "#fff",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+function SignInWithOpenFederation(props) {
+  const { client, user } = useOpenFederationContext();
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const disabled = !user || loading;
+  const handleClick = (0, import_react3.useCallback)(async () => {
+    if (disabled) return;
+    setLoading(true);
+    try {
+      let walletAddress = props.walletAddress;
+      if (!walletAddress) {
+        const list = await client.listWalletLinks();
+        const primaryOnChain = list.walletLinks.find(
+          (w) => w.chain === props.chain
+        );
+        if (!primaryOnChain) {
+          throw new Error(
+            `No wallet found on chain "${props.chain}" for this account. Provision or link one first.`
+          );
+        }
+        walletAddress = primaryOnChain.walletAddress;
+      }
+      const audience = props.audience ?? (typeof window !== "undefined" ? window.location.origin : void 0);
+      if (!audience) {
+        throw new Error("audience is required (no window.location available)");
+      }
+      const assertion = await client.signInWithOpenFederation({
+        chain: props.chain,
+        walletAddress,
+        audience,
+        statement: props.statement
+      });
+      props.onSuccess(assertion);
+    } catch (err) {
+      if (props.onError) props.onError(err);
+      else throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [client, disabled, props]);
+  if (props.render) {
+    return props.render({ onClick: handleClick, loading, disabled });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      className: props.className,
+      style: { ...DEFAULT_STYLE, opacity: disabled ? 0.6 : 1, ...props.style ?? {} },
+      "data-openfederation-signin": true,
+      children: loading ? "Signing\u2026" : props.label ?? "Sign in with OpenFederation"
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OpenFederationProvider,
+  SignInWithOpenFederation,
+  useOFClient,
+  useOFSession,
+  useOFWallet
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/hooks.ts","../src/sign-in-button.tsx"],"sourcesContent":["export { OpenFederationProvider } from './provider.js';\nexport type { OpenFederationProviderProps } from './provider.js';\nexport { useOFClient, useOFSession, useOFWallet } from './hooks.js';\nexport type { OFSession, OFWallets } from './hooks.js';\nexport { SignInWithOpenFederation } from './sign-in-button.js';\nexport type { SignInWithOpenFederationProps } from './sign-in-button.js';\n","import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';\nimport type { OpenFederationClient, User } from '@open-federation/sdk';\n\nexport interface OpenFederationProviderProps {\n  /** A client instance created via `createClient(...)` from @open-federation/sdk. */\n  client: OpenFederationClient;\n  children: React.ReactNode;\n}\n\ninterface OpenFederationContextValue {\n  client: OpenFederationClient;\n  user: User | null;\n  ready: boolean;\n}\n\nconst OpenFederationContext = createContext<OpenFederationContextValue | null>(null);\n\n/**\n * Wrap your React tree in this. The provider subscribes to the SDK's auth\n * state and exposes the current user through `useOFSession()`.\n *\n * @example\n * ```tsx\n * import { createClient } from '@open-federation/sdk';\n * import { OpenFederationProvider } from '@open-federation/react';\n *\n * const client = createClient({ serverUrl, partnerKey });\n *\n * <OpenFederationProvider client={client}>\n *   <App />\n * </OpenFederationProvider>\n * ```\n */\nexport function OpenFederationProvider({ client, children }: OpenFederationProviderProps): React.ReactElement {\n  const [user, setUser] = useState<User | null>(null);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    let mounted = true;\n    (async () => {\n      const u = await client.getUser();\n      if (!mounted) return;\n      setUser(u);\n      setReady(true);\n    })();\n    const unsubscribe = client.onAuthChange((u) => {\n      if (mounted) setUser(u);\n    });\n    return () => {\n      mounted = false;\n      unsubscribe();\n    };\n  }, [client]);\n\n  const value = useMemo(() => ({ client, user, ready }), [client, user, ready]);\n  return (\n    <OpenFederationContext.Provider value={value}>\n      {children}\n    </OpenFederationContext.Provider>\n  );\n}\n\n/** Internal — use the public hooks from `./hooks.ts` instead. */\nexport function useOpenFederationContext(): OpenFederationContextValue {\n  const ctx = useContext(OpenFederationContext);\n  if (!ctx) {\n    throw new Error(\n      'OpenFederation hooks/components must be used inside <OpenFederationProvider>. ' +\n      'Wrap your app root with it.'\n    );\n  }\n  return ctx;\n}\n","import { useCallback, useEffect, useState } from 'react';\nimport type {\n  OpenFederationClient,\n  User,\n  LoginOptions,\n  RegisterOptions,\n  SignInWithOpenFederationOptions,\n  SiwofAssertResponse,\n  WalletLink,\n} from '@open-federation/sdk';\nimport { useOpenFederationContext } from './provider.js';\n\nexport type { User, WalletLink };\n\n/** Get the underlying OpenFederation SDK client directly. */\nexport function useOFClient(): OpenFederationClient {\n  return useOpenFederationContext().client;\n}\n\nexport interface OFSession {\n  user: User | null;\n  ready: boolean;\n  isAuthenticated: boolean;\n  client: OpenFederationClient;\n  login: (opts: LoginOptions) => Promise<User>;\n  register: (opts: RegisterOptions) => Promise<User>;\n  logout: () => Promise<void>;\n}\n\n/**\n * Primary hook for reading auth state and kicking off login / register /\n * logout. Re-renders automatically when the SDK's auth state changes.\n *\n * @example\n * ```tsx\n * const { user, login, logout, isAuthenticated } = useOFSession();\n * if (!isAuthenticated) return <LoginForm onSubmit={login} />;\n * return <div>Welcome, @{user.handle} <button onClick={logout}>Sign out</button></div>;\n * ```\n */\nexport function useOFSession(): OFSession {\n  const { client, user, ready } = useOpenFederationContext();\n\n  const login = useCallback((opts: LoginOptions) => client.login(opts), [client]);\n  const register = useCallback((opts: RegisterOptions) => client.register(opts), [client]);\n  const logout = useCallback(() => client.logout(), [client]);\n\n  return {\n    user,\n    ready,\n    isAuthenticated: user !== null,\n    client,\n    login,\n    register,\n    logout,\n  };\n}\n\nexport interface OFWallets {\n  wallets: WalletLink[];\n  loading: boolean;\n  error: Error | null;\n  refresh: () => Promise<void>;\n  /**\n   * Convenience wrapper for client.signInWithOpenFederation — runs the\n   * full SIWOF flow and returns the assertion the dApp needs.\n   */\n  signIn: (opts: SignInWithOpenFederationOptions) => Promise<SiwofAssertResponse>;\n}\n\n/**\n * Hook for reading the current user's wallet portfolio and issuing SIWOF\n * assertions from React components.\n *\n * @example\n * ```tsx\n * const { wallets, signIn } = useOFWallet();\n *\n * async function handleSignIn() {\n *   const eth = wallets.find(w => w.chain === 'ethereum');\n *   if (!eth) return;\n *   const assertion = await signIn({\n *     chain: 'ethereum',\n *     walletAddress: eth.walletAddress,\n *     audience: window.location.origin,\n *   });\n *   // POST assertion.didToken + assertion.walletProof to your backend.\n * }\n * ```\n */\nexport function useOFWallet(): OFWallets {\n  const { client, user } = useOpenFederationContext();\n  const [wallets, setWallets] = useState<WalletLink[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const refresh = useCallback(async () => {\n    if (!user) {\n      setWallets([]);\n      return;\n    }\n    setLoading(true);\n    setError(null);\n    try {\n      const res = await client.listWalletLinks();\n      setWallets(res.walletLinks);\n    } catch (err) {\n      setError(err as Error);\n    } finally {\n      setLoading(false);\n    }\n  }, [client, user]);\n\n  useEffect(() => {\n    refresh();\n  }, [refresh]);\n\n  const signIn = useCallback(\n    (opts: SignInWithOpenFederationOptions) => client.signInWithOpenFederation(opts),\n    [client]\n  );\n\n  return { wallets, loading, error, refresh, signIn };\n}\n","import React, { useCallback, useState } from 'react';\nimport type {\n  SiwofAssertResponse,\n  WalletChain,\n} from '@open-federation/sdk';\nimport { useOpenFederationContext } from './provider.js';\n\nexport interface SignInWithOpenFederationProps {\n  /** Chain to sign in with. */\n  chain: WalletChain;\n  /**\n   * Wallet address to sign the SIWOF message with. If omitted, the user's\n   * primary wallet for the chain is used (looked up via listWalletLinks).\n   */\n  walletAddress?: string;\n  /**\n   * Full audience URL (your dApp). Defaults to `window.location.origin`.\n   */\n  audience?: string;\n  /** Optional prompt rendered inside the CAIP-122 message. */\n  statement?: string;\n  /** Callback invoked with the offline-verifiable assertion on success. */\n  onSuccess: (assertion: SiwofAssertResponse) => void;\n  /** Callback invoked with any error from the sign-in attempt. */\n  onError?: (error: Error) => void;\n  /** Customize the button label. Defaults to \"Sign in with OpenFederation\". */\n  label?: React.ReactNode;\n  /** Replace the default button with a render-prop for full control. */\n  render?: (props: {\n    onClick: () => void;\n    loading: boolean;\n    disabled: boolean;\n  }) => React.ReactElement;\n  /** Optional extra classes for the default button. */\n  className?: string;\n  /** Optional inline styles for the default button. */\n  style?: React.CSSProperties;\n}\n\nconst DEFAULT_STYLE: React.CSSProperties = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '0.5rem',\n  padding: '0.625rem 1rem',\n  border: '1px solid rgba(0,0,0,0.1)',\n  borderRadius: '0.5rem',\n  background: '#111',\n  color: '#fff',\n  fontWeight: 600,\n  cursor: 'pointer',\n};\n\n/**\n * Drop-in button that runs the full Sign-In With OpenFederation flow.\n *\n * @example\n * ```tsx\n * <SignInWithOpenFederation\n *   chain=\"ethereum\"\n *   audience={window.location.origin}\n *   onSuccess={(assertion) => {\n *     fetch('/api/login', { method: 'POST', body: JSON.stringify(assertion) });\n *   }}\n * />\n * ```\n */\nexport function SignInWithOpenFederation(props: SignInWithOpenFederationProps): React.ReactElement {\n  const { client, user } = useOpenFederationContext();\n  const [loading, setLoading] = useState(false);\n\n  const disabled = !user || loading;\n\n  const handleClick = useCallback(async () => {\n    if (disabled) return;\n    setLoading(true);\n    try {\n      // Resolve wallet address if omitted.\n      let walletAddress = props.walletAddress;\n      if (!walletAddress) {\n        const list = await client.listWalletLinks();\n        const primaryOnChain = list.walletLinks.find(\n          (w) => w.chain === props.chain\n        );\n        if (!primaryOnChain) {\n          throw new Error(\n            `No wallet found on chain \"${props.chain}\" for this account. Provision or link one first.`\n          );\n        }\n        walletAddress = primaryOnChain.walletAddress;\n      }\n\n      const audience = props.audience\n        ?? (typeof window !== 'undefined' ? window.location.origin : undefined);\n      if (!audience) {\n        throw new Error('audience is required (no window.location available)');\n      }\n\n      const assertion = await client.signInWithOpenFederation({\n        chain: props.chain,\n        walletAddress,\n        audience,\n        statement: props.statement,\n      });\n      props.onSuccess(assertion);\n    } catch (err) {\n      if (props.onError) props.onError(err as Error);\n      else throw err;\n    } finally {\n      setLoading(false);\n    }\n  }, [client, disabled, props]);\n\n  if (props.render) {\n    return props.render({ onClick: handleClick, loading, disabled });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled}\n      className={props.className}\n      style={{ ...DEFAULT_STYLE, opacity: disabled ? 0.6 : 1, ...(props.style ?? {}) }}\n      data-openfederation-signin\n    >\n      {loading\n        ? 'Signing…'\n        : (props.label ?? 'Sign in with OpenFederation')}\n    </button>\n  );\n}\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,130 @@
+import React from 'react';
+import { OpenFederationClient, User, LoginOptions, RegisterOptions, WalletLink, SignInWithOpenFederationOptions, SiwofAssertResponse, WalletChain } from '@open-federation/sdk';
+
+interface OpenFederationProviderProps {
+    /** A client instance created via `createClient(...)` from @open-federation/sdk. */
+    client: OpenFederationClient;
+    children: React.ReactNode;
+}
+/**
+ * Wrap your React tree in this. The provider subscribes to the SDK's auth
+ * state and exposes the current user through `useOFSession()`.
+ *
+ * @example
+ * ```tsx
+ * import { createClient } from '@open-federation/sdk';
+ * import { OpenFederationProvider } from '@open-federation/react';
+ *
+ * const client = createClient({ serverUrl, partnerKey });
+ *
+ * <OpenFederationProvider client={client}>
+ *   <App />
+ * </OpenFederationProvider>
+ * ```
+ */
+declare function OpenFederationProvider({ client, children }: OpenFederationProviderProps): React.ReactElement;
+
+/** Get the underlying OpenFederation SDK client directly. */
+declare function useOFClient(): OpenFederationClient;
+interface OFSession {
+    user: User | null;
+    ready: boolean;
+    isAuthenticated: boolean;
+    client: OpenFederationClient;
+    login: (opts: LoginOptions) => Promise<User>;
+    register: (opts: RegisterOptions) => Promise<User>;
+    logout: () => Promise<void>;
+}
+/**
+ * Primary hook for reading auth state and kicking off login / register /
+ * logout. Re-renders automatically when the SDK's auth state changes.
+ *
+ * @example
+ * ```tsx
+ * const { user, login, logout, isAuthenticated } = useOFSession();
+ * if (!isAuthenticated) return <LoginForm onSubmit={login} />;
+ * return <div>Welcome, @{user.handle} <button onClick={logout}>Sign out</button></div>;
+ * ```
+ */
+declare function useOFSession(): OFSession;
+interface OFWallets {
+    wallets: WalletLink[];
+    loading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+    /**
+     * Convenience wrapper for client.signInWithOpenFederation — runs the
+     * full SIWOF flow and returns the assertion the dApp needs.
+     */
+    signIn: (opts: SignInWithOpenFederationOptions) => Promise<SiwofAssertResponse>;
+}
+/**
+ * Hook for reading the current user's wallet portfolio and issuing SIWOF
+ * assertions from React components.
+ *
+ * @example
+ * ```tsx
+ * const { wallets, signIn } = useOFWallet();
+ *
+ * async function handleSignIn() {
+ *   const eth = wallets.find(w => w.chain === 'ethereum');
+ *   if (!eth) return;
+ *   const assertion = await signIn({
+ *     chain: 'ethereum',
+ *     walletAddress: eth.walletAddress,
+ *     audience: window.location.origin,
+ *   });
+ *   // POST assertion.didToken + assertion.walletProof to your backend.
+ * }
+ * ```
+ */
+declare function useOFWallet(): OFWallets;
+
+interface SignInWithOpenFederationProps {
+    /** Chain to sign in with. */
+    chain: WalletChain;
+    /**
+     * Wallet address to sign the SIWOF message with. If omitted, the user's
+     * primary wallet for the chain is used (looked up via listWalletLinks).
+     */
+    walletAddress?: string;
+    /**
+     * Full audience URL (your dApp). Defaults to `window.location.origin`.
+     */
+    audience?: string;
+    /** Optional prompt rendered inside the CAIP-122 message. */
+    statement?: string;
+    /** Callback invoked with the offline-verifiable assertion on success. */
+    onSuccess: (assertion: SiwofAssertResponse) => void;
+    /** Callback invoked with any error from the sign-in attempt. */
+    onError?: (error: Error) => void;
+    /** Customize the button label. Defaults to "Sign in with OpenFederation". */
+    label?: React.ReactNode;
+    /** Replace the default button with a render-prop for full control. */
+    render?: (props: {
+        onClick: () => void;
+        loading: boolean;
+        disabled: boolean;
+    }) => React.ReactElement;
+    /** Optional extra classes for the default button. */
+    className?: string;
+    /** Optional inline styles for the default button. */
+    style?: React.CSSProperties;
+}
+/**
+ * Drop-in button that runs the full Sign-In With OpenFederation flow.
+ *
+ * @example
+ * ```tsx
+ * <SignInWithOpenFederation
+ *   chain="ethereum"
+ *   audience={window.location.origin}
+ *   onSuccess={(assertion) => {
+ *     fetch('/api/login', { method: 'POST', body: JSON.stringify(assertion) });
+ *   }}
+ * />
+ * ```
+ */
+declare function SignInWithOpenFederation(props: SignInWithOpenFederationProps): React.ReactElement;
+
+export { type OFSession, type OFWallets, OpenFederationProvider, type OpenFederationProviderProps, SignInWithOpenFederation, type SignInWithOpenFederationProps, useOFClient, useOFSession, useOFWallet };

package/dist/index.d.ts

@@ -0,0 +1,130 @@
+import React from 'react';
+import { OpenFederationClient, User, LoginOptions, RegisterOptions, WalletLink, SignInWithOpenFederationOptions, SiwofAssertResponse, WalletChain } from '@open-federation/sdk';
+
+interface OpenFederationProviderProps {
+    /** A client instance created via `createClient(...)` from @open-federation/sdk. */
+    client: OpenFederationClient;
+    children: React.ReactNode;
+}
+/**
+ * Wrap your React tree in this. The provider subscribes to the SDK's auth
+ * state and exposes the current user through `useOFSession()`.
+ *
+ * @example
+ * ```tsx
+ * import { createClient } from '@open-federation/sdk';
+ * import { OpenFederationProvider } from '@open-federation/react';
+ *
+ * const client = createClient({ serverUrl, partnerKey });
+ *
+ * <OpenFederationProvider client={client}>
+ *   <App />
+ * </OpenFederationProvider>
+ * ```
+ */
+declare function OpenFederationProvider({ client, children }: OpenFederationProviderProps): React.ReactElement;
+
+/** Get the underlying OpenFederation SDK client directly. */
+declare function useOFClient(): OpenFederationClient;
+interface OFSession {
+    user: User | null;
+    ready: boolean;
+    isAuthenticated: boolean;
+    client: OpenFederationClient;
+    login: (opts: LoginOptions) => Promise<User>;
+    register: (opts: RegisterOptions) => Promise<User>;
+    logout: () => Promise<void>;
+}
+/**
+ * Primary hook for reading auth state and kicking off login / register /
+ * logout. Re-renders automatically when the SDK's auth state changes.
+ *
+ * @example
+ * ```tsx
+ * const { user, login, logout, isAuthenticated } = useOFSession();
+ * if (!isAuthenticated) return <LoginForm onSubmit={login} />;
+ * return <div>Welcome, @{user.handle} <button onClick={logout}>Sign out</button></div>;
+ * ```
+ */
+declare function useOFSession(): OFSession;
+interface OFWallets {
+    wallets: WalletLink[];
+    loading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+    /**
+     * Convenience wrapper for client.signInWithOpenFederation — runs the
+     * full SIWOF flow and returns the assertion the dApp needs.
+     */
+    signIn: (opts: SignInWithOpenFederationOptions) => Promise<SiwofAssertResponse>;
+}
+/**
+ * Hook for reading the current user's wallet portfolio and issuing SIWOF
+ * assertions from React components.
+ *
+ * @example
+ * ```tsx
+ * const { wallets, signIn } = useOFWallet();
+ *
+ * async function handleSignIn() {
+ *   const eth = wallets.find(w => w.chain === 'ethereum');
+ *   if (!eth) return;
+ *   const assertion = await signIn({
+ *     chain: 'ethereum',
+ *     walletAddress: eth.walletAddress,
+ *     audience: window.location.origin,
+ *   });
+ *   // POST assertion.didToken + assertion.walletProof to your backend.
+ * }
+ * ```
+ */
+declare function useOFWallet(): OFWallets;
+
+interface SignInWithOpenFederationProps {
+    /** Chain to sign in with. */
+    chain: WalletChain;
+    /**
+     * Wallet address to sign the SIWOF message with. If omitted, the user's
+     * primary wallet for the chain is used (looked up via listWalletLinks).
+     */
+    walletAddress?: string;
+    /**
+     * Full audience URL (your dApp). Defaults to `window.location.origin`.
+     */
+    audience?: string;
+    /** Optional prompt rendered inside the CAIP-122 message. */
+    statement?: string;
+    /** Callback invoked with the offline-verifiable assertion on success. */
+    onSuccess: (assertion: SiwofAssertResponse) => void;
+    /** Callback invoked with any error from the sign-in attempt. */
+    onError?: (error: Error) => void;
+    /** Customize the button label. Defaults to "Sign in with OpenFederation". */
+    label?: React.ReactNode;
+    /** Replace the default button with a render-prop for full control. */
+    render?: (props: {
+        onClick: () => void;
+        loading: boolean;
+        disabled: boolean;
+    }) => React.ReactElement;
+    /** Optional extra classes for the default button. */
+    className?: string;
+    /** Optional inline styles for the default button. */
+    style?: React.CSSProperties;
+}
+/**
+ * Drop-in button that runs the full Sign-In With OpenFederation flow.
+ *
+ * @example
+ * ```tsx
+ * <SignInWithOpenFederation
+ *   chain="ethereum"
+ *   audience={window.location.origin}
+ *   onSuccess={(assertion) => {
+ *     fetch('/api/login', { method: 'POST', body: JSON.stringify(assertion) });
+ *   }}
+ * />
+ * ```
+ */
+declare function SignInWithOpenFederation(props: SignInWithOpenFederationProps): React.ReactElement;
+
+export { type OFSession, type OFWallets, OpenFederationProvider, type OpenFederationProviderProps, SignInWithOpenFederation, type SignInWithOpenFederationProps, useOFClient, useOFSession, useOFWallet };

package/dist/index.js

@@ -0,0 +1,166 @@
+// src/provider.tsx
+import { createContext, useContext, useEffect, useState, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var OpenFederationContext = createContext(null);
+function OpenFederationProvider({ client, children }) {
+  const [user, setUser] = useState(null);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      const u = await client.getUser();
+      if (!mounted) return;
+      setUser(u);
+      setReady(true);
+    })();
+    const unsubscribe = client.onAuthChange((u) => {
+      if (mounted) setUser(u);
+    });
+    return () => {
+      mounted = false;
+      unsubscribe();
+    };
+  }, [client]);
+  const value = useMemo(() => ({ client, user, ready }), [client, user, ready]);
+  return /* @__PURE__ */ jsx(OpenFederationContext.Provider, { value, children });
+}
+function useOpenFederationContext() {
+  const ctx = useContext(OpenFederationContext);
+  if (!ctx) {
+    throw new Error(
+      "OpenFederation hooks/components must be used inside <OpenFederationProvider>. Wrap your app root with it."
+    );
+  }
+  return ctx;
+}
+
+// src/hooks.ts
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+function useOFClient() {
+  return useOpenFederationContext().client;
+}
+function useOFSession() {
+  const { client, user, ready } = useOpenFederationContext();
+  const login = useCallback((opts) => client.login(opts), [client]);
+  const register = useCallback((opts) => client.register(opts), [client]);
+  const logout = useCallback(() => client.logout(), [client]);
+  return {
+    user,
+    ready,
+    isAuthenticated: user !== null,
+    client,
+    login,
+    register,
+    logout
+  };
+}
+function useOFWallet() {
+  const { client, user } = useOpenFederationContext();
+  const [wallets, setWallets] = useState2([]);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const refresh = useCallback(async () => {
+    if (!user) {
+      setWallets([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await client.listWalletLinks();
+      setWallets(res.walletLinks);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, user]);
+  useEffect2(() => {
+    refresh();
+  }, [refresh]);
+  const signIn = useCallback(
+    (opts) => client.signInWithOpenFederation(opts),
+    [client]
+  );
+  return { wallets, loading, error, refresh, signIn };
+}
+
+// src/sign-in-button.tsx
+import { useCallback as useCallback2, useState as useState3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.5rem",
+  padding: "0.625rem 1rem",
+  border: "1px solid rgba(0,0,0,0.1)",
+  borderRadius: "0.5rem",
+  background: "#111",
+  color: "#fff",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+function SignInWithOpenFederation(props) {
+  const { client, user } = useOpenFederationContext();
+  const [loading, setLoading] = useState3(false);
+  const disabled = !user || loading;
+  const handleClick = useCallback2(async () => {
+    if (disabled) return;
+    setLoading(true);
+    try {
+      let walletAddress = props.walletAddress;
+      if (!walletAddress) {
+        const list = await client.listWalletLinks();
+        const primaryOnChain = list.walletLinks.find(
+          (w) => w.chain === props.chain
+        );
+        if (!primaryOnChain) {
+          throw new Error(
+            `No wallet found on chain "${props.chain}" for this account. Provision or link one first.`
+          );
+        }
+        walletAddress = primaryOnChain.walletAddress;
+      }
+      const audience = props.audience ?? (typeof window !== "undefined" ? window.location.origin : void 0);
+      if (!audience) {
+        throw new Error("audience is required (no window.location available)");
+      }
+      const assertion = await client.signInWithOpenFederation({
+        chain: props.chain,
+        walletAddress,
+        audience,
+        statement: props.statement
+      });
+      props.onSuccess(assertion);
+    } catch (err) {
+      if (props.onError) props.onError(err);
+      else throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [client, disabled, props]);
+  if (props.render) {
+    return props.render({ onClick: handleClick, loading, disabled });
+  }
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      className: props.className,
+      style: { ...DEFAULT_STYLE, opacity: disabled ? 0.6 : 1, ...props.style ?? {} },
+      "data-openfederation-signin": true,
+      children: loading ? "Signing\u2026" : props.label ?? "Sign in with OpenFederation"
+    }
+  );
+}
+export {
+  OpenFederationProvider,
+  SignInWithOpenFederation,
+  useOFClient,
+  useOFSession,
+  useOFWallet
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx","../src/hooks.ts","../src/sign-in-button.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';\nimport type { OpenFederationClient, User } from '@open-federation/sdk';\n\nexport interface OpenFederationProviderProps {\n  /** A client instance created via `createClient(...)` from @open-federation/sdk. */\n  client: OpenFederationClient;\n  children: React.ReactNode;\n}\n\ninterface OpenFederationContextValue {\n  client: OpenFederationClient;\n  user: User | null;\n  ready: boolean;\n}\n\nconst OpenFederationContext = createContext<OpenFederationContextValue | null>(null);\n\n/**\n * Wrap your React tree in this. The provider subscribes to the SDK's auth\n * state and exposes the current user through `useOFSession()`.\n *\n * @example\n * ```tsx\n * import { createClient } from '@open-federation/sdk';\n * import { OpenFederationProvider } from '@open-federation/react';\n *\n * const client = createClient({ serverUrl, partnerKey });\n *\n * <OpenFederationProvider client={client}>\n *   <App />\n * </OpenFederationProvider>\n * ```\n */\nexport function OpenFederationProvider({ client, children }: OpenFederationProviderProps): React.ReactElement {\n  const [user, setUser] = useState<User | null>(null);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    let mounted = true;\n    (async () => {\n      const u = await client.getUser();\n      if (!mounted) return;\n      setUser(u);\n      setReady(true);\n    })();\n    const unsubscribe = client.onAuthChange((u) => {\n      if (mounted) setUser(u);\n    });\n    return () => {\n      mounted = false;\n      unsubscribe();\n    };\n  }, [client]);\n\n  const value = useMemo(() => ({ client, user, ready }), [client, user, ready]);\n  return (\n    <OpenFederationContext.Provider value={value}>\n      {children}\n    </OpenFederationContext.Provider>\n  );\n}\n\n/** Internal — use the public hooks from `./hooks.ts` instead. */\nexport function useOpenFederationContext(): OpenFederationContextValue {\n  const ctx = useContext(OpenFederationContext);\n  if (!ctx) {\n    throw new Error(\n      'OpenFederation hooks/components must be used inside <OpenFederationProvider>. ' +\n      'Wrap your app root with it.'\n    );\n  }\n  return ctx;\n}\n","import { useCallback, useEffect, useState } from 'react';\nimport type {\n  OpenFederationClient,\n  User,\n  LoginOptions,\n  RegisterOptions,\n  SignInWithOpenFederationOptions,\n  SiwofAssertResponse,\n  WalletLink,\n} from '@open-federation/sdk';\nimport { useOpenFederationContext } from './provider.js';\n\nexport type { User, WalletLink };\n\n/** Get the underlying OpenFederation SDK client directly. */\nexport function useOFClient(): OpenFederationClient {\n  return useOpenFederationContext().client;\n}\n\nexport interface OFSession {\n  user: User | null;\n  ready: boolean;\n  isAuthenticated: boolean;\n  client: OpenFederationClient;\n  login: (opts: LoginOptions) => Promise<User>;\n  register: (opts: RegisterOptions) => Promise<User>;\n  logout: () => Promise<void>;\n}\n\n/**\n * Primary hook for reading auth state and kicking off login / register /\n * logout. Re-renders automatically when the SDK's auth state changes.\n *\n * @example\n * ```tsx\n * const { user, login, logout, isAuthenticated } = useOFSession();\n * if (!isAuthenticated) return <LoginForm onSubmit={login} />;\n * return <div>Welcome, @{user.handle} <button onClick={logout}>Sign out</button></div>;\n * ```\n */\nexport function useOFSession(): OFSession {\n  const { client, user, ready } = useOpenFederationContext();\n\n  const login = useCallback((opts: LoginOptions) => client.login(opts), [client]);\n  const register = useCallback((opts: RegisterOptions) => client.register(opts), [client]);\n  const logout = useCallback(() => client.logout(), [client]);\n\n  return {\n    user,\n    ready,\n    isAuthenticated: user !== null,\n    client,\n    login,\n    register,\n    logout,\n  };\n}\n\nexport interface OFWallets {\n  wallets: WalletLink[];\n  loading: boolean;\n  error: Error | null;\n  refresh: () => Promise<void>;\n  /**\n   * Convenience wrapper for client.signInWithOpenFederation — runs the\n   * full SIWOF flow and returns the assertion the dApp needs.\n   */\n  signIn: (opts: SignInWithOpenFederationOptions) => Promise<SiwofAssertResponse>;\n}\n\n/**\n * Hook for reading the current user's wallet portfolio and issuing SIWOF\n * assertions from React components.\n *\n * @example\n * ```tsx\n * const { wallets, signIn } = useOFWallet();\n *\n * async function handleSignIn() {\n *   const eth = wallets.find(w => w.chain === 'ethereum');\n *   if (!eth) return;\n *   const assertion = await signIn({\n *     chain: 'ethereum',\n *     walletAddress: eth.walletAddress,\n *     audience: window.location.origin,\n *   });\n *   // POST assertion.didToken + assertion.walletProof to your backend.\n * }\n * ```\n */\nexport function useOFWallet(): OFWallets {\n  const { client, user } = useOpenFederationContext();\n  const [wallets, setWallets] = useState<WalletLink[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const refresh = useCallback(async () => {\n    if (!user) {\n      setWallets([]);\n      return;\n    }\n    setLoading(true);\n    setError(null);\n    try {\n      const res = await client.listWalletLinks();\n      setWallets(res.walletLinks);\n    } catch (err) {\n      setError(err as Error);\n    } finally {\n      setLoading(false);\n    }\n  }, [client, user]);\n\n  useEffect(() => {\n    refresh();\n  }, [refresh]);\n\n  const signIn = useCallback(\n    (opts: SignInWithOpenFederationOptions) => client.signInWithOpenFederation(opts),\n    [client]\n  );\n\n  return { wallets, loading, error, refresh, signIn };\n}\n","import React, { useCallback, useState } from 'react';\nimport type {\n  SiwofAssertResponse,\n  WalletChain,\n} from '@open-federation/sdk';\nimport { useOpenFederationContext } from './provider.js';\n\nexport interface SignInWithOpenFederationProps {\n  /** Chain to sign in with. */\n  chain: WalletChain;\n  /**\n   * Wallet address to sign the SIWOF message with. If omitted, the user's\n   * primary wallet for the chain is used (looked up via listWalletLinks).\n   */\n  walletAddress?: string;\n  /**\n   * Full audience URL (your dApp). Defaults to `window.location.origin`.\n   */\n  audience?: string;\n  /** Optional prompt rendered inside the CAIP-122 message. */\n  statement?: string;\n  /** Callback invoked with the offline-verifiable assertion on success. */\n  onSuccess: (assertion: SiwofAssertResponse) => void;\n  /** Callback invoked with any error from the sign-in attempt. */\n  onError?: (error: Error) => void;\n  /** Customize the button label. Defaults to \"Sign in with OpenFederation\". */\n  label?: React.ReactNode;\n  /** Replace the default button with a render-prop for full control. */\n  render?: (props: {\n    onClick: () => void;\n    loading: boolean;\n    disabled: boolean;\n  }) => React.ReactElement;\n  /** Optional extra classes for the default button. */\n  className?: string;\n  /** Optional inline styles for the default button. */\n  style?: React.CSSProperties;\n}\n\nconst DEFAULT_STYLE: React.CSSProperties = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '0.5rem',\n  padding: '0.625rem 1rem',\n  border: '1px solid rgba(0,0,0,0.1)',\n  borderRadius: '0.5rem',\n  background: '#111',\n  color: '#fff',\n  fontWeight: 600,\n  cursor: 'pointer',\n};\n\n/**\n * Drop-in button that runs the full Sign-In With OpenFederation flow.\n *\n * @example\n * ```tsx\n * <SignInWithOpenFederation\n *   chain=\"ethereum\"\n *   audience={window.location.origin}\n *   onSuccess={(assertion) => {\n *     fetch('/api/login', { method: 'POST', body: JSON.stringify(assertion) });\n *   }}\n * />\n * ```\n */\nexport function SignInWithOpenFederation(props: SignInWithOpenFederationProps): React.ReactElement {\n  const { client, user } = useOpenFederationContext();\n  const [loading, setLoading] = useState(false);\n\n  const disabled = !user || loading;\n\n  const handleClick = useCallback(async () => {\n    if (disabled) return;\n    setLoading(true);\n    try {\n      // Resolve wallet address if omitted.\n      let walletAddress = props.walletAddress;\n      if (!walletAddress) {\n        const list = await client.listWalletLinks();\n        const primaryOnChain = list.walletLinks.find(\n          (w) => w.chain === props.chain\n        );\n        if (!primaryOnChain) {\n          throw new Error(\n            `No wallet found on chain \"${props.chain}\" for this account. Provision or link one first.`\n          );\n        }\n        walletAddress = primaryOnChain.walletAddress;\n      }\n\n      const audience = props.audience\n        ?? (typeof window !== 'undefined' ? window.location.origin : undefined);\n      if (!audience) {\n        throw new Error('audience is required (no window.location available)');\n      }\n\n      const assertion = await client.signInWithOpenFederation({\n        chain: props.chain,\n        walletAddress,\n        audience,\n        statement: props.statement,\n      });\n      props.onSuccess(assertion);\n    } catch (err) {\n      if (props.onError) props.onError(err as Error);\n      else throw err;\n    } finally {\n      setLoading(false);\n    }\n  }, [client, disabled, props]);\n\n  if (props.render) {\n    return props.render({ onClick: handleClick, loading, disabled });\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled}\n      className={props.className}\n      style={{ ...DEFAULT_STYLE, opacity: disabled ? 0.6 : 1, ...(props.style ?? {}) }}\n      data-openfederation-signin\n    >\n      {loading\n        ? 'Signing…'\n        : (props.label ?? 'Sign in with OpenFederation')}\n    </button>\n  );\n}\n"],"mappings":"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","names":["useEffect","useState","useState","useEffect","useCallback","useState","jsx","useState","useCallback"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@open-federation/react",
+  "version": "0.1.0",
+  "description": "React bindings for @open-federation/sdk — provider, hooks, and a drop-in Sign In With OpenFederation button.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@open-federation/sdk": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "happy-dom": "^20.9.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "keywords": [
+    "openfederation",
+    "react",
+    "web3",
+    "did",
+    "sign-in"
+  ],
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OpenFederationPDS/OpenFederationPDS"
+  }
+}