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

# Deposit

> Pre-built React component for token deposits with wallet connection handling and modal support.

Block component allowing users to deposit.

## Features

* The component is already integrated with `@orderly.network/hooks` and can be used without any configuration.
* The component handles checks on the user's status, as well as connection to the wallet.
* The component must be used within the `ConnectionProvider` component within `OrderlyAppProvider`.

## Usage

### Static mode

You can display the `Deposit` component directly in your project:

```tsx theme={null}
import { Deposit } from "@orderly.network/react";

export const App = () => {
  return <Deposit />;
};
```

### Modal mode

You can also choose to displays the `deposit` component through a modal:

```tsx theme={null}
import { AssetsProvider, Deposit, modal } from "@orderly.network/react";

const { dialog } = modal;

export const App = () => {
  return (
    <Button
      onClick={() => {
        dialog({
          title: "Deposit",
          content: <Deposit />
        });
      }}
    >
      Open deposit dialog
    </Button>
  );
};
```

## APIs

### onOk

* Type: `(data: any) => void`
* Required: false

Callback function after the deposit is complete, providing the status of the deposit transaction.

### onCancel

* Type: `() => void`
* Required: false

Callback function after the deposit has been canceled.