Rainbow Wallet Meta Package

A comprehensive Rainbow Wallet package with metadata management for Next.js applications. This package provides wallet connection functionality, metadata management, and automatic meta tag generation for better SEO and social sharing.

Features

• 🌈 Rainbow Wallet Integration: Built on top of RainbowKit and Wagmi
• 🔗 Wallet Connection: Easy wallet connection and disconnection
• 📊 Metadata Management: Comprehensive wallet metadata tracking
• 🏷️ Meta Tags Generation: Automatic generation of SEO and social media meta tags
• ⚛️ Next.js Integration: Seamless integration with Next.js applications
• 🎨 React Components: Pre-built React components for wallet interaction
• 📱 Responsive Design: Mobile-friendly components and layouts

Installation

npm install rainbow-wallet-meta-package
# or
yarn add rainbow-wallet-meta-package
# or
pnpm add rainbow-wallet-meta-package

Quick Start

1. Basic Setup

import { WalletProvider, WalletConnectButton, WalletInfo } from 'rainbow-wallet-meta-package';

const walletConfig = {
  projectId: 'your-walletconnect-project-id',
  appName: 'Your App Name',
  appDescription: 'Your app description',
  appUrl: 'https://yourapp.com',
  appIcon: 'https://yourapp.com/icon.png',
};

const metaTagsConfig = {
  siteName: 'Your App Name',
  title: 'Your App - Connect Your Wallet',
  description: 'Connect your Rainbow Wallet and manage your crypto assets',
  image: 'https://yourapp.com/og-image.png',
  url: 'https://yourapp.com',
  twitterSite: '@yourapp',
  twitterCreator: '@yourcreator',
};

function App() {
  return (
    <WalletProvider config={walletConfig} metaTagsConfig={metaTagsConfig}>
      <div>
        <h1>My Wallet App</h1>
        <WalletConnectButton />
        <WalletInfo />
      </div>
    </WalletProvider>
  );
}

2. Next.js Integration (Pages Directory)

import { NextJSMetaTags } from 'rainbow-wallet-meta-package';

function MyPage() {
  return (
    <>
      <NextJSMetaTags includeJSONLD={true} />
      <div>
        {/* Your page content */}
      </div>
    </>
  );
}

3. Next.js Integration (App Directory)

import { useMetaTags } from 'rainbow-wallet-meta-package';

export async function generateMetadata() {
  const { getMetadata } = useMetaTags({
    siteName: 'Your App',
    title: 'Connect Your Wallet',
    description: 'Manage your crypto assets',
  });

  return getMetadata();
}

4. Using the SDK Directly

import { RainbowWalletSDK } from 'rainbow-wallet-meta-package';

const sdk = new RainbowWalletSDK(walletConfig, metaTagsConfig);

// Initialize the SDK
await sdk.initialize();

// Set wallet metadata
sdk.setWalletMetadata({
  address: '0x1234...5678',
  name: 'My Wallet',
  description: 'Connected wallet on Ethereum',
  chainId: 1,
  balance: '1.5',
  isConnected: true,
  connector: 'Rainbow',
});

// Generate meta tags
const metaTags = sdk.generateMetaTags();

// Update HTML meta tags
sdk.updateHTMLMetaTags();

API Reference

Types

WalletMetadata

interface WalletMetadata {
  address: string;
  name: string;
  description: string;
  avatar?: string;
  ensName?: string;
  chainId: number;
  balance?: string;
  nftCount?: number;
  tokenCount?: number;
  lastActivity?: Date;
  isConnected: boolean;
  connector?: string;
}

WalletConfig

interface WalletConfig {
  projectId: string;
  appName: string;
  appDescription: string;
  appUrl: string;
  appIcon: string;
  theme?: 'light' | 'dark' | 'auto';
  autoConnect?: boolean;
  showRecentTransactions?: boolean;
}

MetaTagsConfig

interface MetaTagsConfig {
  title?: string;
  description?: string;
  image?: string;
  url?: string;
  siteName?: string;
  twitterCard?: string;
  twitterSite?: string;
  twitterCreator?: string;
}

Components

WalletProvider

Main provider component that wraps your application.

<WalletProvider config={walletConfig} metaTagsConfig={metaTagsConfig}>
  {/* Your app */}
</WalletProvider>

WalletConnectButton

Pre-built button component for wallet connection.

<WalletConnectButton
  className="custom-class"
  connectText="Connect Wallet"
  disconnectText="Disconnect"
  loadingText="Connecting..."
/>

WalletInfo

Component to display wallet information.

<WalletInfo
  className="custom-class"
  showBalance={true}
  showChain={true}
  showENS={true}
