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.):

npx @serkhani/yocheckout init

Option 2: Standard NPM Install**

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:

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

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