Player Map — Discord Activity

Official Discord Activity for Player Map.

Runs inside Discord voice channels, text channels, and DMs. Players can view profiles, review teammates, and interact with the Intuition reputation graph — directly in Discord.

Prerequisites

• Node.js >= 18
• pnpm
• A Discord application with Activities enabled (Developer Portal)
• A Privy account (dashboard.privy.io)

Setup

1. Clone this repo
2. pnpm install
3. Copy .env.example to .env and fill in your keys
4. Configure Discord Developer Portal:
   • Activities → Enable Activities
   • URL Mappings: / → your cloudflared tunnel URL (see Development below)
5. Configure Privy Dashboard:
   • Add https://<DISCORD_APP_ID>.discordsays.com to Allowed Origins
   • Add http://localhost:5173 to Allowed Origins
   • Login methods: wallet, email, google, twitter

Development

Local (no Discord)

# Terminal 1 — OAuth backend (port 3001)
DISCORD_CLIENT_ID=xxx DISCORD_CLIENT_SECRET=xxx pnpm dev:api

# Terminal 2 — Vite dev server
pnpm dev

App available at http://localhost:5173

Discord Activity

Discord cannot reach localhost directly — requires a public tunnel + unified server.

# Terminal 1 — Build + unified server (static + API on port 5173)
pnpm build && EXTERNAL_URL=https://xxx.trycloudflare.com DISCORD_CLIENT_ID=xxx DISCORD_CLIENT_SECRET=xxx pnpm serve:discord

# Terminal 2 — Cloudflare tunnel
cloudflared tunnel --url http://localhost:5173

Copy the generated URL (e.g. funky-name.trycloudflare.com) into: Discord Developer Portal → Your App → Activities → URL Mappings → /

⚠️ The cloudflared URL changes every launch — update the Developer Portal each time.

Testing in Discord

1. Open Discord → Voice channel
2. Click the Activities icon (rocket)
3. Select your app
   • If not visible: enable Developer Activity Shelf in Discord Settings → Advanced

Architecture

playermap-discord/
├── src/
│   ├── providers/
│   │   ├── DiscordProvider.tsx   # Discord SDK init + OAuth flow
│   │   ├── WalletProvider.tsx    # Privy + wagmi + React Query
│   │   └── AppProviders.tsx      # Composes Discord + Wallet
│   ├── components/
│   │   ├── PlayerMapView.tsx     # Main player map UI
│   │   ├── WalletLoginPage.tsx   # External wallet connection page
│   │   ├── TxSignPage.tsx        # External transaction signing page
│   │   └── DiscordBadge.tsx      # Discord user badge
│   ├── utils/                    # discordEnv, bigintJson
│   ├── types/                    # player-map type declarations
│   └── constants/                # player-map config constants
├── api/
│   ├── unified-server.ts         # Prod: static files + OAuth + proxies
│   └── server.ts                 # Dev: OAuth server only (port 3001)
└── public/
    └── aframe.min.js             # Served locally (Discord CSP blocks CDN)

External Wallet Flow

Discord Activity runs in an iframe — some wallets can't sign from inside it. When a transaction is needed:

1. App generates a session token and opens an external URL (?session=<token>)
2. WalletLoginPage connects the wallet and stores the address via /session
3. TxSignPage fetches tx params via /pending-tx/:token and submits the result
4. The iframe polls for the result and continues

Tech Stack

• React 18 + TypeScript + Vite
• @discord/embedded-app-sdk
• @privy-io/react-auth + wagmi + viem
• Intuition Mainnet (chain id: 1155)
• Express (unified server)
• player-map (npm)