/>

Hooks

useWallet

Main hook to access wallet state and functions.

const {
  metadata,
  config,
  isLoading,
  error,
  connect,
  disconnect,
  updateMetadata,
  generateMetaTags,
} = useWallet();

useMetaTags

Hook for generating meta tags (Next.js App Directory).

const { getMetaTags, getMetadata, metadata } = useMetaTags(baseConfig);

Classes

RainbowWalletSDK

Main SDK class for advanced usage.

Methods:

• initialize(): Initialize the SDK
• setWalletMetadata(metadata): Set wallet metadata
• getWalletMetadata(): Get current wallet metadata
• generateMetaTags(): Generate meta tags
• generateConnectedWalletMetaTags(): Generate connected wallet meta tags
• generateJSONLD(): Generate JSON-LD structured data
• updateHTMLMetaTags(): Update HTML head meta tags
• getNextJSMetadata(): Get Next.js metadata object

Static Methods:

• formatAddress(address, startLength, endLength): Format wallet address
• getChainName(chainId): Get chain name from chain ID
• validateMetadata(metadata): Validate wallet metadata

MetaTagsGenerator

Class for generating meta tags.

Methods:

• generateWalletMetaTags(walletMetadata): Generate wallet meta tags
• generateConnectedWalletMetaTags(walletMetadata): Generate connected wallet meta tags
• generateJSONLD(walletMetadata): Generate JSON-LD structured data

Generated Meta Tags

The package automatically generates the following meta tags:

Basic Meta Tags

• title: Page title
• description: Page description

Open Graph Tags

• og:title: Open Graph title
• og:description: Open Graph description
• og:image: Open Graph image
• og:url: Open Graph URL
• og:type: Open Graph type
• og:site_name: Open Graph site name

Twitter Tags

• twitter:card: Twitter card type
• twitter:title: Twitter title
• twitter:description: Twitter description
• twitter:image: Twitter image
• twitter:site: Twitter site handle
• twitter:creator: Twitter creator handle

Wallet-Specific Tags

• wallet:address: Wallet address
• wallet:chain: Chain ID
• wallet:balance: Wallet balance
• wallet:ens: ENS name (if available)
• wallet:connector: Wallet connector name

JSON-LD Structured Data

The package also generates JSON-LD structured data for better SEO:

{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Wallet User",
  "description": "Wallet description",
  "image": "Wallet avatar",
  "identifier": "Wallet address",
  "additionalProperty": [
    {
      "@type": "PropertyValue",
      "name": "Blockchain",
      "value": "Ethereum"
    }
  ]
}

Supported Chains

The package includes built-in support for:

• Ethereum (1)
• Polygon (137)
• BSC (56)
• Avalanche (43114)
• Arbitrum (42161)
• Optimism (10)
• Fantom (250)
• Goerli (5)
• Sepolia (11155111)

Examples

Example 1: Basic Next.js Page

// pages/wallet.tsx
import { WalletProvider, WalletConnectButton, WalletInfo, NextJSMetaTags } from 'rainbow-wallet-meta-package';

const WalletPage = () => {
  const walletConfig = {
    projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
    appName: 'My Wallet App',
    appDescription: 'Connect and manage your crypto wallet',
    appUrl: 'https://myapp.com',
    appIcon: '/icon.png',
  };

  return (
    <WalletProvider config={walletConfig}>
      <NextJSMetaTags />
      <div className="container">
        <h1>Connect Your Wallet</h1>
        <WalletConnectButton />
        <WalletInfo showBalance showChain showENS />
      </div>
    </WalletProvider>
  );
};

export default WalletPage;

Example 2: Custom Wallet Component

import { useWallet } from 'rainbow-wallet-meta-package';

const CustomWalletComponent = () => {
  const { metadata, connect, disconnect, isLoading, error } = useWallet();

  return (
    <div>
      {metadata?.isConnected ? (
        <div>
          <p>Connected: {metadata.name}</p>
          <p>Address: {metadata.address}</p>
          <p>Balance: {metadata.balance} ETH</p>
          <button onClick={disconnect}>Disconnect</button>
        </div>
      ) : (
        <button onClick={connect} disabled={isLoading}>
          {isLoading ? 'Connecting...' : 'Connect Wallet'}
        </button>
      )}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

Contributing

1. Fork the repository
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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you have any questions or need help, please:

1. Check the documentation
2. Open an issue
3. Contact us at [[email protected]]

Changelog

v1.0.0

• Initial release
• Rainbow Wallet integration
• Meta tags generation
• Next.js support
• React components and hooks
• TypeScript support