# Wallet Provider

## API

```tsx
<WalletProvider> ... </WalletProvider>
```

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

#### For example

```tsx
import { WalletProvider } from '@senhub/provider'

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

## Context

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

type State = {
  visible: boolean
  address: string
  lamports: bigint
}
```

#### Provider

| Property | Type  | Description      |
| -------- | ----- | ---------------- |
| wallet   | State | The wallet data. |

#### State

| Property | Type    | Description                                                                              |
| -------- | ------- | ---------------------------------------------------------------------------------------- |
| visible  | boolean | Whether the wallet modal is visible.                                                     |
| address  | string  | The connecting wallet address.                                                           |
| lamports | bigint  | The available number of lamports (1 SOL = 1,000,000,000 lamports) in the current wallet. |

## Hook & HOC

```typescript
import { useWallet, withWallet } from '@senhub/providers'
```

#### For example

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

```tsx
import { useWallet, withWallet } from '@senhub/providers'

// Within a functional component
const Component = () => {
  const {
    wallet: { address, lamports },
  } = useWallet()
}
export default Component

// Within a class component
class Component {
  render() {
    const {
      wallet: { address, lamports },
    } = this.props
  }
}
export default withWallet(Component)
```