JSPM

@1claw/wallet-react

0.3.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 38
  • Score
    100M100P100Q71025F
  • License MIT

Embeddable treasury wallet component for Platform API apps built on 1Claw

Package Exports

  • @1claw/wallet-react

Readme

@1claw/wallet-react

Embeddable treasury wallet React component for Platform API apps built on 1Claw.

Installation

npm install @1claw/wallet-react

Quick Start

import { OneclawTreasuryWidget } from "@1claw/wallet-react";

function App() {
  return (
    <OneclawTreasuryWidget
      apiKey="plt_your_platform_api_key"
      chains={["ethereum", "base"]}
      onTransactionSent={(tx) => console.log("Sent:", tx.txHash)}
      onError={(err) => console.error(err)}
    />
  );
}

Components

<OneclawEmbeddedWallet /> (v0.3.0)

Full embedded wallet with social login, email OTP login, Send/Swap/Receive/Buy views:

import { OneclawEmbeddedWallet } from "@1claw/wallet-react";

function App() {
  return (
    <OneclawEmbeddedWallet
      appId="your-platform-slug"
      socialProviders={["google", "apple"]}
      features={{ send: true, swap: true, buy: true, receive: true }}
      onLogin={(user) => console.log(user.walletAddress)}
    />
  );
}

Authentication methods:

  • Social login — Google/Apple via POST /v1/auth/social-login.
  • Email OTP — Passwordless login via sendEmailOtp(email) and verifyEmailOtp(email, code). Uses POST /v1/auth/email-otp/send and POST /v1/auth/email-otp/verify.
  • Passkey transaction auth — tx-assert endpoints; sends can use X-Passkey-Token instead of password.

<OneclawTreasuryWidget />

All-in-one widget that displays wallet balances and allows transfers.

Prop Type Required Description
apiKey string Yes Platform API key (plt_...)
baseUrl string No API base URL (default: https://api.1claw.xyz)
chains string[] No Chains to generate wallets for
theme "light" | "dark" | "auto" No Color theme
onError (error: Error) => void No Error callback
onTransactionSent (result) => void No Send success callback
onSwapCompleted (result) => void No Swap success callback
className string No CSS class for outer container

<OneclawWalletProvider />

Lower-level provider for building custom UI:

import { OneclawWalletProvider, useOneclawWallet } from "@1claw/wallet-react";

function CustomWalletUI() {
  const { wallets, balances, send, swap, refreshBalance } = useOneclawWallet();
  // Build your own UI...
}

function App() {
  return (
    <OneclawWalletProvider apiKey="plt_...">
      <CustomWalletUI />
    </OneclawWalletProvider>
  );
}

Hooks

useOneclawWallet()

Returns:

Field Type Description
wallets WalletInfo[] Active wallets
balances Record<string, WalletBalance> Cached balances by chain
loading boolean Initial load state
error Error | null Last error
refreshWallets() () => Promise<void> Refetch wallet list
refreshBalance(chain) (chain: string) => Promise<WalletBalance> Fetch balance
generateWallets(chains?) (chains?: string[]) => Promise<WalletInfo[]> Generate new wallets
send(params) (params: SendTransactionParams) => Promise<SendTransactionResult> Send a transaction
swap(params) (params: SwapParams) => Promise<SwapResult> Swap tokens via DEX aggregator
sendEmailOtp(email) (email: string) => Promise<{ status: string }> Send a one-time passcode for email login
verifyEmailOtp(email, code) (email: string, code: string) => Promise<SocialLoginResult> Verify OTP and authenticate

Security

  • The apiKey is a Platform API key, not a user key — it inherits platform custody guarantees.
  • Sends require password re-authentication via the password field in SendTransactionParams, or a passkey token from completePasskeyTxAuth() via sendWithPasskey().
  • Gasless sends (gasless: true in SendTransactionParams) use an ERC-4337 paymaster to sponsor gas — the user pays no gas fees.
  • Swaps route through a DEX aggregator (0x API) and also require password re-authentication.
  • The widget never stores or caches private keys client-side.