@provablehq/aleo-wallet-adaptor-react 0.1.1-alpha.0

package/README.md

@@ -0,0 +1,36 @@
+# @provablehq/aleo-wallet-adaptor-react
+
+React context, hooks, and utilities for consuming Aleo wallet adapters in browser applications.
+
+## When to use it
+
+- Wrap your React tree with a wallet provider that manages connection state, auto-connect, and error handling.
+- Access wallet methods (`connect`, `executeTransaction`, `decrypt`, etc.) through a simple `useWallet` hook.
+- Pair with the UI kit (`@provablehq/aleo-wallet-adaptor-react-ui`) or build your own custom interface.
+
+## Installation
+
+```bash
+pnpm add @provablehq/aleo-wallet-adaptor-react
+```
+
+## Quick start
+
+```tsx
+import { AleoWalletProvider } from '@provablehq/aleo-wallet-adaptor-react';
+import { GalileoWalletAdapter } from '@provablehq/aleo-wallet-adaptor-prove-alpha';
+
+const wallets = [new GalileoWalletAdapter()];
+
+export function App({ children }: { children: React.ReactNode }) {
+  return <AleoWalletProvider wallets={wallets}>{children}</AleoWalletProvider>;
+}
+```
+
+## Related packages
+
+- `@provablehq/aleo-wallet-adaptor-core` – underlying adapter interfaces consumed by the provider.
+- `@provablehq/aleo-wallet-adaptor-react-ui` – drop-in modals and buttons that work with this context.
+- Wallet adapters such as `@provablehq/aleo-wallet-adaptor-prove-alpha`, `-puzzle`, `-leo`, etc.
+
+Live demo: https://aleo-dev-toolkit-react-app.vercel.app/

package/dist/index.d.mts

@@ -0,0 +1,121 @@
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { WalletAdapter, WalletReadyState, WalletName, AleoDeployment } from '@provablehq/aleo-wallet-standard';
+import { Network, TransactionOptions, TransactionStatusResponse } from '@provablehq/aleo-types';
+import { WalletError, DecryptPermission } from '@provablehq/aleo-wallet-adaptor-core';
+
+interface Wallet {
+    adapter: WalletAdapter;
+    readyState: WalletReadyState;
+}
+/**
+ * Wallet context state
+ */
+interface WalletContextState {
+    /**
+     * All available wallet adapters
+     */
+    wallets: Wallet[];
+    /**
+     * The connected wallet adapter
+     */
+    wallet: Wallet | null;
+    /**
+     * The connected account
+     */
+    address: string | null;
+    /**
+     * Whether the wallet is connected
+     */
+    connected: boolean;
+    /**
+     * Whether the wallet is connecting
+     */
+    connecting: boolean;
+    /**
+     * Whether the wallet is disconnecting
+     */
+    disconnecting: boolean;
+    /**
+     * Whether the wallet is auto-connecting
+     */
+    autoConnect: boolean;
+    /**
+     * The current network
+     */
+    network: Network | null;
+    /**
+     * Select a wallet by name
+     * @param name The name of the wallet to select
+     */
+    selectWallet: (name: WalletName) => void;
+    /**
+     * Connect to the selected wallet
+     */
+    connect: (network: Network) => Promise<void>;
+    /**
+     * Disconnect from the connected wallet
+     */
+    disconnect: () => Promise<void>;
+    /**
+     * Execute a transaction
+     */
+    executeTransaction: (options: TransactionOptions) => Promise<{
+        transactionId: string;
+    } | undefined>;
+    /**
+     * Get transaction status
+     */
+    transactionStatus: (transactionId: string) => Promise<TransactionStatusResponse>;
+    /**
+     * Sign a message
+     */
+    signMessage: (message: Uint8Array | string) => Promise<Uint8Array | undefined>;
+    /**
+     * Switch the network
+     */
+    switchNetwork: (network: Network) => Promise<boolean>;
+    /**
+     * Decrypt a ciphertext
+     */
+    decrypt: (cipherText: string) => Promise<string>;
+    /**
+     * Request records
+     */
+    requestRecords: (program: string, includePlaintext?: boolean) => Promise<unknown[]>;
+    /**
+     * Execute a deployment
+     */
+    executeDeployment: (deployment: AleoDeployment) => Promise<{
+        transactionId: string;
+    }>;
+}
+/**
+ * Wallet context
+ */
+declare const WalletContext: react.Context<WalletContextState | undefined>;
+/**
+ * Custom hook to use the wallet context
+ * @returns The wallet context state
+ */
+declare function useWalletContext(): WalletContextState;
+
+interface WalletProviderProps {
+    children: ReactNode;
+    wallets: WalletAdapter[];
+    network?: Network;
+    autoConnect?: boolean;
+    onError?: (error: WalletError) => void;
+    localStorageKey?: string;
+    decryptPermission?: DecryptPermission;
+    programs?: string[];
+}
+declare const AleoWalletProvider: FC<WalletProviderProps>;
+
+/**
+ * Custom hook to use the wallet
+ * @returns The wallet context state
+ */
+declare function useWallet(): WalletContextState;
+
+export { AleoWalletProvider, type Wallet, WalletContext, type WalletContextState, useWallet, useWalletContext };

