Skip to main content

Project setup

A CrackPay Mini App is a normal web app. This page lists what it needs on top of that. For a step-by-step React app, see Setting up a React app.

Dependencies​

npm install @crackpay/miniapp-sdk viem
PackageWhy
@crackpay/miniapp-sdkConnects to the CrackPay wallet. Ships its own types.
viemReads from Arc and sends transactions.
reactOptional. Needed only for @crackpay/miniapp-sdk/react.
wagmiOptional. See wagmi.

:::tip Pin your dependencies CrackPay asks listed apps to pin exact versions and commit their lockfile, so a compromised release cannot slip in. Use npm install --save-exact. :::

my-miniapp/
├── index.html
├── vite.config.ts        allows tunnel hosts for testing
├── src/
│   ├── main.tsx
│   ├── App.tsx           connection states and screens
│   ├── crackpay.ts       every wallet operation in one place
│   └── style.css         a 420 px single column
└── package.json

Keeping wallet code in one module (crackpay.ts) makes it easy to test and to reason about what your app can ask the user to approve.

Required configuration​

Vite​

vite.config.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    // Lets a tunnel reach the dev server, for testing in CrackPay.
    allowedHosts: [".ngrok-free.dev", ".ngrok-free.app", ".ngrok.app", ".trycloudflare.com"],
  },
});

Viewport​

index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />

Framing​

CrackPay shows your app in a frame. Your production server must not send X-Frame-Options, and if it sends Content-Security-Policy: frame-ancestors, it must include every CrackPay host: https://www.crackpay.xyz, https://crackpay.xyz and https://crackpay.vercel.app. See Deployment.

Environment variables​

A Mini App needs none to talk to CrackPay. If you add your own:

  • Anything with a VITE_ or NEXT_PUBLIC_ prefix is visible in the browser. Never put a secret there.
  • To test against a CrackPay you run yourself, pass its address to the SDK as hostOrigins rather than changing the default.

Network​

CrackPay runs on Arc mainnet (5042); the SDK also knows Arc Testnet (5042002). Never hardcode one: take the chain from connectCrackPay() or eth_chainId, and token addresses from getTokens(chainId). See Arc network for addresses and decimals.

Next steps​