@dcl-regenesislabs/web-editor 0.0.0-stage → 0.1.0

package/prefabs/admin-tools/scripts/message-bus.ts

@@ -0,0 +1,297 @@
+// Wallet-validated admin command bus — port of @dcl/asset-packs
+// src/admin-toolkit-ui/admin-message-bus.ts.
+//
+// Why a second transport: admin-controlled components (VideoPlayer, the
+// announcement component) are attractive targets for a forged CRDT write. So
+//   1. VideoPlayer is dropped from SyncComponents on admin-controlled entities,
+//      which stops attacker CRDT writes from propagating over the binary channel;
+//   2. admin commands travel on the TEXT comms channel instead, and every
+//      receiver checks the sender's wallet against the scene admin list;
+//   3. each client seeds its own copy of the state from VideoScreen.defaultURL (a
+//      deploy-time value that CRDT cannot touch) and a per-frame system reverts
+//      anything that drifts from it;
+//   4. late joiners ask existing participants for the current state.
+//
+// Sending goes through communicationsController.send() rather than
+// MessageBus.emit(): the class's internal flush queue drops follow-up messages.
+// Receiving uses MessageBus.on(), which hooks the global comms observable.
+import { engine, SyncComponents, VideoPlayer, type Entity } from '@dcl/sdk/ecs'
+import { MessageBus } from '@dcl/sdk/message-bus'
+import { onEnterScene } from '@dcl/sdk/players'
+import { send as commsSend } from '~system/CommunicationsController'
+import { TextAnnouncements, VideoScreen } from './components'
+import { isPreview, type SceneAdmin } from './api'
+
+const MSG = {
+  SET_VIDEO: 'admin:set-video',
+  SET_ANNOUNCEMENT: 'admin:set-announcement',
+  CLEAR_ANNOUNCEMENT: 'admin:clear-announcement',
+  REQUEST_STATE: 'admin:request-state',
+  SYNC_STATE: 'admin:sync-state',
+  SYNC_ADMINS: 'admin:sync-admins'
+} as const
+
+export interface VideoState {
+  src: string
+  playing: boolean
+  volume: number
+  loop: boolean
+  // write-only: SET_VIDEO forwards it to the player (restart seeks to 0), it is
+  // never part of the snapshot a late joiner receives.
+  position?: number
+}
+
+export interface AnnouncementState {
+  text: string
+  author: string
+  id: string
+}
+
+export interface AdminMessageBus {
+  setVideo: (entity: Entity, props: Partial<VideoState>) => void
+  setAnnouncement: (text: string, author?: string, id?: string) => void
+  clearAnnouncement: () => void
+  syncAdmins: () => void
+  updateAdminList: (admins: SceneAdmin[]) => void
+}
+
+export interface AdminMessageBusOptions {
+  self: Entity
+  admins: SceneAdmin[]
+  videoEntities: Entity[]
+  onRefetchAdmins: () => void
+}
+
+type Payload = Record<string, unknown>
+type Handler = (payload: Payload, sender: string) => void
+
+function asRecord(value: unknown): Payload {
+  return typeof value === 'object' && value !== null ? (value as Payload) : {}
+}
+
+function str(value: unknown, fallback = ''): string {
+  return typeof value === 'string' ? value : fallback
+}
+
+function num(value: unknown, fallback: number): number {
+  return typeof value === 'number' && !Number.isNaN(value) ? value : fallback
+}
+
+function bool(value: unknown, fallback: boolean): boolean {
+  return typeof value === 'boolean' ? value : fallback
+}
+
+let instance: AdminMessageBus | null = null
+
+export function getAdminMessageBus(): AdminMessageBus | null {
+  return instance
+}
+
+export function initAdminMessageBus(options: AdminMessageBusOptions): AdminMessageBus {
+  const { self, videoEntities, onRefetchAdmins } = options
+  let sceneAdmins = options.admins
+
+  const authoritativeVideo = new Map<Entity, VideoState>()
+  let authoritativeAnnouncement: AnnouncementState = { text: '', author: '', id: '' }
+  let adminHasActed = false
+
+  const isAdminWallet = (sender: string): boolean => {
+    if (isPreview()) return true
+    if (sender === 'self') return true
+    return sceneAdmins.some((admin) => admin.address.toLowerCase() === sender.toLowerCase())
+  }
+
+  const handlers = new Map<string, Handler>()
+  const receiver = new MessageBus()
+
+  const onMessage = (type: string, handler: Handler): void => {
+    handlers.set(type, handler)
+    receiver.on(type, (value: unknown, sender: string) => handler(asRecord(value), sender))
+  }
+
+  const onAdminMessage = (type: string, handler: Handler): void => {
+    onMessage(type, (payload, sender) => {
+      if (!isAdminWallet(sender)) return
+      handler(payload, sender)
+    })
+  }
+
+  const emitMessage = (type: string, payload: Payload): void => {
+    handlers.get(type)?.(payload, 'self')
+    commsSend({ message: JSON.stringify({ message: type, payload }) }).catch(() => {})
+  }
+
+  for (const entity of videoEntities) {
+    const sync = SyncComponents.getMutableOrNull(entity)
+    if (sync === null) continue
+    sync.componentIds = sync.componentIds.filter((id) => id !== VideoPlayer.componentId)
+  }
+
+  for (const entity of videoEntities) {
+    const video = VideoPlayer.getOrNull(entity)
+    if (video === null) continue
+    const screen = VideoScreen.getOrNull(entity)
+    const src = screen?.defaultURL !== undefined && screen.defaultURL !== '' ? screen.defaultURL : video.src
+    authoritativeVideo.set(entity, {
+      src,
+      playing: video.playing ?? false,
+      volume: video.volume ?? 1,
+      loop: video.loop ?? false
+    })
+    if (video.src !== src) VideoPlayer.getMutable(entity).src = src
+  }
+
+  onAdminMessage(MSG.SET_VIDEO, (payload) => {
+    const entity = num(payload.entity, 0) as Entity
+    const current = VideoPlayer.getOrNull(entity)
+    if (current === null) return
+    const updated: VideoState = {
+      src: str(payload.src, current.src),
+      playing: bool(payload.playing, current.playing ?? false),
+      volume: num(payload.volume, current.volume ?? 1),
+      loop: bool(payload.loop, current.loop ?? false)
+    }
+    authoritativeVideo.set(entity, updated)
+    const video = VideoPlayer.getMutable(entity)
+    video.src = updated.src
+    video.playing = updated.playing
+    video.volume = updated.volume
+    video.loop = updated.loop
+    if (payload.position !== undefined) video.position = num(payload.position, 0)
+    adminHasActed = true
+  })
+
+  const applyAnnouncement = (next: AnnouncementState): void => {
+    authoritativeAnnouncement = next
+    const announcements = TextAnnouncements.getMutableOrNull(self)
+    if (announcements === null) return
+    announcements.text = next.text
+    announcements.author = next.author
+    announcements.id = next.id
+    adminHasActed = true
+  }
+
+  onAdminMessage(MSG.SET_ANNOUNCEMENT, (payload) => {
+    applyAnnouncement({
+      text: str(payload.text),
+      author: str(payload.author),
+      id: str(payload.id)
+    })
+  })
+
+  onAdminMessage(MSG.CLEAR_ANNOUNCEMENT, () => {
+    applyAnnouncement({ text: '', author: '', id: '' })
+  })
+
+  const broadcastCurrentState = (): void => {
+    const video: Payload[] = []
+    for (const entity of videoEntities) {
+      const current = VideoPlayer.getOrNull(entity)
+      if (current === null) continue
+      const screen = VideoScreen.getOrNull(entity)
+      if (current.src === (screen?.defaultURL ?? '')) continue
+      video.push({
+        entity: entity as number,
+        src: current.src,
+        playing: current.playing ?? false,
+        volume: current.volume ?? 1,
+        loop: current.loop ?? false
+      })
+    }
+    const announcements = TextAnnouncements.getOrNull(self)
+    const announcement =
+      announcements !== null && announcements.id !== ''
+        ? { text: announcements.text, author: announcements.author ?? '', id: announcements.id }
+        : null
+    if (video.length === 0 && announcement === null) return
+    emitMessage(MSG.SYNC_STATE, { video, announcement })
+  }
+
+  onAdminMessage(MSG.SYNC_STATE, (payload) => {
+    const list = Array.isArray(payload.video) ? payload.video : []
+    for (const raw of list) {
+      const item = asRecord(raw)
+      const entity = num(item.entity, 0) as Entity
+      const video = VideoPlayer.getMutableOrNull(entity)
+      if (video === null) continue
+      const next: VideoState = {
+        src: str(item.src, video.src),
+        playing: bool(item.playing, video.playing ?? false),
+        volume: num(item.volume, video.volume ?? 1),
+        loop: bool(item.loop, video.loop ?? false)
+      }
+      authoritativeVideo.set(entity, next)
+      video.src = next.src
+      video.playing = next.playing
+      video.volume = next.volume
+      video.loop = next.loop
+    }
+    const announcement = asRecord(payload.announcement)
+    if (str(announcement.id) !== '') {
+      applyAnnouncement({
+        text: str(announcement.text),
+        author: str(announcement.author),
+        id: str(announcement.id)
+      })
+    }
+    adminHasActed = true
+  })
+
+  onMessage(MSG.REQUEST_STATE, () => {
+    if (adminHasActed) broadcastCurrentState()
+  })
+
+  onAdminMessage(MSG.SYNC_ADMINS, () => {
+    onRefetchAdmins()
+  })
+
+  onEnterScene(() => {
+    if (adminHasActed) broadcastCurrentState()
+  })
+
+  emitMessage(MSG.REQUEST_STATE, {})
+
+  // Forged CRDT writes bypass SyncComponents (they can be injected straight into
+  // LiveKit) but land here. Admin commands update the maps below before
+  // touching the components, so a legitimate change is never reverted.
+  engine.addSystem(() => {
+    for (const [entity, authoritative] of authoritativeVideo) {
+      const video = VideoPlayer.getOrNull(entity)
+      if (video === null || video.src === authoritative.src) continue
+      const mutable = VideoPlayer.getMutable(entity)
+      mutable.src = authoritative.src
+      mutable.playing = authoritative.playing
+    }
+    const announcements = TextAnnouncements.getOrNull(self)
+    if (
+      announcements !== null &&
+      authoritativeAnnouncement.id !== '' &&
+      announcements.id !== authoritativeAnnouncement.id
+    ) {
+      const mutable = TextAnnouncements.getMutable(self)
+      mutable.text = authoritativeAnnouncement.text
+      mutable.author = authoritativeAnnouncement.author
+      mutable.id = authoritativeAnnouncement.id
+    }
+  })
+
+  instance = {
+    setVideo(entity, props) {
+      emitMessage(MSG.SET_VIDEO, { entity: entity as number, ...props })
+    },
+    setAnnouncement(text, author, id) {
+      emitMessage(MSG.SET_ANNOUNCEMENT, { text, author: author ?? '', id: id ?? '' })
+    },
+    clearAnnouncement() {
+      emitMessage(MSG.CLEAR_ANNOUNCEMENT, {})
+    },
+    syncAdmins() {
+      emitMessage(MSG.SYNC_ADMINS, {})
+    },
+    updateAdminList(admins) {
+      sceneAdmins = admins
+    }
+  }
+
+  return instance
+}

