DEVELOPER DOCS
Irys SDK
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 Irys 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";
	// Devnet RPC URLs change often, use a recent one from https://chainlist.org/chain/80001
	const rpcURL = "";
 
	// 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.

PackageParameter value
Ethers 5 (opens in a new tab)ethersv5
Ethers 6 (opens in a new tab)ethersv6
Solana (opens in a new tab)solana

Additional providers

Additionally, the following providers will work with extra setup code.

Viem (opens in a new tab)

const getIrys = async (): Promise<WebIrys> => {
	const url = "https://node1.irys.xyz";
	const token = "matic";
	const rpcURL = "https://rpc-mumbai.maticvigil.com"; // Optional parameter
 
	const client = createWalletClient({
		chain: polygonMumbai,
		//@ts-ignore
		transport: custom(window.ethereum),
	});
 
	console.log("client=", client);
	//@ts-expect-error injected
	client.getSigner = () => client;
	//@ts-expect-error injected
	client.getAddress = async () => client.getAddresses().then((a) => a[0]);
 
	const wallet = { name: "viem", provider: client };
	const webIrys = new WebIrys({ url, token, wallet });
 
	// @ts-expect-error
	webIrys.tokenConfig.getFee = async (_amount, _to): Promise<number> => {
		return 0;
	};
 
	// if you're using react hooks:
	webIrys.tokenConfig.sendTx = async (data): Promise<string> => {
		const { sendTransaction } = useSendTransaction(data);
		await sendTransaction?.();
		// make this function return the transaction id
		// think it's
		return data.hash;
	};
 
	webIrys.tokenConfig.createTx = async (
		amount: string | number,
		to: string,
		_fee?: string,
	): Promise<{ txId: string | undefined; tx: any }> => {
		const { config } = usePrepareSendTransaction({
			to, //@ts-expect-error weird type
			value: parseEther(+amount),
		});
		return { txId: undefined, tx: config };
	};
 
	// Otherwise
	webIrys.tokenConfig.sendTx = async (data): Promise<string> => {
		const hash = await client.sendTransaction({
			to: data.to,
			value: parseEther(data.amount.toString()),
			account: webIrys.address as `0x${string}`,
		});
		return hash;
	};
 
	webIrys.tokenConfig.createTx = async (amount, to, fee): Promise<{ txId: string | undefined; tx: any }> => {
		// dummy value/method
		return { txId: undefined, tx: { amount, to, fee } };
	};
	await webIrys.ready();
 
	//@ts-expect-error injected
	client._signTypedData = async (domain, types, message) => {
		message["Transaction hash"] = "0x" + Buffer.from(message["Transaction hash"]).toString("hex");
		//@ts-ignore
		return await client.signTypedData({
			domain,
			message,
			types,
			account: webIrys.address!,
			primaryType: "Bundlr",
		});
	};
 
	console.log(`Conected to webIrys from ${webIrys.address}`);
	return webIrys;
};

Arconnect (opens in a new tab)

const getWebIrys = async () => {
	const arconnect = window.arweaveWallet;
	await arconnect.connect(["ACCESS_ADDRESS", "ACCESS_PUBLIC_KEY", "SIGN_TRANSACTION", "SIGNATURE"]);
	const webIrys = new WebIrys({ url: "https://node1.irys.xyz", token: "arweave", wallet: { provider: arconnect } });
	await webIrys.ready();
 
	return webIrys;
};

Othent (opens in a new tab)

export const getWebIrys = async () => {
	const wallet = { name: "Othent KMS", provider: othentKMS };
	const url = "https://node1.irys.xyz";
	const token = "arweave";
	const webIrys = new WebIrys({ url, token, wallet });
	await webIrys.ready();
	return webIrys;
};

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://gateway.irys.xyz/${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://gateway.irys.xyz/${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://gateway.irys.xyz/[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 guidefund()