package/dist/index.d.ts

@@ -0,0 +1,121 @@
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { WalletAdapter, WalletReadyState, WalletName, AleoDeployment } from '@provablehq/aleo-wallet-standard';
+import { Network, TransactionOptions, TransactionStatusResponse } from '@provablehq/aleo-types';
+import { WalletError, DecryptPermission } from '@provablehq/aleo-wallet-adaptor-core';
+
+interface Wallet {
+    adapter: WalletAdapter;
+    readyState: WalletReadyState;
+}
+/**
+ * Wallet context state
+ */
+interface WalletContextState {
+    /**
+     * All available wallet adapters
+     */
+    wallets: Wallet[];
+    /**
+     * The connected wallet adapter
+     */
+    wallet: Wallet | null;
+    /**
+     * The connected account
+     */
+    address: string | null;
+    /**
+     * Whether the wallet is connected
+     */
+    connected: boolean;
+    /**
+     * Whether the wallet is connecting
+     */
+    connecting: boolean;
+    /**
+     * Whether the wallet is disconnecting
+     */
+    disconnecting: boolean;
+    /**
+     * Whether the wallet is auto-connecting
+     */
+    autoConnect: boolean;
+    /**
+     * The current network
+     */
+    network: Network | null;
+    /**
+     * Select a wallet by name
+     * @param name The name of the wallet to select
+     */
+    selectWallet: (name: WalletName) => void;
+    /**
+     * Connect to the selected wallet
+     */
+    connect: (network: Network) => Promise<void>;
+    /**
+     * Disconnect from the connected wallet
+     */
+    disconnect: () => Promise<void>;
+    /**
+     * Execute a transaction
+     */
+    executeTransaction: (options: TransactionOptions) => Promise<{
+        transactionId: string;
+    } | undefined>;
+    /**
+     * Get transaction status
+     */
+    transactionStatus: (transactionId: string) => Promise<TransactionStatusResponse>;
+    /**
+     * Sign a message
+     */
+    signMessage: (message: Uint8Array | string) => Promise<Uint8Array | undefined>;
+    /**
+     * Switch the network
+     */
+    switchNetwork: (network: Network) => Promise<boolean>;
+    /**
+     * Decrypt a ciphertext
+     */
+    decrypt: (cipherText: string) => Promise<string>;
+    /**
+     * Request records
+     */
+    requestRecords: (program: string, includePlaintext?: boolean) => Promise<unknown[]>;
+    /**
+     * Execute a deployment
+     */
+    executeDeployment: (deployment: AleoDeployment) => Promise<{
+        transactionId: string;
+    }>;
+}
+/**
+ * Wallet context
+ */
+declare const WalletContext: react.Context<WalletContextState | undefined>;
+/**
+ * Custom hook to use the wallet context
+ * @returns The wallet context state
+ */
+declare function useWalletContext(): WalletContextState;
+
+interface WalletProviderProps {
+    children: ReactNode;
+    wallets: WalletAdapter[];
+    network?: Network;
+    autoConnect?: boolean;
+    onError?: (error: WalletError) => void;
+    localStorageKey?: string;
+    decryptPermission?: DecryptPermission;
+    programs?: string[];
+}
+declare const AleoWalletProvider: FC<WalletProviderProps>;
+
+/**
+ * Custom hook to use the wallet
+ * @returns The wallet context state
+ */
+declare function useWallet(): WalletContextState;
+
+export { AleoWalletProvider, type Wallet, WalletContext, type WalletContextState, useWallet, useWalletContext };

package/dist/index.js

