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

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

@@ -0,0 +1,69 @@
+// View state for the moderation tab. It lives at module scope rather than in
+// ReactEcs.useState because the shell unmounts the tab body on every tab switch
+// (state.ts nextTick trick) — a list the admin paged into would otherwise reset.
+// Same reason the Creator Hub keeps `moderationControlState` outside the tree.
+import type { SceneAdmin } from '../../api'
+
+export enum ModerationView {
+  MAIN = 'main',
+  ADMIN_LIST = 'admin_list',
+  BAN_LIST = 'ban_list',
+  CONFIRM_REMOVE = 'confirm_remove'
+}
+
+export const USERS_PER_PAGE = 4
+const MESSAGE_MS = 3000
+
+export interface ModerationViewState {
+  view: ModerationView
+  page: number
+  adminToRemove: SceneAdmin | null
+  removeError: string
+  removing: boolean
+  message: string
+  messageAt: number
+}
+
+export const moderationView: ModerationViewState = {
+  view: ModerationView.MAIN,
+  page: 1,
+  adminToRemove: null,
+  removeError: '',
+  removing: false,
+  message: '',
+  messageAt: 0
+}
+
+export function openView(view: ModerationView): void {
+  moderationView.view = view
+  moderationView.page = 1
+  moderationView.adminToRemove = null
+  moderationView.removeError = ''
+  moderationView.removing = false
+}
+
+export function showMessage(text: string): void {
+  moderationView.message = text
+  moderationView.messageAt = Date.now()
+}
+
+// Read during render, so the toast disappears on its own without a timer system.
+export function currentMessage(): string {
+  if (moderationView.message === '') return ''
+  if (Date.now() - moderationView.messageAt > MESSAGE_MS) {
+    moderationView.message = ''
+    return ''
+  }
+  return moderationView.message
+}
+
+export function pageCount(total: number): number {
+  return Math.max(1, Math.ceil(total / USERS_PER_PAGE))
+}
+
+export function clampPage(total: number): number {
+  const pages = pageCount(total)
+  if (moderationView.page > pages) moderationView.page = pages
+  if (moderationView.page < 1) moderationView.page = 1
+  return moderationView.page
+}

package/prefabs/admin-tools/scripts/tabs/moderation/ui.tsx

