Cometh Connect Cometh Marketplace Cometh Checkout

Wagmi

You want to use wagmi amazing hooks, we got you !

Last updated 1 year ago

Wagmi

You want to use wagmi amazing hooks, we got you !

From the get go, all wagmi hooks are compatible with cometh connect. Please check for me info

Install

npm i @cometh/connect-sdk-viem wagmi viem

You can continue to use version v1 of Wagmi, Viem and Connect SDK using this command

npm i @cometh/connect-sdk-viem@1 wagmi@1 viem@1

Configure Wagmi Provider (Next v13 example)

"use client";

import { createConfig, http, WagmiProvider } from "wagmi";
import { polygon } from "viem/chains";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

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

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <WagmiProvider config={wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            {children}
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  );
}

Wagmi Hooks

As previously said, all wagmi hooks are available with cometh connect. Here are a few examples:

useConnect

To connect, you'll need to import the ComethConnectConnector and send multiple parameters:

chains (should be unique for now) - required

apiKey - required

"use client";

import { useAccount, useConnect } from "wagmi";
import { comethConnectConnector } from "@cometh/connect-sdk-viem"
    
function ConnectWallet(): JSX.Element {
  const { isConnected } = useAccount()
  const { connect, error, isLoading } = useConnect()
  
  const connector = comethConnectConnector({
    apiKey: API_KEY,
  });

  return (
     <>
      <button onClick={() => connect({connector})}>
        {!isConnected && "connect"}
        {isLoading && "(connecting)"}
      </button>

      {error && <div>{error.message}</div>}
     </>
  )
}

useWriteContract

"use client";

import {
  useAccount,
  useReadContract,
  useWriteContract,
} from "wagmi";
import countContractAbi from "./app/contract/counterABI.json";

const COUNTER_CONTRACT_ADDRESS = "0x84ADD3fa2c2463C8cF2C95aD70e4b5F602332160";

export function Transaction() {
  const { address } = useAccount();
  const { data: balance } = useReadContract({
    address: COUNTER_CONTRACT_ADDRESS,
    abi: countContractAbi,
    functionName: "counters",
    args: [address],
  });
  
  const {
    data: txResult,
    isSuccess,
    isError,
    isPending,
    writeContract,
  } = useWriteContract();

  writeContract({
    address: COUNTER_CONTRACT_ADDRESS,
    abi: countContractAbi,
    functionName: "count"
  });

Sign and Verify a Message

"use client";

import {
  useAccount,
  useWalletClient,
} from "wagmi";

export function Transaction() {
  const { address, connector } = useAccount();
  const { data: signature, signMessageAsync } = useSignMessage();


  const testDummySignature = async () => {
    return signMessageAsync({ message: "hello world" });
  };
  
  const verifySignature = async () => {
    const client = await connector?.getClient();
    const isValidSignature = await connector!.verifyMessage({
      message: "toto",
      signature,
    });
    
    console.log(isValidSignature',isValidSignature)
  }
}