package/prefabs/admin-tools/scripts/state.ts

@@ -0,0 +1,69 @@
+// Mutable panel state. react-ecs re-renders the whole tree every frame off these
+// values, so tabs mutate this object directly rather than holding hook state —
+// same model as the Creator Hub's admin-toolkit-ui/index.tsx `state`.
+import type { Entity } from '@dcl/sdk/ecs'
+import type { SceneAdmin, SceneBanUser } from './api'
+
+export enum TabId {
+  NONE = 'none',
+  SMART_ITEMS = 'smart_items',
+  TEXT_ANNOUNCEMENTS = 'text_announcements',
+  VIDEO = 'video',
+  MODERATION = 'moderation',
+  REWARDS = 'rewards'
+}
+
+export interface SmartItemUiState {
+  visible: boolean
+  selectedAction: string
+}
+
+export interface AdminState {
+  panelOpen: boolean
+  activeTab: TabId
+  admins: SceneAdmin[]
+  bans: SceneBanUser[]
+  smartItems: {
+    selectedIndex: number | undefined
+    byEntity: Map<Entity, SmartItemUiState>
+  }
+  video: {
+    selectedIndex: number | undefined
+  }
+  textAnnouncements: {
+    draft: string
+    announcements: Array<{ id: string; text: string; author: string; timestamp: number }>
+    maxAnnouncements: number
+  }
+  rewards: {
+    selectedIndex: number | undefined
+  }
+}
+
+export function createAdminState(): AdminState {
+  return {
+    panelOpen: false,
+    activeTab: TabId.NONE,
+    admins: [],
+    bans: [],
+    smartItems: { selectedIndex: undefined, byEntity: new Map() },
+    video: { selectedIndex: undefined },
+    textAnnouncements: { draft: '', announcements: [], maxAnnouncements: 4 },
+    rewards: { selectedIndex: undefined }
+  }
+}
+
+// react-ecs renders synchronously inside a system, so a state change made from a
+// click handler is only visible next frame. Deferring the "close then open" of a
+// tab through this queue is what makes tab switching re-mount the panel body,
+// which the Hub relies on to reset per-tab widgets.
+export const nextTickQueue: Array<() => void> = []
+
+export function nextTick(fn: () => void): void {
+  nextTickQueue.push(fn)
+}
+
+export function drainNextTick(): void {
+  const fn = nextTickQueue.shift()
+  if (fn !== undefined) fn()
+}

