Using StarknetKit modal with starknet-react

The first action a user will take when interacting with your app is to connect their wallet. Hence, this component needs to be clean and easy to use. 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 })
}

To reconnect to a previously connected wallet on load, add the autoConnect option to the StarknetConfig component in starknet-provider.tsx:

  <StarknetConfig
      chains={[mainnet, sepolia]}
      provider={publicProvider()}
      connectors={connectors}
      explorer={voyager}
      autoConnect={true}
    >
      {children}
  </StarknetConfig>

Without starknet-react Connectors