A template project demonstrating how to build mini-apps using the up-provider package and interacting with Universal Profiles on Universal Everything, built with next.js.
This template showcases:
- UP-Provider implementation and wallet connection on the Grid
- Profile search functionality using Envio integration for fast querying
- Integrates the @lukso/web-components library for ready-to-use branded components
- Uses the erc725js library to fetch profile data from the blockchain
The template demonstrates how to:
- Connect to Universal Profile browser extension from the Grid
- Manage UP contexts on the Grid
Shows how to:
- Query the LUKSO Envio indexer
- Search for Universal Profiles
- Display profile information and images
Shows how to:
- Use the @lukso/web-components library to display profile card
Shows how to:
- Use the erc725js library to fetch profile data from the blockchain
- Install dependencies:
yarn install- Run the development server:
yarn dev- Open http://localhost:3000 with your browser to see the result.(Note that the Grid context is not available in the local environment)
components/upProvider.tsx: Core UP Provider implementation and wallet connection logiccomponents/ProfileSearch.tsx: Example of Envio integration for profile searchcomponents/Donate.tsx: Example use-case of this template. Uses the client from the up-provider package to interact with the blockchaincomponents/LuksoProfile.tsx: Example of using the @lukso/web-components library to display profile images that is fetched using the erc725js library
- LUKSO Documentation - Learn more about developing on LUKSO
- UP Browser Extension - Install the Universal Profile Browser Extension
- erc725js - Learn more about the erc725js library
- @lukso/web-components - Learn more about the @lukso/web-components library
Contributions are welcome! Feel free to submit issues and pull requests.