Test Dapp MetaMask Pay

Test Dapp for benchmarking Metamask Pay and its competitors.

Usage

The default Vite entry (src/main.tsx) loads the MetaMask Pay Demo (AppMmPay) — a two-column layout (user flow + developer logs) for exercising wallet_sendCalls / wallet_getCallsStatus against Aave on Base. Hyperliquid and Polymarket tiles are UI placeholders for now.

• Theme tokens: demo chrome uses [data-mm-pay-demo] and Tailwind pay-* colors (see src/index.css and tailwind.config.ts). Adjust those variables to re-skin the demo without hunting through components.
• Motion: the demo uses Motion for light transitions; primitives are shadcn/Radix where it helps accessibility (Button, Input, Label, Badge, ScrollArea, Collapsible, etc.).

Contributing

Setup

• Install the current LTS version of Node.js
  • If you are using nvm (recommended) running nvm install will install the latest version and running nvm use will automatically choose the right node version for you.
• Install Yarn v4 via Corepack
• Run yarn install to install dependencies and run any required post-install scripts
• Copy .env.example to .env and fill in the required values (see Environment variables below)
• Run yarn dev to spin up the app

Environment variables

Variable	Required	Where to get it
VITE_INFURA_KEY	Yes	infura.io — used as the default RPC transport for wagmi chains.
VITE_WALLETCONNECT_PROJECT_ID	Yes	cloud.reown.com — required for RainbowKit / WalletConnect wallet connections. Without it, the WalletConnect option silently fails.

Testing and Linting

• yarn test — run the test suite once (Vitest).
• yarn test:watch — re-run tests on change.
• yarn test:ui — Vitest UI.
• yarn lint — run ESLint + Prettier checks.
• yarn lint:fix — auto-fix lint/format issues.

Release & Publishing

The project follows the same release process as the other libraries in the MetaMask organization. The GitHub Actions action-create-release-pr and action-publish-release are used to automate the release process; see those repositories for more information about how they work.

1. Choose a release version.

   • The release version should be chosen according to SemVer. Analyze the changes to see whether they include any breaking changes, new features, or deprecations, then choose the appropriate SemVer version. See the SemVer specification for more information.

2. If this release is backporting changes onto a previous release, then ensure there is a major version branch for that version (e.g. 1.x for a v1 backport release).

   • The major version branch should be set to the most recent release with that major version. For example, when backporting a v1.0.2 release, you'd want to ensure there was a 1.x branch that was set to the v1.0.1 tag.

3. Trigger the workflow_dispatch event manually for the Create Release Pull Request action to create the release PR.

   • For a backport release, the base branch should be the major version branch that you ensured existed in step 2. For a normal release, the base branch should be the main branch for that repository (which should be the default value).
   • This should trigger the action-create-release-pr workflow to create the release PR.

4. Update the changelog to move each change entry into the appropriate change category (See here for the full list of change categories, and the correct ordering), and edit them to be more easily understood by users of the package.

   • Generally any changes that don't affect consumers of the package (e.g. lockfile changes or development environment changes) are omitted. Exceptions may be made for changes that might be of interest despite not having an effect upon the published package (e.g. major test improvements, security improvements, improved documentation, etc.).
   • Try to explain each change in terms that users of the package would understand (e.g. avoid referencing internal variables/concepts).
   • Consolidate related changes into one change entry if it makes it easier to explain.
   • Run yarn auto-changelog validate --rc to check that the changelog is correctly formatted.

5. Review and QA the release.

   • If changes are made to the base branch, the release branch will need to be updated with these changes and review/QA will need to restart again. As such, it's probably best to avoid merging other PRs into the base branch while review is underway.

6. Squash & Merge the release.

   • This should trigger the action-publish-release workflow to tag the final release commit and publish the release on GitHub.

7. Publish the release on npm.

   • Wait for the publish-release GitHub Action workflow to finish. This should trigger a second job (publish-npm), which will wait for a run approval by the npm publishers team.
   • Approve the publish-npm job (or ask somebody on the npm publishers team to approve it for you).
   • Once the publish-npm job has finished, check npm to verify that it has been published.