@youbuidl/donation-widget v1.0.0

GiveStation Donation Widget | Accept public goods donation anywhere!

A customizable donation widget for web3 projects that supports multiple blockchain networks and various embed options.

Installation

npm install @youbuidl/donation-widget @rainbow-me/rainbowkit @tanstack/react-query wagmi viem

Quick Start

import { DonationWidget, DonationProvider } from '@youbuidl/donation-widget';

// First, wrap your app with DonationProvider
function App() {
  return (
    <DonationProvider>
      <YourApp />
    </DonationProvider>
  );
}

// Then use the DonationWidget component anywhere in your app
function YourApp() {
  const project = {
    id: 'unique-id',
    name: 'My Project',
    recipients: [
      {
        address: '0x...', // Recipient wallet address
        chainId: 1, // Ethereum Mainnet
        share: 100 // Percentage share
      }
    ],
    theme: {
      primaryColor: '#3B82F6',
      buttonStyle: 'rounded',
      size: 'medium',
      darkMode: false
    }
  };

  return <DonationWidget project={project} />;
}

Features

• Multi-chain Support: Ethereum, Optimism, Polygon, Base, Arbitrum, Scroll, Celo, zkSync, and Blast networks
• Multiple Recipients: Customizable share splits among multiple recipients
• Theme Customization: Modify colors, button styles, sizes, and enable dark mode
• Wallet Connection: Powered by RainbowKit
• Transaction Handling: Uses ethers.js for seamless transaction processing
• Type Safety: Built with TypeScript

Components

DonationProvider

Wrapper component that provides necessary context for the donation widget:

import { DonationProvider } from '@youbuidl/donation-widget';

function App() {
  return (
    <DonationProvider>
      {/* Your app content */}
    </DonationProvider>
  );
}

DonationWidget

The main widget component for accepting donations:

import { DonationWidget } from '@youbuidl/donation-widget';

const project = {
  id: 'unique-id',
  name: 'My Project',
  recipients: [
    {
      address: '0x...',
      chainId: 1,
      share: 100
    }
  ],
  theme: {
    primaryColor: '#3B82F6',
    buttonStyle: 'rounded',
    size: 'medium',
    darkMode: false
  }
};

function MyComponent() {
  return <DonationWidget project={project} />;
}

PostDonationButton

A button component for embedding donations in blog posts:

import { PostDonationButton } from '@youbuidl/donation-widget';

function BlogPost() {
  const post = {
    id: 'post-id',
    title: 'My Blog Post',
    content: 'Post content...',
    author: {
      id: 'author-id',
      name: 'Author Name',
      donationConfig: {
        recipients: [
          {
            address: '0x...',
            chainId: 1,
            share: 100
          }
        ]
      }
    }
  };

  return <PostDonationButton post={post} />;
}

Types

interface Project {
  id: string;
  name: string;
  description?: string;
  image?: string;
  recipients: {
    address: string;
    chainId: number;
    share: number;
  }[];
  theme: {
    primaryColor: string;
    buttonStyle: 'default' | 'rounded' | 'pill';
    size: 'small' | 'medium' | 'large';
    darkMode: boolean;
  };
}

License

MIT