MoonGate SDK

A beautiful, customizable Solana wallet adapter built with React and shadcn/ui components.

Features

• 🎨 Fully Customizable - Brand colors, logo, and wallet selection
• 🚀 Easy Integration - Single provider component
• 🔌 Comprehensive Wallet Support - 30+ wallet adapters included
• 💼 TypeScript First - Full type safety
• 🎯 Modern UI - Built with shadcn/ui components
• ⚡ Optimized - Tree-shakable and performant

Installation

npm install moongate-sdk
# or
yarn add moongate-sdk
# or
pnpm add moongate-sdk

CSS Styles

The SDK includes scoped CSS styles that won't interfere with your application's styles. Import the CSS file in your app:

import 'moongate-sdk/styles.css';

Important: The SDK uses advanced CSS scoping with the tailwindcss-scoped-preflight plugin to prevent style conflicts. All Tailwind base styles, utilities, and custom styles are automatically scoped to .moongate-wallet-sdk containers.

Quick Start

1. Wrap your app with MoonGateProvider

import { MoongateConnectButton, MoonGateProvider } from 'moongate-sdk';

const config = {
  primaryColor: '#9945FF',
  secondaryColor: '#14F195',
  logo: '/your-logo.svg',
  wallets: {
    primary: [
      { name: 'Phantom', order: 1 },
      { name: 'Solflare', order: 2 },
    ],
    secondary: [
      { name: 'WalletConnect', order: 1 },
      { name: 'Coinbase Wallet', order: 2 },
      { name: 'Ledger', order: 3 },
    ],
  },
};

function App() {
  return (
    <MoonGateProvider config={config}>
      <div>
        <h1>My Solana App</h1>
        <MoongateConnectButton />
      </div>
    </MoonGateProvider>
  );
}

2. Use wallet functionality in your components

import { useWallet, useWalletModal } from 'moongate-sdk';

function MyComponent() {
  const { connected, publicKey, disconnect } = useWallet();
  const { setVisible, config } = useWalletModal();

  if (!connected) {
    return <button onClick={() => setVisible(true)}>Connect Wallet</button>;
  }

  return (
    <div>
      <p>Connected: {publicKey?.toString()}</p>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}

Configuration

AdapterConfig

interface AdapterConfig {
  primaryColor: string; // Main brand color
  secondaryColor: string; // Accent color
  logo: string; // Path to your logo
  wallets: WalletConfig; // Wallet configuration
}

WalletConfig

interface WalletConfig {
  primary: WalletItem[]; // Main wallets (always visible)
  secondary?: WalletItem[]; // Additional wallets (collapsible)
}

interface WalletItem {
  name: string; // Wallet name (must match supported wallets)
  order: number; // Display order
}

Supported Wallets

• Phantom
• Solflare
• WalletConnect
• Coinbase Wallet
• Ledger
• Burner Wallet
• And 25+ more...

MoonGateProvider Props

interface MoonGateProviderProps {
  children: ReactNode;
  config: AdapterConfig;
  network?: WalletAdapterNetwork; // Default: Devnet
  endpoint?: string; // Custom RPC endpoint
  autoConnect?: boolean; // Default: true
}

Example Configurations

Minimal Setup

const minimalConfig = {
  primaryColor: '#000000',
  secondaryColor: '#666666',
  logo: '/logo.svg',
  wallets: {
    primary: [{ name: 'Phantom', order: 1 }],
  },
};

Custom Branding

const customConfig = {
  primaryColor: '#FF6B6B',
  secondaryColor: '#4ECDC4',
  logo: '/custom-logo.svg',
  wallets: {
    primary: [
      { name: 'Phantom', order: 1 },
      { name: 'Solflare', order: 2 },
    ],
    secondary: [
      { name: 'WalletConnect', order: 1 },
      { name: 'Ledger', order: 2 },
    ],
  },
};

Components

MoongateConnectButton

The main wallet connection button with built-in state management.

import { MoongateConnectButton } from 'moongate-sdk';

<MoongateConnectButton />;

Hooks

useWalletModal

Access wallet modal state and configuration.

const { visible, setVisible, config } = useWalletModal();

useWallet (re-exported)

Standard Solana wallet adapter hook.

const { connected, publicKey, disconnect, sendTransaction } = useWallet();

useConnection (re-exported)

Access the Solana connection.

const { connection } = useConnection();

Advanced Usage

Custom Network

import { WalletAdapterNetwork } from 'moongate-sdk';

<MoonGateProvider config={config} network={WalletAdapterNetwork.Mainnet}>
  {children}
</MoonGateProvider>;

Custom RPC Endpoint

<MoonGateProvider config={config} endpoint="https://your-rpc-endpoint.com">
  {children}
</MoonGateProvider>

TypeScript Support

The SDK is built with TypeScript and provides full type safety:

import type { AdapterConfig, WalletConfig, WalletName } from 'moongate-sdk';

CSS Scoping & Style Isolation

The MoonGate SDK uses advanced CSS scoping techniques to ensure complete style isolation from your application. This prevents any conflicts between the SDK's styles and your existing CSS.

How It Works

1. Scoped Container: All SDK components are automatically wrapped in a .moongate-wallet-sdk container
2. Scoped Base Styles: Tailwind's base styles (normalize, box-sizing, etc.) are scoped using tailwindcss-scoped-preflight
3. Prefixed Utilities: All Tailwind CSS utilities are scoped using the important selector
4. Custom Variables: CSS custom properties are namespaced with --moongate- prefix
5. Complete Isolation: No global styles affect your application

Implementation Details

// The SDK automatically wraps your components
<MoonGateProvider config={config}>
  <YourApp /> {/* This gets wrapped in .moongate-wallet-sdk */}
</MoonGateProvider>

// Modals and overlays use portals with scoped containers
<ScopedPortal>
  <WalletModal /> {/* Also wrapped in .moongate-wallet-sdk */}
</ScopedPortal>

CSS Variables

The SDK uses scoped CSS variables that won't conflict with your app:

.moongate-wallet-sdk {
  --moongate-background: 0 0% 100%;
  --moongate-foreground: 240 10% 3.9%;
  --moongate-primary: 240 5.9% 10%;
  /* ... other scoped variables */
}

Benefits

• ✅ Zero Style Conflicts: Your app's styles remain untouched
• ✅ Consistent Theming: SDK maintains its design system
• ✅ Easy Integration: No need to modify your existing CSS
• ✅ Framework Agnostic: Works with any CSS framework or methodology

Troubleshooting

If you experience style conflicts:

1. Ensure you're importing the CSS: import "moongate-sdk/styles.css"
2. Check that the .moongate-wallet-sdk class is present on SDK components
3. Verify your bundler is processing the CSS correctly

Custom Styling

While the SDK is fully scoped, you can still customize it by targeting the scoped classes:

/* Override SDK styles safely */
.moongate-wallet-sdk .your-custom-overrides {
  /* Your custom styles here */
}

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.