daisychain-referral v1.0.0

DaisyChain Referral

A modern React component library for building viral referral programs with Stripe and Supabase. Create engaging reward systems that grow exponentially through word-of-mouth marketing.

Features

• 🔔 Real-time reward notifications
• 💰 Stripe integration for referral rewards
• 🔄 Automatic status updates
• 🎨 Customizable toast notifications
• 🔐 Supabase authentication integration
• 🚀 Built for viral growth

Installation

npm install daisychain-referral
# or
yarn add daisychain-referral
# or
pnpm add daisychain-referral

Prerequisites

This package requires the following peer dependencies:

• React 18 or higher
• Supabase JS Client v2 or higher

You'll also need:

• A Supabase project with real-time enabled
• Stripe account with referral program configured

Usage

1. First, set up your Supabase client:

// lib/supabase/client.ts
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import type { Database } from '@/types/supabase'

export const supabase = createClientComponentClient<Database>()

2. Add the RewardNotificationHandler to your app:

import { RewardNotificationHandler } from 'daisychain-referral'

function App() {
  return (
    <div>
      <RewardNotificationHandler />
      {/* Your other components */}
    </div>
  )
}

3. The component will automatically:
   • Subscribe to reward notifications when a user is authenticated
   • Display toast notifications for various reward events
   • Clean up subscriptions on unmount

Notification Types

The handler supports the following notification types:

• reward_created: When a new reward is created
• reward_unlocked: When a reward becomes available
• reward_expiring_soon: When a reward is about to expire
• reward_expired: When a reward has expired

Each notification type comes with its own styling and message format.

Customization

You can customize the toast notifications by providing your own toast provider:

import { RewardNotificationHandler } from 'daisychain-referral'
import { useToast } from './your-toast-provider'

function App() {
  const toast = useToast()
  
  return (
    <div>
      <RewardNotificationHandler toastProvider={toast} />
    </div>
  )
}

API Reference

RewardNotificationHandler Props

Types

interface RewardNotification {
  type: 'reward_created' | 'reward_unlocked' | 'reward_expiring_soon' | 'reward_expired'
  reward_id: string
  amount: number
  currency: string
  additional_data?: {
    days_until_expiry?: number
  }
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Timothy Vogel