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

# On the Frontend

> Build a Bitcoin app easily with Bigmi.

To get started, install the latest version of the Bigmi core and client packages.

## Installation

The `@bigmi/client` package provides wallet connectors and tools to integrate Bitcoin wallet extensions with your web applications.
This package is essential for building Bitcoin applications that need to interact with various wallet providers.

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

## Configuration

The client works with a config object that manages the core Bigmi client, connectors, storage, and events.

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

## Wallet Interactions

The Bigmi library provides connectors for connecting to 10+ wallets.

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

### Supported Wallets

* Binance Wallet
* Xverse
* Phantom
* Bitget
* Ctrl
* Leather
* OKX
* Onekey
* Oyl
* Unisat
* Magic Eden
* Dynamic (embedded wallet)

## Custom Connectors

You can create custom connectors by defining a function that returns a `createConnector` with config properties and methods implemented.

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

    }))
}
```

## Advanced Configuration

### Transport vs Client Configuration

Bigmi's `createConfig` supports two mutually exclusive configuration patterns - you can use either `transports` or `client`, but not both:

#### Static `transports` Approach

```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 automatically creates clients using your transport mapping
* Supports chain-specific properties via objects
* More concise for straightforward configurations

#### Dynamic `client` Approach

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

* You control client creation with a factory function
* Enables conditional logic based on chain properties
* More flexible for complex configurations

#### When to Use Each:

**Use `transports` when:**

* Simple static transport mapping is sufficient
* You want Bigmi to handle client creation automatically
* Configuration is straightforward and doesn't need runtime logic

**Use `client` when:**

* You need conditional logic based on chain properties
* You want full control over client configuration
* You need environment-specific or complex transport selection