feat: add basic party management

- feat: add party management page - refactor: add new className property - feat: add combobox component - feat: add party actions - refator: remove extra definition - refactor: improve custom filter - refactor: update access token - feat: create custom state - refactor: apply some optimizations - feat: add integration for claiming rewards - fix: add early return - feat: add utility type - refactor: run in parallel - refactor: use utility and add new response - feat: claim quest rewards - feat: add history initial layout - feat: add resources data - feat: add demo information - feat: add clamied rewards notifications - refactor: filter valid claims - feat: add note - refactor: claim rewards after kick - fix: increase min width

Author: Ciensprog

assets/images/currency/vbucks.png

@@ -4,7 +4,7 @@
  <meta charset="UTF-8" />
  <meta
  http-equiv="Content-Security-Policy"
- content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'"
+ content="default-src 'self' https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; script-src 'self'"
  />
  <title>Aerial Launcher</title>
  </head>

index.html

@@ -42,6 +42,7 @@
  "@radix-ui/react-scroll-area": "^1.0.5",
  "@radix-ui/react-separator": "^1.0.3",
  "@radix-ui/react-slot": "^1.0.2",
+ "@radix-ui/react-switch": "^1.0.3",
  "@radix-ui/react-tooltip": "^1.0.7",
  "@tanstack/react-router": "^1.29.2",
  "axios": "^1.6.8",

package-lock.json

