Wagmi

If you're using Wagmi in your project, you can install @cyberlab/wagmi to integrate with CyberWallet.

Installation

npm install @cyberlab/wagmi

Usage

@cyberlab/wagmi provides a customized connector for Wagmi. Follow the instructions in Wagmi to set up the configuration here, and add the CyberWallet connector into the config.

import { http, createConfig } from 'wagmi';
import { cyber, cyberTestnet } from 'wagmi/chains';
import { createPublicClient } from 'viem';
import { cyber as CyberWalletConnector} from '@cyberlab/cyberwallet-sdk';
 
export const config = createConfig({
  chains: [cyber], // make sure to include the Cyber chain
  connectors: [CyberWalletConnector()],
  transports: {
    [Cyber.id]: http(),
  },
});
 
// --- Set up the Wagmi provider ---
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
 
const queryClient = new QueryClient()
 
function App() {
 return (
   <WagmiProvider config={config}>
     <QueryClientProvider client={queryClient}>
       {/** ... */}
     </QueryClientProvider>
   </WagmiProvider>
 )
}

after that, you can see the CyberWallet connector by using the useConnect hook.

import * as React from 'react'
import { Connector, useConnect } from 'wagmi'
 
export function WalletOptions() {
  const { connectors, connect } = useConnect()
 
  return connectors.map((connector) => (
    <button key={connector.uid} onClick={() => connect({ connector })}>
      {connector.name}
    </button>
  ))
}

Sign a message

import { useSignMessage } from 'wagmi'
 
function App() {
  const { signMessage } = useSignMessage()
 
  return (
    <button onClick={() => signMessage({ message: 'hello world' })}>
      Sign message
    </button>
  )
}

It will open the CyberWallet sign message page and ask the user to sign using the same Passkey. After the user confirms, CyberWallet will return the signature.