Sign Message

Address: {session.address}

Message to sign:

setMessage(e.target.value)}
          placeholder="Enter your message here..."
          rows={4}
          className="w-full p-2 border rounded"
        />
      </div>

<button
        onClick={handleSign}
        disabled={isLoading || !message.trim()}
        className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
      >
        {isLoading ? "Signing..." : "Sign Message"}
      </button>

{error && (
        <div className="p-3 bg-red-100 text-red-700 rounded">
          Error: {error}
        </div>
      )}

{signature && (
        <div className="p-3 bg-green-100 rounded">
          <h3 className="font-bold">Signature:</h3>
          <p className="break-all font-mono text-sm">{signature}</p>
        </div>
      )}
    </div>
  );
}
```

## Use Cases

### 1. Authentication Challenge

Prove ownership of an address for authentication:

```tsx
const handleAuth = async () => {
  const challenge = await fetch("/api/auth/challenge").then((r) => r.json());

const result = await signMessage(challenge.message);

if (result.status === "success") {
    // Send signature to backend for verification
    const response = await fetch("/api/auth/verify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        message: result.data.message,
        signature: result.data.signature,
        publicKey: result.data.publicKey,
      }),
    });

if (response.ok) {
      console.log("Authentication successful!");
    }
  }
};
```

### 2. Sign Terms of Service

Have users sign acceptance of terms:

```tsx
const handleAcceptTerms = async () => {
  const terms = `
    I accept the Terms of Service
    Date: ${new Date().toISOString()}
    Address: ${session.address}
  `;

const result = await signMessage(terms);

if (result.status === "success") {
    // Store signature as proof of acceptance
    await fetch("/api/terms/accept", {
      method: "POST",
      body: JSON.stringify({
        signature: result.data.signature,
        terms: terms,
      }),
    });
  }
};
```

### 3. Proof of Ownership

Prove you own an address without revealing private keys:

```tsx
const handleProveOwnership = async () => {
  const proof = `I own ${session.address} at ${new Date().toISOString()}`;

const result = await signMessage(proof);

if (result.status === "success") {
    return {
      address: session.address,
      message: proof,
      signature: result.data.signature,
      publicKey: result.data.publicKey,
    };
  }
};
```

## Error Handling

Handle different error scenarios:

```tsx
const result = await signMessage("Hello, World!");

if (result.status === "error") {
  if (result.message?.includes("cancelled")) {
    console.log("User cancelled signing");
  } else if (result.message?.includes("timeout")) {
    console.log("Signing timed out");
  } else if (result.message?.includes("not authenticated")) {
    console.log("User not logged in");
  } else {
    console.error("Signing failed:", result.message);
  }
}
```

## Verifying Signatures

To verify signatures on your backend, you'll need:

1. The original message
2. The signature
3. The public key

Example verification (pseudo-code):

```typescript
// Backend verification
function verifySignature(
  message: string,
  signature: string,
  publicKey: string
): boolean {
  // Use your preferred crypto library
  // e.g., bitcoinjs-lib for Bitcoin, ethers for Ethereum
  return cryptoLib.verify(message, signature, publicKey);
}
```

## Security Best Practices

### 1. Always Show Message to User

Never sign messages without showing them to the user:

```tsx
// ❌ Bad: Hidden message
await signMessage(hiddenChallenge);

// ✅ Good: Show message in UI
<div>
  <p>You are signing:</p>
  <pre>{messageToSign}</pre>
  <button onClick={() => signMessage(messageToSign)}>Sign</button>
</div>;
```

### 2. Include Timestamp

Include timestamps in messages to prevent replay attacks:

```tsx
const message = `
  Action: ${action}
  Timestamp: ${Date.now()}
  Address: ${session.address}
`;

await signMessage(message);
```

### 3. Validate on Backend

Always verify signatures on your backend:

```tsx
// Frontend
const result = await signMessage(challenge);

// Backend
POST /api/verify
{
  "message": "...",
  "signature": "...",
  "publicKey": "..."
}
```

## TypeScript

Full type safety with TypeScript:

```typescript
import type { BridgeResponse } from "@oviato/connect";

type SignatureData = {
  message: string;
  signature: string;
  publicKey: string;
};

const result: BridgeResponse<SignatureData> = await signMessage("Hello!");

if (result.status === "success") {
  const { message, signature, publicKey } = result.data;
  // TypeScript knows the types here
}
```

## Troubleshooting

### "User not authenticated"

User must be logged in. Check `session` first:

```tsx
if (!session) {
  alert("Please connect your wallet first");
  return;
}

await signMessage("Hello!");
```

### "User cancelled signing"

User closed the signing modal. This is normal behavior.

### Signature verification fails

Ensure you're using:

- The exact same message (including whitespace)
- The correct public key
- The right verification algorithm for the network

## Next Steps

- **[Signing Transactions](/ovi-connect-sdk/signing-transactions)** - Learn about transaction signing

---

# FILE: ovi-connect-sdk/signing-transactions.mdx

Learn how to send cryptocurrency transfers and sign Bitcoin PSBTs using @oviato/connect in React applications.

## Overview

@oviato/connect provides two main transaction capabilities:

1. **Send Transfers** - Simple cryptocurrency transfers across all supported networks
2. **Sign PSBTs** - Sign Partially Signed Bitcoin Transactions (Bitcoin only)

## Send Transfers

Send cryptocurrency to any address:

### Basic Usage

```tsx
"use client";

import { useState } from "react";
import { useOviConnect } from "@oviato/connect/client";
import { sendTransfer } from "@oviato/connect";

export default function SendTransfer() {
  const { session } = useOviConnect();
  const [txid, setTxid] = useState("");

const handleSend = async () => {
    const result = await sendTransfer({
      to: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
      amount: 10000, // 10,000 satoshis = 0.0001 BTC
      fee: 1000, // 1,000 satoshis fee
    });

if (result.status === "success") {
      setTxid(result.data.txid);
      console.log("Explorer:", result.data.explorerUrl);
    }
  };

if (!session) {
    return <div>Please connect your wallet first</div>;
  }

return (
    <div>
      <button onClick={handleSend}>Send Transfer</button>
      {txid && (
        <div>
          <p>Transaction ID: {txid}</p>
        </div>
      )}
    </div>
  );
}
```

### Complete Transfer Form

Here's a complete example with form inputs and validation:

```tsx
"use client";

import { useState } from "react";
import { useOviConnect } from "@oviato/connect/client";
import { sendTransfer, rpc } from "@oviato/connect";