@@ -27,7 +27,7 @@ export function useAccountList() {
  const tags = getGroupTagsByAccountId(account.accountId)
 
  if (checkIfCustomDisplayNameIsValid(account.customDisplayName)) {
- _keys.push(account.customDisplayName as string)
+ _keys.push(account.customDisplayName)
  }
 
  if (provider !== '') {

package.json

@@ -0,0 +1,108 @@
+import type { RewardsNotification } from '../../types/notifications'
+
+import { repositoryAssetsURL } from '../../config/about/links'
+
+import { ScrollArea } from '../ui/scroll-area'
+
+import { useClaimedRewards } from '../../hooks/stw-operations/claimed-rewards'
+
+import { useGetAccounts } from '../../hooks/accounts'
+
+import { parseResource } from '../../lib/parsers/resources'
+import { parseDisplayName } from '../../lib/utils'
+
+export function HistoryMenu() {
+ const { data } = useClaimedRewards()
+ const dataOrderByDesc = data.toReversed()
+
+ return (
+ <ScrollArea className="h-full max-h-[calc(100vh-3.5rem)]">
+ {dataOrderByDesc.length > 0 ? (
+ <>
+ <div className="border-l-4 italic mb-4 mt-2 pl-2 py-1 text-muted-foreground">
+ Note: this is a temporal history
+ </div>
+ <div className="flex-1 pb-6 [&_img]:pointer-events-none [&_img]:select-none">
+ {dataOrderByDesc.map((item, index) => (
+ <div
+ className="border-b py-3 space-y-5 text-foreground/90 last:border-b-0"
+ key={index}
+ >
+ <RewardSection data={item} />
+ </div>
+ ))}
+ </div>
+ </>
+ ) : (
+ <div className="flex items-center justify-center text-muted-foreground min-h-[calc(100vh-3.5rem)]">
+ Claimed Reward History
+ </div>
+ )}
+ </ScrollArea>
+ )
+}
+
+function RewardSection({ data }: { data: Array<RewardsNotification> }) {
+ const { accountList } = useGetAccounts()
+
+ return data.map((item, index) => (
+ <div key={index}>
+ <div className="font-bold mb-2 break-all">
+ {parseDisplayName(accountList[item.accountId])}:
+ </div>
+ <ul
+ className="space-y-1"
+ key={index}
+ >
+ <RewardItems rewards={item.rewards} />
+ <AccoladesItem accolades={item.accolades} />
+ </ul>
+ </div>
+ ))
+}
+
+function RewardItems({ rewards }: Pick<RewardsNotification, 'rewards'>) {
+ const rawItems = Object.entries(rewards)
+ const items = rawItems.map(([key, quantity]) =>
+ parseResource({ key, quantity })
+ )
+
+ return items.map((item, index) => (
+ <li key={index}>
+ <figure className="flex gap-1 items-center">
+ <img
+ src={item.imgUrl}
+ className="size-6"
+ alt={item.name}
+ />
+ <figcaption className="break-all">
+ {Intl.NumberFormat('en-US').format(item.quantity)} &times;{' '}
+ {item.name}
+ </figcaption>
+ </figure>
+ </li>
+ ))
+}
+
+function AccoladesItem({
+ accolades,
+}: Pick<RewardsNotification, 'accolades'>) {
+ return (
+ <li>
+ <figure className="flex gap-1 items-center">
+ <img
+ src={`${repositoryAssetsURL}/images/brxp.png`}
+ className="size-6"
+ alt="Accolades"
+ />
+ <figcaption className="break-all">
+ {Intl.NumberFormat('en-US').format(
+ accolades.totalMissionXPRedeemed +
+ accolades.totalQuestXPRedeemed
+ )}{' '}
+ &times; Accolades
+ </figcaption>
+ </figure>
+ </li>
+ )
+}

src/components/account-list/hooks.ts

@@ -70,11 +70,23 @@ export function SidebarMenu({
  <div
  className={cn(
  'px-3 py-2 text-muted-foreground',
- '[&_.item-account-management>a]:flex'
+ '[&_.item-stw-operations>a]:flex'
  )}
  >
  <ul className="list-disc ml-5">
- <li className="item-account-management">
+ <li className="item-stw-operations">
+ <Link
+ to="/stw-operations/party"
+ className={currentClassNameHover}
+ activeProps={{
+ className: cn(activeClassName),
+ }}
+ onClick={goToPage}
+ >
+ Party
+ </Link>
+ </li>
+ <li className="item-stw-operations">
  <Link
  to="/stw-operations/save-quests"
  className={currentClassNameHover}

src/components/menu/history.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react'
+
+export type ComboboxOption = {
+ label: string
+ value: string
+ keywords: Array<string>
+}
+
+export type ComboboxProps = {
+ className?: string
+ emptyText?: string
+ isMulti?: boolean
+ options: Array<ComboboxOption>
+ placeholder?: string
+ placeholderSearch?: string
+ value?: Array<ComboboxOption>
+ customFilter?: (
+ value: string,
+ search: string,
+ keywords?: Array<string>
+ ) => number
+ onChange?: (values: Array<ComboboxOption>) => void
+}
+
+export function useData({
+ isMulti = false,
+ options,
+ value,
+ onChange,
+}: Pick<ComboboxProps, 'isMulti' | 'options' | 'value' | 'onChange'>) {
+ const [open, setOpen] = useState(false)
+ const [__values, __setValues] = useState<Array<ComboboxOption>>([])
+
+ const currentValues = value ?? __values
+
+ const selectedName = isMulti
+ ? currentValues.length > 1
+ ? `${currentValues.length} selected`
+ : currentValues[0]?.label
+ : options.find((item) => item.value === currentValues[0]?.value)?.label
+
+ const __onChange = (value: string) => {
+ const current = options.find((item) => item.value === value)
+ const hasItem = currentValues.find((item) => item.value === value)
+ const update = (values: Array<ComboboxOption>) => {
+ __setValues(values)
+ onChange?.(values)
+ }
+
+ if (!current) {
+ return
+ }
+
+ if (!isMulti) {
+ update(hasItem ? [] : [current])
+
+ return
+ }
+
+ const newValues = hasItem
+ ? currentValues.filter((item) => item.value !== value)
+ : current
+ ? [...currentValues, current]
+ : currentValues
+
+ update(newValues)
+ }
+
+ return {
+ currentValues,
+ open,
+ selectedName,
+
+ setOpen,
+ __onChange,
+ }
+}