Fedimint Web Sdk

Appearance

Getting Started ​

READ THIS FIRST (Disclaimer)

This is very new. It is still a work in progress and should not be used for any serious applications. The api's are not settled and may change often.

Installation ​

To add @fedimint/core-web to your project, install the package using your preferred package manager:

bash
pnpm add @fedimint/core-web
bash
npm install @fedimint/core-web
bash
yarn add @fedimint/core-web
bash
bun add @fedimint/core-web

Framework Setup ​

This package relies on a wasm module to be bundled with your application. You will likely need to update your bundler's or framework's configuration to load the wasm file.

See setup guides for some popular choices below. If your tool is not listed or the setup does not work, feel free to open an issue or contribute a guide.

Next.js ​

Next.js Setup

To use wasm in a Next.js project, you'll need to add the following to your next.config.ts file:

ts
/** @type {import('next').NextConfig} */

const nextConfig = {

  webpack(config) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };
    return config;
  },

};

export default nextConfig;

Check out the nextjs sample app for a full working example.

React ​

React.js Setup

TODO: Add setup guide for React.js

Will be similar to Next.js setup above... perhaps even simpler.

VanillaJS ​

VanillaJS Setup

TODO: Add setup guide for vanilla js.

Currently requires modifying the library and utilizing the @fedimint/wasm-web package directly.

See the bare-js sample app for a full working example.

Webpack ​

Webpack Setup

TODO: Verify this setup still works.

To use wasm in a webpack project, you'll need to modify your webpack configuration file.

ts
module.exports = {
  experiments = {
      asyncWebAssembly: true,
      layers: true,
  }
}

Vite ​

Vite Setup

To use wasm in a vite project, you'll need to install the vite-plugin-wasm plugin.

bash
pnpm add vite-plugin-wasm

Then update your vite.config.ts file with the following:

ts
import wasm from 'vite-plugin-wasm'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [wasm()], // required for wasm

  worker: {
    format: 'es',
    plugins: () => [wasm()],
  },

  optimizeDeps: {
    exclude: ['@fedimint/core-web'],
  },
})

Check out the vite-react sample app for a full working example.

Usage ​

Here's a basic example of how to use the @fedimint/core-web library:

ts
import { FedimintWallet } from '@fedimint/core-web'

// Create the Wallet client
const wallet = new FedimintWallet()

// Open the wallet (should be called once in the application lifecycle)
await wallet.open()

// Join a Federation (if not already open)
if (!wallet.isOpen()) {
  const inviteCode = 'fed11qgqpw9thwvaz7t...'
  await wallet.joinFederation(inviteCode)
}

// Get Wallet Balance
const balance = await wallet.balance.getBalance()

// Subscribe to Balance Updates
const unsubscribe = wallet.balance.subscribeBalance((balance: number) => {
  console.log('Updated balance:', balance)
})
// Remember to call unsubscribe() when done

// Receive Ecash Payments
await wallet.mint.reissueNotes('A11qgqpw9thwvaz7t...')

// Create Lightning Invoice
await wallet.lightning.createInvoice(10_000, 'description')

// Pay Lightning Invoice
await wallet.lightning.payBolt11Invoice('lnbc...')

Examples ​

Check out an example app using Vite + React example.

Check out an example app using VanillaJS + HTML.

Resources ​

For a list of public federations with invite codes, visit Bitcoin Mints.

What's Next? ​