package/prefabs/admin-tools/scripts/tabs/Moderation.tsx

@@ -0,0 +1,155 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { SceneAdmin, SceneBanUser } from '../api'
+import { TabId } from '../state'
+import type { TabComponent, TabProps, TabSpec } from '../types'
+import { Card, CardHeader } from '../ui'
+import { AddUserInput, PermissionType } from './moderation/AddUserInput'
+import { moderationIcons } from './moderation/icons'
+import { RemoveAdminConfirmation } from './moderation/RemoveAdminConfirmation'
+import {
+  currentMessage,
+  moderationView,
+  ModerationView,
+  openView
+} from './moderation/state'
+import { BADGE_GRAY, BLACK, Button, Divider } from './moderation/ui'
+import { UsersList, UserListType } from './moderation/UsersList'
+import { canManageAdmins, refreshAdmins, refreshBans } from './moderation/utils'
+
+const MANAGE_HINT =
+  'Only the scene owner can change the admin list. Enable "Allow non-owners to manage the admin list" on the Admin Tools item to open it up.'
+
+export const Moderation: TabComponent = (props: TabProps) => {
+  const icons = moderationIcons(props.assetBase)
+  const canManage = canManageAdmins(props.config, props.state.admins, props.player)
+  const message = currentMessage()
+
+  ReactEcs.useEffect(() => {
+    openView(ModerationView.MAIN)
+  }, [])
+
+  const loadAdmins = (): void => {
+    void refreshAdmins(props.state, props.bus)
+  }
+  const syncAdmins = (): void => {
+    void refreshAdmins(props.state, props.bus, true)
+  }
+  const loadBans = (): void => {
+    void refreshBans(props.state)
+  }
+
+  const admins: Array<SceneAdmin | SceneBanUser> = props.state.admins
+  const bans: Array<SceneAdmin | SceneBanUser> = props.state.bans
+
+  const body = (): ReactEcs.JSX.Element => {
+    const pendingRemoval = moderationView.adminToRemove
+    if (moderationView.view === ModerationView.CONFIRM_REMOVE && pendingRemoval !== null) {
+      return (
+        <RemoveAdminConfirmation admin={pendingRemoval} icons={icons} onChanged={syncAdmins} />
+      )
+    }
+
+    if (
+      moderationView.view === ModerationView.ADMIN_LIST ||
+      moderationView.view === ModerationView.CONFIRM_REMOVE
+    ) {
+      return (
+        <UsersList
+          type={UserListType.ADMIN}
+          users={admins}
+          icons={icons}
+          canManage={canManage}
+          onChanged={syncAdmins}
+        />
+      )
+    }
+
+    if (moderationView.view === ModerationView.BAN_LIST) {
+      return (
+        <UsersList
+          type={UserListType.BAN}
+          users={bans}
+          icons={icons}
+          canManage
+          onChanged={loadBans}
+        />
+      )
+    }
+
+    return (
+      <UiEntity uiTransform={{ width: '100%', height: 'auto', flexDirection: 'column' }}>
+        <AddUserInput
+          type={PermissionType.ADMIN}
+          icons={icons}
+          admins={props.state.admins}
+          disabled={!canManage}
+          disabledHint={MANAGE_HINT}
+          allowKick={false}
+          onChanged={syncAdmins}
+        />
+        <Button
+          label="View Admin List"
+          variant="secondary"
+          icon={icons.verified}
+          onClick={() => {
+            loadAdmins()
+            openView(ModerationView.ADMIN_LIST)
+          }}
+          uiTransform={{ width: 230, height: 40, margin: { top: 12 } }}
+        />
+        <Divider />
+        <AddUserInput
+          type={PermissionType.BAN}
+          icons={icons}
+          admins={props.state.admins}
+          disabled={false}
+          disabledHint=""
+          allowKick
+          onChanged={loadBans}
+        />
+        <Button
+          label="View Ban List"
+          variant="secondary"
+          icon={icons.ban}
+          onClick={() => {
+            loadBans()
+            openView(ModerationView.BAN_LIST)
+          }}
+          uiTransform={{ width: 230, height: 40, margin: { top: 12 } }}
+        />
+      </UiEntity>
+    )
+  }
+
+  return (
+    <Card>
+      <UiEntity uiTransform={{ width: '100%', height: 'auto', flexDirection: 'column' }}>
+        <CardHeader icon={props.icons.headerModeration} title="PERMISSIONS & MODERATION" />
+        {body()}
+        {message === '' ? null : (
+          <UiEntity
+            uiTransform={{
+              width: '100%',
+              height: 34,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 8,
+              margin: { top: 14 }
+            }}
+            uiBackground={{ color: BADGE_GRAY }}
+          >
+            <Label value={message} fontSize={13} color={BLACK} />
+          </UiEntity>
+        )}
+      </UiEntity>
+    </Card>
+  )
+}
+
+export const moderationTab: TabSpec = {
+  id: TabId.MODERATION,
+  icon: 'tabModeration',
+  isEnabled: (config) => config.moderationControl.isEnabled,
+  hiddenInPreview: true,
+  Component: Moderation
+}

