Using StarknetKit modal with starknet-react

You might want to use starknet-react, but you don't have a need to build a custom modal component from scratch. To make your life easier, we made the default StarknetKit modal available for import with starknet-react.

To get started, you need to first import the useStarknetkitConnectModal and useConnect components:

import { useStarknetkitConnectModal } from "starknetkit";
import { useConnect } from "@starknet-react/core";

After importing, you can now use the default modal in your app:

const { connect, connectors } = useConnect();
const { starknetkitConnectModal } = useStarknetkitConnectModal({
  connectors: connectors
})
 
async function connectWallet() {
  const { connector } = await starknetkitConnectModal()
  if (!connector) {
    return
  }
 
  await connect({ connector })
}

PS: Ensure to setup your StarknetProvider first.