npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bigmi/react

v0.0.4

Published

React primitives for Bitcoin apps.

Downloads

7,423

Readme

license npm latest package npm downloads

Bigmi (short for Bitcoin Is Gonna Make It) is a TypeScript library that provides reactive primitives for building Bitcoin applications. Bigmi simplifies Bitcoin app development by offering:

  • Abstractions over the Bitcoin JSON-RPC API
  • First-class APIs for interacting with the Bitcoin network, including sending transactions and tracking with Replace-By-Fee (RBF) support
  • Connectors for popular Bitcoin wallet extensions
  • TypeScript support

Whether you're building a Node.js application or a client-side app, Bigmi provides the tools you need to interact with the Bitcoin.

Packages

Bigmi is modularized into several packages, each suited to different use cases:

  • @bigmi/core - Actions, transports, utilities, and other core primitives for Node.js or client-side applications.
  • @bigmi/react - Hooks, providers, and other useful primitives for React applications.
  • @bigmi/client - Wallet connectors and other tools to connect wallet extensions with Bitcoin applications.

Installation

pnpm add @bigmi/react
pnpm add @bigmi/core
pnpm add @bigmi/client

Getting Started

Here is an example of a basic usage:

import { useConfig } from '@bigmi/react'
import {
  type UTXOAPISchema,
  bitcoin,
  getBalance,
  getBlockCount,
  sendUTXOTransaction,
  utxo,
  waitForTransaction,
} from '@bigmi/core'
import { createClient, fallback, rpcSchema } from 'viem'
import { useAccount } from 'wagmi'


// Create a public client for interactions with the Bitcoin
const publicClient = createClient({
  chain: bitcoin,
  rpcSchema: rpcSchema<UTXOAPISchema>(),
  transport: fallback([
    utxo('https://api.blockchair.com', {
      key: 'blockchair',
      includeChainToURL: true,
    }),
    utxo('https://rpc.ankr.com/http/btc_blockbook/api/v2', {
      key: 'ankr',
    }),
    utxo('https://api.blockcypher.com/v1/btc/main', {
      key: 'blockcypher',
    }),
    utxo('https://mempool.space/api', {
      key: 'mempool',
    }),
  ]),
})

// Define the Bitcoin address you're working with
const address = 'BITCOIN_ADDRESS';

// Fetch the balance of the address
const balance = await getBalance(publicClient, { address });
console.log(`Balance for ${address}:`, balance);

// Fetch the current block count (height)
const blockCount = await getBlockCount(publicClient);
console.log('Current block count:', blockCount);

// Prepare the transaction hex (as a string)
const txHex = 'TRANSACTION_HEX';

// Send the transaction to the network
const txId = await sendUTXOTransaction(publicClient, { hex: txHex });
console.log('Transaction sent with ID:', txId);

// Wait for the transaction to be confirmed
const transaction = await waitForTransaction(publicClient, {
  txId,
  txHex,
  senderAddress: address,
  onReplaced: (response) => {
    console.log('Transaction replaced due to:', response.reason);
  },
});

console.log('Transaction confirmed:', transaction);

// Getting account information inside the React application
const bigmiConfig = useConfig()
const account = useAccount({ config: bigmiConfig })

console.log('Bitcoin account address:', account.address);

Examples

We are working on more examples to showcase Bigmi's capabilities. Stay tuned!

In the meantime, explore the LI.FI Widget and LI.FI SDK for inspiration.

Documentation

Detailed documentation is coming soon. For now, refer to the source code and type definitions for guidance.

Support

If you encounter any issues or have questions, please open an issue.

Contributing

We welcome contributions from the community!

Changelog

The changelog is regularly updated to reflect what's changed in each new release.

License

This project is licensed under the terms of the MIT License.

Acknowledgments

Bigmi is inspired by the wevm stack. We appreciate the open-source community's contributions to advancing blockchain development.