feat: add alchemy accounts context

packages/alchemy/package.json

@@ -26,6 +26,16 @@
       "import": "./dist/esm/index.js",
       "default": "./dist/cjs/index.js"
     },
+    "./config": {
+      "types": "./dist/types/config/index.d.ts",
+      "import": "./dist/esm/config/index.js",
+      "default": "./dist/cjs/config/index.js"
+    },
+    "./react": {
+      "types": "./dist/types/react/index.d.ts",
+      "import": "./dist/esm/react/index.js",
+      "default": "./dist/cjs/react/index.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -41,6 +51,9 @@
   },
   "devDependencies": {
     "@alchemy/aa-accounts": "*",
+    "@tanstack/react-query": "^5.28.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.0.4",
     "typescript-template": "*",
     "vitest": "^0.31.0"
@@ -56,8 +69,22 @@
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.28.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "viem": "2.8.6"
   },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

packages/alchemy/src/config/actions/createAccount.ts

@@ -0,0 +1,107 @@
+import {
+  createLightAccount,
+  createMultiOwnerModularAccount,
+  type CreateLightAccountParams,
+  type CreateMultiOwnerModularAccountParams,
+} from "@alchemy/aa-accounts";
+import { custom } from "viem";
+import { ClientOnlyPropertyError } from "../errors.js";
+import type {
+  AlchemyAccountsConfig,
+  SupportedAccountTypes,
+  SupportedAccounts,
+} from "../types";
+import { getSignerStatus } from "./getSignerStatus.js";
+
+export type AccountConfig<TAccount extends SupportedAccountTypes> =
+  TAccount extends "LightAccount"
+    ? Omit<CreateLightAccountParams, "signer" | "transport" | "chain">
+    : Omit<
+        CreateMultiOwnerModularAccountParams,
+        "signer" | "transport" | "chain"
+      >;
+
+export type CreateAccountParams<TAccount extends SupportedAccountTypes> = {
+  type: TAccount;
+  accountParams?: AccountConfig<TAccount>;
+};
+
+export async function createAccount<TAccount extends SupportedAccountTypes>(
+  { type, accountParams: params }: CreateAccountParams<TAccount>,
+  config: AlchemyAccountsConfig
+): Promise<SupportedAccounts> {
+  const clientStore = config.clientStore;
+  if (!clientStore) {
+    throw new ClientOnlyPropertyError("account");
+  }
+
+  const transport = custom(config.bundlerClient);
+  const chain = config.bundlerClient.chain;
+  const signer = config.signer;
+  const signerStatus = getSignerStatus(config);
+
+  if (!signerStatus.isConnected) {
+    throw new Error("Signer not connected");
+  }
+
+  const cachedAccount = clientStore.getState().accounts[type];
+  if (cachedAccount?.account) {
+    return cachedAccount.account;
+  }
+
+  const accountPromise = (() => {
+    switch (type) {
+      case "LightAccount":
+        return createLightAccount({
+          ...params,
+          signer,
+          transport: (opts) => transport({ ...opts, retryCount: 0 }),
+          chain,
+        });
+      case "MultiOwnerModularAccount":
+        return createMultiOwnerModularAccount({
+          ...params,
+          signer,
+          transport: (opts) => transport({ ...opts, retryCount: 0 }),
+          chain,
+        });
+      default:
+        throw new Error("Unsupported account type");
+    }
+  })();
+
+  clientStore.setState((state) => ({
+    accounts: {
+      ...state.accounts,
+      [type]: {
+        status: "INITIALIZING",
+        account: accountPromise,
+      },
+    },
+  }));
+
+  try {
+    const account = await accountPromise;
+    clientStore.setState((state) => ({
+      accounts: {
+        ...state.accounts,
+        [type]: {
+          status: "READY",
+          account,
+        },
+      },
+    }));
+  } catch (error) {
+    clientStore.setState((state) => ({
+      accounts: {
+        ...state.accounts,
+        [type]: {
+          status: "ERROR",
+          error,
+        },
+      },
+    }));
+  }
+
+  return accountPromise;
+}

packages/alchemy/src/config/actions/getAccount.ts

