otx-btc-wallet-react 0.1.0

package/src/hooks/useSignMessage.ts

@@ -0,0 +1,136 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useConfig } from '../context';
+
+export interface UseSignMessageReturn {
+  /** Sign message (fire-and-forget) */
+  signMessage: (args: { message: string }) => void;
+  /** Sign message (returns promise with signature) */
+  signMessageAsync: (args: { message: string }) => Promise<string>;
+  /** Signature */
+  data: string | undefined;
+  /** Last error */
+  error: Error | null;
+  /** Is signing */
+  isLoading: boolean;
+  /** Did signing fail */
+  isError: boolean;
+  /** Did signing succeed */
+  isSuccess: boolean;
+  /** Reset state */
+  reset: () => void;
+}
+
+/**
+ * Hook to sign a message
+ *
+ * @example
+ * ```tsx
+ * function SignMessage() {
+ *   const { signMessage, isLoading, data } = useSignMessage();
+ *
+ *   const handleSign = () => {
+ *     signMessage({ message: 'Hello, Bitcoin!' });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSign} disabled={isLoading}>
+ *         Sign Message
+ *       </button>
+ *       {data && <p>Signature: {data}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSignMessage(): UseSignMessageReturn {
+  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 signMessageAsync = useCallback(
+    async ({ message }: { message: string }) => {
+      const { connector } = store.getState();
+
+      if (!connector) {
+        throw new Error('Not connected');
+      }
+
+      setState({
+        data: undefined,
+        error: null,
+        isLoading: true,
+        isError: false,
+        isSuccess: false,
+      });
+
+      try {
+        const signature = await connector.signMessage(message);
+        setState({
+          data: signature,
+          error: null,
+          isLoading: false,
+          isError: false,
+          isSuccess: true,
+        });
+        return signature;
+      } catch (error) {
+        setState({
+          data: undefined,
+          error: error as Error,
+          isLoading: false,
+          isError: true,
+          isSuccess: false,
+        });
+        throw error;
+      }
+    },
+    [store]
+  );
+
+  const signMessage = useCallback(
+    ({ message }: { message: string }) => {
+      signMessageAsync({ message }).catch(() => {
+        // Error is already captured in state
+      });
+    },
+    [signMessageAsync]
+  );
+
+  const reset = useCallback(() => {
+    setState({
+      data: undefined,
+      error: null,
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+    });
+  }, []);
+
+  return useMemo(
+    () => ({
+      signMessage,
+      signMessageAsync,
+      data: state.data,
+      error: state.error,
+      isLoading: state.isLoading,
+      isError: state.isError,
+      isSuccess: state.isSuccess,
+      reset,
+    }),
+    [signMessage, signMessageAsync, state, reset]
+  );
+}

package/src/hooks/useSignPsbt.ts

@@ -0,0 +1,144 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { SignPsbtOptions } from 'otx-btc-wallet-core';
+import { useConfig } from '../context';
+
+export interface UseSignPsbtReturn {
+  /** Sign PSBT (fire-and-forget) */
+  signPsbt: (args: { psbt: string; options?: SignPsbtOptions }) => void;
+  /** Sign PSBT (returns promise with signed PSBT hex) */
+  signPsbtAsync: (args: {
+    psbt: string;
+    options?: SignPsbtOptions;
+  }) => Promise<string>;
+  /** Signed PSBT hex */
+  data: string | undefined;
+  /** Last error */
+  error: Error | null;
+  /** Is signing */
+  isLoading: boolean;
+  /** Did signing fail */
+  isError: boolean;
+  /** Did signing succeed */
+  isSuccess: boolean;
+  /** Reset state */
+  reset: () => void;
+}
+
+/**
+ * Hook to sign a PSBT
+ *
+ * @example
+ * ```tsx
+ * function SignPsbt() {
+ *   const { signPsbt, isLoading, data } = useSignPsbt();
+ *
+ *   const handleSign = () => {
+ *     signPsbt({
+ *       psbt: '70736274ff01...',
+ *       options: { autoFinalize: true }
+ *     });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSign} disabled={isLoading}>
+ *         Sign PSBT
+ *       </button>
+ *       {data && <p>Signed: {data.slice(0, 20)}...</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSignPsbt(): UseSignPsbtReturn {
+  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 signPsbtAsync = useCallback(
+    async ({ psbt, options }: { psbt: string; options?: SignPsbtOptions }) => {
+      const { connector } = store.getState();
+
+      if (!connector) {
+        throw new Error('Not connected');
+      }
+
+      setState({
+        data: undefined,
+        error: null,
+        isLoading: true,
+        isError: false,
+        isSuccess: false,
+      });
+
+      try {
+        const signedPsbt = await connector.signPsbt(psbt, options);
+        setState({
+          data: signedPsbt,
+          error: null,
+          isLoading: false,
+          isError: false,
+          isSuccess: true,
+        });
+        return signedPsbt;
+      } catch (error) {
+        setState({
+          data: undefined,
+          error: error as Error,
+          isLoading: false,
+          isError: true,
+          isSuccess: false,
+        });
+        throw error;
+      }
+    },
+    [store]
+  );
+
+  const signPsbt = useCallback(
+    ({ psbt, options }: { psbt: string; options?: SignPsbtOptions }) => {
+      const args = options !== undefined ? { psbt, options } : { psbt };
+      signPsbtAsync(args).catch(() => {
+        // Error is already captured in state
+      });
+    },
+    [signPsbtAsync]
+  );
+
+  const reset = useCallback(() => {
+    setState({
+      data: undefined,
+      error: null,
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+    });
+  }, []);
+
+  return useMemo(
+    () => ({
+      signPsbt,
+      signPsbtAsync,
+      data: state.data,
+      error: state.error,
+      isLoading: state.isLoading,
+      isError: state.isError,
+      isSuccess: state.isSuccess,
+      reset,
+    }),
+    [signPsbt, signPsbtAsync, state, reset]
+  );
+}

package/src/hooks/useSignPsbts.ts

@@ -0,0 +1,164 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { SignPsbtOptions } from 'otx-btc-wallet-core';
+import { useConfig } from '../context';
+
+export interface UseSignPsbtsReturn {
+  /** Sign multiple PSBTs (fire-and-forget) */
+  signPsbts: (args: { psbts: string[]; options?: SignPsbtOptions }) => void;
+  /** Sign multiple PSBTs (returns promise with signed PSBT hexes) */
+  signPsbtsAsync: (args: {
+    psbts: string[];
+    options?: SignPsbtOptions;
+  }) => Promise<string[]>;
+  /** Signed PSBT hexes */
+  data: string[] | undefined;
+  /** Last error */
+  error: Error | null;
+  /** Is signing */
+  isLoading: boolean;
+  /** Did signing fail */
+  isError: boolean;
+  /** Did signing succeed */
+  isSuccess: boolean;
+  /** Is batch signing supported by current connector */
+  isSupported: boolean;
+  /** Reset state */
+  reset: () => void;
+}
+
+/**
+ * Hook to sign multiple PSBTs (batch signing)
+ *
+ * @example
+ * ```tsx
+ * function BatchSign() {
+ *   const { signPsbts, isLoading, isSupported, data } = useSignPsbts();
+ *
+ *   if (!isSupported) {
+ *     return <p>Batch signing not supported by this wallet</p>;
+ *   }
+ *
+ *   const handleSign = () => {
+ *     signPsbts({
+ *       psbts: ['70736274ff01...', '70736274ff02...'],
+ *       options: { autoFinalize: true }
+ *     });
+ *   };
+ *
+ *   return (
+ *     <button onClick={handleSign} disabled={isLoading}>
+ *       Sign {2} PSBTs
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useSignPsbts(): UseSignPsbtsReturn {
+  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,
+  });
+
+  // Check if current connector supports batch signing
+  const isSupported = useMemo(() => {
+    const { connector } = store.getState();
+    return typeof connector?.signPsbts === 'function';
+  }, [store]);
+
+  const signPsbtsAsync = useCallback(
+    async ({
+      psbts,
+      options,
+    }: {
+      psbts: string[];
+      options?: SignPsbtOptions;
+    }) => {
+      const { connector } = store.getState();
+
+      if (!connector) {
+        throw new Error('Not connected');
+      }
+
+      if (!connector.signPsbts) {
+        throw new Error('Batch signing is not supported by this wallet');
+      }
+
+      setState({
+        data: undefined,
+        error: null,
+        isLoading: true,
+        isError: false,
+        isSuccess: false,
+      });
+
+      try {
+        const signedPsbts = await connector.signPsbts(psbts, options);
+        setState({
+          data: signedPsbts,
+          error: null,
+          isLoading: false,
+          isError: false,
+          isSuccess: true,
+        });
+        return signedPsbts;
+      } catch (error) {
+        setState({
+          data: undefined,
+          error: error as Error,
+          isLoading: false,
+          isError: true,
+          isSuccess: false,
+        });
+        throw error;
+      }
+    },
+    [store]
+  );
+
+  const signPsbts = useCallback(
+    ({ psbts, options }: { psbts: string[]; options?: SignPsbtOptions }) => {
+      const args = options !== undefined ? { psbts, options } : { psbts };
+      signPsbtsAsync(args).catch(() => {
+        // Error is already captured in state
+      });
+    },
+    [signPsbtsAsync]
+  );
+
+  const reset = useCallback(() => {
+    setState({
+      data: undefined,
+      error: null,
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+    });
+  }, []);
+
+  return useMemo(
+    () => ({
+      signPsbts,
+      signPsbtsAsync,
+      data: state.data,
+      error: state.error,
+      isLoading: state.isLoading,
+      isError: state.isError,
+      isSuccess: state.isSuccess,
+      isSupported,
+      reset,
+    }),
+    [signPsbts, signPsbtsAsync, state, isSupported, reset]
+  );
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+// otx-btc-wallet-react - React hooks and components
+
+// Provider
+export { BtcWalletProvider, type BtcWalletProviderProps } from './provider';
+
+// Context
+export { useConfig, BtcWalletContext } from './context';
+
+// Hooks
+export { useAccount, type UseAccountReturn } from './hooks/useAccount';
+export {
+  useConnect,
+  type UseConnectReturn,
+  type ConnectArgs,
+} from './hooks/useConnect';
+export { useDisconnect, type UseDisconnectReturn } from './hooks/useDisconnect';
+export { useNetwork, type UseNetworkReturn } from './hooks/useNetwork';
+export {
+  useSendTransaction,
+  type UseSendTransactionReturn,
+} from './hooks/useSendTransaction';
+export {
+  useSignMessage,
+  type UseSignMessageReturn,
+} from './hooks/useSignMessage';
+export { useSignPsbt, type UseSignPsbtReturn } from './hooks/useSignPsbt';
+export { useSignPsbts, type UseSignPsbtsReturn } from './hooks/useSignPsbts';
+export {
+  useMultiAddress,
+  type UseMultiAddressReturn,
+} from './hooks/useMultiAddress';

package/src/provider.tsx

@@ -0,0 +1,70 @@
+import { type ReactNode, useEffect, useRef } from 'react';
+import type { ResolvedConfig } from 'otx-btc-wallet-core';
+import { BtcWalletContext } from './context';
+
+export interface BtcWalletProviderProps {
+  /** Configuration created with createConfig() */
+  config: ResolvedConfig;
+  /** Child components */
+  children: ReactNode;
+}
+
+/**
+ * Provider component for otx-btc-wallet
+ *
+ * @example
+ * ```tsx
+ * import { BtcWalletProvider } from 'otx-btc-wallet-react';
+ * import { config } from './config';
+ *
+ * function App() {
+ *   return (
+ *     <BtcWalletProvider config={config}>
+ *       <YourApp />
+ *     </BtcWalletProvider>
+ *   );
+ * }
+ * ```
+ */
+export function BtcWalletProvider({
+  config,
+  children,
+}: BtcWalletProviderProps): ReactNode {
+  const initializedRef = useRef(false);
+
+  // Validate config
+  if (!config) {
+    throw new Error(
+      'BtcWalletProvider requires a config prop. ' +
+        'Create one with createConfig() from otx-btc-wallet-core.'
+    );
+  }
+
+  if (!config.store) {
+    throw new Error(
+      'Invalid config: missing store. ' +
+        'Make sure you created the config with createConfig().'
+    );
+  }
+
+  // Handle auto-reconnect on mount
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+
+    // Auto-reconnect is handled by createConfig, but we can
+    // trigger it here if needed for SSR hydration
+    if (config.autoConnect && typeof window !== 'undefined') {
+      const state = config.store.getState();
+      if (state.connectorId && state.status === 'disconnected') {
+        void state.reconnect(config.connectors);
+      }
+    }
+  }, [config]);
+
+  return (
+    <BtcWalletContext.Provider value={config}>
+      {children}
+    </BtcWalletContext.Provider>
+  );
+}