package/prefabs/admin-tools/scripts/tabs/Rewards.tsx

@@ -0,0 +1,136 @@
+import ReactEcs, { Dropdown, Label, UiEntity } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+import { TabId } from '../state'
+import type { TabComponent, TabProps, TabSpec } from '../types'
+import { Card, CardHeader, TEXT_DIM } from '../ui'
+import { RewardsButton } from './rewards/Button'
+import { CaptchaPrompt } from './rewards/Captcha'
+import { clear, release, selectedEntity, submit } from './rewards/controller'
+import { rewardsIcons } from './rewards/icons'
+import { clearCaptcha, rewardsTabState, setStatus, type StatusTone } from './rewards/state'
+
+const STATUS_COLOR: Record<StatusTone, Color4> = {
+  info: TEXT_DIM,
+  error: Color4.create(1, 100 / 255, 100 / 255, 1),
+  success: Color4.create(120 / 255, 220 / 255, 150 / 255, 1)
+}
+
+export const Rewards: TabComponent = (props: TabProps) => {
+  const items = props.config.rewardsControl.rewardItems ?? []
+  const icons = rewardsIcons(props.assetBase)
+  const selectedIndex = props.state.rewards.selectedIndex
+  const entity = selectedEntity(items, selectedIndex)
+  const pending = rewardsTabState.pending
+
+  return (
+    <Card>
+      <CardHeader icon={props.icons.headerRewards} title="AIRDROPS" />
+
+      {items.length === 0 ? (
+        <Label
+          value="No airdrops linked yet. Add reward dispensers from the Admin Tools inspector."
+          fontSize={14}
+          color={TEXT_DIM}
+          textAlign="middle-left"
+          uiTransform={{ width: '100%', height: 'auto' }}
+        />
+      ) : (
+        <UiEntity uiTransform={{ width: '100%', flexDirection: 'column' }}>
+          <UiEntity
+            uiTransform={{
+              width: '100%',
+              flexDirection: 'column',
+              margin: { bottom: 24 }
+            }}
+          >
+            <Label
+              value="<b>Selected Airdrop</b>"
+              fontSize={16}
+              color={Color4.White()}
+              textAlign="middle-left"
+              uiTransform={{ margin: { bottom: 12 }, height: 'auto' }}
+            />
+            <Dropdown
+              key="rewards-item-selector"
+              acceptEmpty
+              emptyLabel="Select your airdrop"
+              options={items.map((item) => item.customName)}
+              selectedIndex={selectedIndex ?? -1}
+              onChange={(index) => {
+                props.state.rewards.selectedIndex = index
+                clearCaptcha()
+                setStatus('')
+              }}
+              textAlign="middle-left"
+              fontSize={14}
+              uiTransform={{ width: '100%', height: 40 }}
+              uiBackground={{ color: Color4.White() }}
+              color={Color4.Black()}
+            />
+          </UiEntity>
+
+          {pending !== null && entity !== null ? (
+            <CaptchaPrompt
+              captcha={pending.captcha}
+              answer={rewardsTabState.answer}
+              busy={rewardsTabState.busy}
+              closeIcon={icons.close}
+              onChange={(value) => {
+                rewardsTabState.answer = value
+              }}
+              onSubmit={submit}
+              onClose={() => {
+                clearCaptcha()
+                setStatus('Airdrop release cancelled.')
+              }}
+            />
+          ) : (
+            <UiEntity uiTransform={{ width: '100%', flexDirection: 'column' }}>
+              <Label
+                value="<b>Actions</b>"
+                fontSize={16}
+                color={Color4.White()}
+                textAlign="middle-left"
+                uiTransform={{ margin: { bottom: 12 }, height: 'auto' }}
+              />
+              <UiEntity uiTransform={{ flexDirection: 'row' }}>
+                <RewardsButton
+                  label={rewardsTabState.busy ? 'Releasing…' : 'Release'}
+                  icon={icons.send}
+                  disabled={entity === null || rewardsTabState.busy}
+                  onClick={() => {
+                    if (entity !== null) release(entity)
+                  }}
+                />
+                <RewardsButton
+                  label="Clear"
+                  disabled={entity === null || rewardsTabState.busy}
+                  onClick={() => {
+                    if (entity !== null) clear(entity)
+                  }}
+                />
+              </UiEntity>
+            </UiEntity>
+          )}
+
+          {rewardsTabState.status === '' ? null : (
+            <Label
+              value={rewardsTabState.status}
+              fontSize={13}
+              color={STATUS_COLOR[rewardsTabState.tone]}
+              textAlign="middle-left"
+              uiTransform={{ width: '100%', height: 'auto', margin: { top: 16 } }}
+            />
+          )}
+        </UiEntity>
+      )}
+    </Card>
+  )
+}
+
+export const rewardsTab: TabSpec = {
+  id: TabId.REWARDS,
+  icon: 'tabRewards',
+  isEnabled: (config) => config.rewardsControl.isEnabled,
+  Component: Rewards
+}