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

# useSendBalance

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

In case you need to programmatically open the send balance widget, you can use our useSendBalance hook to request the UI and optionally prepopulate the form for the user.

### How it works

The useSendBalance hook depends on the DynamicContextProvider, so it has to be used as a child of the Dynamic context. When you use the hook, you will get a function named `open`. That method accepts the follow options:

| Parameter | Type | Description |
| :- | :- | :- |
| recipientAddress | String | The initial recipient address |
| value | ethers.BigNumber | The initial transaction amount |

The `open` function will return a promise; If successful, the promise will be resolved with the transaction; if not successful, the promise will be rejected accompanied by the error collected from the provider.

Here is an example of a custom Send button

```typescript theme={"system"}
import { useSendBalance } from "@dynamic-labs/sdk-react-core";

const MySendButton = () => {
  const { open } = useSendBalance();

  return <button onClick={() => open()}>Send</button>;
};
```

From this example, when the user clicks the button, they will be prompted to fill the amount and recipient fields, review the transaction, and they will see a confirmation at the end of the flow.

For the second example, we will pre-populate the recipient and amount fields for the user.

```typescript theme={"system"}
import { useSendBalance } from "@dynamic-labs/sdk-react-core";
import { parseEther } from "ethers";

const MySendButton = () => {
  const { open } = useSendBalance();

  const onClickSend = async () => {
    try {
      const tx = await open({
        recipientAddress: "<address>",
        value: parseEther("1"),
      });
    } catch (err) {
      // Handle the promise rejection
    }
  };

  return <button onClick={onClickSend}>Send</button>;
};
```

Here, when the user clicks the button, they will be prompted with the same UI, but now it will be pre-populated with the recipient address and amount.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.