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 @kevinoyl/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 could install the Lasereyes package which contains everything lasereyes:

npm install @kevinoyl/lasereyes
# OR
yarn add @kevinoyl/lasereyes

Or you could install the Lasereyes UI package which contains the modal and the styles:

npm install @kevinoyl/lasereyes-ui
# OR
yarn add @kevinoyl/lasereyes-ui

If you installed the lasereyes package, then you can access lasereyes-ui through lasereyes/ui

import { LaserEyesModalProvider } from '@kevinoyl/lasereyes/ui';

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 '@kevinoyl/lasereyes/ui';
import '@kevinoyl/lasereyes/ui/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 '@kevinoyl/lasereyes/ui';

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 '@kevinoyl/lasereyes/ui';

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>

| Prop | Type | Description | |---------|----------|-----------------------------------------| | open | boolean | Controls whether the modal is visible. | | onClose | function | Called when the modal should close. |

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 🙏