@@ -0,0 +1,406 @@
+"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, {
+  AleoWalletProvider: () => AleoWalletProvider,
+  WalletContext: () => WalletContext,
+  useWallet: () => useWallet,
+  useWalletContext: () => useWalletContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.ts
+var import_react = require("react");
+var WalletContext = (0, import_react.createContext)(void 0);
+function useWalletContext() {
+  const ctx = (0, import_react.useContext)(WalletContext);
+  if (!ctx) {
+    throw new Error("`useWalletContext` must be used inside `AleoWalletProvider`");
+  }
+  return ctx;
+}
+
+// src/WalletProvider.tsx
+var import_react3 = require("react");
+var import_aleo_wallet_standard = require("@provablehq/aleo-wallet-standard");
+var import_aleo_types = require("@provablehq/aleo-types");
+
+// src/useLocalStorage.ts
+var import_react2 = require("react");
+function useLocalStorage(key, defaultState) {
+  const state = (0, import_react2.useState)(() => {
+    try {
+      const value2 = localStorage.getItem(key);
+      if (value2) return JSON.parse(value2);
+    } catch (error) {
+      if (typeof window !== "undefined") {
+        console.error(error);
+      }
+    }
+    return defaultState;
+  });
+  const value = state[0];
+  const isFirstRender = (0, import_react2.useRef)(true);
+  (0, import_react2.useEffect)(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    try {
+      if (value === null) {
+        localStorage.removeItem(key);
+      } else {
+        localStorage.setItem(key, JSON.stringify(value));
+      }
+    } catch (error) {
+      if (typeof window !== "undefined") {
+        console.error(error);
+      }
+    }
+  }, [value, key]);
+  return state;
+}
+
+// src/WalletProvider.tsx
+var import_aleo_wallet_adaptor_core = require("@provablehq/aleo-wallet-adaptor-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var initialState = {
+  wallet: null,
+  adapter: null,
+  publicKey: null,
+  connected: false,
+  network: null
+};
+var AleoWalletProvider = ({
+  children,
+  wallets: adapters,
+  autoConnect = false,
+  network: initialNetwork = import_aleo_types.Network.TESTNET3,
+  onError,
+  localStorageKey = "walletName",
+  decryptPermission = import_aleo_wallet_adaptor_core.DecryptPermission.NoDecrypt,
+  programs
+}) => {
+  const [name, setName] = useLocalStorage(localStorageKey, null);
+  const [{ wallet, adapter, publicKey, connected, network }, setState] = (0, import_react3.useState)(initialState);
+  const readyState = adapter?.readyState || import_aleo_wallet_standard.WalletReadyState.UNSUPPORTED;
+  const [connecting, setConnecting] = (0, import_react3.useState)(false);
+  const [disconnecting, setDisconnecting] = (0, import_react3.useState)(false);
+  const isConnecting = (0, import_react3.useRef)(false);
+  const isDisconnecting = (0, import_react3.useRef)(false);
+  const isUnloading = (0, import_react3.useRef)(false);
+  const [wallets, setWallets] = (0, import_react3.useState)(
+    () => adapters.map((adapter2) => ({
+      adapter: adapter2,
+      readyState: adapter2.readyState
+    }))
+  );
+  (0, import_react3.useEffect)(() => {
+    setWallets(
+      (wallets2) => adapters.map((adapter2, index) => {
+        const wallet2 = wallets2[index];
+        return wallet2 && wallet2.adapter === adapter2 && wallet2.readyState === adapter2.readyState ? wallet2 : {
+          adapter: adapter2,
+          readyState: adapter2.readyState
+        };
+      })
+    );
+    function handleReadyStateChange(readyState2) {
+      setWallets((prevWallets) => {
+        const index = prevWallets.findIndex(({ adapter: adapter3 }) => adapter3 === this);
+        if (index === -1) return prevWallets;
+        const { adapter: adapter2 } = prevWallets[index];
+        return [
+          ...prevWallets.slice(0, index),
+          { adapter: adapter2, readyState: readyState2 },
+          ...prevWallets.slice(index + 1)
+        ];
+      });
+    }
+    function handleNetworkChange(network2) {
+      setState((state) => ({
+        ...state,
+        network: network2
+      }));
+    }
+    adapters.forEach((adapter2) => adapter2.on("readyStateChange", handleReadyStateChange, adapter2));
+    adapters.forEach((adapter2) => adapter2.on("networkChange", handleNetworkChange, adapter2));
+    return () => {
+      adapters.forEach((adapter2) => adapter2.off("readyStateChange", handleReadyStateChange, adapter2));
+      adapters.forEach((adapter2) => adapter2.off("networkChange", handleNetworkChange, adapter2));
+    };
+  }, [adapters]);
+  (0, import_react3.useEffect)(() => {
+    const wallet2 = name && wallets.find(({ adapter: adapter2 }) => adapter2.name === name);
+    if (wallet2) {
+      setState({
+        wallet: wallet2,
+        adapter: wallet2.adapter,
+        connected: wallet2.adapter.connected,
+        publicKey: wallet2.adapter.account?.address ?? null,
+        network: wallet2.adapter.network ?? null
+      });
+    } else {
+      setState(initialState);
+    }
+  }, [name, wallets]);
+  (0, import_react3.useEffect)(() => {
+    function listener() {
+      isUnloading.current = true;
+    }
+    window.addEventListener("beforeunload", listener);
+    return () => window.removeEventListener("beforeunload", listener);
+  }, [isUnloading]);
+  const handleConnect = (0, import_react3.useCallback)(() => {
+    if (!adapter) return;
+    setState((state) => ({
+      ...state,
+      connected: adapter.connected,
+      publicKey: adapter.account?.address ?? null,
+      network: adapter.network ?? null
+    }));
+  }, [adapter]);
+  const handleDisconnect = (0, import_react3.useCallback)(() => {
+    if (!isUnloading.current) setName(null);
+  }, [isUnloading, setName]);
+  const handleError = (0, import_react3.useCallback)(
+    (error) => {
+      if (!isUnloading.current) (onError || console.error)(error);
+      return error;
+    },
+    [isUnloading, onError]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (adapter) {
+      adapter.on("connect", handleConnect);
+      adapter.on("disconnect", handleDisconnect);
+      adapter.on("error", handleError);
+      return () => {
+        adapter.off("connect", handleConnect);
+        adapter.off("disconnect", handleDisconnect);
+        adapter.off("error", handleError);
+      };
+    }
+  }, [adapter, handleConnect, handleDisconnect, handleError]);
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (adapter && adapter.connected) {
+        adapter.disconnect();
+      }
+    };
+  }, [adapter]);
+  (0, import_react3.useEffect)(() => {
+    if (isConnecting.current || connected || !autoConnect || !adapter || !(readyState === import_aleo_wallet_standard.WalletReadyState.INSTALLED || readyState === import_aleo_wallet_standard.WalletReadyState.LOADABLE))
+      return;
+    (async function() {
+      isConnecting.current = true;
+      setConnecting(true);
+      try {
+        await adapter.connect(initialNetwork, decryptPermission, programs);
+      } catch (error) {
+        setName(null);
+      } finally {
+        setConnecting(false);
+        isConnecting.current = false;
+      }
+    })();
+  }, [isConnecting, connected, autoConnect, adapter, readyState, setName]);
+  (0, import_react3.useEffect)(() => {
+    if (adapter && connected && adapter.network !== initialNetwork) {
+      try {
+        switchNetwork(initialNetwork);
+      } catch (error) {
+        console.error("Failed to switch network, disconnecting");
+        disconnect();
+      }
+    }
+  }, [initialNetwork]);
+  (0, import_react3.useEffect)(() => {
+    if (adapter && connected) {
+      disconnect();
+    }
+  }, [decryptPermission, programs]);
+  const connect = (0, import_react3.useCallback)(async () => {
+    if (isConnecting.current || isDisconnecting.current || connected) return;
+    if (!adapter) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotSelectedError());
+    if (!(readyState === import_aleo_wallet_standard.WalletReadyState.INSTALLED || readyState === import_aleo_wallet_standard.WalletReadyState.LOADABLE)) {
+      setName(null);
+      if (typeof window !== "undefined") {
+        window.open(adapter.url, "_blank");
+      }
+      throw handleError(new import_aleo_wallet_adaptor_core.WalletNotReadyError());
+    }
+    isConnecting.current = true;
+    setConnecting(true);
+    try {
+      await adapter.connect(initialNetwork, decryptPermission, programs);
+    } catch (error) {
+      setName(null);
+      throw error;
+    } finally {
+      setConnecting(false);
+      isConnecting.current = false;
+    }
+  }, [isConnecting, isDisconnecting, connected, adapter, readyState, handleError, setName]);
+  const disconnect = (0, import_react3.useCallback)(async () => {
+    if (isDisconnecting.current) return;
+    if (!adapter) return setName(null);
+    isDisconnecting.current = true;
+    setDisconnecting(true);
+    try {
+      await adapter.disconnect();
+    } catch (error) {
+      setName(null);
+      throw error;
+    } finally {
+      setDisconnecting(false);
+      isDisconnecting.current = false;
+    }
+  }, [isDisconnecting, adapter, setName]);
+  const executeTransaction = (0, import_react3.useCallback)(
+    async (transaction) => {
+      if (!connected) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotConnectedError());
+      if (!adapter || !("executeTransaction" in adapter))
+        throw handleError(new import_aleo_wallet_adaptor_core.MethodNotImplementedError("executeTransaction"));
+      await checkNetwork();
+      return await adapter.executeTransaction(transaction);
+    },
+    [adapter, handleError, connected]
+  );
+  const transactionStatus = (0, import_react3.useCallback)(
+    async (transactionId) => {
+      if (!connected) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotConnectedError());
+      if (!adapter || !("transactionStatus" in adapter))
+        throw handleError(new import_aleo_wallet_adaptor_core.MethodNotImplementedError("transactionStatus"));
+      return await adapter.transactionStatus(transactionId);
+    },
+    [adapter, handleError, connected]
+  );
+  const signMessage = (0, import_react3.useMemo)(
+    () => async (message) => {
+      if (!connected) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotConnectedError());
+      if (!adapter || !("signMessage" in adapter))
+        throw handleError(new import_aleo_wallet_adaptor_core.MethodNotImplementedError("signMessage"));
+      return await adapter.signMessage(
+        typeof message === "string" ? new TextEncoder().encode(message) : message
+      );
+    },
+    [adapter, handleError, connected]
+  );
+  const switchNetwork = (0, import_react3.useCallback)(
+    async (network2) => {
+      if (!connected) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotConnectedError());
+      if (!adapter || !("switchNetwork" in adapter))
+        throw handleError(new import_aleo_wallet_adaptor_core.MethodNotImplementedError("switchNetwork"));
+      let switched = false;
+      try {
+        isConnecting.current = true;
+        setConnecting(true);
+        await adapter.switchNetwork(network2);
+        switched = true;
+      } catch (error) {
+        if (error instanceof import_aleo_wallet_adaptor_core.MethodNotImplementedError) {
+          await disconnect();
+        }
+        console.error("Failed to switch network");
+      } finally {
+        isConnecting.current = false;
+        setConnecting(false);
+      }
+      return switched;
+    },
+    [adapter, handleError, connected]
+  );
+  const decrypt = (0, import_react3.useCallback)(
+    async (cipherText) => {
+      if (!connected) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotConnectedError());
+      if (!adapter || !("decrypt" in adapter))
+        throw handleError(new import_aleo_wallet_adaptor_core.MethodNotImplementedError("decrypt"));
+      return await adapter.decrypt(cipherText);
+    },
+    [adapter, handleError, connected]
+  );
+  const requestRecords = (0, import_react3.useCallback)(
+    async (program, includePlaintext) => {
+      if (!connected) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotConnectedError());
+      if (!adapter || !("requestRecords" in adapter))
+        throw handleError(new import_aleo_wallet_adaptor_core.MethodNotImplementedError("requestRecords"));
+      return await adapter.requestRecords(program, includePlaintext);
+    },
+    [adapter, handleError, connected]
+  );
+  const executeDeployment = (0, import_react3.useCallback)(
+    async (deployment) => {
+      if (!connected) throw handleError(new import_aleo_wallet_adaptor_core.WalletNotConnectedError());
+      if (!adapter || !("executeDeployment" in adapter))
+        throw handleError(new import_aleo_wallet_adaptor_core.MethodNotImplementedError("executeDeployment"));
+      return await adapter.executeDeployment(deployment);
+    },
+    [adapter, handleError, connected]
+  );
+  const checkNetwork = (0, import_react3.useCallback)(async () => {
+    if (adapter && adapter.network !== initialNetwork) {
+      const switchResult = await switchNetwork(initialNetwork);
+      if (!switchResult) {
+        throw handleError(new import_aleo_wallet_adaptor_core.WalletSwitchNetworkError("Failed to switch network"));
+      }
+    }
+  }, [adapter, initialNetwork, switchNetwork]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    WalletContext.Provider,
+    {
+      value: {
+        autoConnect,
+        wallets,
+        wallet,
+        address: publicKey ?? null,
+        connected,
+        connecting,
+        disconnecting,
+        network,
+        selectWallet: setName,
+        connect,
+        disconnect,
+        executeTransaction,
+        transactionStatus,
+        signMessage,
+        switchNetwork,
+        decrypt,
+        requestRecords,
+        executeDeployment
+      },
+      children
+    }
+  );
+};
+
+// src/useWallet.ts
+function useWallet() {
+  return useWalletContext();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AleoWalletProvider,
+  WalletContext,
+  useWallet,
+  useWalletContext
+});
+//# sourceMappingURL=index.js.map