Build Your First LUKSO Grid Mini App

Build me a single-page web app that works as a LUKSO Universal Profile mini app with wallet connection. Here are the exact requirements:

WHAT IT DOES:
- Shows a "Connect your Universal Profile" button on first load
- When clicked, it connects using the official UP Provider package
- After connecting, it reads and displays the connected user's profile: name, bio/description, and profile picture
- Also shows the connected wallet address (shortened: first 6 + last 4 chars)
- Shows follower count via the Envio indexer
- Shows a "Disconnect" button after connecting

SETUP — Install these official LUKSO packages via npm:
- @lukso/up-provider: for UP wallet connection on the Grid (EIP-1193 compatible provider)
- @erc725/erc725.js: for fetching ERC725Y profile data (decodes VerifiableURI, resolves IPFS automatically)
- @lukso/lsp-utils: for high-level helpers like getProfileMetadata()
- @lukso/web-components: for pre-built branded profile UI components (e.g. <lukso-profile-preview>)
- ethers: for blockchain interaction

Reference template: https://github.com/lukso-network/miniapp-nextjs-template

HOW TO CONNECT (using @lukso/up-provider — NOT raw window.lukso):
import { createClientUPProvider } from '@lukso/up-provider';

const provider = createClientUPProvider();
// provider is EIP-1193 compatible — works with ethers.js BrowserProvider
// To get accounts:
const accounts = await provider.request({ method: 'eth_requestAccounts' });
// accounts[0] is the connected Universal Profile address

// If provider is not available, show: "Please open this in the LUKSO Grid or install the UP Extension"
// Do NOT use window.lukso or window.ethereum directly — always use createClientUPProvider()

Reference: https://docs.lukso.tech/learn/dapp-developer/getting-started
Reference: https://www.npmjs.com/package/@lukso/up-provider

HOW TO FETCH PROFILE DATA (using @erc725/erc725.js + @lukso/lsp-utils — NOT manual ABI calls):
import { getProfileMetadata } from '@lukso/lsp-utils';

// getProfileMetadata(address, provider) returns { name, description, profileImage, backgroundImage, tags }
// It handles all ERC725Y decoding, VerifiableURI parsing, and IPFS resolution internally
// IPFS gateway: https://api.universalprofile.cloud/ipfs/

// Alternative: use ERC725.js directly for more control:
import ERC725 from '@erc725/erc725.js';
import lsp3ProfileSchema from '@erc725/erc725.js/schemas/LSP3ProfileMetadata.json';

const erc725 = new ERC725(lsp3ProfileSchema, address, 'https://rpc.mainnet.lukso.network', {
  ipfsGateway: 'https://api.universalprofile.cloud/ipfs/',
});
const profileData = await erc725.fetchData('LSP3Profile');
// profileData.value.LSP3Profile contains { name, description, profileImage, backgroundImage, tags }

// Do NOT manually call getData(bytes32[]) or decode VerifiableURI by hand — the libraries handle this.

Reference: https://docs.lukso.tech/standards/metadata-detection
Reference: https://www.npmjs.com/package/@erc725/erc725.js
Reference: https://www.npmjs.com/package/@lukso/lsp-utils

PROFILE UI (using @lukso/web-components):
import '@lukso/web-components';

// Use <lukso-profile-preview address="0x..." /> for an instant branded profile card
// The component handles fetching and rendering profile data automatically
// You can also build a custom card using the data from getProfileMetadata()

Reference: https://www.npmjs.com/package/@lukso/web-components

ALSO FETCH FOLLOWER COUNT (via Envio indexer):
// Note: The Envio indexer is currently free but may become a paid service in the future.
fetch('https://envio.lukso-mainnet.universal.tech/v1/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: `query { followerCount: Follow_aggregate(where: {followee: {_eq: "${address}"}}) { aggregate { count } } }` })
})
Reference: https://github.com/lukso-network/tools-lsp-utils

DESIGN:
- LUKSO brand colors: magenta #FE005B as accent color, dark background (#0a0a0a), white text
- Clean, modern card layout centered on the page
- Profile picture in a large circle (120px) with a subtle magenta ring
- Name in large bold font, description in smaller muted text
- Address displayed in a monospace code style with subtle background
- "Connect" button: magenta #FE005B background, white text, rounded-full, with wallet icon
- Mobile responsive
- Must work when embedded in an iframe (LUKSO Grid context)

UX DETAILS:
- Before connecting: centered connect button with LUKSO logo/icon and tagline "Connect your Universal Profile"
- After connecting: profile card slides in with avatar, name, bio, address, follower count
- Loading state: subtle pulsing skeleton while fetching profile data
- Error state: friendly message if connection fails or profile not found