How this data paramater is retrieved? As of now the useConnect hook brings ({ chainId, connector, onError, onMutate, onSettled, onSuccess, } right? So Im a bit confused on how to get an entire object with all data from the hook itself. Here is my component:
import Head from "next/head";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import LoadingDots from "@/components/tickets/loading-dots";
import toast, { Toaster } from "react-hot-toast";
import { ConnectButton, getDefaultWallets } from "@rainbow-me/rainbowkit";
import {
chain,
configureChains,
createClient,
useConnect,
useAccount,
useNetwork,
useSignMessage
} from "wagmi";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
const alchemyId = process.env.ALCHEMY_ID;
const pageTitle = "Login";
const logo = "/favicon.ico";
export const { chains, provider } = configureChains(
[chain.polygonMumbai],
[alchemyProvider({ alchemyId }), publicProvider()]
);
export const { connectors } = getDefaultWallets({
appName: "myapp",
chains
});
export const client = createClient({
autoConnect: true,
connectors,
provider
});
export default function Login() {
const { query } = useRouter();
const { displayError } = query;
useEffect(() => {
const errorMessage = Array.isArray(displayError)
? displayError.pop()
: displayError;
errorMessage && toast.error(errorMessage);
}, [displayError]);
const [{ data: connectData }, connectAsync] = useConnect();
const [, signMessage] = useSignMessage();
const handleLogin = async () => {
try {
const res = await connectAsync(connectData.connectors[0]);
const callbackUrl = "/protected";
const message = new SiweMessage({
domain: window.location.host,
address: res.data?.account,
statement: "Sign in with Ethereum to the app.",
uri: window.location.origin,
version: "1",
chainId: res.data?.chain?.id,
nonce: await getCsrfToken()
});
const { data: signature, error } = await signMessage({
message: message.prepareMessage()
});
signIn("credentials", {
message: JSON.stringify(message),
redirect: false,
signature,
callbackUrl
});
} catch (error) {
console.log(error);
window.alert(error);
}
};
return (
<div className="mt-8 mx-auto sm:w-full w-11/12 sm:max-w-md">
<div className="bg-white py-8 px-4 shadow-md sm:rounded-lg sm:px-10">
<div className="flex justify-center">
<ConnectButton />
</div>
</div>
);
}
I also see you have the "types" command with tsc --noEmit. Does that have to do with avoiding this error?