This is a Bundlr + Next.js + TypeScript + Tailwind project that demonstrates how to upload content with a UDL to Arweave using Bundlr.
Clone this repo and then run:
npm run dev
# or
yarn dev
# or
pnpm devThis repo demonstrates how to attach a UDL (Universal Data License) to files uploaded to Arweave using Bundlr. The UDL is built dynamically using the parameters specified in the UI, converted to a set of metatags that are then attached to the file at upload.
You can fork and build directly on top of it or copy-paste specific code into your projects.
utils/getBundlr.ts: Configures and returns a Bundlr object. This is where you set your node and currency.utils/fundAndUpload.ts: Is passed a file and tags, funds the node if necessary and then uploads.componennts/Spinner.tsx: UI spinner, used to show a transaction is in progress.components/BundlrUploader.tsx: File uploder UI.
Once you have successfully uploaded your file, you will receive a link containing a transaction ID. This ID can be used to query UDL data via GraphQL.
To get started, connect to the GraphQL endpoint associated with the node where you uploaded your transaction:
- Node 1: https://node1.bundlr.network/graphql
- Node 2: https://node2.bundlr.network/graphql
- Devnet: https://devnet.bundlr.network/graphql
After connecting, execute a query similar to the following, replacing the ID with the actual transaction ID generated during your upload:
query getUDL {
transactions(ids: ["521Bu2eyPqIYeGiBhQ04zbd9QhHokVaGmg1vLH5D78A"]) {
edges {
node {
tags {
name
value
}
}
}
}
}