cryptomomo/connector

CryptoMomo wallet connector for wagmi. Connect your dApp to CryptoMomo wallet via WalletConnect.

Installation

npm install cryptomomo/connector wagmi viem @walletconnect/sign-client

yarn add cryptomomo/connector wagmi viem @walletconnect/sign-client

pnpm add cryptomomo/connector wagmi viem @walletconnect/sign-client

Quick Start

1. Get a WalletConnect Project ID

Visit WalletConnect Cloud to get your free project ID.

2. Configure wagmi

import { createConfig, http } from "wagmi";
import { lisk, liskSepolia, base, bsc } from "wagmi/chains";
import { cryptoMomoConnector } from "cryptomomo/connector";

export const config = createConfig({
  chains: [lisk, liskSepolia, base, bsc],
  connectors: [
    cryptoMomoConnector({
      projectId: "your-walletconnect-project-id",
      // Optional: wallet only completes pairing for KYC-verified users
      kycRequired: true,
      metadata: {
        name: "My dApp",
        description: "My awesome decentralized application",
        url: "https://mydapp.com",
        icons: ["https://mydapp.com/icon.png"],
      },
    }),
  ],
  transports: {
    [lisk.id]: http("https://rpc.api.lisk.com"),
    [liskSepolia.id]: http("https://rpc.sepolia-api.lisk.com"),
    [base.id]: http("https://mainnet.base.org"),
    [bsc.id]: http("https://bsc-dataseed.binance.org"),
  },
});

3. Set up providers (React)

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

const queryClient = new QueryClient();

function App({ children }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

4. Connect to wallet

Option A — CryptomomoConnectButton (recommended)
Inspired by RainbowKit ConnectButton / @rainbow-me/rainbow-button: one import, configurable connected state (address, chain switcher, balance, disconnect).

npm install cryptomomo-connector wagmi viem @walletconnect/sign-client @tanstack/react-query react react-dom

import { CryptomomoConnectButton } from "cryptomomo-connector/react";
import "cryptomomo-connector/styles.css";

export function Header() {
  return (
    <CryptomomoConnectButton
      label="Connect CryptoMomo"
      theme={{
        accent: "#7c3aed",
        background: "#111827",
        radius: "14px",
      }}
      accountStatus={{ smallScreen: "avatar", largeScreen: "full" }}
      showBalance={{ smallScreen: false, largeScreen: true }}
      chainStatus={{ smallScreen: "icon", largeScreen: "full" }}
      showDisconnect="menu"
    />
  );
}

Theming: pass theme={{ ... }} or override CSS variables on a parent (see styles/connect-button.css: --cm-accent, --cm-bg, --cm-radius, etc.).

Full customization — same hook the default button uses:

import { CryptomomoConnectButton, useCryptomomoConnectButton } from "cryptomomo-connector/react";

<CryptomomoConnectButton.Custom connectorId="cryptomomo">
  {({ ready, connected, connect, address, disconnect }) =>
    connected ? (
      <button onClick={() => disconnect()}>{address}</button>
    ) : (
      <button disabled={!ready} onClick={() => connect()}>
        Connect
      </button>
    )}
</CryptomomoConnectButton.Custom>;

| Prop | Description | |------|-------------| | label / connectingLabel | Connect CTA text | | accountStatus | full | avatar | address | none (or responsive { smallScreen, largeScreen }, breakpoint 768px) | | chainStatus | full | icon | name | none (+ responsive) | | showBalance | boolean or responsive | | showChainSwitcher | network dropdown (wagmi chains) | | showDisconnect | menu | icon | true (inline button) | false | | showCopyAddress | copy-to-clipboard | | matchConnector | only treat as connected when connector.id === "cryptomomo" (default true) | | theme | accent, background, radius, fonts, … | | as | root element (default div) | | className / style | extra root classes/styles |

Option B — manual wagmi hooks

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

function ConnectButton() {
  const { connect, connectors } = useConnect();
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();

  const cryptoMomoConnector = connectors.find((c) => c.id === "cryptomomo");

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <button onClick={() => connect({ connector: cryptoMomoConnector })}>
      Connect with CryptoMomo
    </button>
  );
}

