Transaction feed

The transaction feed component queries transactions based on node, currency, 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

GraphQL

The core of the work for this component happens in the file utils/queryGraphQL.ts. This file exposes one function, queryGraphQL() which dynamically builds a query based on the parameters passed.

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.

utils/queryGraphQL.ts

const queryGraphQL = async (
	endpoint: string,
	contentType: string | null,
	currency: string | null,
	from: Date | null,
	to: Date | null,
): Promise<QueryResult[]> => {
	// Start building the GraphQL query string
	let query = "query getData { transactions";
 
	// Check for any arguments to include in the query
	if (contentType ?? (null || currency) ?? (null || (from ?? null) !== null || (to ?? null) !== null)) {
		query += "(";
 
		// Add the tags field to the query if contentType is not null (or undefined)
		if (contentType ?? null) {
			query += 'tags: [{ name: "Content-Type", values: ["' + contentType + '"]}], ';
		}
 
		// Check for currency (null or undefined)
		if (currency ?? null) {
			query += 'currency: "' + currency + '", ';
		}
 
		// Check for from and to (null or undefined)
		if (from instanceof Date && to instanceof Date) {
			const fromTimestamp = from.getTime();
			const toTimestamp = to.getTime();
			query += "timestamp: { from: " + fromTimestamp + ", to: " + toTimestamp + " }, ";
		}
 
		// Complete the arguments section of the query
		query = query.slice(0, -2); // Remove the trailing comma and space
		query += ")";
	}
 
	// Complete the query string
	query += " { edges { node { id currency timestamp tags { name value } } } } }";
	try {
		const response = await fetch(endpoint, {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify({ query }),
		});
 
		if (!response.ok) {
			throw new Error("Network response was not ok");
		}
 
		const data: DataResponse = await response.json();
		console.log("data=", data);
 
		const processedData = processDataResponse(data.data);
		console.log(processedData);
		return processedData;
	} catch (error) {
		console.error("Error executing the GraphQL query:", error);
		return [];
	}
};

Gassless uploader Using Devnet