@@ -0,0 +1,22 @@
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { AccountState } from "../store/types.js";
+import type { AlchemyAccountsConfig, SupportedAccountTypes } from "../types";
+import { type CreateAccountParams } from "./createAccount.js";
+
+export type GetAccountResult<TAccount extends SupportedAccountTypes> =
+  AccountState<TAccount>;
+
+export type GetAccountParams<TAccount extends SupportedAccountTypes> =
+  CreateAccountParams<TAccount>;
+
+export const getAccount = <TAccount extends SupportedAccountTypes>(
+  { type }: GetAccountParams<TAccount>,
+  config: AlchemyAccountsConfig
+): GetAccountResult<TAccount> => {
+  const clientStore = config.clientStore;
+  if (!clientStore) {
+    throw new ClientOnlyPropertyError("account");
+  }
+
+  return clientStore.getState().accounts[type];
+};

packages/alchemy/src/config/actions/getBundlerClient.ts

@@ -0,0 +1,8 @@
+import type { ClientWithAlchemyMethods } from "../../client/types";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const getBundlerClient = (
+  config: AlchemyAccountsConfig
+): ClientWithAlchemyMethods => {
+  return config.coreStore.getState().bundlerClient;
+};

packages/alchemy/src/config/actions/getSigner.ts

@@ -0,0 +1,11 @@
+import type { AlchemySigner } from "../../signer/signer.js";
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const getSigner = (config: AlchemyAccountsConfig): AlchemySigner => {
+  if (config.clientStore == null) {
+    throw new ClientOnlyPropertyError("signer");
+  }
+
+  return config.clientStore.getState().signer;
+};

packages/alchemy/src/config/actions/getSignerStatus.ts

@@ -0,0 +1,10 @@
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const getSignerStatus = (config: AlchemyAccountsConfig) => {
+  if (config.clientStore == null) {
+    throw new ClientOnlyPropertyError("signerStatus");
+  }
+
+  return config.clientStore.getState().signerStatus;
+};

packages/alchemy/src/config/actions/getUser.ts

@@ -0,0 +1,10 @@
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const getUser = (config: AlchemyAccountsConfig) => {
+  if (config.clientStore == null) {
+    throw new ClientOnlyPropertyError("user");
+  }
+
+  return config.clientStore.getState().user;
+};

packages/alchemy/src/config/actions/watchAccount.ts

@@ -0,0 +1,30 @@
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { AlchemyAccountsConfig, SupportedAccountTypes } from "../types";
+import type { GetAccountResult } from "./getAccount";
+
+export const watchAccount =
+  <TAccount extends SupportedAccountTypes>(
+    type: TAccount,
+    config: AlchemyAccountsConfig
+  ) =>
+  (onChange: (account: GetAccountResult<TAccount>) => void) => {
+    if (config.clientStore == null) {
+      throw new ClientOnlyPropertyError("account");
+    }
+
+    return config.clientStore.subscribe(
+      ({ accounts }) => accounts[type],
+      onChange,
+      {
+        fireImmediately: true,
+        equalityFn(a, b) {
+          return (
+            (a?.status === "READY" &&
+              b?.status === "READY" &&
+              a.account.address === b.account.address) ||
+            a?.status === b?.status
+          );
+        },
+      }
+    );
+  };

packages/alchemy/src/config/actions/watchBundlerClient.ts

@@ -0,0 +1,12 @@
+import type { ClientWithAlchemyMethods } from "../../client/types";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const watchBundlerClient =
+  (config: AlchemyAccountsConfig) =>
+  (onChange: (bundlerClient: ClientWithAlchemyMethods) => void) => {
+    return config.coreStore.subscribe(
+      ({ bundlerClient }) => bundlerClient,
+      onChange,
+      { fireImmediately: true }
+    );
+  };

packages/alchemy/src/config/actions/watchSigner.ts

@@ -0,0 +1,15 @@
+import type { AlchemySigner } from "../../signer";
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const watchSigner =
+  (config: AlchemyAccountsConfig) =>
+  (onChange: (signer: AlchemySigner) => void) => {
+    if (config.clientStore == null) {
+      throw new ClientOnlyPropertyError("signer");
+    }
+
+    return config.clientStore.subscribe(({ signer }) => signer, onChange, {
+      fireImmediately: true,
+    });
+  };

