Connect 4337
Cometh ConnectCometh MarketplaceCometh Checkout
  • 🚀Quick start
    • What is Connect 4337
    • Getting started
    • Supported Networks
  • 🛠️CORE FEATURES
    • Create a Wallet
    • Send transactions
    • Go Gasless
    • Sign/Verify a message
    • Retrieve a wallet address
    • Handle owners
    • Import a safe into connect
  • 🥷ADVANCED
    • Session Keys
      • Tutorial
      • Policies
        • Sudo policy
        • Action policy
    • Social recovery
    • Add a passkey signer on a different OS
    • Capabilities
      • sendCalls
      • getCallsStatus
      • getCapabilities
      • grantPermissions
    • Other signers (Auth Providers)
      • EOA wallets (Metamask, Phantom...)
      • Magic signer
      • Web3Auth signer
      • Turnkey signer
      • Privy signer
  • 🔌Integrations
    • React hooks
      • ConnectProvider
      • useAccount
      • useConnect
      • useDisconnect
      • useGetGasPrice
      • useSendTransaction
      • useSignMessage
      • useVerifyMessage
      • useWriteContract
      • Handle owners
        • useRemoveOwner
        • useValidateAddDevice
        • useCreateNewSigner
        • useAddOwner
        • useGetOwners/EnrichedOwners
      • Session Keys
        • useGrantPermission
        • useSendPermission
        • useSessionKeyClient
        • useSessionKeySigner
      • Recovery
        • useIsRecoveryActive
        • useSetUpRecovery
        • useGetRecoveryRequest
        • useCancelRecoveryRequest
    • Mobile SDKs
      • IOS
      • Android
      • React Native
    • Wagmi
  • SDK Core
    • Signers (Auth Providers)
      • EOA wallets (Metamask, Phantom...)
      • Magic signer
      • Web3Auth signer
      • Turnkey signer
      • Privy signer
    • Handle owners
    • Capabilities
      • sendCalls
      • getCallsStatus
      • getCapabilities
  • SDK Session Keys
    • Setup Smart Account Client
    • Manage session keys
    • Policies
      • Sudo policy
      • Action policy
  • 📦Bundler
    • Bundler API
      • eth_sendUserOperation
      • eth_estimateUserOperationGas
      • eth_getUserOperationByHash
      • eth_getUserOperationReceipt
      • eth_supportedEntryPoints
  • 💳Paymaster
    • Paymaster API
  • 📖RESOURCES
    • Migrate from the connect legacy SDK
    • Connect Legacy SDKs (Unity, JS)
    • FAQ
Powered by GitBook
On this page
  • Description
  • Parameters
  • Returns
  • Example
  1. Integrations
  2. React hooks

useConnect

Description

This hook allows you to initiate a connection to a smart account with optional parameters and can handle the process both synchronously and asynchronously.

Parameters

The useConnect hook itself does not take parameters. However, the primary functions returned by the hook, connect and connectAsync, accept the following optional parameters:

type ConnectParameters = {
    address?: Address;
    passKeyName?: string;
};

Returns

  • connect ((params?: ConnectParameters) => void): Initiates the connection process. It accepts an optional params object to specify connection details. It handles state changes for pending status and errors internally.

  • connectAsync ((params?: ConnectParameters) => Promise<void>): An asynchronous function similar to connect, but returns a promise, allowing for usage with async/await syntax.

  • isPending (boolean): A boolean value indicating whether the connection process is currently pending (true) or not (false).

  • error (Error | null): An error object if an error occurred during the connection process, otherwise null.

Example

import React, { useState } from 'react';
import { useConnect } from "@cometh/connect-react-hooks";

const ConnectAccount = () => {
  const { connect, isPending, error } = useConnect();
  const [address, setAddress] = useState('');

  const handleConnect = () => {
    connect({ address });
  };

  return (
    <div>
      <h1>Connect to Smart Account</h1>
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
        placeholder="Enter smart account address"
      />
      <button onClick={handleConnect} disabled={isPending}>
        {isPending ? 'Connecting...' : 'Connect'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
    </div>
  );
};

export default ConnectAccount;
PrevioususeAccountNextuseDisconnect

Last updated 9 months ago

🔌