@@ -0,0 +1,172 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { Key, UiTransformProps } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+
+export const WHITE = Color4.White()
+export const BLACK = Color4.Black()
+export const GRAY = Color4.Gray()
+export const ADDRESS_GRAY = Color4.fromHexString('#716B7C')
+export const DIVIDER_GRAY = Color4.fromHexString('#43404A')
+export const DISABLED_GRAY = Color4.fromHexString('#323232')
+export const BADGE_GRAY = Color4.fromHexString('#A09BA8')
+export const DANGER = Color4.fromHexString('#FF2D55')
+export const BAN_PINK = Color4.fromHexString('#FB3B3B')
+export const RED = Color4.Red()
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'text'
+
+export function Divider(props: { uiTransform?: UiTransformProps }): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: 1,
+        flexShrink: 0,
+        margin: { top: 14, bottom: 14 },
+        ...props.uiTransform
+      }}
+      uiBackground={{ color: DIVIDER_GRAY }}
+    />
+  )
+}
+
+export function SectionTitle(props: { text: string }): ReactEcs.JSX.Element {
+  return (
+    <Label
+      value={`<b>${props.text}</b>`}
+      fontSize={17}
+      color={WHITE}
+      textAlign="middle-left"
+      uiTransform={{ height: 'auto', margin: { bottom: 8 } }}
+    />
+  )
+}
+
+export function ErrorLine(props: {
+  icon: string
+  text: string
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: 'auto',
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: { top: 6 },
+        ...props.uiTransform
+      }}
+    >
+      <UiEntity
+        uiTransform={{ width: 16, height: 16, flexShrink: 0, margin: { right: 8 } }}
+        uiBackground={{ textureMode: 'stretch', texture: { src: props.icon } }}
+      />
+      <UiEntity
+        uiTransform={{ width: '90%', height: 'auto' }}
+        uiText={{ value: props.text, fontSize: 13, color: RED, textAlign: 'top-left' }}
+      />
+    </UiEntity>
+  )
+}
+
+function backgroundColor(variant: ButtonVariant, disabled: boolean): Color4 {
+  if (disabled) return variant === 'primary' ? DISABLED_GRAY : Color4.create(0, 0, 0, 0)
+  if (variant === 'primary') return WHITE
+  if (variant === 'danger') return BAN_PINK
+  return Color4.create(0, 0, 0, 0)
+}
+
+function labelColor(variant: ButtonVariant, disabled: boolean): Color4 {
+  if (disabled) return DISABLED_GRAY
+  if (variant === 'primary') return BLACK
+  return WHITE
+}
+
+export function Button(props: {
+  key?: Key
+  label: string
+  variant?: ButtonVariant
+  disabled?: boolean
+  icon?: string
+  iconRight?: string
+  color?: Color4
+  fontSize?: number
+  onClick: () => void
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  const variant = props.variant ?? 'primary'
+  const disabled = props.disabled === true
+  const color = disabled ? DISABLED_GRAY : (props.color ?? labelColor(variant, disabled))
+  return (
+    <UiEntity
+      uiTransform={{
+        height: 38,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 10,
+        borderWidth: variant === 'secondary' ? 2 : 0,
+        borderColor: disabled ? DISABLED_GRAY : WHITE,
+        padding: { left: 12, right: 12 },
+        ...props.uiTransform
+      }}
+      uiBackground={{ color: backgroundColor(variant, disabled) }}
+      onMouseDown={() => {
+        if (!disabled) props.onClick()
+      }}
+    >
+      {props.icon === undefined ? null : (
+        <UiEntity
+          uiTransform={{ width: 20, height: 20, flexShrink: 0, margin: { right: 8 } }}
+          uiBackground={{ textureMode: 'stretch', texture: { src: props.icon }, color }}
+        />
+      )}
+      <Label value={`<b>${props.label}</b>`} fontSize={props.fontSize ?? 15} color={color} />
+      {props.iconRight === undefined ? null : (
+        <UiEntity
+          uiTransform={{ width: 20, height: 20, flexShrink: 0, margin: { left: 8 } }}
+          uiBackground={{ textureMode: 'stretch', texture: { src: props.iconRight }, color }}
+        />
+      )}
+    </UiEntity>
+  )
+}
+
+export function ListHeader(props: {
+  icon: string
+  title: string
+  counter: string
+  closeIcon: string
+  onClose: () => void
+}): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: 32,
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: { bottom: 10 }
+      }}
+    >
+      <UiEntity
+        uiTransform={{ width: 26, height: 26, flexShrink: 0, margin: { right: 8 } }}
+        uiBackground={{ textureMode: 'stretch', texture: { src: props.icon }, color: WHITE }}
+      />
+      <Label value={`<b>${props.title}</b>`} fontSize={19} color={WHITE} />
+      <Label
+        value={props.counter}
+        fontSize={14}
+        color={GRAY}
+        uiTransform={{ flexGrow: 1, margin: { left: 8 } }}
+        textAlign="middle-left"
+      />
+      <UiEntity
+        uiTransform={{ width: 26, height: 26, flexShrink: 0 }}
+        uiBackground={{ textureMode: 'stretch', texture: { src: props.closeIcon }, color: WHITE }}
+        onMouseDown={props.onClose}
+      />
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/moderation/utils.ts