packages/alchemy/src/config/actions/watchSignerStatus.ts

@@ -0,0 +1,17 @@
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { SignerStatus } from "../store/types.js";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const watchSignerStatus =
+  (config: AlchemyAccountsConfig) =>
+  (onChange: (status: SignerStatus) => void) => {
+    if (config.clientStore == null) {
+      throw new ClientOnlyPropertyError("signerStatus");
+    }
+
+    return config.clientStore.subscribe(
+      ({ signerStatus }) => signerStatus,
+      onChange,
+      { fireImmediately: true }
+    );
+  };

packages/alchemy/src/config/actions/watchUser.ts

@@ -0,0 +1,14 @@
+import type { User } from "../../signer";
+import { ClientOnlyPropertyError } from "../errors.js";
+import type { AlchemyAccountsConfig } from "../types";
+
+export const watchUser =
+  (config: AlchemyAccountsConfig) => (onChange: (user?: User) => void) => {
+    if (config.clientStore == null) {
+      throw new ClientOnlyPropertyError("user");
+    }
+
+    return config.clientStore.subscribe(({ user }) => user, onChange, {
+      fireImmediately: true,
+    });
+  };

packages/alchemy/src/config/createConfig.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { ConnectionConfigSchema } from "@alchemy/aa-core";
+import { getBundlerClient } from "./actions/getBundlerClient.js";
+import { getSigner } from "./actions/getSigner.js";
+import { createClientStore } from "./store/client.js";
+import { createCoreStore } from "./store/core.js";
+import type { AlchemyAccountsConfig, CreateConfigProps } from "./types";
+
+export const DEFAULT_IFRAME_CONTAINER_ID = "alchemy-signer-iframe-container";
+
+export const createConfig = ({
+  chain,
+  iframeConfig,
+  rootOrgId,
+  rpId,
+  sessionConfig,
+  signerConnection,
+  ...connectionConfig
+}: CreateConfigProps): AlchemyAccountsConfig => {
+  const connection = ConnectionConfigSchema.parse(connectionConfig);
+
+  const config: AlchemyAccountsConfig = {
+    coreStore: createCoreStore({ connection, chain }),
+    clientStore: createClientStore({
+      client: {
+        connection: signerConnection ?? connection,
+        iframeConfig,
+        rootOrgId,
+        rpId,
+      },
+      sessionConfig,
+    }),
+    // these are just here for convenience right now, but you can do all of this with actions on the stores as well
+    get bundlerClient() {
+      return getBundlerClient(config);
+    },
+    get signer() {
+      return getSigner(config);
+    },
+  };
+
+  return config;
+};

packages/alchemy/src/config/errors.ts

@@ -0,0 +1,9 @@
+import { BaseError } from "../errors/base.js";
+
+export class ClientOnlyPropertyError extends BaseError {
+  name: string = "ClientOnlyPropertyError";
+
+  constructor(property: string) {
+    super(`${property} is only available on the client`);
+  }
+}

packages/alchemy/src/config/index.ts

@@ -0,0 +1,14 @@
+export { createAccount } from "./actions/createAccount.js";
+export { getAccount } from "./actions/getAccount.js";
+export { getBundlerClient } from "./actions/getBundlerClient.js";
+export { getSigner } from "./actions/getSigner.js";
+export { getSignerStatus } from "./actions/getSignerStatus.js";
+export { getUser } from "./actions/getUser.js";
+export { watchAccount } from "./actions/watchAccount.js";
+export { watchBundlerClient } from "./actions/watchBundlerClient.js";
+export { watchSigner } from "./actions/watchSigner.js";
+export { watchSignerStatus } from "./actions/watchSignerStatus.js";
+export { watchUser } from "./actions/watchUser.js";
+export { DEFAULT_IFRAME_CONTAINER_ID, createConfig } from "./createConfig.js";
+export { defaultAccountState } from "./store/client.js";
+export type * from "./types.js";