Irys Provenance Toolkit
The Irys Provenance Toolkit is a NextJS project containing a collection of UI components you can use when building your permaweb application.
It contains UI components for:
- Fund / Withdraw: Managing node balances.
- Uploader: Uploading single files or groups of files.
- Progress Bar Uploader: Uploading large files while providing feedback via a progress bar.
- UDL Uploader: Uploading files and attaching a UDL.
- Encrypted Uploader: Encrypting files before uploading.
- Gasless Uploader: Paying for user uploads server-side.
- Solana NFT Minter: Uploading an image and then minting on Solana as an NFT.
- Transaction Feed: Querying Irys transactions.
Demo
You can interact with the provenance toolkit at https://provenance-toolkit.irys.xyz
Setup
- Fork or clone https://github.com/Irys-xyz/provenance-toolkit
- Run
npm install
oryarn
from within the project directory - Rename
.env.local.example
to.env.local
and follow the configuration instructions in that file - Run
npm run start
from within the project directory - Launch the Provenance Toolkit at http://localhost:3000/
Project Layout
The project is broken into three main categories:
- Components: The UI components. These can be added to your project and used as is.
- Navigation routes: NextJS navigation routing. If you’re building your own project on top of the Provenance Toolkit, you can delete these routes and create your own.
- Utils: Utility functions used by the UI components.
Customization
The components are designed with a minimal UI that can be easily incorporated into any design. If you need to make significant UI customizations, the docs for each component contain a description of the code.
To change colors, modify the values in tailwind.config.js
.
Utility Functions
The following utility functions are used internally by the components. If you're using the components as-is, you can safely ignore the utility functions. For users customizing the components, these functions provide an additional abstraction layer over our SDK.
titleCase.ts
: Converts a string to title casegetRpcUrl.ts
: Returns the RPC URL for the chain associated with the specified token.getIrys.ts
: Instantiates an Irys object using the parameters in.env.local
. Currently designed to work with the Ethers 5 provider. You use a different provider, modify code here.fundAndUpload.ts
: Determines the upload cost for the specified data, funds the node if needed, and then uploads the file.gaslessFundAndUpload.ts
: Using the private key supplied in.env.local
, determines the upload cost for the specified data, funds the node if needed, and then uploads the file.queryGraphQL.ts
: Uses the Irys query package to search based on parameters entered in the UI