@macalinao/wallet-adapter-compat

Compatibility layer that bridges @solana/wallet-adapter with @solana/kit and grill.

Purpose

This package provides compatibility between the traditional Solana wallet adapter pattern and the modern @solana/kit approach. It:

1. Converts wallet-adapter wallets into Kit's TransactionSendingSigner
2. Provides the WalletAdapterCompatProvider that automatically creates signers and integrates with grill's WalletProvider
3. Maintains backward compatibility for existing wallet-adapter code

Installation

npm install @macalinao/wallet-adapter-compat @macalinao/grill

Usage

Using WalletAdapterCompatProvider

The easiest way to integrate is using WalletAdapterCompatProvider, which automatically creates a TransactionSendingSigner from your connected wallet:

import { WalletAdapterCompatProvider } from "@macalinao/wallet-adapter-compat";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { useKitWallet } from "@macalinao/grill";

function App() {
  return (
    <ConnectionProvider endpoint="https://api.mainnet-beta.solana.com">
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <WalletAdapterCompatProvider>
            <MyComponent />
          </WalletAdapterCompatProvider>
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

function MyComponent() {
  // Now you can use Kit wallet hooks from grill
  const { signer, rpc } = useKitWallet();

  if (!signer) {
    return <div>Please connect your wallet</div>;
  }

  // Use signer for transactions with @solana/kit
}

Manual Signer Creation

For more control, you can manually create a TransactionSendingSigner:

import { createWalletTransactionSendingSigner } from "@macalinao/wallet-adapter-compat";
import { useWallet, useConnection } from "@solana/wallet-adapter-react";
import { WalletProvider } from "@macalinao/grill";

function MyProvider({ children }) {
  const wallet = useWallet();
  const { connection } = useConnection();

  const signer = useMemo(() => {
    if (!wallet.connected || !wallet.publicKey) return null;
    return createWalletTransactionSendingSigner(wallet, connection);
  }, [wallet, connection]);

  return <WalletProvider signer={signer}>{children}</WalletProvider>;
}

API

Components

• WalletAdapterCompatProvider - Automatic provider that creates signers and integrates with grill

Functions

• createWalletTransactionSendingSigner(wallet, connection) - Creates a Kit-compatible signer from a wallet adapter

Legacy Hooks

• useSendTX() - Legacy transaction sending hook (use Kit's transaction methods instead)

Migration Guide

From wallet-adapter to Kit

1. Wrap your app with WalletAdapterCompatProvider
2. Replace wallet adapter transaction methods with Kit's transaction API
3. Use useKitWallet() from grill to access the signer

// Before (wallet-adapter)
const { sendTransaction } = useWallet();
await sendTransaction(transaction, connection);

// After (with Kit)
const { signer } = useKitWallet();
await signer.signAndSendTransactions([transaction]);

Features

• 🔄 Seamless wallet-adapter to Kit conversion
• 🔐 Maintains wallet security practices
• 📦 Zero configuration with WalletAdapterCompatProvider
• 🛠️ Manual control when needed

License

Copyright (c) 2025 Ian Macalinao. Licensed under the Apache-2.0 License.