Getting Started

Install MIDL.js via your package manager of choice.

pnpm

pnpm add @midl/core @midl/react @mild-xyz/midl-js-connectors

npm

npm install @midl/core @midl/react @mild-xyz/midl-js-connectors

yarn

yarn add @midl/core @midl/react @mild-xyz/midl-js-connectors

Integration

Create and export a new MIDL.js config file in your project. And wrap your app with the Midl.js context provider.

midl.config.ts

import { createConfig, regtest } from "@midl/core";
import { xverseConnector } from "@midl/connectors";

export const config = createConfig({
  networks: [regtest],
  connectors: [xverseConnector()],
  persist: true,
});

app.tsx

import { MidlProvider } from "@midl/react";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "./query-client";
import { config } from "./midl.config";

function App() {
  return (
    <MidlProvider config={midlConfig}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </MidlProvider>
  );
}

Usage

Use MIDL.js hooks to interact with the blockchain.

TIP

Use the SatoshiKit to have a more complete experience with MIDL.js.

index.tsx

import { useConnect, useAccounts } from "@midl/react";

function Page() {
  const { connect, connectors } = useConnect();
  const { accounts, isConnected } = useAccounts();

  return (
    <div>
      {connectors.map(connector => (
        <button
          key={connector.name}
          onClick={() =>
            connect({
              id: connector.id,
            })
          }
        >
          {connector.name}
        </button>
      ))}

      {isConnected && (
        <div>
          <h2>Accounts</h2>
          <ul>
            {accounts.map(account => (
              <li key={account}>{account}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}