export default function TransferForm() {
  const { session } = useOviConnect();
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");
  const [fee, setFee] = useState("1000");
  const [txid, setTxid] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [balance, setBalance] = useState<number | null>(null);

// Load balance
  const loadBalance = async () => {
    if (!session) return;

const result = await rpc.getBalance({ address: session.address });
    if (result.result) {
      setBalance(result.result.balance);
    }
  };

// Call on mount
  useState(() => {
    loadBalance();
  });

const handleSend = async () => {
    // Validation
    if (!recipient.trim()) {
      setError("Please enter recipient address");
      return;
    }

const amountNum = parseInt(amount);
    const feeNum = parseInt(fee);

if (isNaN(amountNum) || amountNum <= 0) {
      setError("Please enter valid amount");
      return;
    }

if (balance !== null && amountNum + feeNum > balance) {
      setError("Insufficient balance");
      return;
    }

// Confirm with user
    const confirmed = confirm(
      `Send ${amountNum} satoshis to ${recipient}?\nFee: ${feeNum} satoshis`
    );

if (!confirmed) return;

setIsLoading(true);
    setError("");
    setTxid("");

const result = await sendTransfer({
      to: recipient,
      amount: amountNum,
      fee: feeNum,
    });

if (result.status === "success") {
      setTxid(result.data.txid);
      setRecipient("");
      setAmount("");
      await loadBalance(); // Refresh balance
    } else {
      setError(result.message || "Transfer failed");
    }

setIsLoading(false);
  };

if (!session) {
    return (
      <div>
        <p>Please connect your wallet to send transfers</p>
      </div>
    );
  }

return (
    <div className="space-y-4">
      <div>
        <h2>Send Transfer</h2>
        <p>From: {session.address}</p>
        <p>
          Balance: {balance !== null ? `${balance} satoshis` : "Loading..."}
        </p>
      </div>

<div>
        <label htmlFor="recipient">Recipient Address:</label>
        <input
          id="recipient"
          type="text"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
          placeholder="bc1q..."
          className="w-full p-2 border rounded"
        />
      </div>

<div>
        <label htmlFor="amount">Amount (satoshis):</label>
        <input
          id="amount"
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="10000"
          className="w-full p-2 border rounded"
        />
      </div>

<div>
        <label htmlFor="fee">Fee (satoshis):</label>
        <input
          id="fee"
          type="number"
          value={fee}
          onChange={(e) => setFee(e.target.value)}
          placeholder="1000"
          className="w-full p-2 border rounded"
        />
      </div>

<button
        onClick={handleSend}
        disabled={isLoading || !recipient || !amount}
        className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
      >
        {isLoading ? "Sending..." : "Send Transfer"}
      </button>

{error && (
        <div className="p-3 bg-red-100 text-red-700 rounded">
          Error: {error}
        </div>
      )}

{txid && (
        <div className="p-3 bg-green-100 rounded">
          <h3 className="font-bold">Transaction Sent!</h3>
          <p className="break-all font-mono text-sm">TX ID: {txid}</p>
        </div>
      )}
    </div>
  );
}
```

### Transfer Options

```typescript
type TransferOptions = {
  to: string; // Recipient address
  amount: number; // Amount in smallest unit
  fee: number; // Fee in smallest unit
  memo?: string; // Optional memo (not supported on all networks)
};
```

### Amount Units by Network

| Network  | Unit     | Example                       |
| -------- | -------- | ----------------------------- |
| Bitcoin  | Satoshis | `10000` = 0.0001 BTC          |
| Ethereum | Wei      | `1000000000000000000` = 1 ETH |

## Sign PSBTs (Bitcoin Only)

Sign Partially Signed Bitcoin Transactions for advanced Bitcoin use cases:

### Basic Usage

```tsx
import { signPsbt } from "@oviato/connect";

const result = await signPsbt({
  psbt: "cHNidP8BAH0CAAAAA...", // Base64 encoded PSBT
  signInputs: [0, 1], // Indices to sign
  broadcast: true, // Auto-broadcast
});

if (result.status === "success") {
  console.log("Signed PSBT:", result.data.psbt);
  if (result.data.txid) {
    console.log("Broadcast TX:", result.data.txid);
  }
}
```

### PSBT Signing Component

```tsx
"use client";

import { useState } from "react";
import { useOviConnect } from "@oviato/connect/client";
import { signPsbt } from "@oviato/connect";

export default function PsbtSigner() {
  const { session } = useOviConnect();
  const [psbtInput, setPsbtInput] = useState("");
  const [signInputs, setSignInputs] = useState("0");
  const [broadcast, setBroadcast] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);

const handleSign = async () => {
    if (!psbtInput.trim()) {
      setError("Please enter PSBT");
      return;
    }

const indices = signInputs
      .split(",")
      .map((s) => parseInt(s.trim()))
      .filter((n) => !isNaN(n));

if (indices.length === 0) {
      setError("Please enter valid input indices");
      return;
    }

setIsLoading(true);
    setError("");
    setResult(null);

const signResult = await signPsbt({
      psbt: psbtInput,
      signInputs: indices,
      broadcast,
    });

if (signResult.status === "success") {
      setResult(signResult.data);
    } else {
      setError(signResult.message || "Failed to sign PSBT");
    }

setIsLoading(false);
  };

if (!session) {
    return (
      <div>
        <p>Please connect your wallet to sign PSBTs</p>
      </div>
    );
  }

if (
    session.network !== "bitcoinmainnet" &&
    session.network !== "bitcointestnet"
  ) {
    return (
      <div>
        <p>PSBT signing is only available on Bitcoin networks</p>
      </div>
    );
  }

return (
    <div className="space-y-4">
      <div>
        <h2>Sign PSBT</h2>
        <p>Address: {session.address}</p>
      </div>

<div>
        <label htmlFor="psbt">PSBT (Base64):</label>
        <textarea
          id="psbt"
          value={psbtInput}
          onChange={(e) => setPsbtInput(e.target.value)}
          placeholder="cHNidP8BAH0..."
          rows={6}
          className="w-full p-2 border rounded font-mono text-sm"
        />
      </div>

<div>
        <label htmlFor="inputs">Input Indices (comma-separated):</label>
        <input
          id="inputs"
          type="text"
          value={signInputs}
          onChange={(e) => setSignInputs(e.target.value)}
          placeholder="0,1,2"
          className="w-full p-2 border rounded"
        />
      </div>

<div>
        <label className="flex items-center space-x-2">
          <input
            type="checkbox"
            checked={broadcast}
            onChange={(e) => setBroadcast(e.target.checked)}
          />
          <span>Broadcast after signing</span>
        </label>
      </div>

<button
        onClick={handleSign}
        disabled={isLoading || !psbtInput}
        className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
      >
        {isLoading ? "Signing..." : "Sign PSBT"}
      </button>

{error && (
        <div className="p-3 bg-red-100 text-red-700 rounded">
          Error: {error}
        </div>
      )}

{result && (
        <div className="p-3 bg-green-100 rounded">
          <h3 className="font-bold">Signed!</h3>
          <p className="break-all font-mono text-sm">PSBT: {result.psbt}</p>
          {result.txid && (
            <p className="break-all font-mono text-sm mt-2">
              TX ID: {result.txid}
            </p>
          )}
        </div>
      )}
    </div>
  );
}
```

### PSBT Options

```typescript
type SignPsbtOptions = {
  psbt: string; // Base64 encoded PSBT
  signInputs: number[]; // Input indices to sign [0, 1, 2]
  broadcast?: boolean; // Auto-broadcast (default: false)
};
```

## Response Types

### Transfer Response

```typescript
type TransferResponse = {
  status: "success" | "error";
  data?: {
    txid: string; // Transaction ID
    explorerUrl: string; // Block explorer URL
  };
  message?: string; // Error message if failed
};
```

### PSBT Response

```typescript
type PsbtResponse = {
  status: "success" | "error";
  data?: {
    psbt: string; // Signed PSBT (Base64)
    txid?: string; // TX ID if broadcast=true
  };
  message?: string; // Error message if failed
};
```

## Error Handling

Handle common transaction errors:

```tsx
const result = await sendTransfer({
  to: recipient,
  amount: amount,
  fee: fee,
});

