@megaeth-labs/wallet-wagmi-connector

wagmi connector for the MOSS Wallet SDK.

Install

pnpm add @megaeth-labs/wallet-wagmi-connector

For RainbowKit UI integration, also install RainbowKit alongside wagmi's usual React dependencies:

pnpm add @rainbow-me/rainbowkit @tanstack/react-query wagmi viem

Usage

import { createConfig, http } from 'wagmi';
import { megaeth } from 'viem/chains';

import { megaWallet } from '@megaeth-labs/wallet-wagmi-connector';

export const config = createConfig({
  chains: [megaeth],
  connectors: [
    megaWallet({
      network: 'mainnet',
    }),
  ],
  transports: {
    [megaeth.id]: http(),
  },
});

With wagmi

Wrap your app with WagmiProvider and use wagmi hooks as you would with any other connector. The connector registers with id: 'mossWallet', type: 'injected', and name "MOSS Wallet".

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';

import { config } from './wagmi';

const queryClient = new QueryClient();

export function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

import { useAccount, useConnect, useDisconnect } from 'wagmi';

export function ConnectButton() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();
  const connector = connectors.find((c) => c.id === 'mossWallet');

  if (isConnected) {
    return (
      <button type="button" onClick={() => disconnect()}>
        {address}
      </button>
    );
  }

  return (
    <button
      type="button"
      disabled={!connector}
      onClick={() => connector && connect({ connector })}
    >
      Connect MOSS Wallet
    </button>
  );
}

Standard wagmi hooks such as useSignMessage, useSignTypedData, and useSendTransaction work out of the box. For useSendTransaction, only to, value, data, and chainId are forwarded — see the notes below.

Connector Metadata

The connector function carries generic wallet metadata for connector UIs and other wallet discovery surfaces. This information is not RainbowKit-specific.

import { megaWallet } from '@megaeth-labs/wallet-wagmi-connector';

const connector = megaWallet({ network: 'testnet' });

console.log(connector.metadata.id);   // "mossWallet"
console.log(connector.metadata.name); // "MOSS Wallet"
console.log(connector.metadata.icon); // data URI icon
console.log(connector.metadata.rdns); // "com.megaeth.account"

The same id, name, type, icon, and rdns are also set directly on the connector instance — the shape wagmi and wallet-selector UIs read when listing connectors.

With RainbowKit

RainbowKit only lists wallets registered through its own wallet list (or browser extensions discovered via EIP-6963), so the MegaETH connector has to be wrapped in a small RainbowKit Wallet adapter. The adapter reads id, name, and icon from the metadata attached to the megaWallet(...) connector function. Spread the connector first and RainbowKit's walletDetails second so RainbowKit can attach its bookkeeping (rkDetails) to the connector instance.

import {
  megaWallet,
  type MegaWalletParameters,
} from '@megaeth-labs/wallet-wagmi-connector';
import {
  connectorsForWallets,
  type Wallet,
  type WalletDetailsParams,
} from '@rainbow-me/rainbowkit';
import { http } from 'viem';
import { megaethTestnet } from 'viem/chains';
import { createConfig, createConnector } from 'wagmi';

const megaWalletRainbowKit = (parameters: MegaWalletParameters): Wallet => {
  const connector = megaWallet(parameters);
  const { metadata } = connector;

  return {
    id: metadata.id,
    name: metadata.name,
    iconUrl: metadata.icon,
    iconBackground: '#111118',
    // The MegaETH wallet is an embedded SDK wallet that is always available, so
    // present it as installed rather than behind install instructions.
    installed: true,
    createConnector: (walletDetails: WalletDetailsParams) =>
      createConnector((config) => ({
        ...connector(config),
        ...walletDetails,
      })),
  };
};

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [() => megaWalletRainbowKit({ network: 'testnet' })],
    },
  ],
  {
    appName: 'Your App',
    projectId: 'your-project-id',
  },
);

export const config = createConfig({
  chains: [megaethTestnet],
  connectors,
  transports: {
    [megaethTestnet.id]: http(),
  },
});

To use different branding in RainbowKit, copy the connector metadata inside the adapter and override the fields you want to customize:

const metadata = {
  ...connector.metadata,
  icon: '/custom-wallet.svg',
};

Then wrap the app with both providers and import RainbowKit's styles once:

import '@rainbow-me/rainbowkit/styles.css';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';

import { config } from './wagmi';

const queryClient = new QueryClient();

export function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>{children}</RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

import { ConnectButton } from '@rainbow-me/rainbowkit';

export function RainbowKitConnect() {
  return <ConnectButton accountStatus="full" chainStatus="full" showBalance />;
}

The demo keeps both flows visible: a plain useConnect button and a separate RainbowKit ConnectButton, both backed by the same MegaETH connector.

