npm package: @serkhani/yocheckout
Description: The Direct Access Engine for DeFi. Powered by YO Protocol.
Latest version: 1.0.7

# YO Checkout Widget 🛒⚡️

The "Direct Access Engine" for DeFi. A plug-and-play React component that allows any Web3 platform (wallets, NFT marketplaces, dApps, or DAOs) to embed high-yield YO savings accounts directly into their UI.

Turn your users' idle capital into productive yield at the exact moment of a transaction—while earning a revenue share for your platform.

## Features

- **🚀 1-Click Operations**: Instantly deposit assets into or redeem shares from YO Vaults.
- **📊 Deep Insights**: Real-Time TVL, Ranking, Strategy performance curves, and Live Protocol Activity.
- **📱 Fully Responsive**: Adapts seamlessly to sidebars, modals, or full-page layouts.
- **📂 Multi-Chain Explorer**: Intelligent link generation for Ethereum, Base, and Arbitrum transactions.
- **💰 Revenue Share**: Define your project's `partnerFeeBps` to earn yield sharing automatically.
- **🎨 Elite Theming**: Premium dark/light modes with custom primary color support to match your brand.

## Installation

We offer two ways to integrate YO Checkout:

### Option 1: The Magic CLI (Recommended)**

Automatically inject the component, strap your Web3 providers, and install all required dependencies (React Query, wagmi, viem, etc.):

```bash
npx @serkhani/yocheckout init
```

### Option 2: Standard NPM Install**

```bash
npm install @serkhani/yocheckout @yo-protocol/react @yo-protocol/core wagmi viem @tanstack/react-query lucide-react
```

## Setup Providers

Wrap your application with the required Web3 and YO Protocol providers in your `main.tsx` or `App.tsx`:

```tsx
import { WagmiProvider, createConfig, http } from 'wagmi'
import { mainnet, arbitrum, base } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { YieldProvider } from '@yo-protocol/react'

const queryClient = new QueryClient()

export const wagmiConfig = createConfig({
  chains: [mainnet, arbitrum, base],
  transports: {
    [mainnet.id]: http(),
    [arbitrum.id]: http(),
    [base.id]: http(),
  },
})

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        {/* Replace your partnerId or partnerAddress below to earn revenue share */}
        <YieldProvider defaultSlippageBps={50}>
          <YourApp />
        </YieldProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

## Basic Usage

```tsx
import { YoCheckout } from '@serkhani/yocheckout'

function CheckoutPage() {
  return (
    <YoCheckout 
      vaultAddress="0x0000000f2eb9f69274678c76222b35eec7588a65" // yoUSD on Base
      partnerAddress="0xYourWalletAddress" 
      partnerFeeBps={50}     // 0.5% Rev Share
      theme="dark"           // "light" | "dark"
      primaryColor="#D6FF34" // Your brand accent
      connectButton={<MyCustomConnectButton />} // Optional: uses internal button if omitted
    />
  )
}
```

## Component Props

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `vaultAddress` | `Address` | `undefined` | The initial YO Vault to load. If omitted, uses the vault selector. |
| `primaryColor` | `string` | `#D6FF34` | Accent color for buttons, charts, and highlights. |
| `theme` | `'light' \| 'dark'` | `'dark'` | Overall color scheme of the widget. |
| `partnerAddress` | `Address` | `undefined` | The wallet to receive revenue share from deposits. |
| `partnerFeeBps` | `number` | `0` | The commission taken by your platform (e.g. 50 = 0.5%). |
| `connectButton` | `ReactNode` | `undefined` | Pass your existing wallet connect button to use your app's modal/logic. |

## Wallet Connection

The YO Checkout widget is built to be "context-aware".

- **If the user is already connected** elsewhere on your site (using the same `wagmi` config), the widget will skip the connection screen and show the deposit/redeem form instantly.
- **If the user is NOT connected**, the widget provides a beautifully themed fallback "Connect Wallet" button.
- **Customization**: Use the `connectButton` prop to pass your own button component. This is recommended if you have a specific wallet selection modal you'd like the widget to trigger.

## Demo Implementations

This project includes high-fidelity mock implementations:

- **NFT Marketplace** (`/mocks/NFTMarketplace.tsx`): Suggests depositing sale proceeds into yield vaults.
- **Job Board** (`/mocks/JobBoard.tsx`): Allows freelancers to move recently paid USDC into savings instantly.

## License

MIT © [YO Protocol](https://yo.xyz)