@ragsters/purrse-web-plugin

A React component to enable dApp connection with Purrse Wallet.

Installation

npm install @ragsters/purrse-web-plugin

Usage

import { PurrseConnector } from "@ragsters/purrse-web-plugin";
import "@ragsters/purrse-web-plugin/styles";

function App() {
  return (
    <>
      <PurrseConnector />
      {/* Rest of your app components here */}
    </>
  );
}

How It Works

By importing and adding PurrseWallet to your project, a CIP-30 dApp connector with the purrse namespace is automatically injected into the browser. This makes it possible to connect to Purrse using window.cardano.purrse.enable(). When this function is called, a modal will be displayed with a QR code for the user to scan using their Purrse wallet app on their mobile phone, and upon the user consenting to the connection by scanning the QR code, the standard Cardano CIP-30 API object will be returned.

This CIP-30 API object can then be used to call other CIP-30 API methods such as getUsedAddresses(), getBalance(), getUtxos(), signTx() etc. For example:

const purrseApi = await window.cardano.enable();

const walletBalance = await purrseApi.getBalance();

const walletUtxos = await purrseApi.getUtxos();

Scanning the QR code will establish a link between the user's Purrse wallet and your dApp, making it possible for you to access the user's wallet address and balance and create various transactions using the standard CIP-30 API.

Calling signTx() will result in 2 things:

1. A request will be sent to the connected Purrse wallet app via push notification. If the user has push notification enabled in their Purrse app, this notification will trigger a transaction signing dialog for the user to review and sign the transaction.
2. At the same time, a QR code will show on the frontend which users without push notification enabled, or who fail to receive a notification for various reasons, can scan using their Purrse mobile app to load the transaction on their app for review and signing.

License

MIT