在前端使用 - LI.FI

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

安装

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

pnpm add @bigmi/core @bigmi/client

配置

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

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 多种钱包的连接器。

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)

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
})

受支持的钱包

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

自定义连接器

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

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

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

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：

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

​安装

​配置

​钱包交互

​受支持的钱包

​自定义连接器

​高级配置

​Transport 与 Client 配置

​静态 transports 方式

​动态 client 方式

​何时使用哪一种：

安装

配置