@antigane/wallet-adapters

Wallet connect UI and adapters for React. Includes a ready-made ConnectButton with a modal for MetaMask and Phantom.

Install

npm i @antigane/wallet-adapters
# or
pnpm add @antigane/wallet-adapters
# or
yarn add @antigane/wallet-adapters

Peer dependencies

Make sure these are installed in your app:

• react >= 18
• react-dom >= 18
• framer-motion >= 12.24.0 < 13

Quick start

import { ConnectButton } from "@antigane/wallet-adapters";

export default function App() {
  return (
    <div style={{ padding: 24 }}>
      <ConnectButton
        onSigned={(state) => {
          console.log("signed", state);
        }}
        onChange={(state) => {
          console.log("change", state);
        }}
      />
    </div>
  );
}

Styles are bundled automatically in the library build, so importing the component is enough. This package is browser-only because it uses window for wallet detection.

Props

ConnectButton

• onSigned?: (state: SignState) => void
• onChange?: (state: SignState | null) => void

SignState shape:

type SignState = {
  signature?: string;
  message?: string;
  accountId?: string;
  accountType?: "EVM" | "SOLANA";
};

Assets

The modal uses wallet icons at these paths:

• /assets/wallets/metamask.svg
• /assets/wallets/phantom.svg
• /assets/wallets/peridotwallet.svg

If your app does not already serve them, copy the SVGs from this package's public/assets/wallets into your app's public folder with the same paths.

Theming

This library uses CSS variables for colors. You can override them anywhere in your app:

:root {
  --background: #111312;
  --foreground: #ffffff;
  --card: #0d100e;
  --card-foreground: #ffffff;
  --accent: #2ecc71;
  --highlight: #9bffb6;
  --muted: #111312;
  --muted-foreground: #6e6e6e;
}

Troubleshooting

If styles do not appear in a consumer app:

1. Ensure the app's bundler supports CSS imports from node_modules.
2. Ensure the app is not stripping CSS side effects during tree-shaking.
3. Ensure your build is using the latest published package version.

If you use Next.js, render the button in a client component:

"use client";

import { ConnectButton } from "@antigane/wallet-adapters";

License

MIT