useConnect

useConnect exposes connect(provider?), which resolves with the list of SignerAccounts, plus mutation state: isPending tracks the call, error carries a failure, data holds the last result and reset() clears them. Use it over the connect in useAccounts when a button needs its own pending or error state.

Both drive the same shared connection, so a connect fired here updates useAccounts, useSelectedAccount and useSigner everywhere. Concurrent connects share a single attempt; a failed attempt is evicted so the next call retries.

Called without an argument, connect() auto-detects the provider: the host provider inside a Polkadot host container, dev accounts standalone. Pass "host" or "dev" to force one. Failures reject the returned promise and also land in error, so a click handler can ignore the rejection and let the UI render the error state.

Usage

import { useConnect } from "@use-truapi/react";

function ConnectButton() {
  const { connect, isPending, error } = useConnect();

  return (
    <>
      <button
        type="button"
        onClick={() => void connect().catch(() => {})}
        disabled={isPending}
      >
        {isPending ? "Connecting…" : "Connect wallet"}
      </button>
      {error && <p role="alert">{error.message}</p>}
    </>
  );
}

<script setup lang="ts">
import { useConnect } from "@use-truapi/vue";

const { connect, isPending, error } = useConnect();

function onConnect() {
  void connect().catch(() => {});
}
</script>

<template>
  <button type="button" :disabled="isPending" @click="onConnect">
    {{ isPending ? "Connecting…" : "Connect wallet" }}
  </button>
  <p v-if="error" role="alert">{{ error.message }}</p>
</template>

connect resolves with the accounts, which is handy when connecting is step one of a larger flow:

const { connect } = useConnect();

async function onGetStarted() {
  const accounts = await connect(); // or connect("dev")
  console.log("first account:", accounts[0]?.address);
}

See also

• useAccounts bundles connect with the full account state and select.
• useDisconnect is the inverse operation.
• useLogin performs RFC-0009 login on top of the connected host session.

API reference

React

function useConnect(options?): NamedMutation<SignerAccount[], OptionalVariables<ProviderType>> & object;

Connect with mutation state: connect(provider?) plus isPending/error/data.

Parameters

Returns

NamedMutation<SignerAccount[], OptionalVariables<ProviderType>> & object

Vue

function useConnect(options?): NamedMutation<SignerAccount[], OptionalVariables<ProviderType>> & object;

Connect with mutation state: connect(provider?) plus isPending/error/data.

Parameters

Returns

NamedMutation<SignerAccount[], OptionalVariables<ProviderType>> & object