@omnisat/lasereyes-modal v0.0.2-rc.1

Lasereyes Modal

Lasereyes Modal makes it easy for developers to integrate Bitcoin wallet connection flows into their applications with minimal setup. It builds on top of the @omnisat/lasereyes library to provide a convenient modal-based UI.

Wallets Supported:

• Leather
• Magic Eden
• OKX
• Orange Wallet
• OYL
• Unisat
• Wizz
• Phantom
• Xverse
• Sparrow

Installation

You need to install both @omnisat/lasereyes and @omnisat/lasereyes-modal:

npm install @omnisat/lasereyes @omnisat/lasereyes-modal
# OR
yarn add @omnisat/lasereyes @omnisat/lasereyes-modal

Make sure your project uses React 18+.

Usage

The simplest way to integrate this library is by wrapping your application with <LaserEyesModalProvider>. This automatically wraps your app with <LaserEyesProvider>, allowing all child components to access the wallet state.

You can then use:

• <ConnectWalletButton> — A pre-styled button to trigger the modal.
• useLaserEyesModal — A hook for manually controlling the modal.
• <ConnectWalletModal> — A component to manually render the modal.

Example Usage

import { ConnectWalletButton, LaserEyesModalProvider } from '@omnisat/lasereyes-modal';
import '@omnisat/lasereyes-modal/dist/style.css';

function App() {
  return (
    <LaserEyesModalProvider>
      <div>
        <h1>Welcome</h1>
        <ConnectWalletButton />
      </div>
    </LaserEyesModalProvider>
  );
}

export default App;

Using useLaserEyesModal

If you want to create a custom button to open the modal, use the useLaserEyesModal hook:

import { useLaserEyesModal } from '@omnisat/lasereyes-modal';

function CustomWalletButton() {
  const { showModal } = useLaserEyesModal();

  return <button onClick={showModal}>Connect Wallet</button>;
}

Controlling the Modal Directly

You can also use <ConnectWalletModal> directly:

import { useState } from 'react';
import { ConnectWalletModal } from '@omnisat/lasereyes-modal';

function ManualModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Connect</button>
      <ConnectWalletModal open={isOpen} onClose={() => setIsOpen(false)} />
    </>
  );
}

API Reference

useLaserEyesModal

interface LaserEyesModalContext {
  isOpen: boolean;
  isLoading: boolean;
  showModal: () => void;
  hideModal: () => void;
  config: LaserEyesModalConfig;
  setConfig: (config: LaserEyesModalConfig) => void;
}

<ConnectWalletModal>

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Laser Eyes Modal on GitHub

Contributing

Contributions to Laser Eyes Modal are greatly appreciated! If you're interested in contributing to this open source project, please read the Contributing Guide before submitting a pull request.

Sponsors

If you find Laser Eyes Modal useful or use it for work, please consider sponsoring Laser Eyes. Thank you 🙏