Mini-App next.js template

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.

Overview

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

Cursor Tip: You can rename this README.md file to repo.cursorrules for better AI development experience using Cursor.

Key Features

UP-Provider Integration

The template demonstrates how to:

• Connect to Universal Profile browser extension from the Grid
• Manage UP contexts on the Grid

Envio Integration

Shows how to:

• Query the LUKSO Envio indexer
• Search for Universal Profiles
• Display profile information and images

Web Components

Shows how to:

• Use the @lukso/web-components library to display profile card

ERC-725.js

Shows how to:

• Use the erc725js library to fetch profile data from the blockchain

Getting Started

1. Install dependencies:

yarn install

2. Run the development server:

yarn dev

3. Open http://localhost:3000 with your browser to see the result.(Note that the Grid context is not available in the local environment)

4. Testing your mini-app on the Grid:

We're using localtunnel to test the mini-app on the Grid. This library helps us to generate a public URL that can be used to add the mini-app to the Grid.

Alternatively, you can use free cloud deployment services like Vercel, Replit, etc.

Globally install localtunnel:

npm install -g localtunnel

In the second terminal, run:

lt --port <LOCALHOST_PORT>

You can use this URL to add the mini-app to the Grid.

Project Structure

• components/upProvider.tsx: Core UP Provider implementation and wallet connection logic
• components/ProfileSearch.tsx: Example of Envio integration for profile search
• components/Donate.tsx: Example use-case of this template. Uses the client from the up-provider package to interact with the blockchain
• components/LuksoProfile.tsx: Example of using the @lukso/web-components library to display profile images that is fetched using the erc725js library

Learn More

• 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

Contributing

Contributions are welcome! Feel free to submit issues and pull requests.