NGMI Connect

A complete Web3 wallet connection and onboarding solution for new users, built on top of RainbowKit, Wagmi, and Glyph SDK.

Installation

npm install @ngmiland/connect

Basic Usage

import { NGMIConnectProvider, ConnectButton } from "@ngmiland/connect";
import { apeChain } from "viem/chains";

function App() {
  const config = {
    appName: "My App",
    projectId: "your-project-id", // Get from WalletConnect
    supportedChains: [apeChain],
    darkMode: false,
  };

  return (
    <NGMIConnectProvider config={config}>
      <ConnectButton appName="My App" />
    </NGMIConnectProvider>
  );
}

Known Issue & Simple Fix

If you encounter a build error with HeartbeatWorker.js, this is a known bug in @coinbase/[email protected]. Add this to your package.json:

{
  "overrides": {
    "@coinbase/wallet-sdk": "4.3.2"
  }
}

Then run npm install to apply the fix. This forces all packages to use the working version 4.3.2 instead of the buggy 4.3.3.

Why this happens: The @wagmi/connectors package includes @coinbase/[email protected] which has a malformed worker file. This will be fixed in future versions.

Next.js Setup

For Next.js applications, add this minimal configuration to next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["@ngmiland/connect"],
};

module.exports = nextConfig;

Configuration Options

NGMIConnectProvider Props

• config.appName - Your application name
• config.projectId - WalletConnect project ID
• config.supportedChains - Array of supported chains (defaults to [apeChain])
• config.darkMode - Enable dark mode (defaults to false)
• config.customWallets - Additional wallet connectors

ConnectButton Props

• appName - Application name shown in UI
• className - Additional CSS classes
• onboardingSteps - Custom onboarding flow steps

Features

• 🔗 Multi-Wallet Support - MetaMask, Coinbase, Rainbow, WalletConnect, and more
• 🎨 Dark Mode - Built-in theme support
• 🚀 Glyph Integration - Seamless onboarding for new users
• 📱 Mobile Friendly - Responsive design
• ⚡ SSR Safe - Works with Next.js server-side rendering
• 🔧 Customizable - Extensible with custom wallets and styling

License

MIT

Support

For issues and feature requests, please visit our GitHub repository.