bitcoin-wallet-connector 0.1.0

package/src/BitcoinConnectionProvider.stories.tsx

@@ -0,0 +1,329 @@
+import { Meta, StoryFn } from "@storybook/react-vite"
+import React, { useState } from "react"
+import {
+  BitcoinConnectionProvider,
+  useBitcoinConnectionContext,
+  WalletSession,
+} from "./BitcoinConnectionProvider"
+import {
+  WalletAdapterAddress,
+  WalletAdapterBitcoinNetwork,
+} from "./WalletAdapters.types"
+import {
+  UnisatWalletAdapter,
+  XverseWalletAdapter,
+  OkxWalletAdapter,
+  LeatherWalletAdapter,
+  BitgetWalletAdapter,
+  MagicEdenWalletAdapterFactory,
+} from "./adapters"
+
+const adapterFactories = [
+  UnisatWalletAdapter,
+  XverseWalletAdapter,
+  OkxWalletAdapter,
+  LeatherWalletAdapter,
+  BitgetWalletAdapter,
+  MagicEdenWalletAdapterFactory(WalletAdapterBitcoinNetwork.MAINNET),
+]
+
+export default {
+  title: "Components/BitcoinConnectionProvider",
+  component: BitcoinConnectionProvider,
+} as Meta<typeof BitcoinConnectionProvider>
+
+const WalletConnectionContent = (): React.ReactElement => {
+  const [debugInfo, setDebugInfo] = useState<string[]>([])
+  const [signMessageText, setSignMessageText] = useState("Hello Bitcoin!")
+  const [selectedAddress, setSelectedAddress] = useState<string>("")
+  const [signResult, setSignResult] = useState<string>("")
+  const [isSigning, setIsSigning] = useState(false)
+  const ctx = useBitcoinConnectionContext()
+
+  const addDebugInfo = (info: string): void => {
+    setDebugInfo(prev => [
+      ...prev,
+      `${new Date().toLocaleTimeString()}: ${info}`,
+    ])
+  }
+
+  const handleSignMessage = async (): Promise<void> => {
+    if (!ctx.walletSession || !selectedAddress) return
+
+    setIsSigning(true)
+    addDebugInfo(`Signing message with ${selectedAddress.slice(0, 10)}...`)
+
+    try {
+      const result = await ctx.walletSession.adapter.signMessage(
+        selectedAddress,
+        signMessageText,
+      )
+      setSignResult(JSON.stringify(result, null, 2))
+      addDebugInfo(`Sign success: ${result.algorithm}`)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      addDebugInfo(`Sign failed: ${message}`)
+      setSignResult(`Error: ${message}`)
+    } finally {
+      setIsSigning(false)
+    }
+  }
+
+  return (
+    <div style={{ padding: "16px", fontFamily: "system-ui, sans-serif" }}>
+      <h2 style={{ marginBottom: "16px" }}>Bitcoin Connection Provider Demo</h2>
+
+      <div style={{ marginBottom: "16px" }}>
+        <h3>Connection Status</h3>
+        <p>
+          <strong>Connected:</strong> {ctx.walletSession ? "Yes" : "No"}
+        </p>
+        <p>
+          <strong>Initializing:</strong>{" "}
+          {ctx.isConnectionInitializing ? "Yes" : "No"}
+        </p>
+        {ctx.walletSession && (
+          <>
+            <p>
+              <strong>Adapter ID:</strong> {ctx.walletSession.adapterId}
+            </p>
+            <p>
+              <strong>Addresses:</strong>
+            </p>
+            <ul>
+              {ctx.walletSession.addresses.map((addr, i) => (
+                <li key={i}>
+                  {addr.purposes.join(", ")}: {addr.address.slice(0, 20)}...
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+
+      <div style={{ marginBottom: "16px" }}>
+        <h3>Available Wallets ({ctx.availableAdapters.length})</h3>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
+          {ctx.availableAdapters.map(([adapterId, adapter]) => (
+            <button
+              key={adapterId}
+              onClick={() => {
+                addDebugInfo(`Connecting to ${adapterId}...`)
+                ctx
+                  .connect(adapterId, adapter)
+                  .then(() => {
+                    addDebugInfo(`Connected to ${adapterId}`)
+                  })
+                  .catch(err => {
+                    addDebugInfo(`Failed to connect: ${err.message}`)
+                  })
+              }}
+              disabled={ctx.isConnectionInitializing}
+              style={{
+                padding: "8px 16px",
+                cursor: ctx.isConnectionInitializing
+                  ? "not-allowed"
+                  : "pointer",
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+                background: "#fff",
+              }}
+            >
+              {adapterId}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {ctx.walletSession && (
+        <button
+          onClick={() => {
+            addDebugInfo("Disconnecting...")
+            void ctx.disconnect().then(() => {
+              addDebugInfo("Disconnected")
+            })
+          }}
+          style={{
+            padding: "8px 16px",
+            cursor: "pointer",
+            border: "1px solid #dc3545",
+            borderRadius: "4px",
+            background: "#dc3545",
+            color: "#fff",
+            marginBottom: "16px",
+          }}
+        >
+          Disconnect
+        </button>
+      )}
+
+      {ctx.walletSession && (
+        <div
+          style={{
+            marginBottom: "16px",
+            padding: "12px",
+            border: "1px solid #ddd",
+            borderRadius: "4px",
+          }}
+        >
+          <h3 style={{ marginTop: 0 }}>Sign Message</h3>
+          <div style={{ marginBottom: "8px" }}>
+            <label style={{ display: "block", marginBottom: "4px" }}>
+              Select Address:
+            </label>
+            <select
+              value={selectedAddress}
+              onChange={e => setSelectedAddress(e.target.value)}
+              style={{
+                width: "100%",
+                padding: "8px",
+                borderRadius: "4px",
+                border: "1px solid #ccc",
+              }}
+            >
+              <option value="">-- Select an address --</option>
+              {ctx.walletSession.addresses.map((addr, i) => (
+                <option key={i} value={addr.address}>
+                  [{addr.purposes.join(", ")}] {addr.address.slice(0, 20)}...
+                </option>
+              ))}
+            </select>
+          </div>
+          <div style={{ marginBottom: "8px" }}>
+            <label style={{ display: "block", marginBottom: "4px" }}>
+              Message to Sign:
+            </label>
+            <input
+              type="text"
+              value={signMessageText}
+              onChange={e => setSignMessageText(e.target.value)}
+              style={{
+                width: "100%",
+                padding: "8px",
+                borderRadius: "4px",
+                border: "1px solid #ccc",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+          <button
+            onClick={() => void handleSignMessage()}
+            disabled={!selectedAddress || isSigning}
+            style={{
+              padding: "8px 16px",
+              cursor: !selectedAddress || isSigning ? "not-allowed" : "pointer",
+              border: "1px solid #007bff",
+              borderRadius: "4px",
+              background: "#007bff",
+              color: "#fff",
+              opacity: !selectedAddress || isSigning ? 0.6 : 1,
+            }}
+          >
+            {isSigning ? "Signing..." : "Sign Message"}
+          </button>
+          {signResult && (
+            <div style={{ marginTop: "8px" }}>
+              <label style={{ display: "block", marginBottom: "4px" }}>
+                Result:
+              </label>
+              <pre
+                style={{
+                  background: "#f8f9fa",
+                  padding: "8px",
+                  borderRadius: "4px",
+                  fontSize: "12px",
+                  overflow: "auto",
+                  maxHeight: "200px",
+                  margin: 0,
+                }}
+              >
+                {signResult}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div style={{ marginBottom: "16px" }}>
+        <h3>Registered Adapter Factories ({ctx.adapterFactories.length})</h3>
+        <ul>
+          {ctx.adapterFactories.map((factory, i) => (
+            <li key={i}>{factory.adapterId}</li>
+          ))}
+        </ul>
+      </div>
+
+      <button
+        onClick={() => setDebugInfo([])}
+        style={{
+          padding: "4px 8px",
+          cursor: "pointer",
+          border: "1px solid #ccc",
+          borderRadius: "4px",
+          background: "#f8f9fa",
+          marginBottom: "8px",
+        }}
+      >
+        Clear Debug Info
+      </button>
+
+      {debugInfo.length > 0 && (
+        <div
+          style={{
+            padding: "8px",
+            background: "#f8f9fa",
+            borderRadius: "4px",
+            fontSize: "12px",
+          }}
+        >
+          <h4 style={{ margin: "0 0 8px 0" }}>Debug Info:</h4>
+          {debugInfo.map((info, index) => (
+            <div key={index}>{info}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const Default: StoryFn<typeof BitcoinConnectionProvider> = () => {
+  const [events, setEvents] = useState<string[]>([])
+
+  const addEvent = (event: string): void => {
+    setEvents(prev => [...prev, `${new Date().toLocaleTimeString()}: ${event}`])
+  }
+
+  return (
+    <BitcoinConnectionProvider
+      adapterFactories={adapterFactories}
+      onWalletConnected={(session: WalletSession) => {
+        addEvent(`Wallet connected: ${session.adapterId}`)
+      }}
+      onWalletAddressesChanged={(addresses: WalletAdapterAddress[]) => {
+        addEvent(`Addresses changed: ${addresses.length} addresses`)
+      }}
+      onWalletDisconnected={() => {
+        debugger
+        addEvent("Wallet disconnected")
+      }}
+    >
+      <WalletConnectionContent />
+      {events.length > 0 && (
+        <div
+          style={{
+            margin: "16px",
+            padding: "8px",
+            background: "#e8f4f8",
+            borderRadius: "4px",
+            fontSize: "12px",
+          }}
+        >
+          <h4 style={{ margin: "0 0 8px 0" }}>Provider Events:</h4>
+          {events.map((event, index) => (
+            <div key={index}>{event}</div>
+          ))}
+        </div>
+      )}
+    </BitcoinConnectionProvider>
+  )
+}

package/src/BitcoinConnectionProvider.tsx

@@ -0,0 +1,234 @@
+import {
+  createContext,
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { BitcoinWalletAdapterConnector } from "./BitcoinWalletAdapterConnector"
+import {
+  WalletAdapter,
+  WalletAdapterAddress,
+  WalletAdapterStatic,
+} from "./WalletAdapters.types"
+
+export interface WalletSession {
+  adapterId: string
+  adapter: WalletAdapter
+  addresses: WalletAdapterAddress[]
+}
+
+export interface BitcoinConnectionContextValue {
+  // Core connection state
+  walletSession: null | WalletSession
+  isConnectionInitializing: boolean
+  connect: (adapterId: string, adapter: WalletAdapter) => Promise<void>
+  disconnect: () => Promise<void>
+
+  // Wallet management (for UI)
+  adapterFactories: WalletAdapterStatic<WalletAdapter>[]
+  availableAdapters: (readonly [adapterId: string, adapter: WalletAdapter])[]
+}
+
+const BitcoinConnectionContext =
+  createContext<null | BitcoinConnectionContextValue>(null)
+
+function useConnectorState<T>(
+  subscribe: (listener: (value: T) => void) => { unsubscribe: () => void },
+  getSnapshot: () => T,
+  deps: ReadonlyArray<unknown>,
+): T {
+  const [value, setValue] = useState(getSnapshot)
+
+  useEffect(() => {
+    const subscription = subscribe(setValue)
+    return () => subscription.unsubscribe()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+
+  return value
+}
+
+export const BitcoinConnectionProvider: FC<{
+  children: ReactNode
+  adapterFactories: WalletAdapterStatic<WalletAdapter>[]
+  onWalletConnected?: (session: WalletSession) => void
+  onWalletAddressesChanged?: (addresses: WalletAdapterAddress[]) => void
+  onWalletDisconnected?: () => void
+}> = props => {
+  const [isConnectionInitializing, setIsConnectionInitializing] =
+    useState(false)
+  const [walletSession, setWalletSession] = useState<null | WalletSession>(null)
+
+  const onWalletConnected = usePersistFn(props.onWalletConnected ?? noop)
+  const onWalletAddressesChanged = usePersistFn(
+    props.onWalletAddressesChanged ?? noop,
+  )
+  const onWalletDisconnected = usePersistFn(props.onWalletDisconnected ?? noop)
+
+  const connector = useMemo(
+    () => new BitcoinWalletAdapterConnector(props.adapterFactories),
+    [props.adapterFactories],
+  )
+
+  useEffect(
+    () => () => {
+      connector.dispose()
+    },
+    [connector],
+  )
+
+  const availableAdapters = useConnectorState(
+    listener => connector.subscribeAvailableAdapters(listener),
+    () => connector.getAvailableAdapters(),
+    [connector],
+  )
+
+  const connectInfo = useConnectorState(
+    listener => connector.subscribeConnectedInfo(listener),
+    () => connector.getConnectedInfo(),
+    [connector],
+  )
+
+  const ctxValue = useMemo(
+    (): BitcoinConnectionContextValue => ({
+      walletSession,
+      isConnectionInitializing,
+      connect: connector.connect.bind(connector),
+      disconnect: connector.disconnect.bind(connector),
+
+      adapterFactories: props.adapterFactories,
+      availableAdapters,
+    }),
+    [
+      walletSession,
+      isConnectionInitializing,
+      connector,
+      props.adapterFactories,
+      availableAdapters,
+    ],
+  )
+
+  useEffect(() => {
+    const abortController = new AbortController()
+
+    const sub = connector.subscribeConnectedInfo(info => {
+      if (info == null) {
+        try {
+          onWalletDisconnected()
+        } catch (e) {
+          console.error(
+            "[BitcoinConnectionProvider] onWalletDisconnected error",
+            e,
+          )
+        }
+
+        setWalletSession(null)
+        setIsConnectionInitializing(false)
+        return
+      }
+
+      setIsConnectionInitializing(true)
+      info.adapter
+        .getAddresses()
+        .then(addresses => {
+          if (abortController.signal.aborted) return
+
+          const walletSession: WalletSession = {
+            adapterId: info.adapterId,
+            adapter: info.adapter,
+            addresses,
+          }
+
+          try {
+            onWalletConnected(walletSession)
+          } catch (e) {
+            console.error(
+              "[BitcoinConnectionProvider] onWalletConnected error",
+              e,
+            )
+          }
+
+          setWalletSession(walletSession)
+          setIsConnectionInitializing(false)
+        })
+        .catch(err => {
+          if (abortController.signal.aborted) return
+          setIsConnectionInitializing(false)
+          console.error("[BitcoinConnectionProvider] connect error", err)
+        })
+    })
+
+    return () => {
+      abortController.abort()
+      sub.unsubscribe()
+    }
+  }, [connector, onWalletDisconnected, onWalletConnected])
+
+  // Listen to address changes from wallet
+  useEffect(() => {
+    if (connectInfo == null) return
+
+    const abortController = new AbortController()
+
+    const sub = connectInfo.adapter.onAddressesChanged(({ addresses }) => {
+      if (abortController.signal.aborted) return
+
+      setWalletSession(prev => {
+        if (prev == null) {
+          console.warn(
+            "[BitcoinConnectionProvider] onWalletAddressesChanged event received while disconnected, skipping...",
+          )
+          return prev
+        }
+
+        try {
+          onWalletAddressesChanged(addresses)
+        } catch (e) {
+          console.error(
+            "[BitcoinConnectionProvider] onWalletAddressesChanged error",
+            e,
+          )
+        }
+
+        return { ...prev, addresses }
+      })
+    })
+    return () => {
+      abortController.abort()
+      sub.unsubscribe()
+    }
+  }, [connectInfo, onWalletAddressesChanged])
+
+  return (
+    <BitcoinConnectionContext.Provider value={ctxValue}>
+      {props.children}
+    </BitcoinConnectionContext.Provider>
+  )
+}
+
+export function useBitcoinConnectionContext(): BitcoinConnectionContextValue {
+  const ctx = useContext(BitcoinConnectionContext)
+  if (!ctx) {
+    throw new Error(
+      "useBitcoinConnectionContext must be used within BitcoinConnectionProvider",
+    )
+  }
+
+  return ctx
+}
+
+const noop = (): void => {}
+
+const usePersistFn = <T extends (...args: any[]) => any>(
+  fn: T,
+): ((...args: Parameters<T>) => ReturnType<T>) => {
+  const fnRef = useRef(fn)
+  fnRef.current = fn
+
+  return useCallback((...args) => fnRef.current(...args), [])
+}