useFundWithWallet

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

In order to use these methods, you must have external wallet funding enabled under the “Funding” section of the dashboard.

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 is 100% headless, meaning it 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

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

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

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

const { externalWalletFundingEnabled } = useFundWithWallet()

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

Full Example

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