# Account Provider

## API

```tsx
<AccountProvider> ... </AccountProvider>
```

| Property | Type      | Description           | Default   |
| -------- | --------- | --------------------- | --------- |
| children | ReactNode | The wrapped children. | undefined |

#### For example

```tsx
import { AccountProvider } from '@sentre/senhub'

// Wrap a paragraph as a child.
<AccountProvider>
  <p>Hello world</p>
</AccountProvider>
```

## Context

```typescript
type Provider = {
  accounts: State
}

type State = Record<string, AccountData>
type AccountData = {
  mint: string;
  owner: string;
  amount: bigint;
  delegate_option: number;
  delegate: string;
  state: number;
  is_native_option: number;
  is_native: bigint;
  delegated_amount: bigint;
  close_authority_option: number;
  close_authority: string;
}
```

#### Provider

| Property | Type                         | Description                                                          |
| -------- | ---------------------------- | -------------------------------------------------------------------- |
| accounts | Record\<string, AccountData> | A mapping from an account address to the corresponding account data. |

#### AccountData

| Property                 | Type        | Description                                         |
| ------------------------ | ----------- | --------------------------------------------------- |
| mint                     | string      | The corresponding mint address to the account.      |
| owner                    | string      | The account owner address.                          |
| amount                   | bigint      | The number of tokens.                               |
| delegate\_option         | 0 \| 1      | Whether the delegate property is available.         |
| delegate                 | string      | The delegate address.                               |
| delegated\_amount        | bigint      | The number of delegated tokens.                     |
| state                    | 0 \| 1 \| 2 | 0: Uninitialized; 1: Initialized; 2: Frozen;        |
| is\_native\_option       | 0 \| 1      | Whether the is\_native property is available.       |
| is\_native               | bigint      | The number of wrapped lamports.                     |
| close\_authority\_option | 0 \| 1      | Whether the close\_authority property is available. |
| close\_authority         | string      | The close authority address.                        |

## Hook & HOC

```typescript
import { useAccount, withAccount } from '@senhub/providers'
```

#### For example

{% hint style="info" %}
Wrap the parent by AccountProvider before accessing the context.
{% endhint %}

```tsx
import { useAccount, withAccount } from '@senhub/providers'

// Within a functional component
const Component = () => {
  const { accounts } = useAccount()
  console.log(accounts['8kGbKrvS3zopf4ZJwNDhEKMbZ3iC4Jztn43MZ8Nabcxq'])
  // mint: "sRHC8De9nks5KYQ7n2jYacsVgBKe9irc7vhpSzoAVYY"
  // owner: "8UaZw2jDhJzv5V53569JbCd3bD4BnyCfBH3sjwgajGS9"
  // amount: 10000000000000n
  // delegate_option: 0
  // delegate: "11111111111111111111111111111111"
  // state: 1
  // is_native_option: 0
  // is_native: 0
  // delegated_amount: 0n
  // close_authority_option: 0
  // close_authority: "11111111111111111111111111111111"
}
export default Component

// Within a class component
class Component {
  render() {
    const { accounts } = this.props
    console.log(accounts['8kGbKrvS3zopf4ZJwNDhEKMbZ3iC4Jztn43MZ8Nabcxq'])
    // mint: "sRHC8De9nks5KYQ7n2jYacsVgBKe9irc7vhpSzoAVYY"
    // owner: "8UaZw2jDhJzv5V53569JbCd3bD4BnyCfBH3sjwgajGS9"
    // amount: 10000000000000n
    // delegate_option: 0
    // delegate: "11111111111111111111111111111111"
    // state: 1
    // is_native_option: 0
    // is_native: 0
    // delegated_amount: 0n
    // close_authority_option: 0
    // close_authority: "11111111111111111111111111111111"
  }
}
export default withAccount(Component)
```