> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useAccount

> Hook for retrieving the current embedded account and connected external wallets

export const MethodDocs = ({name, description, parameters = [], returns, deprecated = false, since = null, async = false, static: isStatic = false, tag = null, defaultExpanded = false, preventCollapse = false, id = 'method'}) => {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded || preventCollapse);
  const [isHovered, setIsHovered] = useState(false);
  const [isCopied, setIsCopied] = useState(false);
  const [hoveredParam, setHoveredParam] = useState(null);
  const [hoveredReturn, setHoveredReturn] = useState(false);
  const parseMethodName = fullName => {
    const match = fullName.match(/^([^(]+)(\()([^)]*)(\))$/);
    if (match) {
      return {
        name: match[1],
        openParen: match[2],
        params: match[3],
        closeParen: match[4]
      };
    }
    return {
      name: fullName,
      openParen: '',
      params: '',
      closeParen: ''
    };
  };
  const methodParts = parseMethodName(name);
  const handleCopy = e => {
    e.stopPropagation();
    navigator.clipboard.writeText(name);
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 2000);
  };
  return <div className={`not-prose rounded-2xl border border-gray-200 overflow-hidden transition-colors duration-200 mb-6 ${isHovered && !preventCollapse ? 'bg-gray-50' : 'bg-white'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <button onClick={() => !preventCollapse && setIsExpanded(!isExpanded)} className={`w-full bg-transparent p-6 border-none text-left ${preventCollapse ? 'cursor-default' : 'cursor-pointer'}`}>
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 flex flex-col gap-2">
            <div className="flex items-center gap-3 flex-wrap">
              <div className="flex items-center gap-2">
                {async && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-purple-200 text-purple-800 rounded-lg">
                    async
                  </span>}
                {isStatic && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-violet-200 text-violet-900 rounded-lg">
                    static
                  </span>}
                {tag && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-teal-200 text-teal-800 rounded-lg">
                    {tag}
                  </span>}
              </div>

              <code className="text-lg font-mono font-semibold text-gray-900">
                <span>{methodParts.name}</span>
                <span className="text-gray-500 font-normal">{methodParts.openParen}</span>
                <span className="text-blue-600 font-normal">{methodParts.params}</span>
                <span className="text-gray-500 font-normal">{methodParts.closeParen}</span>
              </code>

              {deprecated && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-red-100 text-red-800 rounded-lg flex items-center gap-0.5">
                  ⚠ Deprecated
                </span>}
              {since && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-blue-100 text-blue-800 rounded-lg">
                  Since v{since}
                </span>}
            </div>

            <p className="text-sm text-gray-600 leading-6 m-0">
              {description}
            </p>
          </div>

          <div className="flex items-center gap-2 flex-shrink-0">
            <button onClick={handleCopy} className="p-2 bg-transparent border-none rounded-md cursor-pointer transition-colors duration-200 text-gray-500 hover:bg-gray-100" title="Copy method signature">
              {isCopied ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg> : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>}
            </button>

            {!preventCollapse && <span className="text-gray-400">
                {isExpanded ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="18 15 12 9 6 15"></polyline>
                  </svg> : <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>}
              </span>}
          </div>
        </div>
      </button>

      <div className={`overflow-hidden transition-all duration-300 ease-in-out px-6 border-t border-gray-200 ${isExpanded ? 'max-h-[2000px] opacity-100 pb-6' : 'max-h-0 opacity-0 pb-0'}`}>
        {parameters.length > 0 && <div className="pt-6">
            <div className="flex items-center gap-2 mb-3">
              <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider m-0">
                Parameters
              </h3>
              <span className="text-xs text-gray-500">({parameters.length})</span>
            </div>
            <div>
              {parameters.map((param, index) => <div key={index} className={`pl-4 border-l-2 transition-colors duration-200 ${hoveredParam === index ? 'border-gray-300' : 'border-gray-200'} ${index < parameters.length - 1 ? 'mb-3' : ''}`} onMouseEnter={() => setHoveredParam(index)} onMouseLeave={() => setHoveredParam(null)}>
                  <div className="flex items-baseline gap-2 mb-1 flex-wrap">
                    <code className="font-mono text-sm font-medium text-gray-900">
                      {param.name}
                    </code>
                    <span className="text-sm text-gray-500">:</span>
                    {param.typeLink ? <a href={param.typeLink} className="no-underline">
                        <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded-md cursor-pointer transition-all duration-200 hover:bg-gray-100 hover:text-blue-700">
                          {param.type}
                        </code>
                      </a> : <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded-md">
                        {param.type}
                      </code>}
                    {param.required && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-yellow-100 text-yellow-800 rounded-lg">
                        Required
                      </span>}
                    {param.optional && <span className="px-1.5 py-0.5 text-[0.625rem] font-medium bg-gray-100 text-gray-600 rounded-lg">
                        Optional
                      </span>}
                  </div>
                  {param.description && <p className="text-sm text-gray-600 mt-1 mb-0">
                      {param.description}
                    </p>}
                  {param.defaultValue !== undefined && <p className="text-sm text-gray-500 mt-1">
                      Default: <code className="font-mono text-[0.625rem] bg-gray-100 px-1.5 py-0.5 rounded-lg">{param.defaultValue}</code>
                    </p>}
                </div>)}
            </div>
          </div>}

        {returns && <div className={`${parameters.length > 0 ? 'mt-6' : 'pt-6'}`}>
            <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider m-0 mb-3">
              Returns
            </h3>
            <div className={`pl-4 border-l-2 transition-colors duration-200 ${hoveredReturn ? 'border-gray-300' : 'border-gray-200'}`} onMouseEnter={() => setHoveredReturn(true)} onMouseLeave={() => setHoveredReturn(false)}>
              <div className="flex items-baseline gap-2 mb-1">
                {returns.typeLink ? <a href={returns.typeLink} className="no-underline">
                    <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded cursor-pointer transition-all duration-200 hover:bg-gray-100 hover:text-blue-700">
                      {returns.type}
                    </code>
                  </a> : <code className="font-mono text-sm text-blue-600 bg-transparent px-1 py-0.5 rounded">
                    {returns.type}
                  </code>}
              </div>
              {returns.description && <p className="text-sm text-gray-600 mt-1 mb-0">
                  {returns.description}
                </p>}
            </div>
          </div>}
      </div>
    </div>;
};

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

The `useAccount` hook provides access to the current user's account state, including both embedded Para accounts and connected external wallets across EVM, Cosmos, and Solana chains.

## Import

```tsx theme={null}
import { useAccount } from "@getpara/react-sdk";
```

## Usage

```tsx theme={null}
function AccountInfo() {
  const account = useAccount();

  if (account.isLoading) return <div>Loading account...</div>;

  if (!account.isConnected) {
    return <div>Not connected</div>;
  }

  return (
    <div>
      <h3>Connection Type: {account.connectionType}</h3>

      {account.embedded.isConnected && (
        <div>
          <h4>Embedded Account</h4>
          <p>User ID: {account.embedded.userId}</p>
          <p>Auth Type: {account.embedded.authType}</p>
          <p>Email: {account.embedded.email}</p>
          <p>Wallets: {account.embedded.wallets?.length || 0}</p>
        </div>
      )}

      {account.external.connectedNetworks.length > 0 && (
        <div>
          <h4>External Wallets</h4>
          <p>Connected Networks: {account.external.connectedNetworks.join(', ')}</p>
          {account.external.evm.isConnected && (
            <p>EVM Address: {account.external.evm.address}</p>
          )}
          {account.external.cosmos.isConnected && (
            <p>Cosmos Connected</p>
          )}
          {account.external.solana.isConnected && (
            <p>Solana Public Key: {account.external.solana.publicKey?.toString()}</p>
          )}
        </div>
      )}
    </div>
  );
}
```

<MethodDocs defaultExpanded={true} preventCollapse={true} name="useAccount()" description="Retrieves the current embedded account and any connected external wallets using React Query. Returns { embedded, external, isConnected, connectionType, isLoading }." parameters={[]} returns={{ type: "UseAccountReturn", description: "Object containing embedded account data, external wallet data, connection status, and loading state." }} />

## Return Value Structure

The hook returns a `UseAccountReturn` object with the following properties:

### Top-Level Properties

* `isConnected: boolean` - Whether there is a wallet connected (either embedded, external or both)
* `isLoading: boolean` - Whether the account is currently loading
* `connectionType: 'embedded' | 'external' | 'both' | 'none'` - The type of connection for the account
  * `'embedded'` - Only the embedded account is connected
  * `'external'` - Only an external wallet is connected
  * `'both'` - Both embedded and external wallets are connected
  * `'none'` - No wallets are connected

### Embedded Account Properties

`embedded` object contains:

* `isConnected: boolean` - Whether the embedded Para account is connected
* `isGuestMode?: boolean` - Whether the user is in guest mode
* `userId?: string` - Unique identifier for the user
* `authType?: 'email' | 'phone' | 'farcaster' | 'telegram' | 'externalWallet'` - Authentication method used
* `email?: string` - User's email address (only if authType is 'email')
* `phone?: string` - User's phone number (only if authType is 'phone')
* `farcasterUsername?: string` - Farcaster username (only if authType is 'farcaster')
* `telegramUserId?: string` - Telegram user ID (only if authType is 'telegram')
* `externalWalletAddress?: string` - External wallet address (only if authType is 'externalWallet')
* `wallets?: Array<Wallet>` - Array of available wallets for the user

### External Wallet Properties

`external` object contains:

* `connectedNetworks: Array<'evm' | 'cosmos' | 'solana'>` - List of connected external networks
* `evm` - EVM wallet connection data (if connected)
  * `isConnected: boolean`
  * `address?: string`
  * `addresses?: string[]`
  * `chain?: Chain`
  * `chainId?: number`
  * `status: 'connected' | 'reconnecting' | 'connecting' | 'disconnected'`
* `cosmos` - Cosmos wallet connection data (if connected)
  * `isConnected: boolean`
  * Additional Cosmos-specific properties
* `solana` - Solana wallet adapter data (if connected)
  * `isConnected: boolean`
  * `isConnecting?: boolean`
  * `publicKey?: PublicKey`
  * `name?: string`
  * `icon?: string`

## Examples

### Basic Connection Check

```tsx theme={null}
function ConnectionStatus() {
  const { isConnected, connectionType } = useAccount();

  return (
    <div>
      <p>Connected: {isConnected ? 'Yes' : 'No'}</p>
      <p>Connection Type: {connectionType}</p>
    </div>
  );
}
```

### Accessing Embedded Wallet Address

```tsx theme={null}
function WalletAddress() {
  const account = useAccount();

  if (!account.isConnected || !account.embedded.wallets?.length) {
    return <div>No wallet connected</div>;
  }

  return (
    <div>
      <p>Address: {account.embedded.wallets[0].address}</p>
    </div>
  );
}
```

### Working with External Wallets

```tsx theme={null}
function ExternalWalletInfo() {
  const { external } = useAccount();

  return (
    <div>
      {external.evm.isConnected && (
        <p>EVM Address: {external.evm.address}</p>
      )}
      {external.cosmos.isConnected && (
        <p>Cosmos wallet connected</p>
      )}
      {external.solana.isConnected && (
        <p>Solana: {external.solana.name}</p>
      )}
    </div>
  );
}
```

### Complete Connect Wallet Component

```tsx theme={null}
function ConnectWallet() {
  const { openConnectModal, openWalletModal } = useModal();
  const account = useAccount();

  if (account.isConnected && account.embedded.wallets?.length) {
    return (
      <button
        onClick={openWalletModal}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        {account.embedded.wallets[0].address.slice(0, 6)}...{account.embedded.wallets[0].address.slice(-4)}
      </button>
    );
  }

  return (
    <button
      onClick={openConnectModal}
      className="px-4 py-2 bg-green-500 text-white rounded"
    >
      Connect Wallet
    </button>
  );
}
```

## Notes

* The hook automatically refetches when the user's authentication state changes
* Use `isLoading` to show loading states while fetching account data
* The `embedded` account refers to Para's native wallet system
* External wallets are third-party wallets connected via standard wallet connectors
* When both embedded and external wallets are connected, `connectionType` will be `'both'`