skills.rest
worldcoin
worldcoinOFFICIAL
Explore all skills by this author →
Website𝕏@worldcoinGitHub

miniapp-to-web

Migrate a World App mini app to a standalone web app with Wagmi fallback.

88|75|Updated Apr 10, 2024
Search Tags:#web3#wagmi#wallet-auth#miniapp#worldcoin#web-integration
One-click install
npx skills add https://github.com/worldcoin/minikit-js --skill miniapp-to-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: miniapp-to-web
Source: https://github.com/worldcoin/minikit-js/tree/main/skills/miniapp-to-web
Command: npx skills add https://github.com/worldcoin/minikit-js --skill miniapp-to-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrate a World App mini app to a standalone web app, enabling browser wallet support alongside MiniKit by adding Wagmi as a fallback for World Chain (chainId 480).

Core Features & Use Cases

  • Add Wagmi-based web wallet support alongside the native World App bridge.
  • Configure Wagmi and providers to support both environments without code duplication.
  • Use-case: convert an existing mini app to run in a normal browser with World Chain support (chainId 480) and World ID integration.
  • Use this in scenarios where a web user needs walletAuth and transactions without World App.

Quick Start

Install wagmi, @tanstack/react-query, and siwe, then create a Wagmi config using worldApp() and injected(), and wrap your app with WagmiProvider, QueryClientProvider, and MiniKitProvider.

Frequently Asked Questions about miniapp-to-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a World App mini app to a standalone web app?▼

To migrate a World App mini app to a web app, install Wagmi, @tanstack/react-query, and siwe, then configure worldApp() and injected() connectors. Wrap your application with WagmiProvider, QueryClientProvider, and MiniKitProvider to enable browser wallet support alongside the native bridge.

Can I use Wagmi as a fallback for World Chain wallet authentication in a browser?▼

Yes, you can use Wagmi as a fallback for World Chain wallet authentication in web browsers. Configuring Wagmi with the worldApp() and injected() connectors provides a unified walletAuth flow, ensuring transactions work without requiring the World App environment.

What dependencies do I need to run a World App mini app in a normal browser?▼

Running a World App mini app in a normal browser requires installing wagmi, @tanstack/react-query, and siwe. These dependencies facilitate environment detection, Wagmi config setup, and cross-environment wallet handling for World Chain support (chainId 480).

Does adding Wagmi fallback require code duplication for web and World App environments?▼

No, adding Wagmi fallback does not require code duplication for web and World App environments. By updating providers and configuring worldApp() and injected() connectors, you achieve a unified walletAuth and sendTransaction flow across both platforms.

Why do I need to wrap my app with WagmiProvider and MiniKitProvider?▼

Wrapping your app with WagmiProvider and MiniKitProvider integrates Wagmi config and providers to support both environments. This setup enables cross-environment wallet and transaction handling, allowing a unified flow for World App and web browsers.

What are the limitations of using Wagmi fallback for World Chain web integration?▼

The Wagmi fallback for World Chain web integration is limited to chainId 480 and relies on injected browser wallets. It specifically handles walletAuth and transactions without World App, meaning functionality outside this scope requires additional provider configuration.

Related Skills

Explore More Software Engineering Skills→
cyoteecyotee

wagmi-react-overview

Enable React apps to interact with Ethereum using wagmi hooks.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
PixelSculptorPixelSculptor

10x-bootstrapper

Generate project structures from tech stack definitions and log verification.

Community
Advanced
cyoteecyotee

wagmi-connectors

Connect Ethereum wallets to dApps using Wagmi connectors in TypeScript.

Community
Intermediate