> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

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.