@@ -0,0 +1,88 @@
+// Pure-ish helpers behind the moderation tab: input validation, the two list
+// refreshes and the permission rule for `allowNonOwnersManageAdminAllowList`.
+import {
+  getSceneAdmins,
+  getSceneBans,
+  isPreview,
+  toSceneAdmins,
+  type SceneAdmin,
+  type SceneBanUser
+} from '../../api'
+import type { AdminToolsValue } from '../../components'
+import type { AdminMessageBus } from '../../message-bus'
+import type { AdminState } from '../../state'
+import type { AdminPlayer } from '../../types'
+
+const ADDRESS = /^0x[a-fA-F0-9]{40}$/
+
+export function isValidAddress(value: string): boolean {
+  return ADDRESS.test(value)
+}
+
+// A Decentraland NAME is at most 15 characters, so anything longer was meant to be
+// a wallet address — that is how the Hub decides which request shape to send.
+export function looksLikeAddress(value: string): boolean {
+  return value.length > 15
+}
+
+export function shortAddress(address: string): string {
+  if (address.length <= 12) return address
+  return `${address.slice(0, 6)}...${address.slice(-4)}`
+}
+
+export function addressOf(user: SceneAdmin | SceneBanUser): string {
+  return 'address' in user ? user.address : user.bannedAddress
+}
+
+// The gatekeeper omits `name` for wallets with no NAME, so this never trusts it.
+export function userName(user: SceneAdmin | SceneBanUser): string {
+  return typeof user.name === 'string' ? user.name : ''
+}
+
+export function displayName(user: SceneAdmin | SceneBanUser): string {
+  const name = userName(user)
+  return name === '' ? shortAddress(addressOf(user)) : name
+}
+
+export function isAdminUser(admins: SceneAdmin[], value: string): boolean {
+  const lower = value.toLowerCase()
+  return admins.some(
+    (admin) => admin.address === lower || (lower !== '' && userName(admin).toLowerCase() === lower)
+  )
+}
+
+// The gatekeeper marks scene owners and operators as non-removable, which is the
+// only signal the /scene-admin response carries about who is more than an admin.
+export function isSceneOwner(admins: SceneAdmin[], address: string | undefined): boolean {
+  if (address === undefined) return false
+  const lower = address.toLowerCase()
+  return admins.some((admin) => admin.address === lower && !admin.canBeRemoved)
+}
+
+export function canManageAdmins(
+  config: AdminToolsValue,
+  admins: SceneAdmin[],
+  player: AdminPlayer | null
+): boolean {
+  if (config.moderationControl.allowNonOwnersManageAdminAllowList) return true
+  if (isPreview()) return true
+  return isSceneOwner(admins, player?.userId)
+}
+
+// `broadcast` tells the other clients to refetch too — only worth the comms message
+// after the list actually changed, which is how the Hub splits its two fetchers.
+export async function refreshAdmins(
+  state: AdminState,
+  bus: AdminMessageBus | null,
+  broadcast = false
+): Promise<void> {
+  const [error, response] = await getSceneAdmins()
+  state.admins = error === null ? toSceneAdmins(response) : []
+  bus?.updateAdminList(state.admins)
+  if (broadcast) bus?.syncAdmins()
+}
+
+export async function refreshBans(state: AdminState): Promise<void> {
+  const [error, response] = await getSceneBans()
+  state.bans = error === null && Array.isArray(response.results) ? response.results : []
+}

package/prefabs/admin-tools/scripts/tabs/rewards/Button.tsx

