0.1.1 • Published 4 months ago

paymygas v0.1.1

Weekly downloads
-
License
MIT
Repository
-
Last release
4 months ago

🚀 Overview

PayMyGas is a powerful, customizable React component that enables Web3 developers and content creators to easily accept crypto donations. Built on the Base blockchain (with support for other EVM chains), PayMyGas offers a frictionless experience for both developers and end-users.

With crypto donations themed around "paying for gas," this component adds a playful yet practical way to support your favorite projects and creators.

✨ Features

  • 🔌 Plug and Play: Simple integration into React applications
  • 🎨 Fully Customizable: Style it to match your brand
  • 🔗 Multi-Chain Support: Works with Base by default, configurable for other EVM chains
  • 👛 RainbowKit Integration: Connect to popular wallets seamlessly
  • 💸 Flexible Donations: Preset amounts or custom input
  • 🎭 Gas-Themed UX: Engaging metaphor that resonates with crypto users
  • 📱 Responsive Design: Works beautifully on all devices

📦 Installation

# Using npm
npm install paymygas

# Using yarn
yarn add paymygas

# Using pnpm
pnpm add paymygas

🔧 Quick Start

import { PayMyGas } from "paymygas";
import "@rainbow-me/rainbowkit/styles.css";
import { RainbowKitProvider, getDefaultConfig } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { base } from "wagmi/chains";
import { http } from "viem";

// Create a query client for React Query
const queryClient = new QueryClient();

// Configure RainbowKit
const config = getDefaultConfig({
  appName: "My App",
  projectId: "YOUR_PROJECT_ID", // Get one from https://cloud.walletconnect.com
  chains: [base],
  transports: {
    [base.id]: http(),
  },
});

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <PayMyGas
            recipientAddress="0x1234abcd..."
            buttonText="⛽️ Pay My Gas"
            modalTitle="Support My Work"
            modalDescription="Choose an amount to cover some gas and support ongoing development!"
          />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

🛠️ Configuration Options

PropTypeDescriptionRequired
recipientAddressstringCrypto wallet address to receive donations
chainIdnumberChain ID for blockchain transactions (default is Base)
buttonTextstringCustomizable text displayed on the button
buttonClassNamestringAdditional Tailwind classes for button styling
modalTitlestringTitle displayed on the modal
modalDescriptionstringBrief description/instructions within the modal
donationOptionsobjectCustom donation options to override defaults

🎁 Donation Options

By default, PayMyGas provides these playful donation options:

  • Spare Change 🪙 ($5 USDC): For sending a small tip
  • Half Tank ⛽ ($10 USDC): For sending a moderate donation
  • Full Tank 🚀 ($20 USDC): For generous support
  • Custom ⚙️: User-specified amount (USDC or native token)

Customizing Options

import { PayMyGas } from "paymygas";

const customOptions = {
  spare_change: {
    label: "Coffee",
    value: 3,
    description: "Buy me a coffee",
    emoji: "☕",
  },
  half_tank: {
    label: "Lunch",
    value: 15,
    description: "Buy me lunch",
    emoji: "🍔",
  },
  // Only specify the options you want to customize
};

function App() {
  return (
    <PayMyGas
      recipientAddress="0x1234abcd..."
      donationOptions={customOptions}
    />
  );
}

🔒 Supported Wallets

PayMyGas leverages RainbowKit to connect to all major wallets:

  • MetaMask
  • Coinbase Wallet
  • Rainbow
  • WalletConnect
  • And many more!

💻 Development

# Clone the repository
git clone https://github.com/yourusername/paymygas.git
cd paymygas

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

📚 Examples

Visit our examples page to see PayMyGas in action across various applications.

📝 License

MIT

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/amazing-feature)
  3. Commit your Changes (git commit -m 'Add some amazing feature')
  4. Push to the Branch (git push origin feature/amazing-feature)
  5. Open a Pull Request