> ## 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.

# 在前端使用

> 使用 Bigmi 轻松构建 Bitcoin 应用。

开始之前，请安装最新版本的 Bigmi core 和 client 包。

## 安装

`@bigmi/client` 包提供了钱包连接器和工具，用于将 Bitcoin 钱包扩展集成到你的 Web 应用中。
该包对于构建需要与各种钱包提供商交互的 Bitcoin 应用至关重要。

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

## 配置

client 使用一个 config 对象工作，该对象管理核心 Bigmi 客户端、连接器、存储和事件。

```typescript 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
const config = createConfig({
  chains: [bitcoin],
  connectors,
  client: ({ chain }) => createClient({ chain, transport: http() }),
  ssr: true // if using Next.js or SSR
})
```

## 钱包交互

Bigmi 库提供了可连接 10 多种钱包的连接器。

<CodeGroup>
  ```typescript main.ts theme={"system"}
  import { config } from './config.ts'
  import { phantom, getConnectorClient, connect, disconnect } from '@bigmi/client'
  import { signPsbt } from '@bigmi/core'

  // Connect to the phantom wallet
  const { accounts, chainId } =  await connect(config, { connector: phantom() })

  // get client object
  // returns a wallet connector wrapped as a bigmi client
  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: accounts[0]
  })

  // disconnect from the current wallet
  await disconnect(config)

  ```

  ```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>

### 受支持的钱包

* Binance Wallet
* Xverse
* Phantom
* Bitget
* Ctrl
* Leather
* OKX
* Onekey
* Oyl
* Unisat
* Magic Eden
* Dynamic（嵌入式钱包）

## 自定义连接器

你可以通过定义一个函数来创建自定义连接器，该函数返回一个已实现配置属性和方法的 `createConnector`。

```typescript theme={"system"}
import { createConnector, type UTXOConnectorParameters } from '@bigmi/client'
import { Chain, type Account, type ChainId } from '@bigmi/core'

export function customConnector(parameters: UTXOConnectorParameters = {}) {
    return createConnector((config) => ({
        id: 'connector_id', 
        name: 'custom connector', // name of the wallet
        type: 'UTXO', 
        icon: 'data:image/svg+xml', //data URI of image

        async setup() {
            // method called when the connector is instantiated to run setup logic
        },

        async getInternalProvider(): Promise<any> {
            // method that returns the provider object from the wallet
            // usually obtained from the window object
        },

        async connect (): Promise<{ accounts: string[], chainId: string }> {
            // method to call connect method of the provider 
            //  returns the connected account, and the chain
        },

        async request(params): Promise<any> {
            // method used to send rpc requests to the provider
        },
        async getAccounts(): Promise<Account[]> {
            // method to get accounts from the wallet
        },
        async getChainId(): Promise<ChainId> {
            // method to get the current chain from the wallet
        }

    }))
}
```

## 高级配置

### Transport 与 Client 配置

Bigmi 的 `createConfig` 支持两种互斥的配置模式——你可以使用 `transports` 或 `client`，但不能同时使用两者：

#### 静态 `transports` 方式

```typescript theme={"system"}
const config = createConfig({
  chains: [bitcoin, testnet],
  connectors: [phantom(), xverse()],
  transports: {
    [bitcoin.id]: fallback([ankr(), mempool()]),
    [testnet.id]: mempool({ baseUrl: 'https://mempool.space/testnet/api' })
  },
  cacheTime: 4000, // applies to all chains
})
```

* Bigmi 会使用你的传输映射自动创建客户端
* 通过对象支持链特定的属性
* 对于简单直接的配置更为简洁

#### 动态 `client` 方式

```typescript theme={"system"}
const config = createConfig({
  chains: [bitcoin, testnet],
  connectors: [phantom(), xverse()],
  client: ({ chain }) => createClient({
    chain,
    transport: chain.testnet ? mempool() : fallback([ankr(), mempool()]),
    cacheTime: chain.testnet ? 2000 : 4000,
  })
})
```

* 你通过工厂函数控制客户端的创建
* 可基于链属性实现条件逻辑
* 对于复杂配置更为灵活

#### 何时使用哪一种：

**在以下情况使用 `transports`：**

* 简单的静态传输映射已经足够
* 你希望 Bigmi 自动处理客户端创建
* 配置简单直接，不需要运行时逻辑

**在以下情况使用 `client`：**

* 你需要基于链属性的条件逻辑
* 你希望完全控制客户端配置
* 你需要特定于环境的或复杂的传输选择