@rpg-engine/long-bow 0.8.141 → 0.8.146

package/src/components/Marketplace/Marketplace.tsx

@@ -1,16 +1,29 @@
-import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
+import {
+  IEquipmentSet,
+  IItem,
+  IMarketplaceBlueprintSearchRequest,
+  IMarketplaceBlueprintSummary,
+  IMarketplaceBuyOrderItem,
+  IMarketplaceItem,
+  IMarketplaceTransaction,
+} from '@rpg-engine/shared';
+import { Clock } from 'pixelarticons/react/Clock';
 import { Settings2 } from 'pixelarticons/react/Settings2';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
+import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import { Store } from 'pixelarticons/react/Store';
-import { User } from 'pixelarticons/react/User';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { DraggableContainer } from '../DraggableContainer';
 import { Pager } from '../Pager';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { Tabs } from '../shared/Tabs';
-import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
+import { BlueprintSearchModal } from './BlueprintSearchModal';
+import { BuyOrderPanel } from './BuyOrderPanel';
 import { BuyPanel } from './BuyPanel';
+import { HistoryPanel } from './HistoryPanel';
 import { ManagmentPanel } from './ManagmentPanel';
+import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { MarketplaceAcceptedCurrency, MarketplaceSettingsPanel } from './MarketplaceSettingsPanel';
 
 export interface IMarketPlaceProps {
@@ -32,12 +45,13 @@ export interface IMarketPlaceProps {
   scale?: number;
   equipmentSet?: IEquipmentSet | null;
   onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
+  onFulfillBuyOrder?: (buyOrderId: string) => void;
   onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
   availableGold: number;
   selectedItemToSell: IItem | null;
   onSelectedItemToSellRemove: (item: IItem) => void;
   onYourPanelToggle: (yourPanel: boolean) => void;
-  onAddItemToMarketplace: (item: IItem, price: number) => void;
+  onAddItemToMarketplace: (item: IItem, price: number, acceptedCurrency?: MarketplaceAcceptedCurrency) => void;
   characterId: string;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
@@ -50,15 +64,91 @@ export interface IMarketPlaceProps {
   dcToGoldSwapRate?: number;
   acceptedCurrency?: MarketplaceAcceptedCurrency;
   onAcceptedCurrencyChange?: (value: MarketplaceAcceptedCurrency) => void;
+  onActiveTabChange?: (tab: string) => void;
+
+  // Buy Order props
+  buyOrderSelectedBlueprint?: IMarketplaceBlueprintSummary;
+  buyOrderQuantity?: number;
+  buyOrderMaxPrice?: number;
+  buyOrderSelectedRarity?: string;
+  onBuyOrderQuantityChange?: (quantity: number) => void;
+  onBuyOrderMaxPriceChange?: (price: number) => void;
+  onBuyOrderRarityChange?: (rarity: string) => void;
+  onPlaceBuyOrder?: () => void;
+  onClearBuyOrderBlueprint?: () => void;
+  yourBuyOrders?: IMarketplaceBuyOrderItem[];
+  yourBuyOrdersTotal?: number;
+  yourBuyOrdersPage?: number;
+  onYourBuyOrdersPageChange?: (page: number) => void;
+  onCancelBuyOrder?: (buyOrderId: string) => void;
+  openBuyOrders?: IMarketplaceBuyOrderItem[];
+  openBuyOrdersTotal?: number;
+  openBuyOrdersPage?: number;
+  onOpenBuyOrdersPageChange?: (page: number) => void;
+
+  // Blueprint Search props
+  onBlueprintSearch?: (request: IMarketplaceBlueprintSearchRequest) => void;
+  onBlueprintSelect?: (blueprint: IMarketplaceBlueprintSummary) => void;
+  blueprintSearchResults?: IMarketplaceBlueprintSummary[];
+  blueprintSearchTotalCount?: number;
+  blueprintSearchCurrentPage?: number;
+  blueprintSearchIsLoading?: boolean;
+
+  // History props
+  historyTransactions?: IMarketplaceTransaction[];
+  historyTotalCount?: number;
+  historyCurrentPage?: number;
+  historyItemsPerPage?: number;
+  historySelectedType?: string;
+  onHistoryTypeChange?: (type: string) => void;
+  onHistoryPageChange?: (page: number) => void;
 }
 
-type ActiveTab = 'marketplace' | 'your-panel' | 'settings';
+type ActiveTab = 'marketplace' | 'sell' | 'buy-orders' | 'history' | 'settings';
 
 export const Marketplace: React.FC<IMarketPlaceProps> = props => {
-  const { onClose, scale, onYourPanelToggle, acceptedCurrency: acceptedCurrencyProp, onAcceptedCurrencyChange } = props;
+  const {
+    onClose,
+    scale,
+    onYourPanelToggle,
+    onActiveTabChange,
+    acceptedCurrency: acceptedCurrencyProp,
+    onAcceptedCurrencyChange,
+    // Buy Order
+    buyOrderSelectedBlueprint,
+    buyOrderQuantity = 0,
+    buyOrderMaxPrice = 0,
+    buyOrderSelectedRarity = '',
+    onBuyOrderQuantityChange,
+    onBuyOrderMaxPriceChange,
+    onBuyOrderRarityChange,
+    onPlaceBuyOrder,
+    onClearBuyOrderBlueprint,
+    yourBuyOrders = [],
+    yourBuyOrdersTotal = 0,
+    yourBuyOrdersPage = 1,
+    onYourBuyOrdersPageChange,
+    onCancelBuyOrder,
+    // Blueprint Search
+    onBlueprintSearch,
+    onBlueprintSelect,
+    blueprintSearchResults = [],
+    blueprintSearchTotalCount = 0,
+    blueprintSearchCurrentPage = 1,
+    blueprintSearchIsLoading = false,
+    // History
+    historyTransactions = [],
+    historyTotalCount = 0,
+    historyCurrentPage = 1,
+    historyItemsPerPage = 10,
+    historySelectedType = 'All',
+    onHistoryTypeChange,
+    onHistoryPageChange,
+  } = props;
 
   const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
-  const [acceptedCurrency, setAcceptedCurrency] = useState<MarketplaceAcceptedCurrency>(acceptedCurrencyProp ?? 'gold_or_dc');
+  const [acceptedCurrency, setAcceptedCurrency] = useState<MarketplaceAcceptedCurrency>(acceptedCurrencyProp ?? MarketplaceAcceptedCurrency.GoldOrDc);
+  const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
 
   const handleCurrencyChange = (value: MarketplaceAcceptedCurrency) => {
     setAcceptedCurrency(value);
@@ -68,9 +158,17 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
   const handleTabChange = (tabId: string) => {
     const tab = tabId as ActiveTab;
     setActiveTab(tab);
-    onYourPanelToggle(tab === 'your-panel');
+    onYourPanelToggle(tab === 'sell');
+    onActiveTabChange?.(tab);
+  };
+
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    onBlueprintSelect?.(blueprint);
   };
 
+  const showSharedPager = activeTab === 'sell';
+
   return (
     <DraggableContainer
       type={RPGUIContainerTypes.Framed}
@@ -89,9 +187,19 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
             icon: <Store width={18} height={18} />,
           },
           {
-            id: 'your-panel',
-            label: 'Your Panel',
-            icon: <User width={18} height={18} />,
+            id: 'sell',
+            label: 'Sell',
+            icon: <ShoppingBag width={18} height={18} />,
+          },
+          {
+            id: 'buy-orders',
+            label: 'Buy',
+            icon: <ShoppingCart width={18} height={18} />,
+          },
+          {
+            id: 'history',
+            label: 'History',
+            icon: <Clock width={18} height={18} />,
           },
           {
             id: 'settings',
@@ -103,30 +211,77 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
         onTabChange={handleTabChange}
       />
 
-      {activeTab === 'your-panel' && (
-        <>
-          <ManagmentPanel {...props} />
+      {activeTab === 'marketplace' && (
+        <BuyPanel {...props} />
+      )}
 
-          <PagerContainer>
-            <Pager {...props} />
-          </PagerContainer>
-        </>
+      {activeTab === 'sell' && (
+        <ManagmentPanel {...props} acceptedCurrency={acceptedCurrency} />
       )}
-      {activeTab === 'marketplace' && (
-        <>
-          <BuyPanel {...props} />
 
-          <PagerContainer>
-            <Pager {...props} />
-          </PagerContainer>
+      {activeTab === 'buy-orders' && (
+        <>
+          <BuyOrderPanel
+            atlasJSON={props.atlasJSON}
+            atlasIMG={props.atlasIMG}
+            selectedBlueprint={buyOrderSelectedBlueprint}
+            onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+            onCloseDetails={onClearBuyOrderBlueprint}
+            onQuantityChange={onBuyOrderQuantityChange ?? (() => {})}
+            onMaxPriceChange={onBuyOrderMaxPriceChange ?? (() => {})}
+            onRarityChange={onBuyOrderRarityChange ?? (() => {})}
+            onPlaceBuyOrder={onPlaceBuyOrder ?? (() => {})}
+            currentQuantity={buyOrderQuantity}
+            currentMaxPrice={buyOrderMaxPrice}
+            selectedRarity={buyOrderSelectedRarity}
+            yourBuyOrders={yourBuyOrders}
+            yourBuyOrdersTotal={yourBuyOrdersTotal}
+            yourBuyOrdersPage={yourBuyOrdersPage}
+            onYourBuyOrdersPageChange={onYourBuyOrdersPageChange ?? (() => {})}
+            onCancelBuyOrder={onCancelBuyOrder ?? (() => {})}
+          />
+          <BlueprintSearchModal
+            isOpen={isBlueprintSearchOpen}
+            onClose={() => setIsBlueprintSearchOpen(false)}
+            onSelect={handleBlueprintSelect}
+            onSearch={onBlueprintSearch ?? (() => {})}
+            blueprints={blueprintSearchResults}
+            totalCount={blueprintSearchTotalCount}
+            currentPage={blueprintSearchCurrentPage}
+            isLoading={blueprintSearchIsLoading}
+            atlasJSON={props.atlasJSON}
+            atlasIMG={props.atlasIMG}
+          />
         </>
       )}
+
+      {activeTab === 'history' && (
+        <HistoryPanel
+          transactions={historyTransactions}
+          totalCount={historyTotalCount}
+          currentPage={historyCurrentPage}
+          itemsPerPage={historyItemsPerPage}
+          selectedType={historySelectedType}
+          onTypeChange={onHistoryTypeChange ?? (() => {})}
+          onPageChange={onHistoryPageChange ?? (() => {})}
+          atlasJSON={props.atlasJSON}
+          atlasIMG={props.atlasIMG}
+          dcToGoldSwapRate={props.dcToGoldSwapRate}
+        />
+      )}
+
       {activeTab === 'settings' && (
         <MarketplaceSettingsPanel
           acceptedCurrency={acceptedCurrency}
           onAcceptedCurrencyChange={handleCurrencyChange}
         />
       )}
+
+      {showSharedPager && (
+        <PagerContainer>
+          <Pager {...props} />
+        </PagerContainer>
+      )}
     </DraggableContainer>
   );
 };
@@ -136,10 +291,6 @@ const PagerContainer = styled.div`
   justify-content: center;
   align-items: center;
   width: 95%;
-  margin: 15px auto 0 auto;
-  padding: 12px 16px;
-  background: rgba(0, 0, 0, 0.3);
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
-  box-sizing: border-box;
+  margin: 6px auto 0 auto;
+  padding: 4px 10px;
 `;

package/src/components/Marketplace/MarketplaceBuyModal.tsx

@@ -152,6 +152,7 @@ const CloseButton = styled.button`
   padding: 4px;
   display: flex;
   align-items: center;
+  pointer-events: auto;
 
   &:hover {
     color: #ffffff;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -15,6 +15,7 @@ import { onRenderGems } from '../Item/Inventory/ItemGem';
 import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { Ellipsis } from '../shared/Ellipsis';
+import { SimpleTooltip } from '../shared/SimpleTooltip';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 export interface IMarketPlaceRowsPropos {
@@ -92,17 +93,31 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
           <PriceRow>
             <GoldPriceRow>
               <GoldIcon>
-                <SpriteFromAtlas
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  spriteKey="others/gold-coin-qty-5.png"
-                  imgScale={1}
-                />
+                <SimpleTooltip content="Gold Coin" direction="top">
+                  <SpriteFromAtlas
+                    atlasIMG={atlasIMG}
+                    atlasJSON={atlasJSON}
+                    spriteKey="others/gold-coin-qty-5.png"
+                    imgScale={1}
+                  />
+                </SimpleTooltip>
               </GoldIcon>
               <GoldPrice>{itemPrice}</GoldPrice>
             </GoldPriceRow>
             {dcEquivalentPrice !== undefined && (
-              <DCPrice>({formatDCAmount(dcEquivalentPrice)} DC)</DCPrice>
+              <DCPriceRow>
+                <DCCoinWrapper>
+                  <SimpleTooltip content="Definya Coin" direction="top">
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey="others/definya-coin.png"
+                      imgScale={1}
+                    />
+                  </SimpleTooltip>
+                </DCCoinWrapper>
+                <DCPrice>{formatDCAmount(dcEquivalentPrice)}</DCPrice>
+              </DCPriceRow>
             )}
           </PriceRow>
         </ItemDetails>
@@ -327,14 +342,30 @@ const GoldIcon = styled.span`
 
 const GoldPrice = styled.span`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.6rem;
+  font-size: 0.6rem !important;
   color: #fef08a;
   line-height: 1;
 `;
 
+const DCPriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-left: 0.5rem;
+`;
+
+const DCCoinWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: -0.6rem;
+  left: -0.5rem;
+`;
+
 const DCPrice = styled.span`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.55rem;
+  font-size: 0.6rem !important;
   color: rgba(254, 240, 138, 0.65);
   white-space: nowrap;
 `;
@@ -348,7 +379,7 @@ const QuantityContainer = styled.p`
   position: absolute;
   display: block;
   top: 15px;
-  left: 25px;
+  left: -8px;
   font-size: ${uiFonts.size.xsmall} !important;
 `;
 

package/src/components/Marketplace/MarketplaceSettingsPanel.tsx

@@ -1,7 +1,8 @@
+import { MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 
-export type MarketplaceAcceptedCurrency = 'gold' | 'gold_or_dc';
+export { MarketplaceAcceptedCurrency };
 
 export interface IMarketplaceSettingsPanelProps {
   acceptedCurrency: MarketplaceAcceptedCurrency;
@@ -10,12 +11,12 @@ export interface IMarketplaceSettingsPanelProps {
 
 const CURRENCY_OPTIONS: { value: MarketplaceAcceptedCurrency; label: string; description: string }[] = [
   {
-    value: 'gold_or_dc',
+    value: MarketplaceAcceptedCurrency.GoldOrDc,
     label: 'Gold or DC',
     description: 'Accept both Gold and Definya Coin as payment',
   },
   {
-    value: 'gold',
+    value: MarketplaceAcceptedCurrency.Gold,
     label: 'Gold only',
     description: 'Only accept Gold as payment',
   },

package/src/components/Store/CartView.tsx

@@ -61,6 +61,11 @@ export const CartView: React.FC<ICartViewProps> = ({
     0
   );
 
+  const dcTotal = cartItems.reduce(
+    (sum, ci) => sum + (ci.item.dcPrice ?? 0) * ci.quantity,
+    0
+  );
+
   const formatPrice = (price: number) => price.toFixed(2);
 
   const handlePurchase = async () => {
@@ -154,6 +159,12 @@ export const CartView: React.FC<ICartViewProps> = ({
             <span>Total:</span>
             <span>${formatPrice(total)}</span>
           </TotalRow>
+          {dcTotal > 0 && (
+            <TotalRow>
+              <span>DC:</span>
+              <span>{dcTotal.toLocaleString()} DC</span>
+            </TotalRow>
+          )}
           {error && <ErrorMessage>{error}</ErrorMessage>}
         </TotalInfo>
         <CTAButton

package/src/components/Store/PaymentMethodModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
@@ -6,6 +6,7 @@ import { Button, ButtonTypes } from '../Button';
 
 export interface IPaymentMethodModalProps {
   dcBalance: number;
+  dcRequired?: number;
   onPayWithDC: () => void;
   onPayWithCard: () => void;
   onClose: () => void;
@@ -15,12 +16,21 @@ type PaymentMethod = 'dc' | 'card';
 
 export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   dcBalance,
+  dcRequired,
   onPayWithDC,
   onPayWithCard,
   onClose,
 }) => {
   const [selected, setSelected] = useState<PaymentMethod>('card');
 
+  const dcDisabled = dcRequired !== undefined && dcBalance < dcRequired;
+
+  useEffect(() => {
+    if (dcDisabled && selected === 'dc') {
+      setSelected('card');
+    }
+  }, [dcDisabled, selected]);
+
   const stopPropagation = useCallback(
     (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
       e.stopPropagation();
@@ -29,12 +39,17 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   );
 
   const handleConfirm = useCallback(() => {
-    if (selected === 'dc') {
+    if (selected === 'dc' && !dcDisabled) {
       onPayWithDC();
     } else {
       onPayWithCard();
     }
-  }, [selected, onPayWithDC, onPayWithCard]);
+  }, [selected, dcDisabled, onPayWithDC, onPayWithCard]);
+
+  const dcSubText =
+    dcRequired !== undefined
+      ? `${dcBalance.toLocaleString()} DC available · ${dcRequired.toLocaleString()} DC needed`
+      : `${dcBalance.toLocaleString()} DC available`;
 
   return (
     <ModalPortal>
@@ -66,12 +81,13 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
 
             <RadioOption
               $selected={selected === 'dc'}
-              onPointerDown={() => setSelected('dc')}
+              $disabled={dcDisabled}
+              onPointerDown={dcDisabled ? undefined : () => setSelected('dc')}
             >
               <RadioCircle $selected={selected === 'dc'} />
               <OptionText>
                 <OptionLabel>Definya Coin</OptionLabel>
-                <OptionSub>{dcBalance.toLocaleString()} DC available</OptionSub>
+                <OptionSub>{dcSubText}</OptionSub>
               </OptionText>
             </RadioOption>
           </Options>
@@ -157,7 +173,7 @@ const Options = styled.div`
   gap: 8px;
 `;
 
-const RadioOption = styled.div<{ $selected: boolean }>`
+const RadioOption = styled.div<{ $selected: boolean; $disabled?: boolean }>`
   display: flex;
   align-items: center;
   gap: 12px;
@@ -165,11 +181,12 @@ const RadioOption = styled.div<{ $selected: boolean }>`
   border: 1px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.15)')};
   border-radius: 6px;
   background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'transparent')};
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.4 : 1)};
+  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
 
   &:hover {
-    border-color: #f59e0b;
+    border-color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b')};
   }
 `;
 

package/src/components/shared/LabelPill/LabelPill.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ILabelPillProps {
+  children: React.ReactNode;
+  background?: string;
+  borderColor?: string;
+  color?: string;
+  className?: string;
+}
+
+export const LabelPill: React.FC<ILabelPillProps> = ({
+  children,
+  background = 'rgba(255,255,255,0.08)',
+  borderColor = 'rgba(255,255,255,0.08)',
+  color = '#fff',
+  className,
+}) => {
+  return (
+    <Pill
+      className={className}
+      $background={background}
+      $borderColor={borderColor}
+      $color={color}
+    >
+      {children}
+    </Pill>
+  );
+};
+
+const Pill = styled.span<{
+  $background: string;
+  $borderColor: string;
+  $color: string;
+}>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem !important;
+  color: ${({ $color }) => $color};
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: ${({ $background }) => $background};
+  padding: 2px 6px;
+  border-radius: 8px;
+  border: 1px solid ${({ $borderColor }) => $borderColor};
+`;

package/src/components/shared/LabelPill/index.ts

@@ -0,0 +1 @@
+export * from './LabelPill';

package/src/components/shared/SegmentedToggle/SegmentedToggle.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ISegmentedToggleOption {
+  id: string;
+  label: React.ReactNode;
+}
+
+export interface ISegmentedToggleProps {
+  options: ISegmentedToggleOption[];
+  activeId: string;
+  onChange: (id: string) => void;
+  className?: string;
+}
+
+export const SegmentedToggle: React.FC<ISegmentedToggleProps> = ({
+  options,
+  activeId,
+  onChange,
+  className,
+}) => {
+  return (
+    <Container className={className}>
+      {options.map(option => (
+        <OptionButton
+          key={option.id}
+          type="button"
+          $active={option.id === activeId}
+          onClick={() => onChange(option.id)}
+        >
+          {option.label}
+        </OptionButton>
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const OptionButton = styled.button<{ $active: boolean }>`
+  border: 1px solid ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.75)' : 'rgba(255, 255, 255, 0.08)')};
+  background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.16)' : 'rgba(0, 0, 0, 0.18)')};
+  color: ${({ $active }) => ($active ? '#fde68a' : '#cfcfcf')};
+  border-radius: 999px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 0.56rem;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    border-color: rgba(245, 158, 11, 0.45);
+    color: #fde68a;
+  }
+`;

package/src/components/shared/SegmentedToggle/index.ts

@@ -0,0 +1 @@
+export * from './SegmentedToggle';

package/src/components/shared/SpriteFromAtlas.tsx

@@ -1,6 +1,10 @@
 import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
 import React from 'react';
 import styled, { css } from 'styled-components';
+import {
+  NO_IMAGE_SPRITE_KEY,
+  resolveAtlasSpriteKey,
+} from '../../utils/atlasUtils';
 import { toUppercaseHexColor } from '../../utils/colorUtils';
 
 interface IProps {
@@ -41,9 +45,10 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
 
+  const resolvedSpriteKey = resolveAtlasSpriteKey(atlasJSON, spriteKey);
   const spriteData =
-    atlasJSON?.frames?.[spriteKey] ||
-    atlasJSON?.frames?.['others/no-image.png'];
+    (resolvedSpriteKey && atlasJSON?.frames?.[resolvedSpriteKey]) ||
+    atlasJSON?.frames?.[NO_IMAGE_SPRITE_KEY];
 
   if (!spriteData) {
     console.error(

package/src/index.tsx

@@ -38,6 +38,10 @@ export * from './components/Marketplace/Marketplace';
 export * from './components/Marketplace/MarketplaceBuyModal';
 export * from './components/Marketplace/MarketplaceRows';
 export * from './components/Marketplace/MarketplaceSettingsPanel';
+export * from './components/Marketplace/BuyOrderPanel';
+export * from './components/Marketplace/BuyOrderRows';
+export * from './components/Marketplace/HistoryPanel';
+export * from './components/Marketplace/BlueprintSearchModal';
 export * from './components/Multitab/TabBody';
 export * from './components/Multitab/TabsContainer';
 export * from './components/NPCDialog/NPCDialog';