Transaction feed

The transaction feed component uses the query package to search transactions based on node, token, content type and timestamp and renders the results in an easy-to-view format.

The component could be easily forked and used as part of applications like:

A feed of images for a decentralized image-sharing platform
A music discovery tool highlighting songs uploaded to Arweave
A browsing tool as part of a platform for academic research and papers

Query function

The actual querying takes place in the function handleQuery() where parameters entered in the UI are used to create a new Query object.

When forking this component, you could modify the query construction to do things like limit query results to transactions with your application-id or transactions of a single Content-Type.

components/TransactionFeed.ts

const handleQuery = async () => {
	setTxProcessing(true);
	setQueryResults([]);
 
	setError("");
	if (selectedNode === null) {
		// Should never happen, but better to check
		setError("Please select a node");
		return;
	}
 
	// Convert the timestamp strings to Date objects
	const fromDate = fromTimestamp ? new Date(fromTimestamp) : null;
	const toDate = toTimestamp ? new Date(toTimestamp) : null;
 
	try {
		const query = new Query({ url: selectedNode.value });
		const myQuery = query.search("irys:transactions").limit(42);
 
		// Set query params based on input in NavBar
		if (selectedContentType?.value) {
			console.log("Adding content type=", selectedContentType?.value);
			myQuery.tags([{ name: "Content-Type", values: [selectedContentType?.value] }]);
		}
		if (selectedToken?.value) {
			console.log("Adding token=", selectedToken?.value);
			myQuery.token(selectedToken?.value);
		}
		if (fromDate) {
			console.log("Adding fromDate=", fromDate);
			myQuery.fromTimestamp(fromDate);
		}
		if (toDate) {
			console.log("Adding fromDate=", toDate);
			myQuery.toTimestamp(toDate);
		}
 
		// Having configured the query, call await on it to execute
		const results = await myQuery;
		console.log("Query results ", results);
		let convertedResults: QueryResult[] = [];
		for (const result of results) {
			const transformedResult: QueryResult = {
				txID: result.id, // adjust as necessary based on the structure of results
				creationDate: result.timestamp.toString(),
				token: result.token,
				tags: result.tags,
			};
			convertedResults.push(transformedResult);
		}
 
		setQueryResults(convertedResults);
	} catch (error) {
		setError("Error executing the GraphQL query");
	} finally {
		setTxProcessing(false);
	}
};

Gassless uploader Using Devnet