Install

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

Online Demo

Visit Online Demo

Config

Based on WalletConnectParameters, we support these additional params:

• debug: set to true will open CodexField Wallet Text version MiniApp, you should always set to false
• returnUrl: Your app url link that we will redirect after wallet action is done, set to undefined, wallet will close itself after action done

Open Option

You can set an open option before send wallet request to change wallet behavior after action done, currently we support auto(default), stay, connect_and_sign

• auto: Default open option, which will close wallet everytime after action done
• stay: Keeps wallet open since next wallet request, and all subsequent requests will not launch wallet
• connect_and_sign: An optimization behavior for connect and sign flow, for dapps to calls signMessage() immediately after connect(), wallet will keep in open(so that won't need launch wallet twice in a short time)

Connect and Sign

If you are using wallet to connect and sign, please follow below example to optimize user experience

async function connectAndSign(connector: Connector) {
  // set wallet option to `connect_and_sign` so that wallet will not close after connected, and keep waiting for request: personal_sign
  setWalletOpenOption("connect_and_sign") 
  await connectAsync({connector, chainId})
  const signRes = await signMessageAsync({message: "Connect and Sign"})
  // after connect and sign done, clear wallet option to keep original logic, or you can set to other option if you like
  clearWalletOpenOption()  
}

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-connector';

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", debug: false, returnUrl: "YOUR_APP_URL"})]
})

Integration Examples

Next + Wagmi

// wagmi.ts
import {http, cookieStorage, createConfig, createStorage} from 'wagmi'
import {mainnet, optimism, sepolia} from 'wagmi/chains'
import {injected, metaMask} from 'wagmi/connectors'
import {codexFieldWallet} from "codexfield-wallet-connector"

export function getConfig() {
    return createConfig({
        chains: [mainnet, sepolia, optimism],
        connectors: [
            injected(),
            codexFieldWallet({
                projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
                debug: false,
                returnUrl: "YOUR_APP_URL",
            }),
            metaMask(),
        ],
        storage: createStorage({
            storage: cookieStorage,
        }),
        ssr: true,
        transports: {
            [mainnet.id]: http(),
            [sepolia.id]: http(),
            [optimism.id]: http(),
        },
    })
}

declare module 'wagmi' {
    interface Register {
        config: ReturnType<typeof getConfig>
    }
}

Nuxt + Wagmi

// wagmi.ts
import {http, cookieStorage, createConfig, createStorage} from '@wagmi/vue'
import {mainnet, optimism, sepolia} from '@wagmi/vue/chains'
import {injected, metaMask} from '@wagmi/vue/connectors'
import {codexFieldWallet} from "codexfield-wallet-connector";

export const config = createConfig({
    chains: [mainnet, sepolia, optimism],
    connectors: [
        injected(),
        codexFieldWallet({
            projectId: process.env.NUXT_PUBLIC_WC_PROJECT_ID!,
            debug: false,
            returnUrl: "YOUR_APP_URL",
        }),
        metaMask(),
    ],
    storage: createStorage({
        storage: cookieStorage,
    }),
    ssr: true,
    transports: {
        [mainnet.id]: http(),
        [sepolia.id]: http(),
        [optimism.id]: http(),
    },
})

declare module '@wagmi/vue' {
    interface Register {
        config: typeof config
    }
}

Vite + Wagmi Core

// wagmi.ts
import {http, createConfig, createStorage} from '@wagmi/core'
import {mainnet, optimism, sepolia} from '@wagmi/core/chains'
import {codexFieldWallet} from "codexfield-wallet-connector";

export const config = createConfig({
    chains: [mainnet, sepolia, optimism],
    connectors: [
        codexFieldWallet({projectId: import.meta.env.VITE_WC_PROJECT_ID}),
    ],
    storage: createStorage({storage: localStorage, key: 'vite-core'}),
    transports: {
        [mainnet.id]: http(
            'https://eth-mainnet.g.alchemy.com/v2/StF61Ht3J9nXAojZX-b21LVt9l0qDL38',
        ),
        [sepolia.id]: http(
            'https://eth-sepolia.g.alchemy.com/v2/roJyEHxkj7XWg1T9wmYnxvktDodQrFAS',
        ),
        [optimism.id]: http(),
    },
})

Vite + React + Wagmi

// wagmi.ts
import {http, createConfig} from 'wagmi'
import {celo, mainnet, optimism, sepolia} from 'wagmi/chains'
import {codexFieldWallet} from "codexfield-wallet-connector";

export const config = createConfig({
    chains: [mainnet, sepolia, optimism, celo],
    connectors: [
        codexFieldWallet({
            projectId: import.meta.env.VITE_WC_PROJECT_ID,
            debug: false,
            returnUrl: "YOUR_APP_URL",
        }),
    ],
    transports: {
        [mainnet.id]: http(),
        [sepolia.id]: http(),
        [optimism.id]: http(),
        [celo.id]: http(),
    },
})

declare module 'wagmi' {
    interface Register {
        config: typeof config
    }
}

Vite + Vue + Wagmi

// wagmi.ts
import {http, createConfig, createStorage} from '@wagmi/vue'
import {mainnet, optimism, sepolia} from '@wagmi/vue/chains'
import {codexFieldWallet} from "codexfield-wallet-connector";

export const config = createConfig({
    chains: [mainnet, sepolia, optimism],
    connectors: [
        codexFieldWallet({
            projectId: import.meta.env.VITE_WC_PROJECT_ID,
            debug: false,
            returnUrl: "YOUR_APP_URL",
        }),
    ],
    storage: createStorage({storage: localStorage, key: 'vite-vue'}),
    transports: {
        [mainnet.id]: http(),
        [sepolia.id]: http(),
        [optimism.id]: http(),
    },
})

declare module '@wagmi/vue' {
    interface Register {
        config: typeof config
    }
}