With ConnectKit

ConnectKit is also wagmi-based, so pass the MegaETH connector through ConnectKit's getDefaultConfig(...) alongside the app metadata ConnectKit requires.

pnpm add connectkit @tanstack/react-query wagmi viem

import { megaWallet } from '@megaeth-labs/wallet-wagmi-connector';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConnectKitButton, ConnectKitProvider, getDefaultConfig } from 'connectkit';
import { http } from 'viem';
import { megaethTestnet } from 'viem/chains';
import { createConfig, WagmiProvider } from 'wagmi';

const queryClient = new QueryClient();

export const config = createConfig(
  getDefaultConfig({
    chains: [megaethTestnet],
    transports: {
      [megaethTestnet.id]: http(),
    },
    walletConnectProjectId: 'your-walletconnect-project-id',
    appName: 'Your App',
    appDescription: 'Your app description',
    appUrl: 'https://yourapp.example',
    appIcon: 'https://yourapp.example/icon.png',
    connectors: [megaWallet({ network: 'testnet' })],
  }),
);

export function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>
          <ConnectKitButton />
          {children}
        </ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

With Web3Modal (Reown AppKit)

Web3Modal is now Reown AppKit. For a controlled wagmi setup, pass the MegaETH connector as a custom connector to WagmiAdapter. If MegaETH is not available from @reown/appkit/networks in your app version, define it as a custom AppKit network.

pnpm add @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query wagmi viem

import { megaWallet } from '@megaeth-labs/wallet-wagmi-connector';
import { createAppKit } from '@reown/appkit/react';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
import { defineChain } from '@reown/appkit/networks';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { megaethTestnet } from 'viem/chains';
import { WagmiProvider } from 'wagmi';

const projectId = 'your-walletconnect-project-id';
const queryClient = new QueryClient();
const megaWalletConnector = megaWallet({ network: 'testnet' });

const megaethTestnetNetwork = defineChain({
  id: megaethTestnet.id,
  caipNetworkId: `eip155:${megaethTestnet.id}`,
  chainNamespace: 'eip155',
  name: megaethTestnet.name,
  nativeCurrency: megaethTestnet.nativeCurrency,
  rpcUrls: megaethTestnet.rpcUrls,
  blockExplorers: megaethTestnet.blockExplorers,
});

const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks: [megaethTestnetNetwork],
  connectors: [megaWalletConnector],
});

createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [megaethTestnetNetwork],
  metadata: {
    name: 'Your App',
    description: 'Your app description',
    url: 'https://yourapp.example',
    icons: ['https://yourapp.example/icon.png'],
  },
  connectorImages: {
    [megaWalletConnector.metadata.id]: megaWalletConnector.metadata.icon,
  },
});

export function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <appkit-button />
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Custom Wallet Methods

Non-standard SDK methods are available through the provider request API:

const provider = await config.connectors[0].getProvider();

const balances = await provider.request({
  method: 'wallet_balances',
  params: [
    {
      tokens: ['0x4200000000000000000000000000000000000006'],
    },
  ],
});

These methods are also available as convenience methods on the provider — equivalent to the request() form above, and dispatched through the same handler:

const balances = await provider.balances({
  tokens: ['0x4200000000000000000000000000000000000006'],
});

Supported custom methods:

• wallet_authenticate
• wallet_balances
• wallet_callContract
• wallet_deposit
• wallet_getFromContract
• wallet_getPermissions
• wallet_grantPermissions
• wallet_manageAccount
• wallet_open
• wallet_revokePermissions
• wallet_send
• wallet_signData
• wallet_swap
• wallet_transfer

Notes

• The connector advertises type: 'injected' so wallet-selector UIs (e.g. ConnectKit) treat the always-available embedded wallet as installed instead of prompting to install a browser extension. Wallet identity stays on id (mossWallet), name, and rdns — not on type.
• The connector is fixed-network per instance and does not support programmatic chain switching.
• The underlying wallet SDK can only be initialized once per page load, so one MegaETH connector configuration should be active at a time.
• If RainbowKit's connecting modal overlaps the wallet iframe, raise the MegaETH wallet iframe above the RainbowKit modal. The demo includes a scoped CSS override for the hosted and local wallet iframe URLs.
• wallet_callContract supports single and batch SDK requests.
• eth_sendTransaction is implemented through wallet-sdk.callContract(...) using the { address, data, value } path the wallet now supports.
• eth_sendTransaction intentionally rejects unsupported transaction fields instead of silently ignoring them.
• personal_sign supports plain text and hex payloads that can be decoded to UTF-8.

Commands

• pnpm build
• pnpm dev
• pnpm typecheck
• pnpm test
• pnpm check