Fund / withdraw

The FundWithdraw UI component is used to manage node balances.

Funding and withdrawing

When uploading data to Bundlr, first connect to and then fund a node. Balances are not shared between nodes, fund the node you intend to use.

Customizing the UI

The FundWithdraw component provides a default UI that includes options for the end user to select a node, choose a currency, and decide between funding or withdrawing.

You can also modify the UI to hardwire the node address, currency, or fix the mode (either to "fund-only" or "withdraw-only") using configuration parameters.

If both fundOnly and withdrawOnly are set to false, the component defaults to fund-only mode.

Code

The component is designed to be used as-is. Users making significant changes to the UI will need to understand the following.

Getting funded balance

When the component is set to "withdraw" mode, the UI will automatically check and display the user's currently funded balance. As balances are both node and currency-specific, this balance check is encapsulated within a useEffect() hook that gets triggered when the component mounts and also whenever the user changes either the selected node or currency.

To get the currently funded balance, first connect to a Bundlr node using the node and currency selected by the user:

const bundlr = await getBundlr(selectedNode?.value, selectedCurrency?.value);

Then retrieve the loaded balance in atomic units:

await bundlr.getLoadedBalance();

And convert to standard units before setting to a React state variable:

setAmount(bundlr.utils.fromAtomic(loadedBalance));

Here’s the full code:

useEffect(() => {
	setAmount(0);
	const getCurBalance = async () => {
		try {
			const bundlr = await getBundlr(selectedNode?.value, selectedCurrency?.value);
			const loadedBalance = await bundlr.getLoadedBalance();
 
			// Show currently funded balance iff we're in withdraw mode
			if (!isFunding) setAmount(bundlr.utils.fromAtomic(loadedBalance));
		} catch (error) {
			console.log("Error connecting to Bundlr:", error);
		}
	};
	if (selectedNode && selectedCurrency) getCurBalance();
}, [selectedNode, selectedCurrency, isFunding]);

Funding & withdrawing

Funding and withdrawing happen in the function handleFundWithdraw(). This function first validates input, then connects to a Bundlr node:

const bundlr = await getBundlr(selectedNode?.value, selectedCurrency?.value);

When funding, it converts the value entered by the user to atomic units and then uses that value to fund:

const fundTx = await bundlr.fund(bundlr.utils.toAtomic(amount));

When withdrawing, it converts the value entered by the user to atomic units and then uses that value to withdraw:

const fundTx = await bundlr.withdrawBalance(bundlr.utils.toAtomic(amount));

Atomic units

When funding and withdrawing using the functions bundlr.fund() or bundlr.withdrawBalance(), pass a value in atomic units.