@@ -0,0 +1,52 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { UiTransformProps } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+
+const ACTIVE = Color4.create(252 / 255, 252 / 255, 252 / 255, 1)
+const DISABLED = Color4.create(74 / 255, 74 / 255, 74 / 255, 1)
+const DISABLED_TEXT = Color4.create(160 / 255, 155 / 255, 168 / 255, 1)
+
+export function RewardsButton(props: {
+  label: string
+  icon?: string
+  disabled?: boolean
+  onClick: () => void
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  const disabled = props.disabled === true
+  return (
+    <UiEntity
+      uiTransform={{
+        height: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 12,
+        borderWidth: 0,
+        padding: { left: 16, right: 16 },
+        margin: { right: 16 },
+        ...props.uiTransform
+      }}
+      uiBackground={{ color: disabled ? DISABLED : ACTIVE }}
+      onMouseDown={() => {
+        if (!disabled) props.onClick()
+      }}
+    >
+      {props.icon !== undefined ? (
+        <UiEntity
+          uiTransform={{ width: 25, height: 25, margin: { right: 8 } }}
+          uiBackground={{
+            textureMode: 'stretch',
+            texture: { src: props.icon },
+            color: disabled ? DISABLED_TEXT : Color4.Black()
+          }}
+        />
+      ) : null}
+      <Label
+        value={`<b>${props.label}</b>`}
+        fontSize={16}
+        color={disabled ? DISABLED_TEXT : Color4.Black()}
+      />
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/rewards/Captcha.tsx

@@ -0,0 +1,88 @@
+import ReactEcs, { Input, Label, UiEntity } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+import { TEXT_DIM } from '../../ui'
+import { RewardsButton } from './Button'
+import type { RewardCaptcha } from './api'
+
+export function CaptchaPrompt(props: {
+  captcha: RewardCaptcha
+  answer: string
+  busy: boolean
+  closeIcon: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  onClose: () => void
+}): ReactEcs.JSX.Element {
+  return (
+    <UiEntity uiTransform={{ width: '100%', flexDirection: 'column' }}>
+      <UiEntity
+        uiTransform={{
+          width: '100%',
+          flexDirection: 'row',
+          alignItems: 'center',
+          margin: { bottom: 16 }
+        }}
+      >
+        <Label
+          value="<b>Solve the captcha</b>"
+          fontSize={16}
+          color={Color4.White()}
+          textAlign="middle-left"
+          uiTransform={{ flexGrow: 1 }}
+        />
+        <UiEntity
+          uiTransform={{ width: 24, height: 24 }}
+          uiBackground={{
+            textureMode: 'stretch',
+            texture: { src: props.closeIcon },
+            color: Color4.White()
+          }}
+          onMouseDown={props.onClose}
+        />
+      </UiEntity>
+
+      <UiEntity
+        uiTransform={{
+          width: '100%',
+          height: 120,
+          margin: { bottom: 16 },
+          borderRadius: 8
+        }}
+        uiBackground={{
+          color: Color4.White(),
+          textureMode: 'stretch',
+          texture: { src: props.captcha.image }
+        }}
+      />
+
+      <Input
+        key={`captcha-${props.captcha.id}`}
+        placeholder="Enter the captcha"
+        value={props.answer}
+        fontSize={16}
+        textAlign="middle-left"
+        color={Color4.Black()}
+        placeholderColor={Color4.create(0.4, 0.4, 0.4, 1)}
+        uiTransform={{ width: '100%', height: 40, margin: { bottom: 16 } }}
+        uiBackground={{ color: Color4.White() }}
+        onChange={props.onChange}
+        onSubmit={props.onSubmit}
+      />
+
+      <UiEntity uiTransform={{ flexDirection: 'row' }}>
+        <RewardsButton
+          label={props.busy ? 'Sending…' : 'Submit'}
+          disabled={props.busy}
+          onClick={props.onSubmit}
+        />
+        <Label
+          value="The reward is assigned once the captcha is accepted."
+          fontSize={12}
+          color={TEXT_DIM}
+          textAlign="middle-left"
+          uiTransform={{ width: 220, height: 'auto' }}
+        />
+      </UiEntity>
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/rewards/api.ts

@@ -0,0 +1,138 @@
+// rewards.decentraland.<domain> calls behind the CLAIM_AIRDROP flow, ported from
+// @dcl/asset-packs src/actions.ts (fetchCampaignsByDispenserKey / fetchCaptcha /
+// requestToken). Every response comes wrapped in an `{ ok, data }` envelope that
+// the shared signedFetch helper does not unwrap, so it is narrowed here.
+import { ENDPOINTS, request, type Result } from '../../api'
+
+export interface RewardCampaign {
+  campaignId: string
+  enabled: boolean
+  requiresCaptcha: boolean
+}
+
+export interface RewardCaptcha {
+  id: string
+  image: string
+  width: number
+  height: number
+}
+
+export interface ClaimSummary {
+  status: string
+  count: number
+}
+
+export interface ClaimRequest {
+  dispenserKey: string
+  beneficiary: string
+  catalyst: string
+  captchaId?: string
+  captchaValue?: string
+}
+
+const JSON_HEADERS = { 'Content-Type': 'application/json' }
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : {}
+}
+
+function asString(value: unknown, fallback = ''): string {
+  return typeof value === 'string' ? value : fallback
+}
+
+function asNumber(value: unknown, fallback: number): number {
+  return typeof value === 'number' && !Number.isNaN(value) ? value : fallback
+}
+
+function asBoolean(value: unknown, fallback: boolean): boolean {
+  return typeof value === 'boolean' ? value : fallback
+}
+
+function envelopeError(json: Record<string, unknown>): string {
+  const message = asString(json.error) !== '' ? asString(json.error) : asString(json.message)
+  if (message !== '') return message
+  const code = asString(json.code)
+  return code !== '' ? code : 'the rewards server rejected the request'
+}
+
+function unwrap(body: unknown): Result<unknown> {
+  const json = asRecord(body)
+  if (json.ok === false) return [envelopeError(json), null]
+  return [null, json.data]
+}
+
+function toCampaign(value: unknown): RewardCampaign | null {
+  const json = asRecord(value)
+  const campaignId = asString(json.campaign_id)
+  if (campaignId === '') return null
+  return {
+    campaignId,
+    enabled: asBoolean(json.enabled, true),
+    requiresCaptcha: asBoolean(json.requires_captcha, false)
+  }
+}
+
+export async function fetchCampaigns(dispenserKey: string): Promise<Result<RewardCampaign[]>> {
+  const url = `${ENDPOINTS.rewardsCampaignKeys()}?campaign_key=${encodeURIComponent(dispenserKey)}`
+  const [failure, body] = await request<unknown>({ url })
+  if (failure !== null) return [failure, null]
+  const [invalid, data] = unwrap(body)
+  if (invalid !== null) return [invalid, null]
+  if (!Array.isArray(data)) return ['the rewards server returned no campaigns for this key', null]
+  const campaigns: RewardCampaign[] = []
+  for (const entry of data) {
+    const campaign = toCampaign(entry)
+    if (campaign !== null) campaigns.push(campaign)
+  }
+  return [null, campaigns]
+}
+
+export async function fetchCaptcha(): Promise<Result<RewardCaptcha>> {
+  const [failure, body] = await request<unknown>({
+    url: ENDPOINTS.rewardsCaptcha(),
+    init: { method: 'POST', headers: JSON_HEADERS }
+  })
+  if (failure !== null) return [failure, null]
+  const [invalid, data] = unwrap(body)
+  if (invalid !== null) return [invalid, null]
+  const json = asRecord(data)
+  const id = asString(json.id)
+  const image = asString(json.image)
+  if (id === '' || image === '') return ['the captcha could not be loaded, try again', null]
+  return [null, { id, image, width: asNumber(json.width, 250), height: asNumber(json.height, 100) }]
+}
+
+function toSummary(data: unknown): ClaimSummary {
+  if (Array.isArray(data)) {
+    const first = asRecord(data[0])
+    return { status: asString(first.status, 'assigned'), count: data.length }
+  }
+  const json = asRecord(data)
+  return { status: asString(json.status, 'assigned'), count: Object.keys(json).length > 0 ? 1 : 0 }
+}
+
+/** True when the server is asking for a captcha rather than reporting a real failure. */
+export function isCaptchaRequired(message: string): boolean {
+  return message.toLowerCase().includes('captcha')
+}
+
+export async function claimReward(claim: ClaimRequest): Promise<Result<ClaimSummary>> {
+  const body: Record<string, string> = {
+    campaign_key: claim.dispenserKey,
+    beneficiary: claim.beneficiary,
+    catalyst: claim.catalyst
+  }
+  if (claim.captchaId !== undefined && claim.captchaValue !== undefined) {
+    body.captcha_id = claim.captchaId
+    body.captcha_value = claim.captchaValue
+  }
+
+  const [failure, response] = await request<unknown>({
+    url: ENDPOINTS.rewardsAssign(),
+    init: { method: 'POST', headers: JSON_HEADERS, body: JSON.stringify(body) }
+  })
+  if (failure !== null) return [failure, null]
+  const [invalid, data] = unwrap(response)
+  if (invalid !== null) return [invalid, null]
+  return [null, toSummary(data)]
+}