Bundlr In The Browser (WebBundlr)

🚀

If you're using Bundlr with React and npx create-react-app, you will need to follow some extra setup steps.

To use Bundlr with browser wallets like MetaMask and Phantom, use the WebBundlr class. Usage is similar to the Bundlr class used with server-side development, however you don’t need to provide a private key as that will be linked via the user’s wallet. When functions that require signing are called (upload, fund, withdraw etc.) the linked wallet will prompt the user to confirm the required actions.

If you’d prefer to learn using a long-form tutorial, we have this one on creating a web-based uploader with progress bars.

Provider setup varies based on wallet type / version:

Ethers 5

import { providers } from "ethers";
import { WebBundlr } from "@bundlr-network/client";
 
await window.ethereum.enable();
const provider = new providers.Web3Provider(window.ethereum);
const bundlr = new WebBundlr("https://node2.bundlr.network", "matic", provider);
await bundlr.ready();

Ethers 6

Import our SDK and connect to a Bundlr node using injected providers and ethers version 6.

import { ethers } from "ethers";
import { WebBundlr } from "@bundlr-network/client";
 
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
 
provider.getSigner = () => signer;
 
const bundlr = new WebBundlr("https://node1.bundlr.network", "matic", provider);
await bundlr.ready();

RainbowKit / WAGMI Hooks

import { WebBundlr } from "@bundlr-network/client";
 
const provider = useProvider();
const { data: rainbowKitSigner, isError, isLoading } = useSigner();
// use method injection to add the missing function
provider.getSigner = () => rainbowKitSigner;
const bundlr = new WebBundlr("https://node1.bundlr.network", "matic", provider);
await bundlr.ready();

viem

import { createWalletClient, custom } from "viem";
import { mainnet } from "viem/chains";
import { WebBundlr } from "@bundlr-network/client";
 
const client = createWalletClient({
	chain: mainnet,
	transport: custom(window.ethereum),
});
client.getSigner = () => client;
client.getAddress = async () => client.getAddresses();
 
const bundlr = new WebBundlr("https://node1.bundlr.network", "matic", client);
await bundlr.ready();

WalletConnect

import { ethers } from "ethers";
import WalletConnectProvider from "@walletconnect/web3-provider";
import { WebBundlr } from "@bundlr-network/client";
 
const connector = await new WalletConnectProvider({
	rpc: "https://cloudflare-eth.com/",
}).enable();
const provider = new ethers.BrowserProvider(connector);
 
const bundlr = new WebBundlr("https://node1.bundlr.network", "matic", provider);
await bundlr.ready();

Phantom

import { WebBundlr } from "@bundlr-network/client";
import { PhantomWalletAdapter } from "@solana/wallet-adapter-phantom";
await window.solana.connect();
const provider = new PhantomWalletAdapter();
await provider.connect();
 
const bundlr = new WebBundlr("https://node1.bundlr.network", "solana", provider);
await bundlr.ready();

Near

import { WebBundlr } from "@bundlr-network/client";
import { connect, keyStores, WalletConnection } from "near-api-js";
 
const config = {
	networkId: "mainnet",
	keyStore: new keyStores.BrowserLocalStorageKeyStore(),
	nodeUrl: "https://rpc.mainnet.near.org",
	walletUrl: "https://wallet.mainnet.near.org",
	helperUrl: "https://helper.mainnet.near.org",
	explorerUrl: "https://explorer.mainnet.near.org",
	headers: {},
};
const near = await connect(config);
const wallet = new WalletConnection(near, "bundlr");
wallet.requestSignIn({
	contractId: "",
});
 
const bundlr = new WebBundlr("https://node1.bundlr.network", "near", wallet);
await bundlr.ready();

SDK Installing The SDK