Skyfire USDC Wallet Embed SDK

A React SDK that embeds a USDC wallet directly into your app, allowing users to view real-time balances and top up instantly via a built-in Stripe checkout.

Installation

npm install @skyfire-xyz/usdc-wallet-embed-sdk

Prerequisites

• Skyfire User Id
• Skyfire API Key

Quick Start

1. Basic Setup

"use client";

import { useState } from "react";

import {
  EmbeddedIframeOptions,
  EmbeddedIframeProvider,
  EmbeddedIframe,
  EventType
} from "@skyfire-xyz/usdc-wallet-embed-sdk";

// API Call to create a skyfire session
const functionToGetSkyfireUserSession = async (userId: string) => {
  ....
};

export default function App() {
  const options: EmbeddedIframeOptions = {
    fetchClientSecret: () => functionToGetSkyfireUserSession("user-id"),
    onEvent: async (type: EventType, data: unknown) => {
      console.log("Event:", type, data);
    },
  };

  return (
    <div>
      <EmbeddedIframeProvider options={options}>
        <EmbeddedIframe />
      </EmbeddedIframeProvider>
    </div>
  );
}

Configuration Options

EmbeddedIframeOptions

interface EmbeddedIframeOptions {
  fetchClientSecret?: () => Promise<string>;
  onEvent?: (eventType: EventType, payload?: unknown) => void;
  showSuccessMessage?: boolean;
  environment?: Environment;
  customUrl?: string;
  redirectUrl?: string;
  buttonText?: string;
}

Properties:

• fetchClientSecret - Your function that calls Skyfire API to get a user session token
• onEvent - Event handler for iframe events
• showSuccessMessage - Whether to show success messages (default: true)
• environment - Skyfire environment to use ("sandbox" | "production")
• customUrl - Custom URL for dev environment (optional). Overrides environment
• redirectUrl - The URL where Stripe should redirect to after check out (defaults to origin URL of where iframe is embedded)
• buttonText - Text of the button that initiates the top-up flow

Event Types

The SDK emits various events that you can listen to:

type EventType =
  | "AUTH_TOKEN_READY"

  // Top-Up Events
  | "PAYMENT_COMPLETED"

  // General Events
  | "ERROR"
  | "AUTH_ERROR"
  | "AUTH_SUCCESS"
  | "APP_READY";

License

MIT