Mobile Curation

A web application for curating and managing Decentraland parcels and scene groups on mobile devices.

Features

Map View

• Interactive canvas-based map rendering of Decentraland's Genesis City
• Satellite tile images from the genesis-city repository
• Pan and zoom controls with mouse/touch support
• Hover coordinates display
• Click-to-select parcels

Scene Groups

• Create, view, edit, and delete groups of parcels
• Visual selection of parcels on the map
• Floating top bar for mode selection (View/Create/Edit/Delete)
• Persisted to backend API (mobile-bff)

Authentication

• Decentraland SSO integration via @dcl/single-sign-on-client
• Wallet connection using decentraland-connect
• Navbar with Sign In/Sign Out and avatar display
• signedFetch for authenticated API requests with cryptographic signatures
• useAuthenticatedFetch hook for easy authenticated requests

Tech Stack

• React 18 with TypeScript
• Vite for development and build
• decentraland-connect for wallet connections
• @dcl/crypto for request signing
• react-router-dom for routing

Project Structure

src/
├── components/
│   └── Navbar/               # Decentraland navbar with auth
├── config/
│   ├── env/
│   │   ├── dev.json          # Development config (MOBILE_BFF_URL, etc.)
│   │   └── prd.json          # Production config
│   └── index.ts              # Config loader
├── contexts/
│   └── auth/
│       ├── AuthProvider.tsx  # Auth context provider
│       ├── types.ts          # Auth types
│       ├── utils.ts          # Auth utilities
│       └── index.ts
├── features/
│   └── map/
│       ├── api/
│       │   └── sceneGroupsApi.ts  # Scene groups API client
│       ├── components/
│       │   ├── GroupsSidebar/     # Scene groups sidebar UI
│       │   ├── MapCanvas.tsx      # Canvas rendering
│       │   └── ...
│       ├── context/
│       │   ├── GroupsContext.tsx  # Scene groups state + API
│       │   ├── MapContext.tsx     # Map viewport state
│       │   └── useGroupsHooks.ts  # Custom hooks
│       ├── types/
│       │   └── index.ts           # Type definitions
│       └── utils/
│           └── groupUtils.ts      # Group utilities
├── hooks/
│   └── useAuthenticatedFetch.ts   # Authenticated fetch hook
├── pages/
│   └── MapPage.tsx                # Main map view
├── utils/
│   └── fetch.ts                   # signedFetch implementation
└── App.tsx

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

NPM Package

This project is published to npm as @dcl-regenesislabs/mobile-hub. The built static files can be installed and served by any backend.

Publishing

The build outputs to dist/ which includes:

• All static assets (JS, CSS, images)
• package.json (copied from public/package.json)
• README.md (copied during prebuild)

# Build and publish
npm run build
cd dist
npm publish

Serving from a Subpath

The frontend supports being served from any URL path (e.g., /hub/, /app/, or root /).

This is achieved via window.__BASE_PATH__:

1. index.html contains <script>window.__BASE_PATH__ = "";</script>
2. The serving backend can rewrite this to the actual base path (e.g., "/hub")
3. React Router uses this as its basename prop

See mobile-bff for an example of serving this package with path rewriting.

Environment Variables

Set VITE_REACT_APP_DCL_DEFAULT_ENV to control the environment:

• dev - Development (uses decentraland.zone)
• prd - Production (uses decentraland.org)

VITE_CREATOR_FUND_API_URL points a source build at a local creators-data for the Creator Fund tab (for example http://localhost:8788); a release build ignores it.

Creator Fund

The Creator Fund tab is the backoffice for creators-data's /v3/creator-fund/admin/*: cycles, terms, news, enrolled creators (with CSV export, suspension and exclusion), place exclusions per cycle snapshot, and a sweep on demand. The tab appears only when GET /admin/me answers 200 for the signed-in wallet, which the service decides from its own admin list; anyone else gets a 403 and no tab. Every write asks for confirmation, is signed with hashPayload over the body, and is recorded by the service with the admin's wallet.

On localhost the dev identity signs the requests, so that wallet (0xf39F…2266) has to be on the local service's admin list.

creators-data has a single deployment, creators-data.decentraland.zone, so the production hub is the one that talks to it (prd.json) and the dev hub leaves CREATOR_FUND_API_URL empty, which hides the tab and sends nothing. A source build with VITE_CREATOR_FUND_API_URL set still gets the tab.

---

API Integration

Scene groups are persisted to the mobile-bff backend.

Backend API (mobile-bff)

Method	Path	Description
GET	/backoffice/scene-groups	List all scene groups
POST	/backoffice/scene-groups	Create a new scene group
PUT	/backoffice/scene-groups/:id	Update a scene group
DELETE	/backoffice/scene-groups/:id	Delete a scene group

All backoffice endpoints require:

1. Signed requests via signedFetch
2. Wallet address in ALLOWED_USERS env var on the backend

Frontend Implementation

• API Client: src/features/map/api/sceneGroupsApi.ts
• State Management: src/features/map/context/GroupsContext.tsx
• Hooks: useGroupsState(), useGroupsDispatch(), useGroupsApi()

Groups are loaded automatically when a user signs in.

Configuration

Set MOBILE_BFF_URL in config files:

• src/config/env/dev.json - Development (localhost:3000)
• src/config/env/prd.json - Production

---

Future Enhancements

• Parcel metadata fetching - Load parcel names/descriptions from Decentraland API
• Scene preview - Show scene thumbnails when hovering groups
• Sharing - Generate shareable links for scene groups
• Offline mode - Cache groups locally when offline