> ## 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.

# useFundWithWallet

> [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.

Provides methods for programmatically funding your primary wallet from a connected wallet, as well as information
on whether external wallet funding has been enabled.

> [!NOTE]
>
> In order to use these methods, you must have external wallet funding enabled
> under the ["Funding"](https://console.dynamic.xyz/dashboard/funding) section of
> the Dynamic Console.

```tsx theme={"system"}
const {
  connectWalletForFunding,
  externalWalletFundingEnabled,
  fund,
  promptAmountAndFund,
} = useFundWithWallet()
```

In order to trigger the transaction, 3 pieces of information are required:

1. A connected `fromWallet`
2. The `amount` to send
3. The `token` to send

Our methods allow you to get each one of these values from the user, and then pass them into the `fund` method.

## `fund` method

Given a connected wallet, the amount and the token, the `fund` method will trigger a transaction to the primary wallet.

This is the only method that does not require any user interaction and shows no UI.

It takes a single object with the following properties:

### Props

**fromWallet** `Wallet`

The wallet that will be used to send the transaction.

**token** `\{ address: string; decimals?: number \} | undefined`

The token of the transaction. When undefined, uses the wallet's connected
chain's native token.

**amount** `number`

The amount of the token to send.

### Return value

The `fund` method returns a Promise that resolves to the transaction hash.

### Example

```tsx theme={"system"}
const { fund } = useFundWithWallet()

const onSubmit = async () => {
  const transactionHash = await fund({ fromWallet, amount: 10, token })
}
```

## `connectWalletForFunding` method

This method will prompt the user to connect a wallet by opening a wallet list modal.

It doesn't add the connected wallet to `userWallets`.

This method takes no arguments.

### Return value

It returns a Promise that resolves to the wallet that the user connected.

### Example

```tsx theme={"system"}
const { connectWalletForFunding } = useFundWithWallet()

const onSubmit = async () => {
  const wallet = await connectWalletForFunding()
}
```

## `promptAmountAndFund` method

Given a connected wallet, the `promptAmountAndFund` method will prompt the user to enter an amount and token,
and then trigger a transaction to the primary wallet.

This method takes a single object with the following properties:

### Props

**externalWallet** `Wallet`

The wallet that will be used to send the transaction.

**amount** `\{ value: number; rule: 'exact' | 'recommended' | 'minimum' \}`

Allows you to specify the amount that the user will fund their wallet with.
The options for rule are as follows:

* `exact`: The user will not be able to change the amount.
* `recommended`: Set initial amount, but user will be able to change it.
* `minimum`: Set initial amount, and user will be able to change it, but not below the minimum amount.

Default to 0 if not provided.

**token** `\{ value: string; rule: 'exact' | 'recommended' | 'exact-with-amount' \} | undefined`

Allows you to specify the token that the user will fund their wallet with.
The options for rule are as follows:

* `exact`: The user will not be able to change the selected token.
* `recommended`: Set initial selected token, but user will be able to change it.
* `exact-with-amount`: Same as `exact`, and also treats the `amount` param as relative to the selected token rather than USD.

Default to the wallet's connected chain's native token if not provided.

**quickSuggestions** `number[] | \{ token: string; values: number[] \}`

Allows you to define the initial quick suggestions that show up until first user interaction.

If an array is passed directly, uses \$ (`USD`) as the token.

If a token is provided, but doesn't correspond to the selected token, quick suggestions will NOT be shown.

### Return value

`void`

### Example

```tsx theme={"system"}
const { promptAmountAndFund } = useFundWithWallet()

const onSubmit = async () => {
  // 1. Prompt the user for an ETH transaction,
  //    and defaults amount to $10.
  await promptAmountAndFund({
    externalWallet,
    amount: { value: 10, rule: 'recommended' },
    token: { value: 'ETH', rule: 'exact' },
    quickSuggestions: [10, 20, 30],
  })

  // 2. Prompt the user for an AVAX transaction,
  //    and defaults amount to 10 AVAX and uses it as a minimum.
  await promptAmountAndFund({
    externalWallet,
    amount: { value: 10, rule: 'minimum' },
    token: { value: 'AVAX', rule: 'exact-with-amount' },
  })
}
```

## `externalWalletFundingEnabled` property

This property is a boolean indicating whether external wallet funding has been enabled.

### Example

```tsx theme={"system"}
const { externalWalletFundingEnabled } = useFundWithWallet()

if (!externalWalletFundingEnabled) {
  return <div>External wallet funding is not enabled</div>
}
```

## Full Example

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

const FundFromExternalWalletButton = () => {
  const [transactionId, setTransactionId] = useState<string>();
  const { connectWalletForFunding, fund } = useFundWithWallet();

  const onSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);

    const amount = formData.get("amount") as string;

    if (!amount) return;

    const externalWallet = await connectWalletForFunding();

    const transactionId = await fund({ amount: Number(amount), fromWallet: externalWallet });

    setTransactionId(transactionId);
  }

  return (
      <form onSubmit={onSubmit}>
        <label htmlFor="amount">Amount:</label>
        <input
          id="amount"
          name="amount"
          type="string"
          required
        />

        <button type="submit">Fund from External Wallet</button>
      </form>

      {transactionId && (
        <p>Transaction ID: {transactionId}</p>
      )}
    </>
  )
}
```


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