otx-btc-wallet-react 0.1.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "otx-btc-wallet-react",
+  "version": "0.1.0",
+  "description": "React hooks and components for otx-btc-wallet",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "otx-btc-wallet-core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.42",
+    "react": "^18.2.0",
+    "typescript": "^5.3.2",
+    "tsup": "^8.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "keywords": [
+    "bitcoin",
+    "wallet",
+    "react",
+    "hooks"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/context.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+import type { ResolvedConfig } from 'otx-btc-wallet-core';
+
+/**
+ * Context for otx-btc-wallet configuration
+ */
+export const BtcWalletContext = createContext<ResolvedConfig | null>(null);
+
+/**
+ * Hook to access the otx-btc-wallet config
+ * @throws Error if used outside of BtcWalletProvider
+ */
+export function useConfig(): ResolvedConfig {
+  const config = useContext(BtcWalletContext);
+
+  if (!config) {
+    throw new Error(
+      'useConfig must be used within a BtcWalletProvider. ' +
+        'Wrap your app in <BtcWalletProvider config={config}>.'
+    );
+  }
+
+  return config;
+}

package/src/hooks/useAccount.ts

@@ -0,0 +1,74 @@
+import { useSyncExternalStore } from 'react';
+import type {
+  WalletAccount,
+  BitcoinConnector,
+  ConnectionStatus,
+  AddressType,
+} from 'otx-btc-wallet-core';
+import { useConfig } from '../context';
+
+export interface UseAccountReturn {
+  /** Connected address */
+  address: string | undefined;
+  /** Connected public key */
+  publicKey: string | undefined;
+  /** Address type */
+  addressType: AddressType | undefined;
+  /** Full account object */
+  account: WalletAccount | undefined;
+  /** Active connector */
+  connector: BitcoinConnector | undefined;
+  /** Connection status */
+  status: ConnectionStatus;
+  /** Is connected */
+  isConnected: boolean;
+  /** Is connecting */
+  isConnecting: boolean;
+  /** Is disconnected */
+  isDisconnected: boolean;
+  /** Is reconnecting */
+  isReconnecting: boolean;
+}
+
+/**
+ * Hook to get current account state
+ *
+ * @example
+ * ```tsx
+ * function Profile() {
+ *   const { address, isConnected, connector } = useAccount();
+ *
+ *   if (!isConnected) return <div>Not connected</div>;
+ *
+ *   return (
+ *     <div>
+ *       <p>Address: {address}</p>
+ *       <p>Connected via {connector?.name}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useAccount(): UseAccountReturn {
+  const config = useConfig();
+  const { store } = config;
+
+  const state = useSyncExternalStore(
+    store.subscribe,
+    () => store.getState(),
+    () => store.getState()
+  );
+
+  return {
+    address: state.account?.address,
+    publicKey: state.account?.publicKey,
+    addressType: state.account?.type,
+    account: state.account ?? undefined,
+    connector: state.connector ?? undefined,
+    status: state.status,
+    isConnected: state.status === 'connected',
+    isConnecting: state.status === 'connecting',
+    isDisconnected: state.status === 'disconnected',
+    isReconnecting: state.status === 'reconnecting',
+  };
+}

package/src/hooks/useConnect.ts

@@ -0,0 +1,136 @@
+import { useCallback, useMemo, useState } from 'react';
+import type {
+  BitcoinConnector,
+  BitcoinNetwork,
+  WalletAccount,
+} from 'otx-btc-wallet-core';
+import { useConfig } from '../context';
+
+export type ConnectArgs = {
+  connector: BitcoinConnector;
+  network?: BitcoinNetwork;
+};
+
+export interface UseConnectReturn {
+  /** Connect to a wallet (fire-and-forget) */
+  connect: (args: ConnectArgs) => void;
+  /** Connect to a wallet (returns promise) */
+  connectAsync: (args: ConnectArgs) => Promise<WalletAccount>;
+  /** Available connectors */
+  connectors: BitcoinConnector[];
+  /** Last error */
+  error: Error | null;
+  /** Is currently connecting */
+  isLoading: boolean;
+  /** Did connection fail */
+  isError: boolean;
+  /** Did connection succeed */
+  isSuccess: boolean;
+  /** Reset state */
+  reset: () => void;
+}
+
+/**
+ * Hook to connect to a wallet
+ *
+ * @example
+ * ```tsx
+ * function ConnectButtons() {
+ *   const { connect, connectors, isLoading, error } = useConnect();
+ *
+ *   return (
+ *     <div>
+ *       {connectors.map((connector) => (
+ *         <button
+ *           key={connector.id}
+ *           onClick={() => connect({ connector })}
+ *           disabled={isLoading}
+ *         >
+ *           Connect {connector.name}
+ *         </button>
+ *       ))}
+ *       {error && <p>Error: {error.message}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useConnect(): UseConnectReturn {
+  const config = useConfig();
+  const { store, connectors } = config;
+
+  const [state, setState] = useState<{
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    error: Error | null;
+  }>({
+    isLoading: false,
+    isError: false,
+    isSuccess: false,
+    error: null,
+  });
+
+  const connectAsync = useCallback(
+    async ({ connector, network }: ConnectArgs) => {
+      setState({
+        isLoading: true,
+        isError: false,
+        isSuccess: false,
+        error: null,
+      });
+
+      try {
+        const account = await store.getState().connect(connector, network);
+        setState({
+          isLoading: false,
+          isError: false,
+          isSuccess: true,
+          error: null,
+        });
+        return account;
+      } catch (error) {
+        setState({
+          isLoading: false,
+          isError: true,
+          isSuccess: false,
+          error: error as Error,
+        });
+        throw error;
+      }
+    },
+    [store]
+  );
+
+  const connect = useCallback(
+    (args: ConnectArgs) => {
+      connectAsync(args).catch(() => {
+        // Error is already captured in state
+      });
+    },
+    [connectAsync]
+  );
+
+  const reset = useCallback(() => {
+    setState({
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+      error: null,
+    });
+  }, []);
+
+  return useMemo(
+    () => ({
+      connect,
+      connectAsync,
+      connectors,
+      error: state.error,
+      isLoading: state.isLoading,
+      isError: state.isError,
+      isSuccess: state.isSuccess,
+      reset,
+    }),
+    [connect, connectAsync, connectors, state, reset]
+  );
+}

package/src/hooks/useDisconnect.ts

@@ -0,0 +1,95 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useConfig } from '../context';
+
+export interface UseDisconnectReturn {
+  /** Disconnect from wallet (fire-and-forget) */
+  disconnect: () => void;
+  /** Disconnect from wallet (returns promise) */
+  disconnectAsync: () => Promise<void>;
+  /** Is currently disconnecting */
+  isLoading: boolean;
+  /** Did disconnect fail */
+  isError: boolean;
+  /** Did disconnect succeed */
+  isSuccess: boolean;
+  /** Last error */
+  error: Error | null;
+}
+
+/**
+ * Hook to disconnect from wallet
+ *
+ * @example
+ * ```tsx
+ * function DisconnectButton() {
+ *   const { disconnect, isLoading } = useDisconnect();
+ *
+ *   return (
+ *     <button onClick={disconnect} disabled={isLoading}>
+ *       Disconnect
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useDisconnect(): UseDisconnectReturn {
+  const config = useConfig();
+  const { store } = config;
+
+  const [state, setState] = useState<{
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    error: Error | null;
+  }>({
+    isLoading: false,
+    isError: false,
+    isSuccess: false,
+    error: null,
+  });
+
+  const disconnectAsync = useCallback(async () => {
+    setState({
+      isLoading: true,
+      isError: false,
+      isSuccess: false,
+      error: null,
+    });
+
+    try {
+      await store.getState().disconnect();
+      setState({
+        isLoading: false,
+        isError: false,
+        isSuccess: true,
+        error: null,
+      });
+    } catch (error) {
+      setState({
+        isLoading: false,
+        isError: true,
+        isSuccess: false,
+        error: error as Error,
+      });
+      throw error;
+    }
+  }, [store]);
+
+  const disconnect = useCallback(() => {
+    disconnectAsync().catch(() => {
+      // Error is already captured in state
+    });
+  }, [disconnectAsync]);
+
+  return useMemo(
+    () => ({
+      disconnect,
+      disconnectAsync,
+      isLoading: state.isLoading,
+      isError: state.isError,
+      isSuccess: state.isSuccess,
+      error: state.error,
+    }),
+    [disconnect, disconnectAsync, state]
+  );
+}

package/src/hooks/useMultiAddress.ts

@@ -0,0 +1,135 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import type { WalletAccount } from 'otx-btc-wallet-core';
+import { useConfig } from '../context';
+
+export interface UseMultiAddressReturn {
+  /** All available addresses from the wallet */
+  addresses: WalletAccount[];
+  /** Payment address (for sending/receiving BTC) */
+  paymentAddress: WalletAccount | null;
+  /** Ordinals address (for NFTs/inscriptions) */
+  ordinalsAddress: WalletAccount | null;
+  /** Currently selected primary address */
+  primaryAddress: WalletAccount | null;
+  /** Set the primary address */
+  setPrimaryAddress: (address: WalletAccount) => void;
+  /** Is loading addresses */
+  isLoading: boolean;
+  /** Refresh addresses from wallet */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Hook to manage multiple addresses from a connected wallet
+ *
+ * Xverse and Leather wallets provide both payment and ordinals addresses.
+ * This hook helps manage and switch between them.
+ *
+ * @example
+ * ```tsx
+ * function MultiAddressDisplay() {
+ *   const {
+ *     paymentAddress,
+ *     ordinalsAddress,
+ *     primaryAddress,
+ *     setPrimaryAddress
+ *   } = useMultiAddress();
+ *
+ *   return (
+ *     <div>
+ *       <h3>Payment: {paymentAddress?.address}</h3>
+ *       <h3>Ordinals: {ordinalsAddress?.address}</h3>
+ *       <select onChange={(e) => {
+ *         const addr = e.target.value === 'payment' ? paymentAddress : ordinalsAddress;
+ *         if (addr) setPrimaryAddress(addr);
+ *       }}>
+ *         <option value="payment">Payment</option>
+ *         <option value="ordinals">Ordinals</option>
+ *       </select>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useMultiAddress(): UseMultiAddressReturn {
+  const config = useConfig();
+  const { store } = config;
+
+  const [addresses, setAddresses] = useState<WalletAccount[]>([]);
+  const [primaryAddress, setPrimaryAddressState] = useState<WalletAccount | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Fetch addresses from connector
+  const fetchAddresses = useCallback(async () => {
+    const { connector } = store.getState();
+    if (!connector) {
+      setAddresses([]);
+      setPrimaryAddressState(null);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const accounts = await connector.getAccounts();
+      setAddresses(accounts);
+
+      // Set primary address to first one if not set
+      if (accounts.length > 0 && !primaryAddress) {
+        setPrimaryAddressState(accounts[0] ?? null);
+      }
+    } catch {
+      setAddresses([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [store, primaryAddress]);
+
+  // Fetch addresses when connector changes
+  useEffect(() => {
+    const unsubscribe = store.subscribe(
+      (state) => state.connector,
+      () => {
+        void fetchAddresses();
+      }
+    );
+
+    // Initial fetch
+    void fetchAddresses();
+
+    return unsubscribe;
+  }, [store, fetchAddresses]);
+
+  // Derive payment and ordinals addresses
+  const { paymentAddress, ordinalsAddress } = useMemo(() => {
+    // Payment addresses are typically segwit (bc1q) or nested-segwit (3)
+    const payment = addresses.find(
+      (a) => a.type === 'segwit' || a.type === 'nested-segwit'
+    ) ?? addresses[0] ?? null;
+
+    // Ordinals addresses are typically taproot (bc1p)
+    const ordinals = addresses.find((a) => a.type === 'taproot') ?? null;
+
+    return { paymentAddress: payment, ordinalsAddress: ordinals };
+  }, [addresses]);
+
+  const setPrimaryAddress = useCallback((address: WalletAccount) => {
+    setPrimaryAddressState(address);
+  }, []);
+
+  const refresh = useCallback(async () => {
+    await fetchAddresses();
+  }, [fetchAddresses]);
+
+  return useMemo(
+    () => ({
+      addresses,
+      paymentAddress,
+      ordinalsAddress,
+      primaryAddress,
+      setPrimaryAddress,
+      isLoading,
+      refresh,
+    }),
+    [addresses, paymentAddress, ordinalsAddress, primaryAddress, setPrimaryAddress, isLoading, refresh]
+  );
+}

package/src/hooks/useNetwork.ts

@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from 'react';
+import type { BitcoinNetwork } from 'otx-btc-wallet-core';
+import { useConfig } from '../context';
+
+export interface UseNetworkReturn {
+  /** Current network */
+  network: BitcoinNetwork;
+}
+
+/**
+ * Hook to get current network
+ *
+ * @example
+ * ```tsx
+ * function NetworkInfo() {
+ *   const { network } = useNetwork();
+ *
+ *   return <p>Network: {network}</p>;
+ * }
+ * ```
+ */
+export function useNetwork(): UseNetworkReturn {
+  const config = useConfig();
+  const { store } = config;
+
+  const network = useSyncExternalStore(
+    store.subscribe,
+    () => store.getState().network,
+    () => store.getState().network
+  );
+
+  return { network };
+}

package/src/hooks/useSendTransaction.ts

@@ -0,0 +1,137 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useConfig } from '../context';
+
+export interface UseSendTransactionReturn {
+  /** Send transaction (fire-and-forget) */
+  sendTransaction: (args: { to: string; amount: number }) => void;
+  /** Send transaction (returns promise with txid) */
+  sendTransactionAsync: (args: { to: string; amount: number }) => Promise<string>;
+  /** Transaction ID */
+  data: string | undefined;
+  /** Last error */
+  error: Error | null;
+  /** Is sending */
+  isLoading: boolean;
+  /** Did send fail */
+  isError: boolean;
+  /** Did send succeed */
+  isSuccess: boolean;
+  /** Reset state */
+  reset: () => void;
+}
+
+/**
+ * Hook to send a Bitcoin transaction
+ *
+ * @example
+ * ```tsx
+ * function SendForm() {
+ *   const { sendTransaction, isLoading, data, error } = useSendTransaction();
+ *
+ *   const handleSend = () => {
+ *     sendTransaction({ to: 'bc1q...', amount: 10000 }); // 10000 sats
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSend} disabled={isLoading}>
+ *         Send 10,000 sats
+ *       </button>
+ *       {data && <p>TX: {data}</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSendTransaction(): UseSendTransactionReturn {
+  const config = useConfig();
+  const { store } = config;
+
+  const [state, setState] = useState<{
+    data: string | undefined;
+    error: Error | null;
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+  }>({
+    data: undefined,
+    error: null,
+    isLoading: false,
+    isError: false,
+    isSuccess: false,
+  });
+
+  const sendTransactionAsync = useCallback(
+    async ({ to, amount }: { to: string; amount: number }) => {
+      const { connector } = store.getState();
+
+      if (!connector) {
+        throw new Error('Not connected');
+      }
+
+      setState({
+        data: undefined,
+        error: null,
+        isLoading: true,
+        isError: false,
+        isSuccess: false,
+      });
+
+      try {
+        const txid = await connector.sendTransaction(to, amount);
+        setState({
+          data: txid,
+          error: null,
+          isLoading: false,
+          isError: false,
+          isSuccess: true,
+        });
+        return txid;
+      } catch (error) {
+        setState({
+          data: undefined,
+          error: error as Error,
+          isLoading: false,
+          isError: true,
+          isSuccess: false,
+        });
+        throw error;
+      }
+    },
+    [store]
+  );
+
+  const sendTransaction = useCallback(
+    ({ to, amount }: { to: string; amount: number }) => {
+      sendTransactionAsync({ to, amount }).catch(() => {
+        // Error is already captured in state
+      });
+    },
+    [sendTransactionAsync]
+  );
+
+  const reset = useCallback(() => {
+    setState({
+      data: undefined,
+      error: null,
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+    });
+  }, []);
+
+  return useMemo(
+    () => ({
+      sendTransaction,
+      sendTransactionAsync,
+      data: state.data,
+      error: state.error,
+      isLoading: state.isLoading,
+      isError: state.isError,
+      isSuccess: state.isSuccess,
+      reset,
+    }),
+    [sendTransaction, sendTransactionAsync, state, reset]
+  );
+}