Install

npm install codexfield-wallet-connector
// or
yarn add codexfield-wallet-connector

Add wallet connector

Wagmi + RainbowKit

import {createConfig, http, WagmiProvider} from "wagmi";
import {bsc} from "viem/chains";
import {connectorsForWallets, RainbowKitProvider} from "@rainbow-me/rainbowkit";
import { codexFieldWalletRainbowKit } from 'codexfield-wallet-connectorr';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [codexFieldWalletRainbowKit], // add codexFieldWalletRainbowKit to you connectors list
    },
  ], 
    {
        appName: 'My RainbowKit App',
        projectId: 'WC_PROJECT_ID',
    }  
    // other configs
);

const wagmiConfig = createConfig({
  chains: [bsc],
  transports: {
    [bsc.id]: http(),
  },
  connectors,
});

Wagmi only

import {createConfig, http, WagmiProvider} from "wagmi";
import {bsc} from "viem/chains";
import {codexFieldWallet} from "codexfield-wallet-connector";

const wagmiConfig = createConfig({
    chains: [bsc],
    transports: {
        [bsc.id]: http(),
    },
    connectors: [codexFieldWallet({projectId: "WC_PROJECT_ID"})]
})

Example

Then you can use wagmi hooks to connect and sign transaction with CodexField Wallet

import './App.css'
import {useAccount, useConnect, useSignMessage} from "wagmi";

function App() {
    const {connectors, connect} = useConnect()
    const {address, isConnected} = useAccount()
    const {signMessageAsync, data} = useSignMessage()

    async function sign() {
        try {
            const res = await signMessageAsync({message: `Hello from CodexField Wallet: ${new Date().getTime()}`})
            console.log(`sign res: ${res}`)
        } catch (e) {
            console.log(e)
        }
    }
    return (
        <>
            <div className="card">
                {connectors.map((connector) => (
                    <button key={connector.uid} onClick={() => connect({connector})}>
                        {connector.name}
                    </button>
                ))}
                <p>
                    {isConnected && address && <span>Connected Wallet: {address}</span>}
                </p>
            </div>
            <p className="read-the-docs">
                <button onClick={async () => sign()}> Sign Message
                </button>
            </p>
            {data && <p className="read-the-docs">Hello{data}</p>}
        </>
    )
}

export default App