@plutoxyz/frame-js

Frame SDK

A library for integrating with Pluto's frame-based verification system.

Installation

npm install @plutoxyz/frame-js

Usage

import Pluto, {
  PageHooks,
  ProofPayload,
  ErrorPayload,
} from "@plutoxyz/frame-js";

// Step 1: Add a container element to your HTML
// <div id="pluto-frame"></div>

// Step 2: Define event handlers
const hooks: PageHooks = {
  onScriptLog: (log) => console.log("Log from verification process:", log),
  onSuccess: (data: ProofPayload) => {
    console.log("Verification successful:", data);
    // Handle successful proof (e.g., submit to your backend)
  },
  onError: (error: ErrorPayload) => {
    console.error("Verification error:", error);
    // Handle error (e.g., show user-friendly message)
  },
};

// Step 3: Initialize the SDK
await Pluto.initialize(hooks);

// Step 4: Connect to frame, pass in automation script
await Pluto.connect(`
  const accessToken = await oauth({
    title: 'Connect with OAuth Demo',
    description: 'Connect with the local OAuth Debugger',
    clientId: '123',
  });

  // ...

  const balanceText = (await balanceLocator.textContent()) || '';
  const balance = parseFloat(balanceText.replace(/[$,]/g, ''));

  await prove('bank_balance', balance);
`);

API Reference

• initialize(hooks: PageHooks, options?: InitializationOptions): Promise<PlutoSDK>

  Initialize the SDK with event handlers and options.

  const hooks = {
    onScriptLog: (log) => console.log(log),
    onSuccess: (data) => handleSuccess(data),
    onError: (error) => handleError(error),
  };
  
  await Pluto.initialize(hooks, {
    brand: {
      name: "My Company",
      logo: "https://my-company.com/logo.png",
    },
  });

• connect(script: string): Promise<void>

  Connect to the verification frame. Optionally provide a verification script.

  await Pluto.connect(`
    const accessToken = await oauth({
      title: 'Connect with OAuth Demo',
      description: 'Connect with the local OAuth Debugger',
      clientId: '123',
    });
  
    // ...
  
    const balanceText = (await balanceLocator.textContent()) || '';
    const balance = parseFloat(balanceText.replace(/[$,]/g, ''));
  
    await prove('bank_balance', balance);
  `);

• resetConnection(): Promise<void>

  Resets the connection to the verification frame and cleans up resources.

  await Pluto.resetConnection();

• updateBrand(brand: Brand): Promise<void>

  Updates the brand of the verification frame.

  await Pluto.updateBrand({
    name: "My Company",
    logo: "https://my-company.com/logo.png",
  });

HTML Setup

The verification frame requires a container element with the ID pluto-frame:

<div id="pluto-frame"></div>

The frame will be automatically styled and positioned within this container.

License

MIT