useAccount

Hook for getting current account information.

Import

import { useAccount } from "starkweb/react"

Usage

index.tsx

import { useAccount } from "starkweb/react"
 
function App() {
  const account = useAccount()
  
  if (account.isConnected) {
    return <div>Connected to {account.address}</div>
  }
  
  return <div>Not connected</div>
}

Parameters

import { type UseAccountParameters } from "starkweb/react"

config

Config | undefined

Config to use instead of retrieving from the nearest StarkwebProvider.

index.tsx

import { useAccount } from "starkweb/react"
import { config } from "./config"
 
function App() {
  const account = useAccount({
    config, 
  })
}

Return Type

import { type UseAccountReturnType } from "starkweb/react"

address

Address | undefined

Connected address from connector.
Defaults to first address in addresses.

addresses

readonly Address[] | undefined

Connected addresses from connector.

chain

Chain | undefined

Connected chain from connector. If chain is not configured by config, it will be undefined.

chainId

number | undefined

Connected chain id from connector.

connector

Connector | undefined

Connected connector.

isConnecting / isReconnecting / isConnected / isDisconnected

boolean

Boolean variables derived from status.

status

"connecting" | "reconnecting" | "connected" | "disconnected"

"connecting" attempting to establish connection.
"reconnecting" attempting to re-establish connection to one or more connectors.
"connected" at least one connector is connected.
"disconnected" no connection to any connector.

Examples

Basic Usage

basic.tsx

import { useAccount } from "starkweb/react"
 
function AccountInfo() {
  const { address, isConnected, status } = useAccount()
 
  if (!isConnected) {
    return <div>Not connected</div>
  }
 
  return (
    <div>
      <div>Address: {address}</div>
      <div>Status: {status}</div>
    </div>
  )
}

With Multiple Addresses

multiple-addresses.tsx

import { useAccount } from "starkweb/react"
 
function MultipleAccountsInfo() {
  const { addresses, isConnected } = useAccount()
 
  if (!isConnected) {
    return <div>Not connected</div>
  }
 
  return (
    <div>
      <h2>Connected Accounts:</h2>
      <ul>
        {addresses.map((address, index) => (
          <li key={address}>
            Account {index + 1}: {address}
          </li>
        ))}
      </ul>
    </div>
  )
}

With Connection Status Handling

status-handling.tsx

import { useAccount } from "starkweb/react"
 
function AccountStatus() {
  const { status, address } = useAccount()
 
  switch (status) {
    case 'connecting':
      return <div>Connecting...</div>
    case 'reconnecting':
      return <div>Reconnecting...</div>
    case 'connected':
      return <div>Connected to {address}</div>
    case 'disconnected':
      return <div>Disconnected</div>
    default:
      return <div>Unknown status</div>
  }
}

With Error Handling

error-handling.tsx

import { useAccount } from "starkweb/react"
 
function AccountWithError() {
  const { address, isConnected, isError, error } = useAccount()
 
  if (isError) {
    return (
      <div>
        Error connecting to account: {error.message}
      </div>
    )
  }
 
  if (!isConnected) {
    return <div>Not connected</div>
  }
 
  return <div>Connected to {address}</div>
}