Irys (previously Bundlr) | Irys in the Browser

Working with Irys in the browser is similar to working with our server-side SDK, however there are a few differences which are demonstrated below.

In addition to creating your own components using the code below, you can also fork the Irys provenance toolkit and quickly build your project using its rich UI component library and helper functions.

🚀

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

Installing

Install using npm:

npm install @irys/sdk

or yarn:

yarn add @irys/sdk

Importing

import { WebIrys } from "@irys/sdk";

Connecting to a node

When instantiating a WebIrys object pass:

url: Irys node address
token: Payment token
wallet: A wallet object containing the end-user's injected provider and the name of the provider package your project uses

const getWebIrys = async () => {
	// Ethers5 provider
	await window.ethereum.enable();
	const provider = new providers.Web3Provider(window.ethereum);
 
	const url = "https://node1.irys.xyz";
	const token = "matic";
	const rpcURL = "https://rpc-mumbai.maticvigil.com"; // Optional parameter
 
	// Create a wallet object
	const wallet = { rpcUrl: rpcURL, name: "ethersv5", provider: provider };
	// Use the wallet object
	const webIrys = new WebIrys({ url, token, wallet });
	await webIrys.ready();
 
	return webIrys;
};

After instantiating the object, call webIrys.ready().

Supported providers

WebIrys supports the following providers. When instantiating a new WebIrys object, you must pass in the name of the provider you will be using.

Package	Parameter value
Ethers 5 (opens in a new tab)	ethersv5
Ethers 6 (opens in a new tab)	ethersv6
Rainbowkit v1 (opens in a new tab)	rainbowkitv1
Viem v1 (opens in a new tab)	viemv1
Solana (opens in a new tab)	solana

Funding a node

Fund a node using any of our supported tokens:

const fundNode = async () => {
	const webIrys = await getWebIrys();
	try {
		const fundTx = await webIrys.fund(webIrys.utils.toAtomic(0.05));
		console.log(`Successfully funded ${webIrys.utils.fromAtomic(fundTx.quantity)} ${webIrys.token}`);
	} catch (e) {
		console.log("Error uploading data ", e);
	}
};

Uploading

The provenance toolkit contains an uploader component that can be dropped into any project to instantly enable file uploading.

Data uploaded to Irys is given a millisecond-accurate timestamp, attributes and authorship details before being passed to Arweave for permanent storage. This information is used to create a signed receipt that can be used to verify the data's provenance at any time.

Uploading data

const uploadData = async () => {
	const webIrys = await getWebIrys();
	const dataToUpload = "GM world.";
	try {
		const receipt = await webIrys.upload(dataToUpload);
		console.log(`Data uploaded ==> https://arweave.net/${receipt.id}`);
	} catch (e) {
		console.log("Error uploading data ", e);
	}
};

Uploading a file

Upload a File (opens in a new tab) object.

const uploadFile = async (fileToUpload: File) => {
	const webIrys = await getWebIrys();
	// Your file
	const tags = [{ name: "application-id", value: "MyNFTDrop" }];
 
	try {
		const receipt = await webIrys.uploadFile(fileToUpload, { tags });
		console.log(`File uploaded ==> https://arweave.net/${receipt.id}`);
	} catch (e) {
		console.log("Error uploading file ", e);
	}
};

Uploading a folder

Upload an array of File (opens in a new tab) objects.

Upon upload, a manifest is automatically created. Your files can be accessed https://arweave.net/[manifestId]/[file-name].

const uploadFolder = async (files: File[], tags: Tag[]) => {
	const webIrys = await getIrys();
 
	try {
		const receipt = await webIrys.uploadFolder(files, {
			tags,
		}); //returns the manifest ID
 
		console.log(`Files uploaded. Manifest Id=${receipt.manifestId} Receipt Id=${receipt.id}`);
	} catch (e) {
		console.log("Error uploading file ", e);
	}
};

Migration guide fund()