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;