Configuration Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | projectId | string | Yes | WalletConnect project ID | | metadata | object | No | dApp metadata for WalletConnect | | rpcUrls | Record<number, string> | No | Custom RPC URLs for chains | | contractAbis | Record<number, Record<0xAddress, Abi>> | No | Optional ABI registry (per chain) for decoding calldata in the wallet approval UI |

Metadata Object

{
  name: string;        // Your dApp name
  description: string; // Your dApp description
  url: string;         // Your dApp URL
  icons: string[];     // Array of icon URLs
}

Supported Chains

The connector works with any EVM chain. Default RPC URLs are provided for:

• Lisk (1135)
• Lisk Sepolia (4202)
• BNB Smart Chain (56)
• Base (8453)
• Ethereum Mainnet (1)
• Sepolia (11155111)
• Polygon (137)
• Arbitrum One (42161)
• Optimism (10)

You can add custom RPC URLs for any chain:

cryptoMomoConnector({
  projectId: "...",
  rpcUrls: {
    43114: "https://api.avax.network/ext/bc/C/rpc", // Avalanche
  },
});

Supported Methods

The connector supports these EIP-155 methods:

• eth_sendTransaction - Send transactions
• personal_sign - Sign messages
• eth_sign - Sign data
• eth_signTypedData - Sign typed data (EIP-712)
• eth_signTypedData_v4 - Sign typed data v4

Troubleshooting

Popup Blocked

If the wallet popup is blocked, users need to allow popups for your site. Show a helpful message:

try {
  await connect({ connector: cryptoMomoConnector });
} catch (error) {
  if (error.message.includes("popup")) {
    alert("Please allow popups for this site to connect with CryptoMomo");
  }
}

Clear WalletConnect Storage

If you encounter relay message errors, you can clear the WalletConnect storage:

import { clearWalletConnectStorage } from "cryptomomo/connector";

// Call this to reset WalletConnect state
await clearWalletConnectStorage();

Optional: Contract ABI registry (calldata decoding)

CryptoMomo wallet is a Safe (smart account). Many dApps submit transactions that call Safe.execTransaction(...), which then executes an inner contract call. The wallet approval UI tries to decode common calls (Safe + ERC-20) and can also decode dApp-specific contracts if you provide their ABIs.

Add contractAbis to your connector config to help users see function name + arguments on the approval screen. This is best-effort: missing/incorrect ABIs never block signing/transactions; the wallet UI will fall back to raw calldata and show a "proceed with caution" warning.

import type { Abi } from "viem";
import { cryptoMomoConnector } from "cryptomomo/connector";

const MY_ROUTER_ABI = [/* ... */] satisfies Abi;

cryptoMomoConnector({
  projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
  contractAbis: {
    1135: {
      // Lisk router contract
      "0x0000000000000000000000000000000000000000": MY_ROUTER_ABI,
    },
    56: {
      // BSC router contract
      "0x0000000000000000000000000000000000000000": MY_ROUTER_ABI,
    },
  },
});

Example: Sending a Transaction

import { useSendTransaction, useAccount } from "wagmi";
import { parseEther } from "viem";

function SendTransaction() {
  const { address } = useAccount();
  const { sendTransaction, isPending } = useSendTransaction();

  const handleSend = () => {
    sendTransaction({
      to: "0x...",
      value: parseEther("0.01"),
    });
  };

  return (
    <button onClick={handleSend} disabled={isPending}>
      {isPending ? "Confirming..." : "Send 0.01 ETH"}
    </button>
  );
}

Example: Signing a Message

import { useSignMessage } from "wagmi";

function SignMessage() {
  const { signMessage, isPending } = useSignMessage();

  const handleSign = () => {
    signMessage({ message: "Hello from CryptoMomo!" });
  };

  return (
    <button onClick={handleSign} disabled={isPending}>
      {isPending ? "Signing..." : "Sign Message"}
    </button>
  );
}

License

MIT

Links

• CryptoMomo
• Documentation
• WalletConnect
• wagmi