Getting Started

MIDL is a framework for building decentralized applications on Bitcoin. It provides a set of tools and libraries to help developers build, test, and deploy smart contracts on the MIDL Protocol.

Installation

Install Midl.js executor packages via your package manager of choice.

pnpm

pnpm add @midl-xyz/midl-js-executor @midl-xyz/midl-js-executor-react

npm

npm install @midl-xyz/midl-js-executor @midl-xyz/midl-js-executor-react

yarn

yarn add @midl-xyz/midl-js-executor @midl-xyz/midl-js-executor-react

Add Wagmi, viem and ethers

MIDL executor packages work alongside Wagmi to provide a seamless experience for developers.

pnpm

pnpm add wagmi

npm

npm install wagmi

yarn

yarn add wagmi

Override ethers and viem versions

WARNING

This step is required to ensure compatibility with MIDL executor.

To ensure compatibility with MIDL executor, you need to override the versions of ethers and viem in your package.json. Patched versions of ethers and viem provide additional functionality required by MIDL executor, such as setting the transaction type, fees, adding estimateGasMulti method and more.

package.json(pnpm)

{
  "pnpm": {
    "overrides": {
      "ethers": "npm:@midl-xyz/ethers",
      "viem": "npm:@midl-xyz/midl-viem"
    }
  }
}

package.json(npm)

{
  "overrides": {
    "ethers": "5.4.5",
    "viem": "0.0.1"
  }
}

package.json(yarn)

{
  "resolutions": {
    "ethers": "5.4.5",
    "viem": "0.0.1"
  }
}

Integration

Add WagmiMidlProvider to provide the necessary context for the executor to work.

app.tsx

import { MidlProvider } from '@midl-xyz/midl-js-react';
import { WagmiMidlProvider } from "@wagmi/midl-js-executor-react";
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import midlConfig from './midlConfig';
import wagmiConfig from './wagmiConfig';

const queryClient = new QueryClient();

function App({ children }: { children: React.ReactNode }) {
    return (
      <WagmiProvider config={wagmiConfig}>
        <MidlProvider config={midlConfig}>
          <QueryClientProvider client={queryClient}>
            <WagmiMidlProvider />
            {children}
          </QueryClientProvider>
        </MidlProvider>
      </WagmiProvider>
    );
}

midlConfig.ts

import { createConfig, regtest, leather } from "@midl-xyz/midl-js-core";

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

wagmiConfig.ts

import { midlRegtest } from "@midl-xyz/midl-js-executor";
import type { Chain } from "viem";
import { createConfig, http } from "wagmi";

export const wagmiConfig = createConfig({
  chains: [
    {
      ...midlRegtest,
      rpcUrls: {
        default: {
          http: [midlRegtest.rpcUrls.default.http[0]],
        },
      },
    } as Chain,
  ],
  transports: {
    [midlRegtest.id]: http(midlRegtest.rpcUrls.default.http[0]),
  },
});