> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# 配合 React 使用

> 使用 Bigmi 轻松构建 Bitcoin dApp。

`@bigmi/react` 包包含 React hooks 和组件，让你能够轻松地在 React 中构建 Bitcoin 应用。
开始之前，请安装最新版本的所有 bigmi 包。

## 安装

```sh theme={"system"}
pnpm add @bigmi/core @bigmi/client @bigmi/react 
```

## 快速开始

将你的应用包裹在 `BigmiProvider` 中，以在 React 应用中启用 Bigmi 功能。

<CodeGroup>
  ```typescript Main.tsx theme={"system"}
  import { BigmiProvider } from '@bigmi/react'
  import { config } from './config.ts'

  function Main() {
    return (
      <BigmiProvider
        config={config}
        reconnectOnMount={false} 
      >
        <YourApp />
      </BigmiProvider>
    )
  }
  ```

  ```typescript config.ts theme={"system"}
  import { bitcoin, http, createClient } from '@bigmi/core'
  import { binance, xverse, phantom, createConfig } from '@bigmi/client'

  // Create wallet connectors
  const connectors = [
    binance(),
    xverse(),
    phantom()
  ]

  // Create configuration
  export const config = createConfig({
    chains: [bitcoin],
    connectors,
    client: ({ chain }) => createClient({ chain, transport: http() }),
    ssr: true // if using Next.js or SSR
  })
  ```
</CodeGroup>

## Hooks

在设置好 config 和 providers 之后，你就可以使用 `@bigmi/react` 提供的 hooks。

### 连接到钱包

Bigmi 提供了 `useConnect` hook 来处理连接钱包。`useAccount` hook 也可用于获取钱包账户的所有信息。

<CodeGroup>
  ```typescript App.tsx theme={"system"}
  import { useAccount } from '@bigmi/react'
  import { ConnectWallet } from './ConnectWallet.tsx'

  function App() {
    const { account, isConnected, connector } = useAccount()
    const handleDisconnect = () => connector.disconnect()

    return (
      <div>
        {isConnected ? (
          <>
            <p>Connected: {account.address}</p>
            <button onClick={handleDisconnect}>Disconnect</button>
          </>
        ) : (
          <ConnectWallet />
        )}
      </div>
    )
  }
  ```

  ```typescript ConnectWallet.tsx theme={"system"}
  import { useConnect } from '@bigmi/react'

  export function ConnectWallet() {
    const { connect, connectors } = useConnect()

    return (
      <div>
        {connectors.map((connector) => (
          <button
            key={connector.id}
            onClick={() => connect({connector})}
          >
            Connect {connector.name}
          </button>
        ))}
      </div>
    )
  }
  ```

  ```typescript Main.tsx theme={"system"}
  import { BigmiProvider } from '@bigmi/react'
  import { App } from './App.tsx'
  import { config } from './config.ts'

  function Main() {
    return (
      <BigmiProvider
        config={config}
      >
        <App />
      </BigmiProvider>
    )
  }
  ```

  ```typescript config.ts theme={"system"}
  import { bitcoin, http, createClient } from '@bigmi/core'
  import { binance, xverse, phantom, createConfig } from '@bigmi/client'

  // Create wallet connectors
  const connectors = [
    binance(),
    xverse(),
    phantom()
  ]

  // Create configuration
  export const config = createConfig({
    chains: [bitcoin],
    connectors,
    client: ({ chain }) => createClient({ chain, transport: http() }),
    ssr: true // if using Next.js or SSR
  })
  ```
</CodeGroup>

### 签署 PSBT

`useConfig` hook 可用于获取 config 的 client 对象，该对象可用于执行各种操作。

```typescript SignTransaction.tsx theme={"system"}
import { getConnectorClient } from '@bigmi/client'
import { useConfig, useAccount } from '@bigmi/react'
import { signPsbt } from '@bigmi/core'

function SignTransaction() {
  const config = useConfig()
  const { account } = useAccount()

  const handleSign = async () => {
    const client = await getConnectorClient(config)
    
    // send a transaction to the wallet for the user to sign
    const signedPsbt = await signPsbt(client, {
        psbt: 'base64_encoded_psbt',
        account
    })
  } 

  return (
    <button onClick={handleSign}>Sign Transaction </button>
  )
}
```