if (result.status === "error") {
  if (result.message?.includes("insufficient funds")) {
    alert("Not enough balance");
  } else if (result.message?.includes("invalid address")) {
    alert("Invalid recipient address");
  } else if (result.message?.includes("cancelled")) {
    console.log("User cancelled transaction");
  } else {
    alert("Transfer failed: " + result.message);
  }
}
```

## Security Best Practices

### 1. Always Validate Addresses

```tsx
function isValidBitcoinAddress(address: string): boolean {
  return /^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,62}$/.test(address);
}

function isValidEthereumAddress(address: string): boolean {
  return /^0x[a-fA-F0-9]{40}$/.test(address);
}

// Use before sending
if (!isValidBitcoinAddress(recipient)) {
  setError("Invalid Bitcoin address");
  return;
}
```

### 2. Confirm Before Sending

Always show confirmation dialog:

```tsx
const confirmed = confirm(
  `Send ${amount} satoshis to ${recipient}?\n` +
    `Fee: ${fee} satoshis\n` +
    `Total: ${amount + fee} satoshis`
);

if (!confirmed) return;

await sendTransfer({ to: recipient, amount, fee });
```

### 3. Check Balance First

```tsx
import { rpc } from "@oviato/connect";

const balanceResult = await rpc.getBalance({
  address: session.address,
});

const balance = balanceResult.result?.balance || 0;

if (balance < amount + fee) {
  alert("Insufficient balance");
  return;
}
```

### 4. Show Transaction Status

```tsx
const [status, setStatus] = useState("");

setStatus("Preparing transaction...");

const result = await sendTransfer({ to, amount, fee });

if (result.status === "success") {
  setStatus("Transaction sent!");
  console.log("View on explorer:", result.data.explorerUrl);
} else {
  setStatus("Transaction failed");
}
```

## TypeScript

Full type safety with TypeScript:

```typescript
import type { BridgeResponse } from "@oviato/connect";

type TransferData = {
  txid: string;
  explorerUrl: string;
};

const result: BridgeResponse<TransferData> = await sendTransfer({
  to: "bc1q...",
  amount: 10000,
  fee: 1000,
});

if (result.status === "success") {
  const { txid, explorerUrl } = result.data;
  // TypeScript knows the types
}
```

## Troubleshooting

### "Insufficient funds"

Check balance before sending:

```tsx
const balance = await rpc.getBalance({ address: session.address });
if (balance.result.balance < amount + fee) {
  alert("Not enough balance");
}
```

### "Invalid address"

Validate the recipient address format for the current network.

### "User rejected transaction"

User cancelled the transaction in the signing modal.

### "Network error"

Check network connectivity and try again.

## Next Steps

- **[Signing Messages](/ovi-connect-sdk/signing-messages)** - Learn about message signing

---

# FILE: ovi-sdk/what-is-ovi-sdk.mdx

**@oviato/sdk** is Oviato's framework-agnostic core SDK that provides WebAuthn-based passkey authentication and multi-chain wallet functionality for any JavaScript framework or vanilla JavaScript.

## Why @oviato/sdk?

@oviato/sdk is designed for maximum flexibility:

- **Framework Agnostic**: Works with React, Vue, Svelte, Angular, vanilla JS, or any framework
- **Zero Dependencies**: Lightweight core with no framework requirements
- **Tiny Bundle**: ~7.7 KB gzipped
- **CDN Ready**: Drop-in `<script>` tag support for quick prototyping
- **Full Control**: Build custom UIs without opinionated components
- **TypeScript Native**: Complete type safety

## When to Use @oviato/sdk

Choose **@oviato/sdk** if you're building with:

- ✅ Vue.js
- ✅ Svelte
- ✅ Angular
- ✅ Vanilla JavaScript
- ✅ Any non-React framework
- ✅ Custom React implementation (without pre-built components)

For **React/Next.js** with hooks and components, use [@oviato/connect](/docs/ovi-connect-sdk/what-is-ovi-connect) instead.

## Key Features

### Simple Initialization

```javascript
import { initialize } from "@oviato/sdk";

await initialize({
  appId: "your-app-id",
  network: "bitcoinmainnet",
});
```

### Smart Authentication

Auto-detects whether users are new or returning:

```javascript
import { authenticate } from "@oviato/sdk";

const result = await authenticate({ username: "alice" });

if (result.status === "success") {
  console.log("Connected:", result.data.address);
}
```

### Wallet Operations

Full wallet functionality:

```javascript
import { signMessage, sendTransfer, switchNetwork } from "@oviato/sdk";

// Sign a message
await signMessage("Hello Oviato!");

// Send transfer
await sendTransfer({
  to: "bc1q...",
  amount: 10000,
  fee: 1000,
});

// Switch network
await switchNetwork("ethmainnet");
```

### Session Management

Simple session APIs:

```javascript
import { getSession, isAuthenticated, clearSession } from "@oviato/sdk";

const session = getSession(); // Get current session
const isAuth = isAuthenticated(); // Check auth status
clearSession(); // Logout
```

### State Management

Built-in Zustand store for state management:

```javascript
import { oviStore } from "@oviato/sdk";

// Subscribe to state changes
const unsubscribe = oviStore.subscribe((state) => {
  console.log("Session:", state.session);
  console.log("Ready:", state.ready);
});

// Get current state
const state = oviStore.getState();
```

## Package Architecture

@oviato/sdk follows a clean, modular architecture:

```
@oviato/sdk
├── Core Functions
│   ├── initialize()
│   ├── authenticate()
│   ├── login()
│   └── register()
├── Wallet Operations
│   ├── signMessage()
│   ├── sendTransfer()
│   ├── switchNetwork()
│   └── signPsbt()
├── Session Management
│   ├── getSession()
│   ├── setSession()
│   └── clearSession()
├── RPC Client
│   ├── rpc.getBalance()
│   ├── rpc.getTransactionHistory()
│   └── rpcRequest()
└── State Store
    └── oviStore (Zustand)
```

## Installation Methods

### NPM

```bash
npm install @oviato/sdk
# or
pnpm add @oviato/sdk
# or
yarn add @oviato/sdk
```

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@oviato/sdk@latest/dist/oviato.min.js"></script>
<script>
  const { initialize, authenticate, getSession } = OviatoSDK;
</script>
```

## Quick Comparison

| Feature           | @oviato/sdk     | @oviato/connect |
| ----------------- | --------------- | --------------- |
| **Best For**      | Any framework   | React/Next.js   |
| **Framework**     | Agnostic        | React only      |
| **Hooks**         | ❌ No           | ✅ Yes          |
| **UI Components** | ❌ No           | ✅ Yes          |
| **Bundle Size**   | ~7.7 KB         | ~14 KB          |
| **CDN Support**   | ✅ Yes          | ❌ No           |
| **TypeScript**    | ✅ Full support | ✅ Full support |

