Skip to content

Latest commit

 

History

History
86 lines (59 loc) · 3.44 KB

README.md

File metadata and controls

86 lines (59 loc) · 3.44 KB

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:

ERC-725.js

Shows how to:

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

Getting Started

  1. Install dependencies:
yarn install
  1. Run the development server:
yarn dev
  1. Open http://localhost:3000 with your browser to see the result.(Note that the Grid context is not available in the local environment)

  2. 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

Contributing

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