useConnect

function useConnect(): UseMutationResult<AccountNetwork, Error, {
  adapter: WalletAdapter;
}, void> & Pick<FilecoinContextType, "adapter" | "adapters" | "loading">;

Defined in: packages/iso-filecoin-react/src/wallet-provider.js:409

Hook to connect a wallet adapter

Returns

UseMutationResult<AccountNetwork, Error, { adapter: WalletAdapter; }, void> & Pick<FilecoinContextType, "adapter" | "adapters" | "loading">

Connection mutation and state

Example

import { 
function useConnect(): UseMutationResult<AccountNetwork, Error, {
    adapter: WalletAdapter;
}, void> & Pick<FilecoinContextType, "adapters" | "adapter" | "loading">
Hook to connect a wallet adapter
@example 
import { useConnect } from 'iso-filecoin-react'

function App() {
  const { adapters, error, mutate: connect, isPending } = useConnect()

  return (
    <div>
      {adapters.map(adapter => (
        <button
          key={adapter.name}
          onClick={() => connect({ adapter })}
          disabled={isPending}
        >
          Connect {adapter.name}
        </button>
      ))}
      {error && <div>Error: {error.message}</div>}
    </div>
  )
}
@returns ― Connection mutation and state
useConnect } from 'iso-filecoin-react'

function 
function App(): React.JSX.Element
App() {
  const { 
const adapters: WalletAdapter[]
List of available wallet adapters
adapters, 
const error: Error | null
The error object for the mutation, if an error was encountered.

Defaults to null.
error, 
mutate: UseMutateFunction<AccountNetwork, Error, {
    adapter: WalletAdapter;
}, void>
The mutation function you can call with variables to trigger the mutation and optionally hooks on additional callback options.
@param ― variables - The variables object to pass to the mutationFn.
@param ― options.onSuccess - This function will fire when the mutation is successful and will be passed the mutation's result.
@param ― options.onError - This function will fire if the mutation encounters an error and will be passed the error.
@param ― options.onSettled - This function will fire when the mutation is either successfully fetched or encounters an error and be passed either the data or error.
mutate: 
const connect: UseMutateFunction<AccountNetwork, Error, {
    adapter: WalletAdapter;
}, void>
The mutation function you can call with variables to trigger the mutation and optionally hooks on additional callback options.
connect, 
const isPending: boolean
A boolean variable derived from status.

true if the mutation is currently executing.
isPending } = 
function useConnect(): UseMutationResult<AccountNetwork, Error, {
    adapter: WalletAdapter;
}, void> & Pick<FilecoinContextType, "adapters" | "adapter" | "loading">
Hook to connect a wallet adapter
@example 
import { useConnect } from 'iso-filecoin-react'

function App() {
  const { adapters, error, mutate: connect, isPending } = useConnect()

  return (
    <div>
      {adapters.map(adapter => (
        <button
          key={adapter.name}
          onClick={() => connect({ adapter })}
          disabled={isPending}
        >
          Connect {adapter.name}
        </button>
      ))}
      {error && <div>Error: {error.message}</div>}
    </div>
  )
}
@returns ― Connection mutation and state
useConnect()

  return (
    <
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      {
const adapters: WalletAdapter[]
List of available wallet adapters
adapters.
Array<WalletAdapter>.map<React.JSX.Element>(callbackfn: (value: WalletAdapter, index: number, array: WalletAdapter[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@param ― callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.
@param ― thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map(
adapter: WalletAdapter
adapter => (
        <
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
          
React.Attributes.key?: React.Key | null | undefined
key={
adapter: WalletAdapter
adapter.
WalletAdapter.name: string
Human readable wallet name
name}
          
React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => 
const connect: (variables: {
    adapter: WalletAdapter;
}, options?: MutateOptions<AccountNetwork, Error, {
    adapter: WalletAdapter;
}, void> | undefined) => void
The mutation function you can call with variables to trigger the mutation and optionally hooks on additional callback options.
connect({ 
adapter: WalletAdapter
adapter })}
          
React.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
disabled={
const isPending: boolean
A boolean variable derived from status.

true if the mutation is currently executing.
isPending}
        >
          Connect {
adapter: WalletAdapter
adapter.
WalletAdapter.name: string
Human readable wallet name
name}
        </
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
      ))}
      {
const error: Error | null
The error object for the mutation, if an error was encountered.

Defaults to null.
error && <
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>Error: {
const error: Error
The error object for the mutation, if an error was encountered.

Defaults to null.
error.
Error.message: string
message}</
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>}
    </
React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  )
}