## What's Included?

### Authentication Methods

- `authenticate()` - Smart authentication (auto-detects login vs register)
- `login()` - Explicit login for returning users
- `register()` - Create new account with passkey

### Wallet Operations

- `signMessage()` - Sign arbitrary messages
- `sendTransfer()` - Send cryptocurrency
- `signPsbt()` - Sign Bitcoin PSBTs
- `switchNetwork()` - Change blockchain network

### Session Management

- `getSession()` - Get current user session
- `setSession()` - Update session (advanced)
- `clearSession()` - Logout user
- `isAuthenticated()` - Check authentication status

### RPC Client

- `rpc.getBalance()` - Get wallet balance
- `rpc.getTransactionHistory()` - Get transaction history
- `rpc.resolveUsername()` - Resolve OVI.ID usernames
- `rpcRequest()` - Custom RPC calls

### Utilities

- `resolveOviId()` - Resolve usernames to addresses
- `getConfig()` - Get SDK configuration
- `isInitialized()` - Check initialization status

## Framework Integration Examples

### Vanilla JavaScript

```javascript
import { initialize, authenticate, getSession } from "@oviato/sdk";

await initialize({ appId: "your-app-id" });

document.getElementById("connect").onclick = async () => {
  const result = await authenticate();
  if (result.status === "success") {
    const session = getSession();
    document.getElementById("address").textContent = session.address;
  }
};
```

### Vue 3

```vue
<script setup>
import { ref, onMounted } from "vue";
import { oviStore, initialize, authenticate } from "@oviato/sdk";

const session = ref(null);

onMounted(async () => {
  await initialize({ appId: "your-app-id" });

oviStore.subscribe((state) => {
    session.value = state.session;
  });
});

const connect = async () => {
  await authenticate();
};
</script>

<template>
  <div>
    <button v-if="!session" @click="connect">Connect</button>
    <div v-else>Connected: {{ session.address }}</div>
  </div>
</template>
```

### Svelte

```svelte
<script>
import { onMount } from 'svelte';
import { oviStore, initialize, authenticate } from '@oviato/sdk';

let session = null;

onMount(async () => {
  await initialize({ appId: 'your-app-id' });

oviStore.subscribe((state) => {
    session = state.session;
  });
});

const connect = async () => {
  await authenticate();
};
</script>

{#if session}
  <p>Connected: {session.address}</p>
{:else}
  <button on:click={connect}>Connect</button>
{/if}
```

## Supported Networks

- Bitcoin (mainnet, testnet)
- Ethereum (mainnet, sepolia). **soon**

## Error Handling

All async methods return a `BridgeResponse` object:

```javascript
const result = await login();

if (result.status === "success") {
  console.log("User:", result.data);
} else {
  console.error("Error:", result.message);
}
```

## TypeScript Support

Full TypeScript definitions included:

```typescript
import type {
  UserSession,
  OviatoConfig,
  BridgeResponse,
  LoginOptions,
  RegisterOptions,
  AuthenticateOptions,
} from "@oviato/sdk";

const session: UserSession | null = getSession();
```

## Next Steps

- **[Installation & Setup](/ovi-sdk/installation)** - Get started with @oviato/sdk
- **[Authentication Guide](/ovi-sdk/authentication)** - Learn about authentication
- **[Wallet Operations](/ovi-sdk/wallet-operations)** - Explore wallet functionality

---

# FILE: ovi-sdk/installation.mdx

This guide covers installing and setting up @oviato/sdk in any JavaScript framework or vanilla JS project.

## Prerequisites

Before you begin:

