A minimal Cloudflare Worker + React example that uses the published @moldy/mega-mpp-sdk package on MegaETH mainnet. The flow is intentionally small:

• one public Worker project
• one mainnet permit2 charge flow
• one playful checklist before payment: connect wallet, hold enough USDm, approve Permit2
• one paid result: a Rabbit GIF with GIPHY attribution

• how to serve a React SPA and /api/* routes from one Cloudflare Worker
• how to issue and verify a MegaETH mainnet permit2 charge with the published SDK
• how to keep replay-sensitive charge state in a Durable Object
• how to boot with instructive configuration blockers before secrets are present
• how to link the public example back to the published npm package and GitHub source

• Node.js 20 or newer
• an npm account-free install flow via npm
• a funded MegaETH mainnet settlement wallet
• a wallet with enough mainnet funds and token allowance to pay the charge

npm install

Copy the example env file and fill in the required values:

cp .dev.vars.example .dev.vars

Required values:

• MPP_SECRET_KEY: a stable random secret used to sign and verify payment challenges
• MEGAETH_SETTLEMENT_PRIVATE_KEY: the funded settlement wallet private key used by the Worker
• MEGAETH_RECIPIENT_ADDRESS: the settlement wallet address

Optional values:

• MEGAETH_RPC_URL: defaults to https://mainnet.megaeth.com/rpc
• MEGAETH_SUBMISSION_MODE: sync, realtime, or sendAndWait; defaults to realtime

Important:

• Keep MEGAETH_RECIPIENT_ADDRESS equal to the settlement wallet address. This example uses the configured payee as the permit2 spender.
• The payer wallet must enable USDm for Permit2 at 0x000000000022D473030F116dDEE9F6B43aC78BA3 before the Rabbit can be unlocked.
• The example requests an infinite ERC-20 approval so the enable step is typically one-time per wallet.
• The page shows that requirement as a readiness checklist, so the payment button only becomes useful after wallet, balance, and allowance are all in place.
• The page also tracks wallet account changes automatically, so switching wallets in an injected provider updates the checklist without another manual connect step.

Run the app locally:

npm run dev

The build script removes the preview-only generated dist/example_mega_mpp_cf/.dev.vars file after bundling so local secrets do not remain in the distributable output.

Run the full suite:

npm test

Build the project:

npm run build

Confirm Wrangler is authenticated before deploying:

npx wrangler whoami

Set the required Worker secrets:

npx wrangler secret put MPP_SECRET_KEY
npx wrangler secret put MEGAETH_SETTLEMENT_PRIVATE_KEY

Set the non-secret vars in the Cloudflare dashboard or in a Wrangler environment:

• MEGAETH_RECIPIENT_ADDRESS
• MEGAETH_RPC_URL if you do not want the default mainnet RPC
• MEGAETH_SUBMISSION_MODE if you do not want realtime

Deploy:

npm run deploy

The Wrangler config is set to deploy this Worker to:

• https://mpp-rabbit.mega.favo.tools

The unlocked result uses a fixed Rabbit GIF from a GIPHY detail page rather than the live GIPHY Search API. That keeps the example public, simple, and free from extra API keys.

• GIPHY page: https://giphy.com/gifs/cute-candle-conillo-LYsuQkpJUOTSOPzSEg
• GIPHY embed guidance: https://support.giphy.com/hc/en-us/articles/360020330711-How-to-Embed-a-GIF

1. Start npm run dev.
2. Load the page and confirm the checklist and host setup notice explain any missing values.
3. Connect a wallet that holds at least 0.01 USDm on MegaETH mainnet.
4. Click Enable Permit2 for USDm and confirm the infinite ERC-20 approval to Permit2.
5. Wait for the checklist to turn green, then click Pay 0.01 USDm.
6. Confirm the Rabbit reveal appears and the Payment-Receipt header is available in the status panel.