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

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

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

```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

<ParamField path="fromWallet" type="Wallet">
  The wallet that will be used to send the transaction.
</ParamField>

<ParamField path="token" type="{ address: string; decimals?: number } | undefined">
  The token of the transaction. When undefined, uses the wallet's connected
  chain's native token.
</ParamField>

<ParamField path="amount" type="number">
  The amount of the token to send.
</ParamField>

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

<ParamField path="externalWallet" type="Wallet">
  The wallet that will be used to send the transaction.
</ParamField>

<ParamField path="amount" type="{ 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.
</ParamField>

<ParamField path="token" type="{ 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.
</ParamField>

<ParamField path="quickSuggestions" type="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.
</ParamField>

### 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>
      )}
    </>
  )
}
```