1. **An Oviato App ID** - Create one at [dashboard.oviato.com](https://dashboard.oviato.com)
   - See [Setting Up Your App](/docs/developer-dashboard/setting-up-app) for instructions
2. **Node.js 16+** installed (for NPM installation)
3. **A JavaScript project** (or just an HTML file for CDN usage)

## Installation Options

### Option 1: NPM (Recommended)

For modern JavaScript projects with a build system:

```bash
# npm
npm install @oviato/sdk

# pnpm
pnpm add @oviato/sdk

# yarn
yarn add @oviato/sdk

# bun
bun add @oviato/sdk
```

### Option 2: CDN

For quick prototyping or simple HTML projects:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <button id="connect-btn">Connect Wallet</button>
    <div id="status"></div>

// Your code here
    </script>
  </body>
</html>
```

## Basic Setup

### 1. Initialize the SDK

Initialize the SDK before using any other functions:

```javascript
import { initialize } from "@oviato/sdk";

await initialize({
  appId: "your-app-id",
  network: "bitcoinmainnet", // optional, default: 'bitcoinmainnet'
  env: "prod", // optional, default: 'prod'
});
```

### 2. Authenticate Users

Use the smart `authenticate()` function to handle both new and returning users:

```javascript
import { authenticate } from "@oviato/sdk";

const result = await authenticate({
  username: "alice", // optional: pre-fill username
});

if (result.status === "success") {
  console.log("Connected!");
  console.log("Address:", result.data.address);
  console.log("Username:", result.data.username);
}
```

### 3. Access Session Data

```javascript
import { getSession, isAuthenticated } from "@oviato/sdk";

const session = getSession();
if (session) {
  console.log("User is connected:", session.address);
}

const isAuth = isAuthenticated(); // true/false
```

## Framework-Specific Setup

### Vanilla JavaScript

```html
<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <button id="connect">Connect Wallet</button>
      <div id="status"></div>
    </div>

// Initialize
      await initialize({
        appId: "your-app-id",
        network: "bitcoinmainnet",
      });

// Connect button
      document.getElementById("connect").onclick = async () => {
        const result = await authenticate();

if (result.status === "success") {
          updateStatus();
        }
      };

function updateStatus() {
        const session = getSession();
        const statusDiv = document.getElementById("status");

if (session) {
          statusDiv.innerHTML = `
          <p>Connected: ${session.address}</p>
          <p>Username: ${session.username}</p>
          <button onclick="handleDisconnect()">Disconnect</button>
        `;
          document.getElementById("connect").style.display = "none";
        }
      }

window.handleDisconnect = () => {
        clearSession();
        location.reload();
      };

// Check on load
      updateStatus();
    </script>
  </body>
</html>
```

### Vue 3 (Composition API)

```vue
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { oviStore, initialize, authenticate, clearSession } from "@oviato/sdk";

const session = ref(null);
const isLoading = ref(true);
let unsubscribe;

onMounted(async () => {
  // Initialize SDK
  await initialize({
    appId: import.meta.env.VITE_OVIATO_APP_ID,
    network: "bitcoinmainnet",
  });

// Subscribe to state changes
  unsubscribe = oviStore.subscribe((state) => {
    session.value = state.session;
    isLoading.value = state.isLoading;
  });

// Get initial state
  const state = oviStore.getState();
  session.value = state.session;
  isLoading.value = state.isLoading;
});

onUnmounted(() => {
  unsubscribe?.();
});

const handleConnect = async () => {
  const result = await authenticate();
  if (result.status === "success") {
    console.log("Connected!");
  }
};

const handleDisconnect = () => {
  clearSession();
};
</script>

<template>
  <div>
    <div v-if="isLoading">Loading...</div>

<div v-else-if="session">
      <h2>Welcome, {{ session.username }}!</h2>
      <p>Address: {{ session.address }}</p>
      <p>Network: {{ session.network }}</p>
      <button @click="handleDisconnect">Disconnect</button>
    </div>

<div v-else>
      <button @click="handleConnect">Connect Wallet</button>
    </div>
  </div>
</template>
```

### Svelte

```svelte
<script>
import { onMount, onDestroy } from 'svelte';
import { oviStore, initialize, authenticate, clearSession } from '@oviato/sdk';

let session = null;
let isLoading = true;
let unsubscribe;

onMount(async () => {
  // Initialize SDK
  await initialize({
    appId: import.meta.env.VITE_OVIATO_APP_ID,
    network: 'bitcoinmainnet',
  });

// Subscribe to state changes
  unsubscribe = oviStore.subscribe((state) => {
    session = state.session;
    isLoading = state.isLoading;
  });

// Get initial state
  const state = oviStore.getState();
  session = state.session;
  isLoading = state.isLoading;
});

onDestroy(() => {
  unsubscribe?.();
});

const handleConnect = async () => {
  const result = await authenticate();
  if (result.status === 'success') {
    console.log('Connected!');
  }
};

const handleDisconnect = () => {
  clearSession();
};
</script>

{#if isLoading}
  <p>Loading...</p>
{:else if session}
  <div>
    <h2>Welcome, {session.username}!</h2>
    <p>Address: {session.address}</p>
    <p>Network: {session.network}</p>
    <button on:click={handleDisconnect}>Disconnect</button>
  </div>
{:else}
  <button on:click={handleConnect}>Connect Wallet</button>
{/if}
```

### Angular

```typescript
// app.component.ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import { oviStore, initialize, authenticate, clearSession } from "@oviato/sdk";
import type { UserSession } from "@oviato/sdk";

@Component({
  selector: "app-root",
  template: `
    <div *ngIf="isLoading">Loading...</div>

<div *ngIf="!isLoading && session">
      <h2>Welcome, {{ session.username }}!</h2>
      <p>Address: {{ session.address }}</p>
      <button (click)="handleDisconnect()">Disconnect</button>
    </div>

<div *ngIf="!isLoading && !session">
      <button (click)="handleConnect()">Connect Wallet</button>
    </div>
  `,
})
export class AppComponent implements OnInit, OnDestroy {
  session: UserSession | null = null;
  isLoading = true;
  private unsubscribe?: () => void;

async ngOnInit() {
    // Initialize SDK
    await initialize({
      appId: "your-app-id",
      network: "bitcoinmainnet",
    });

// Subscribe to state changes
    this.unsubscribe = oviStore.subscribe((state) => {
      this.session = state.session;
      this.isLoading = state.isLoading;
    });

// Get initial state
    const state = oviStore.getState();
    this.session = state.session;
    this.isLoading = state.isLoading;
  }

ngOnDestroy() {
    this.unsubscribe?.();
  }

async handleConnect() {
    const result = await authenticate();
    if (result.status === "success") {
      console.log("Connected!");
    }
  }

handleDisconnect() {
    clearSession();
  }
}
```

## Configuration Options

### Initialize Options

```javascript
await initialize({
  appId: string,          // Required: Your Oviato App ID
  network?: string,       // Optional: Default network (default: 'bitcoinmainnet')
  env?: 'prod' | 'staging' // Optional: Environment (default: 'prod')
});
```

### Supported Networks

- `bitcoinmainnet` - Bitcoin Mainnet
- `bitcointestnet` - Bitcoin Testnet
- `ethmainnet` - Ethereum Mainnet (soon)
- `ethsepolia` - Ethereum Sepolia Testnet (soon)

## Environment Variables

Store your App ID in environment variables:

### Vite

```bash
# .env.local
VITE_OVIATO_APP_ID=your-app-id-here
```

```javascript
await initialize({
  appId: import.meta.env.VITE_OVIATO_APP_ID,
});
```

### Webpack / Create React App

```bash
# .env.local
REACT_APP_OVIATO_APP_ID=your-app-id-here
```

```javascript
await initialize({
  appId: process.env.REACT_APP_OVIATO_APP_ID,
});
```

### Next.js

```bash
# .env.local
NEXT_PUBLIC_OVIATO_APP_ID=your-app-id-here
```

```javascript
await initialize({
  appId: process.env.NEXT_PUBLIC_OVIATO_APP_ID,
});
```

## State Management

@oviato/sdk uses Zustand for state management. Subscribe to state changes:

```javascript
import { oviStore } from "@oviato/sdk";

// Subscribe to all state changes
const unsubscribe = oviStore.subscribe((state) => {
  console.log("Session:", state.session);
  console.log("Ready:", state.ready);
  console.log("Loading:", state.isLoading);
  console.log("Config:", state.config);
});

// Unsubscribe when done
unsubscribe();

// Get current state without subscribing
const currentState = oviStore.getState();
```

## TypeScript Support

@oviato/sdk includes full TypeScript definitions:

```typescript
import type {
  UserSession,
  OviatoConfig,
  BridgeResponse,
  LoginOptions,
  RegisterOptions,
  AuthenticateOptions,
  ConnectStore,
} from "@oviato/sdk";

const session: UserSession | null = getSession();
```

## Verify Installation

Create a simple test to verify everything is working:

```javascript
import { initialize, getConfig, isInitialized } from "@oviato/sdk";

// Initialize
await initialize({
  appId: "your-app-id",
  network: "bitcoinmainnet",
});

// Verify initialization
console.log("Initialized:", isInitialized()); // true

// Get config
const config = getConfig();
console.log("Config:", config);
```

## Troubleshooting

### Module not found

If you see module errors:

- Ensure @oviato/sdk is installed: `npm install @oviato/sdk`
- Check your build configuration supports ES modules
- Try importing from CDN as a fallback

### WebAuthn not supported

WebAuthn requires:

- HTTPS (in production)
- Modern browser (Chrome 67+, Safari 14+, Firefox 60+)
- Hardware support for biometrics (Touch ID, Face ID, etc.)

### Session not persisting

Check that:

- Your domain is added to allowed domains in the dashboard
- Cookies are enabled
- LocalStorage is accessible
- You're using HTTPS in production

## Next Steps

- **[Authentication Guide](/ovi-sdk/authentication)** - Learn about authentication methods
- **[Wallet Operations](/ovi-sdk/wallet-operations)** - Explore wallet functionality

---

# FILE: ovi-sdk/authentication.mdx

@oviato/sdk provides three authentication methods: smart authentication, explicit login, and explicit registration. This guide covers all authentication flows.

## Authentication Methods

### Smart Authentication (Recommended)

The `authenticate()` function automatically detects whether the user is new or returning:

```javascript
import { authenticate } from "@oviato/sdk";

const result = await authenticate({
  username: "alice", // optional: pre-fill username
});

if (result.status === "success") {
  console.log("Connected:", result.data.address);
  console.log("Username:", result.data.username);
  console.log("Network:", result.data.network);
}
```

**When to use**: Most of the time. This provides the best user experience.

### Explicit Login

For returning users who already have a passkey:

```javascript
import { login } from "@oviato/sdk";

const result = await login({
  username: "alice", // optional: pre-fill username
});

if (result.status === "success") {
  console.log("Logged in:", result.data.address);
}
```

**When to use**: When you know the user already has an account (e.g., they clicked "Login" instead of "Sign Up").

### Explicit Registration

For new users creating an account:

```javascript
import { register } from "@oviato/sdk";

const result = await register({
  username: "bob", // required for registration
});

if (result.status === "success") {
  console.log("Registered:", result.data.address);
}
```

**When to use**: When you have separate sign-up and login flows.

## Authentication Options

### Pre-filling Username

You can pre-fill the username field:

```javascript
await authenticate({
  username: "alice@ovi.id",
});
```

### Without Pre-filled Username

Let users enter their own username:

```javascript
await authenticate();
// Opens modal with empty username field
```

## Response Handling

All authentication methods return a `BridgeResponse` object:

```typescript
type BridgeResponse<T> = {
  status: "success" | "error";
  data?: T;
  message?: string;
};
```

### Success Response

```javascript
const result = await authenticate();

if (result.status === "success") {
  console.log("Session data:", result.data);
  // result.data contains UserSession
}
```

### Error Handling

```javascript
const result = await authenticate();

if (result.status === "error") {
  console.error("Authentication failed:", result.message);

// Handle specific errors
  if (result.message.includes("cancelled")) {
    console.log("User cancelled authentication");
  } else if (result.message.includes("timeout")) {
    console.log("Authentication timed out");
  }
}
```

## Session Data

After successful authentication, access the session:

```javascript
import { getSession } from "@oviato/sdk";

const session = getSession();

if (session) {
  console.log("Username:", session.username);
  console.log("Address:", session.address);
  console.log("Public Key:", session.publicKey);
  console.log("Network:", session.network);
  console.log("HD Keys:", session.hdKeys);
}
```

### Session Type

```typescript
type UserSession = {
  username: string; // OVI.ID username
  address: string; // Current network address
  publicKey: string; // Current network public key
  network: string; // Active network
  networkType: string; // Network type (e.g., 'utxo', 'evm')
  networkEnvironment: string; // Environment ('mainnet', 'testnet')
  hdKeys: {
    mainnet: string; // Mainnet HD public key
    testnet: string; // Testnet HD public key
  };
  auth?: {
    token: string; // RPC auth token
    expires: string; // Token expiration (ISO 8601)
  };
};
```

## Checking Authentication Status

```javascript
import { isAuthenticated, getSession } from "@oviato/sdk";

// Quick check
if (isAuthenticated()) {
  console.log("User is authenticated");
}

// With session data
const session = getSession();
if (session) {
  console.log("User is authenticated as:", session.username);
}
```

## Logout

Clear the user session:

```javascript
import { clearSession } from "@oviato/sdk";

// Logout user
clearSession();

// Verify logout
console.log("Authenticated:", isAuthenticated()); // false
```

## Complete Authentication Example

Here's a complete example with all authentication flows:

```javascript
import {
  initialize,
  authenticate,
  login,
  register,
  getSession,
  isAuthenticated,
  clearSession,
} from "@oviato/sdk";

// Initialize SDK
await initialize({
  appId: "your-app-id",
  network: "bitcoinmainnet",
});

// Check if already authenticated
if (isAuthenticated()) {
  const session = getSession();
  console.log("Already logged in as:", session.username);
} else {
  // Authenticate user
  const result = await authenticate();

if (result.status === "success") {
    const session = getSession();
    console.log("Successfully authenticated!");
    console.log("Username:", session.username);
    console.log("Address:", session.address);
  } else {
    console.error("Authentication failed:", result.message);
  }
}

// Later: logout
function handleLogout() {
  clearSession();
  console.log("Logged out");
}
```

## Framework-Specific Examples

### Vue 3

```vue
<script setup>
import { ref } from "vue";
import { authenticate, getSession, clearSession } from "@oviato/sdk";

const session = ref(getSession());
const isLoading = ref(false);
const error = ref(null);

const handleAuth = async () => {
  isLoading.value = true;
  error.value = null;

const result = await authenticate();

if (result.status === "success") {
    session.value = getSession();
  } else {
    error.value = result.message;
  }

isLoading.value = false;
};

const handleLogout = () => {
  clearSession();
  session.value = null;
};
</script>

<template>
  <div>
    <div v-if="error" class="error">{{ error }}</div>

<div v-if="session">
      <p>Welcome, {{ session.username }}!</p>
      <p>Address: {{ session.address }}</p>
      <button @click="handleLogout">Logout</button>
    </div>

<div v-else>
      <button @click="handleAuth" :disabled="isLoading">
        {{ isLoading ? "Connecting..." : "Connect Wallet" }}
      </button>
    </div>
  </div>
</template>
```

### Svelte

```svelte
<script>
import { authenticate, getSession, clearSession } from '@oviato/sdk';

let session = getSession();
let isLoading = false;
let error = null;

const handleAuth = async () => {
  isLoading = true;
  error = null;

const result = await authenticate();

if (result.status === 'success') {
    session = getSession();
  } else {
    error = result.message;
  }

isLoading = false;
};

const handleLogout = () => {
  clearSession();
  session = null;
};
</script>

{#if error}
  <div class="error">{error}</div>
{/if}

{#if session}
  <div>
    <p>Welcome, {session.username}!</p>
    <p>Address: {session.address}</p>
    <button on:click={handleLogout}>Logout</button>
  </div>
{:else}
  <button on:click={handleAuth} disabled={isLoading}>
    {isLoading ? 'Connecting...' : 'Connect Wallet'}
  </button>
{/if}
```

## WebAuthn / Passkeys

Oviato uses WebAuthn for secure, passwordless authentication:

### How It Works

1. **Registration**: Creates a new passkey tied to the user's device
2. **Authentication**: Uses the passkey to verify the user's identity
3. **Signing**: Uses the passkey to sign messages and transactions

### Browser Support

WebAuthn is supported in:

- Chrome 67+
- Safari 14+
- Firefox 60+
- Edge 18+

### Requirements

- **HTTPS**: Required in production (localhost works for development)
- **Biometrics**: Touch ID, Face ID, or security key
- **User Gesture**: Must be triggered by user interaction (button click)

## Troubleshooting

### "WebAuthn not supported"

Ensure:

- Using HTTPS (required in production)
- Browser supports WebAuthn
- Device has biometric hardware or security key

### "User cancelled"

User closed the authentication dialog or cancelled biometric prompt.

### "Username already exists"

When using `register()`, the username is already taken. Try `login()` instead or use `authenticate()` for auto-detection.

### "No passkey found"

When using `login()`, no passkey exists for this username. User should `register()` first or use `authenticate()`.

### Session not persisting

Check:

- Cookies are enabled
- LocalStorage is accessible
- Domain is in allowed domains list (dashboard)
- Using HTTPS in production

## Security Best Practices

### 1. Verify Session on Server

Never trust client-side session data alone. Use the `auth.token` for server-side verification:

```javascript
const session = getSession();

// Send token to your backend
fetch("/api/verify", {
  headers: {
    Authorization: `Bearer ${session.auth.token}`,
  },
});
```

### 2. Check Token Expiration

```javascript
const session = getSession();

if (session?.auth) {
  const expiresAt = new Date(session.auth.expires);
  const now = new Date();

if (now > expiresAt) {
    console.warn("Auth token expired, re-authenticate");
    clearSession();
  }
}
```

### 3. Handle Network Changes

When users switch networks, re-authenticate if needed:

```javascript
import { switchNetwork } from "@oviato/sdk";

const result = await switchNetwork("ethmainnet");

if (result.status === "success") {
  // Session automatically updated
  const session = getSession();
  console.log("New network:", session.network);
  console.log("New address:", session.address);
}
```

## Next Steps

- **[Wallet Operations](/ovi-sdk/wallet-operations)** - Learn about signing and transactions

---

# FILE: ovi-sdk/wallet-operations.mdx

@oviato/sdk provides comprehensive wallet functionality including message signing, transaction sending, network switching, and PSBT signing for Bitcoin.

## Sign Messages

Sign arbitrary messages with the user's passkey:

```javascript
import { signMessage } from "@oviato/sdk";

const result = await signMessage("Hello, Oviato!");

if (result.status === "success") {
  console.log("Signature:", result.data.signature);
  console.log("Message:", result.data.message);
  console.log("Public Key:", result.data.publicKey);
}
```

### Use Cases

- Proving wallet ownership
- Authentication challenges
- Off-chain signatures
- Message verification

### Verifying Signatures

The signature can be verified using the user's public key:

```javascript
import { getSession } from "@oviato/sdk";

const session = getSession();
// Use session.publicKey to verify the signature
```

## Send Transfers

Send cryptocurrency to an address:

```javascript
import { sendTransfer } from "@oviato/sdk";

const result = await sendTransfer({
  to: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
  amount: 10000, // Amount in smallest unit (satoshis, wei, lamports)
  fee: 1000, // Fee in smallest unit
});

if (result.status === "success") {
  console.log("Transaction ID:", result.data.txid);
  console.log("Explorer URL:", result.data.explorerUrl);
}
```

### Amount Units

Different networks use different units:

### Transfer Options

### Error Handling

```javascript
const result = await sendTransfer({
  to: "bc1q...",
  amount: 10000,
  fee: 1000,
});

if (result.status === "error") {
  if (result.message.includes("insufficient funds")) {
    console.error("Not enough balance");
  } else if (result.message.includes("invalid address")) {
    console.error("Invalid recipient address");
  } else {
    console.error("Transfer failed:", result.message);
  }
}
```

## Switch Networks

Change the active blockchain network:

```javascript
import { switchNetwork } from "@oviato/sdk";

const result = await switchNetwork("ethmainnet");

if (result.status === "success") {
  console.log("Switched to:", result.data.network);
  console.log("New address:", result.data.session.address);
  console.log("New public key:", result.data.session.publicKey);
}
```

### Supported Networks

```javascript
// Bitcoin
await switchNetwork("bitcoinmainnet");
await switchNetwork("bitcointestnet");

// Ethereum (soon)
await switchNetwork("ethmainnet");
await switchNetwork("ethsepolia");
```

### Getting Current Network

```javascript
import { getSession } from "@oviato/sdk";

const session = getSession();
console.log("Current network:", session.network);
console.log("Network type:", session.networkType);
console.log("Environment:", session.networkEnvironment);
```

## Sign PSBT (Bitcoin Only)

Sign Partially Signed Bitcoin Transactions:

```javascript
import { signPsbt } from "@oviato/sdk";

const result = await signPsbt({
  psbt: "cHNidP8BAH0CAAAAA...", // Base64 encoded PSBT
  signInputs: [0, 1], // Indices of inputs to sign
  broadcast: true, // Auto-broadcast after signing
});

if (result.status === "success") {
  console.log("Signed PSBT:", result.data.psbt);

if (result.data.txid) {
    console.log("Broadcast TX ID:", result.data.txid);
  }
}
```

### PSBT Options

```typescript
type SignPsbtOptions = {
  psbt: string; // Base64 encoded PSBT
  signInputs: number[]; // Input indices to sign
  broadcast?: boolean; // Auto-broadcast (default: false)
};
```

### Without Broadcasting

```javascript
const result = await signPsbt({
  psbt: "cHNidP8BAH0...",
  signInputs: [0],
  broadcast: false, // Don't broadcast, just sign
});

if (result.status === "success") {
  const signedPsbt = result.data.psbt;
  // Handle signed PSBT (e.g., send to another signer)
}
```

## RPC Client

Direct queries to blockchain nodes and Oviato services:

### Get Balance

```javascript
import { rpc } from "@oviato/sdk";

const result = await rpc.getBalance({
  address: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
});

if (result.result) {
  console.log("Balance:", result.result.balance);
  console.log("Confirmed:", result.result.confirmed);
  console.log("Unconfirmed:", result.result.unconfirmed);
}
```

### Get Transaction History

```javascript
const result = await rpc.getTransactionHistory({
  address: "bc1q...",
  limit: 10,
  offset: 0,
});

if (result.result) {
  result.result.transactions.forEach((tx) => {
    console.log("TX ID:", tx.txid);
    console.log("Amount:", tx.amount);
    console.log("Time:", tx.timestamp);
  });
}
```

### Resolve OVI.ID Username

```javascript
import { resolveOviId } from "@oviato/sdk";

const addresses = await resolveOviId("alice");

if (addresses) {
  console.log("Bitcoin:", addresses.bitcoin);
  console.log("Ethereum:", addresses.ethereum);
}
```

### Custom RPC Calls

```javascript
import { rpcRequest } from "@oviato/sdk";

const result = await rpcRequest("customMethod", {
  param1: "value1",
  param2: "value2",
});
```

## Complete Wallet Example

Here's a complete example combining all wallet operations:

```javascript
import {
  initialize,
  authenticate,
  getSession,
  signMessage,
  sendTransfer,
  switchNetwork,
  signPsbt,
  rpc,
  resolveOviId,
} from "@oviato/sdk";

// Initialize
await initialize({
  appId: "your-app-id",
  network: "bitcoinmainnet",
});

// Authenticate
const authResult = await authenticate();

if (authResult.status === "success") {
  const session = getSession();
  console.log("Connected as:", session.username);
  console.log("Address:", session.address);

// Get balance
  const balanceResult = await rpc.getBalance({
    address: session.address,
  });
  console.log("Balance:", balanceResult.result?.balance);

// Sign message
  const signResult = await signMessage("Prove ownership");
  console.log("Signature:", signResult.data?.signature);

// Send transfer
  const transferResult = await sendTransfer({
    to: "bc1q...",
    amount: 10000,
    fee: 1000,
  });
  console.log("TX ID:", transferResult.data?.txid);

// Switch to Ethereum
  const switchResult = await switchNetwork("ethmainnet");
  console.log("New network:", switchResult.data?.network);

// Resolve username
  const addresses = await resolveOviId("bob");
  console.log("Bob's addresses:", addresses);
}
```

## Framework-Specific Examples

### Vue 3 Wallet Component

```vue
<script setup>
import { ref } from "vue";
import { getSession, signMessage, sendTransfer, rpc } from "@oviato/sdk";

const session = ref(getSession());
const balance = ref(null);
const isLoading = ref(false);

const loadBalance = async () => {
  if (!session.value) return;

const result = await rpc.getBalance({
    address: session.value.address,
  });

if (result.result) {
    balance.value = result.result.balance;
  }
};

const handleSign = async () => {
  isLoading.value = true;

const result = await signMessage("Hello from Vue!");

if (result.status === "success") {
    alert("Signature: " + result.data.signature);
  }

isLoading.value = false;
};

const handleTransfer = async () => {
  isLoading.value = true;

const result = await sendTransfer({
    to: "bc1q...",
    amount: 10000,
    fee: 1000,
  });

if (result.status === "success") {
    alert("TX ID: " + result.data.txid);
    await loadBalance(); // Refresh balance
  }

isLoading.value = false;
};

// Load balance on mount
loadBalance();
</script>

<template>
  <div v-if="session">
    <h2>Wallet</h2>
    <p>Address: {{ session.address }}</p>
    <p>Balance: {{ balance }} satoshis</p>

<button @click="handleSign" :disabled="isLoading">Sign Message</button>

<button @click="handleTransfer" :disabled="isLoading">Send Transfer</button>
  </div>
</template>
```

### Svelte Wallet Component

```svelte
<script>
import { onMount } from 'svelte';
import { getSession, signMessage, sendTransfer, rpc } from '@oviato/sdk';

let session = getSession();
let balance = null;
let isLoading = false;

onMount(async () => {
  if (session) {
    await loadBalance();
  }
});

const loadBalance = async () => {
  const result = await rpc.getBalance({
    address: session.address,
  });

if (result.result) {
    balance = result.result.balance;
  }
};

const handleSign = async () => {
  isLoading = true;

const result = await signMessage('Hello from Svelte!');

if (result.status === 'success') {
    alert('Signature: ' + result.data.signature);
  }

isLoading = false;
};

const handleTransfer = async () => {
  isLoading = true;

const result = await sendTransfer({
    to: 'bc1q...',
    amount: 10000,
    fee: 1000,
  });

if (result.status === 'success') {
    alert('TX ID: ' + result.data.txid);
    await loadBalance();
  }

isLoading = false;
};
</script>

{#if session}
  <div>
    <h2>Wallet</h2>
    <p>Address: {session.address}</p>
    <p>Balance: {balance} satoshis</p>

<button on:click={handleSign} disabled={isLoading}>
      Sign Message
    </button>

<button on:click={handleTransfer} disabled={isLoading}>
      Send Transfer
    </button>
  </div>
{/if}
```

## Security Considerations

### 1. Validate Addresses

Always validate recipient addresses before sending:

```javascript
function isValidBitcoinAddress(address) {
  return /^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,62}$/.test(address);
}

const recipientAddress = "bc1q...";

if (isValidBitcoinAddress(recipientAddress)) {
  await sendTransfer({
    to: recipientAddress,
    amount: 10000,
    fee: 1000,
  });
} else {
  console.error("Invalid address");
}
```

### 2. Confirm Before Sending

Always show confirmation before sending transactions:

```javascript
async function confirmAndSend(to, amount) {
  const confirmed = confirm(`Send ${amount} satoshis to ${to}?`);

if (confirmed) {
    const result = await sendTransfer({ to, amount, fee: 1000 });
    return result;
  }
}
```

### 3. Handle Errors Gracefully

```javascript
try {
  const result = await sendTransfer({
    to: recipientAddress,
    amount: amount,
    fee: fee,
  });

if (result.status === "error") {
    throw new Error(result.message);
  }

console.log("Success:", result.data.txid);
} catch (error) {
  console.error("Transfer failed:", error.message);
  alert("Transfer failed: " + error.message);
}
```

## Troubleshooting

### "Insufficient funds"

User doesn't have enough balance. Check balance before sending:

```javascript
const balanceResult = await rpc.getBalance({ address: session.address });
const balance = balanceResult.result?.balance || 0;

if (balance < amount + fee) {
  alert("Insufficient funds");
}
```

### "Invalid address"

Recipient address is malformed. Validate addresses before sending.

### "User rejected"

User cancelled the transaction in the signing modal.

### "Network mismatch"

Trying to use an address from a different network. Switch networks first.

## Next Steps

- **[Authentication](/ovi-sdk/authentication)** - Learn about authentication
- **[Installation & Setup](/ovi-sdk/installation)** - Back to installation guide

---

# FILE: changelog/sdk.mdx

# @oviato/sdk

## 0.1.14

### Patch Changes

- Improved app configuration caching and reactivity. Config updates now reflect immediately in the UI, and ETag-based caching reduces unnecessary network requests.

## 0.1.13

### Patch Changes

- - Bug fixes

## 0.1.12

### Patch Changes

- Optimized build output size by removing debug logs in production

## 0.1.11

### Patch Changes

- Bridge method selection improvements: removed flawed Storage Access API check and redundant Safari/iOS fallback, allowing iframe mode to work correctly on HTTPS sites

## 0.1.10

### Patch Changes

- ### Improved

- Bridge method selection logic for better iframe usage on HTTPS sites

## 0.1.9

### Patch Changes

- Fix workspace dependency handling for manual publishing workflow

## 0.1.8

### Patch Changes

- - Add hex validation to signPsbt function
  - Make signInputs parameter optional (signs all inputs if omitted)
  - Update signPsbt documentation with improved examples
  - Fix SSR hydration issue in Next.js and other SSR frameworks

---

# FILE: changelog/connect.mdx

# @oviato/connect

## 0.1.14

### Patch Changes

- Improved app configuration caching and reactivity. Config updates now reflect immediately in the UI, and ETag-based caching reduces unnecessary network requests.
- Updated dependencies
  - @oviato/sdk@0.1.14

## 0.1.13

### Patch Changes

- - Bug fixes
- Updated dependencies
  - @oviato/sdk@0.1.13

## 0.1.12

### Patch Changes

- Optimized build output size by removing debug logs in production
- Updated dependencies
  - @oviato/sdk@0.1.12

## 0.1.11

### Patch Changes

- Bridge method selection improvements: removed flawed Storage Access API check and redundant Safari/iOS fallback, allowing iframe mode to work correctly on HTTPS sites
- Updated dependencies
  - @oviato/sdk@0.1.11

## 0.1.10

### Patch Changes

- ### Improved

- Bridge method selection logic for better iframe usage on HTTPS sites

- Updated dependencies
  - @oviato/sdk@0.1.10

## 0.1.9

### Patch Changes

- Fix workspace dependency handling for manual publishing workflow
- Updated dependencies
  - @oviato/sdk@0.1.9

## 0.1.8

### Patch Changes

---

Welcome to My App

Welcome, {session.username}!

Oviato Connection Test

Connect Your Wallet

Connected

Connect Your Wallet

Step 1: Welcome

Step 2: Connect Wallet

You're all set!

Welcome to My App

Sign Message