@enclavemoney/enclave-wallet-sdk/WALLET_CONFIG_EXAMPLE.md

A simple enclave wallet SDK for React applications

# WalletProvider Config Object Usage

## Before (Individual Props)

```tsx
import { WalletProvider } from "wallet-sdk";

const App = () => {
  const sdkKey = "your-sdk-key";
  const isDarkMode = true;

  return (
    <WalletProvider
      sdkKey={sdkKey}
      theme={isDarkMode ? "dark" : "light"}
      cornerRadius="medium"
    >
      <YourApp />
    </WalletProvider>
  );
};
```

## After (Config Object)

```tsx
import { WalletProvider } from "wallet-sdk";

const App = () => {
  const config = {
    sdkKey: "your-sdk-key",
    appearance: "dark",
    primaryColor: "#1657FF",
    cornerRadius: "M",
    brandLogo:
      "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxuczp4b2RtPSJodHRwOi8vd3d3LmNvcmVsLmNvbS9jb3JlbGRyYXcvb2RtLzIwMDMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjUwMCAyNTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAwIDI1MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4K...",
    authentication: {
      social: true,
      passkey: true,
    },
    fontFamily: "monospace",
    showEnclave: true,
  };

  return (
    <WalletProvider config={config}>
      <YourApp />
    </WalletProvider>
  );
};
```

## Config Object Properties

| Property                 | Type                | Default               | Description                               |
| ------------------------ | ------------------- | --------------------- | ----------------------------------------- |
| `sdkKey`                 | `string`            | **Required**          | Your wallet SDK key                       |
| `appearance`             | `"light" \| "dark"` | `"light"`             | Theme appearance                          |
| `primaryColor`           | `string`            | `"#1657FF"`           | Primary color for UI elements             |
| `cornerRadius`           | `"S" \| "M" \| "L"` | `"M"`                 | Corner radius size (Small, Medium, Large) |
| `brandLogo`              | `string`            | `undefined`           | Base64 encoded brand logo (optional)      |
| `authentication`         | `object`            | `{}`                  | Authentication options                    |
| `authentication.social`  | `boolean`           | `false`               | Enable social authentication              |
| `authentication.passkey` | `boolean`           | `false`               | Enable passkey authentication             |
| `fontFamily`             | `string`            | `"Inter, sans-serif"` | Font family for the UI                    |
| `showEnclave`            | `boolean`           | `false`               | Show enclave information                  |

## Accessing Config in Components

The config object is also available through the wallet context:

```tsx
import { useWallet } from "wallet-sdk";

const MyComponent = () => {
  const { config } = useWallet();

  return (
    <div>
      <p>SDK Key: {config.sdkKey}</p>
      <p>Theme: {config.appearance}</p>
      <p>Primary Color: {config.primaryColor}</p>
      {config.brandLogo && <img src={config.brandLogo} alt="Brand Logo" />}
    </div>
  );
};
```

## Migration Guide

1. **Replace individual props** with a single `config` object
2. **Update `theme` to `appearance`** (values remain the same: "light" | "dark")
3. **Update `cornerRadius` values**:
   - `"small"` → `"S"`
   - `"medium"` → `"M"`
   - `"large"` → `"L"`
4. **Move `sdkKey` into the config object**
5. **Add new optional properties** as needed (brandLogo, authentication, etc.)

## Type Safety

The config object is fully typed with TypeScript:

```tsx
import { WalletConfig } from "wallet-sdk";

const config: WalletConfig = {
  sdkKey: "your-sdk-key",
  appearance: "dark", // TypeScript will ensure this is "light" | "dark"
  cornerRadius: "M", // TypeScript will ensure this is "S" | "M" | "L"
  // ... other properties
};
```