@rpg-engine/long-bow 0.8.146 → 0.8.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.146",
+  "version": "0.8.149",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "file:../rpg-shared",
+    "@rpg-engine/shared": "^0.10.90",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Marketplace/BlueprintSearchModal.tsx

@@ -3,7 +3,8 @@ import {
   IMarketplaceBlueprintSummary,
   ItemSubType,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import { debounce } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import styled, { keyframes } from 'styled-components';
 import { Dropdown } from '../Dropdown';
@@ -24,6 +25,8 @@ export interface IBlueprintSearchModalProps {
   isLoading: boolean;
   atlasJSON: any;
   atlasIMG: any;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
 }
 
 const BLUEPRINTS_PER_PAGE = 10;
@@ -58,27 +61,49 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
   isLoading,
   atlasJSON,
   atlasIMG,
+  enableHotkeys,
+  disableHotkeys,
 }) => {
   const [searchName, setSearchName] = useState('');
   const [selectedType, setSelectedType] = useState('');
   const [selectedSubType, setSelectedSubType] = useState('');
 
-  if (!isOpen) return null;
+  const searchNameRef = useRef(searchName);
+  const selectedTypeRef = useRef(selectedType);
+  const selectedSubTypeRef = useRef(selectedSubType);
+
+  searchNameRef.current = searchName;
+  selectedTypeRef.current = selectedType;
+  selectedSubTypeRef.current = selectedSubType;
+
+  const triggerSearch = useCallback(
+    (overrides?: Partial<{ name: string; itemType: string; itemSubType: string; page: number }>): void => {
+      onSearch({
+        npcId: '',
+        name: overrides?.name ?? searchNameRef.current,
+        itemType: overrides?.itemType ?? selectedTypeRef.current,
+        itemSubType: overrides?.itemSubType ?? selectedSubTypeRef.current,
+        page: overrides?.page ?? 1,
+        limit: BLUEPRINTS_PER_PAGE,
+      });
+    },
+    [onSearch]
+  );
 
-  const triggerSearch = (overrides?: Partial<{ name: string; itemType: string; itemSubType: string; page: number }>): void => {
-    onSearch({
-      npcId: '',
-      name: overrides?.name ?? searchName,
-      itemType: overrides?.itemType ?? selectedType,
-      itemSubType: overrides?.itemSubType ?? selectedSubType,
-      page: overrides?.page ?? 1,
-      limit: BLUEPRINTS_PER_PAGE,
-    });
-  };
+  const debouncedNameSearch = useMemo(
+    () => debounce((name: string) => triggerSearch({ name, page: 1 }), 300),
+    [triggerSearch]
+  );
+
+  useEffect(() => {
+    return () => { debouncedNameSearch.cancel(); };
+  }, [debouncedNameSearch]);
+
+  if (!isOpen) return null;
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchName(e.target.value);
-    triggerSearch({ name: e.target.value, page: 1 });
+    debouncedNameSearch(e.target.value);
   };
 
   const handleTypeChange = (value: string): void => {
@@ -126,6 +151,8 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
               value={searchName}
               onChange={handleNameChange}
               placeholder="Search by name..."
+              onFocus={disableHotkeys}
+              onBlur={enableHotkeys}
             />
           </InputWrapper>
 
@@ -145,17 +172,22 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
           </FiltersRow>
 
           <ResultsWrapper>
-            {isLoading ? (
-              <EmptyState>Loading...</EmptyState>
-            ) : blueprints.length === 0 ? (
-              <EmptyState>No blueprints found</EmptyState>
+            {blueprints.length === 0 && !isLoading ? (
+              <EmptyState>No items found</EmptyState>
             ) : (
-              <BlueprintTable
-                blueprints={blueprints}
-                atlasJSON={atlasJSON}
-                atlasIMG={atlasIMG}
-                onSelect={onSelect}
-              />
+              <ResultsContent $dimmed={isLoading}>
+                <BlueprintTable
+                  blueprints={blueprints}
+                  atlasJSON={atlasJSON}
+                  atlasIMG={atlasIMG}
+                  onSelect={onSelect}
+                />
+              </ResultsContent>
+            )}
+            {isLoading && (
+              <LoadingOverlay>
+                <LoadingText>Loading...</LoadingText>
+              </LoadingOverlay>
             )}
           </ResultsWrapper>
 
@@ -268,18 +300,40 @@ const StyledDropdown = styled(Dropdown)`
 `;
 
 const ResultsWrapper = styled.div`
+  position: relative;
   overflow-y: auto;
-  max-height: 320px;
+  height: 320px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
 `;
 
+const ResultsContent = styled.div<{ $dimmed?: boolean }>`
+  opacity: ${(p) => (p.$dimmed ? 0.4 : 1)};
+  transition: opacity 0.15s ease;
+`;
+
+const LoadingOverlay = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+`;
+
+const LoadingText = styled.span`
+  font-size: 0.55rem;
+  color: #f59e0b;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
 const EmptyState = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100px;
+  height: 100%;
   font-size: 0.55rem;
   color: #666;
   text-transform: uppercase;

package/src/components/Marketplace/BuyOrderDetailsModal.tsx

@@ -25,6 +25,8 @@ export interface IBuyOrderDetailsModalProps {
   onConfirm: () => void;
   atlasJSON: any;
   atlasIMG: any;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
 }
 
 const scaleIn = keyframes`
@@ -53,6 +55,8 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
   onConfirm,
   atlasJSON,
   atlasIMG,
+  enableHotkeys,
+  disableHotkeys,
 }) => {
   if (!isOpen || !blueprint) return null;
 
@@ -107,6 +111,8 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
                 placeholder="Qty"
                 type="number"
                 min={1}
+                onFocus={disableHotkeys}
+                onBlur={enableHotkeys}
               />
             </FieldRow>
 
@@ -118,6 +124,8 @@ export const BuyOrderDetailsModal: React.FC<IBuyOrderDetailsModalProps> = ({
                 placeholder="Max gold"
                 type="number"
                 min={1}
+                onFocus={disableHotkeys}
+                onBlur={enableHotkeys}
               />
             </FieldRow>
 

package/src/components/Marketplace/BuyOrderPanel.tsx

@@ -1,12 +1,14 @@
 import {
   IMarketplaceBlueprintSummary,
   IMarketplaceBuyOrderItem,
+  MarketplaceBuyOrderStatus,
 } from '@rpg-engine/shared';
 import { Search } from 'pixelarticons/react/Search';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Pager } from '../Pager';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { SegmentedToggle } from '../shared/SegmentedToggle';
 import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { BuyOrderDetailsModal } from './BuyOrderDetailsModal';
@@ -31,6 +33,8 @@ export interface IBuyOrderPanelProps {
   yourBuyOrdersPage: number;
   onYourBuyOrdersPageChange: (page: number) => void;
   onCancelBuyOrder: (buyOrderId: string) => void;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
 }
 
 const BUY_ORDERS_PER_PAGE = 5;
@@ -54,6 +58,8 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
     yourBuyOrdersPage,
     onYourBuyOrdersPageChange,
     onCancelBuyOrder,
+    enableHotkeys,
+    disableHotkeys,
   } = props;
 
   // Local blueprint display: cleared immediately on Place Request so the
@@ -61,6 +67,7 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
   // the prop. Cancel keeps it shown so the user can reopen the modal.
   const [displayedBlueprint, setDisplayedBlueprint] = useState(selectedBlueprint);
   const [isDetailsOpen, setIsDetailsOpen] = useState(!!selectedBlueprint);
+  const [statusFilter, setStatusFilter] = useState<'Active' | 'Fulfilled' | 'Expired' | 'All'>('Active');
 
   // Sync when consumer provides a new blueprint (e.g. after search selection)
   useEffect(() => {
@@ -76,11 +83,13 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
     setDisplayedBlueprint(undefined);
     setIsDetailsOpen(false);
     onCloseDetails?.();
+    enableHotkeys?.();
   };
 
   // Cancel: just close the modal, keep blueprint displayed for reopening
   const handleCloseDetails = () => {
     setIsDetailsOpen(false);
+    enableHotkeys?.();
   };
 
   return (
@@ -100,6 +109,8 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
           onConfirm={handleConfirm}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
+          enableHotkeys={enableHotkeys}
+          disableHotkeys={disableHotkeys}
         />
       )}
 
@@ -134,23 +145,40 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
       </FormRow>
 
       {/* ── Scrollable lists ──────────────────────────────── */}
+      <FilterRow>
+        <SectionTitle>Your Buy Requests</SectionTitle>
+        <SegmentedToggle
+          options={[
+            { id: 'Active', label: 'Active' },
+            { id: 'Fulfilled', label: 'Fulfilled' },
+            { id: 'Expired', label: 'Expired' },
+            { id: 'All', label: 'All' },
+          ]}
+          activeId={statusFilter}
+          onChange={(id) => setStatusFilter(id as typeof statusFilter)}
+        />
+      </FilterRow>
       <ScrollArea id="MarketContainer">
         <Section>
-          <SectionTitle>Your Buy Requests</SectionTitle>
-          {yourBuyOrders.length === 0 ? (
-            <EmptyState>No requests yet</EmptyState>
-          ) : (
-            yourBuyOrders.map((order) => (
-              <BuyOrderRow
-                key={order._id}
-                buyOrder={order}
-                atlasJSON={atlasJSON}
-                atlasIMG={atlasIMG}
-                isOwn
-                onCancel={onCancelBuyOrder}
-              />
-            ))
-          )}
+          {(() => {
+            const filtered = statusFilter === 'All'
+              ? yourBuyOrders
+              : yourBuyOrders.filter(o => o.status === MarketplaceBuyOrderStatus[statusFilter as keyof typeof MarketplaceBuyOrderStatus]);
+            return filtered.length === 0 ? (
+              <EmptyState>No requests yet</EmptyState>
+            ) : (
+              filtered.map((order) => (
+                <BuyOrderRow
+                  key={order._id}
+                  buyOrder={order}
+                  atlasJSON={atlasJSON}
+                  atlasIMG={atlasIMG}
+                  isOwn
+                  onCancel={onCancelBuyOrder}
+                />
+              ))
+            );
+          })()}
           {yourBuyOrdersTotal > BUY_ORDERS_PER_PAGE && (
             <PagerRow>
               <Pager
@@ -188,6 +216,13 @@ const FormRow = styled.div`
   overflow: visible;
 `;
 
+const FilterRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+`;
+
 const ScrollArea = styled.div`
   display: flex;
   flex-direction: column;

package/src/components/Marketplace/BuyPanel.tsx

@@ -8,7 +8,7 @@ import {
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { AiFillCaretRight } from 'react-icons/ai';
 import { SortVertical } from 'pixelarticons/react/SortVertical';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { ConfirmModal } from '../ConfirmModal';
 import { Dropdown } from '../Dropdown';
 import { Input } from '../Input';
@@ -61,6 +61,7 @@ export interface IBuyPanelProps {
   openBuyOrdersTotal?: number;
   openBuyOrdersPage?: number;
   onOpenBuyOrdersPageChange?: (page: number) => void;
+  isLoading?: boolean;
 }
 
 export const BuyPanel: React.FC<IBuyPanelProps> = ({
@@ -90,6 +91,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   openBuyOrdersTotal = 0,
   openBuyOrdersPage = 1,
   onOpenBuyOrdersPageChange,
+  isLoading = false,
 }) => {
   const [name, setName] = useState('');
   const [showFilters, setShowFilters] = useState(false);
@@ -369,7 +371,13 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
       )}
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {!hasVisibleContent && <EmptyState>No offers match the current filters.</EmptyState>}
+        {isLoading && !hasVisibleContent && (
+          <LoadingState>
+            <Spinner />
+            <LoadingText>Loading marketplace...</LoadingText>
+          </LoadingState>
+        )}
+        {!isLoading && !hasVisibleContent && <EmptyState>No offers match the current filters.</EmptyState>}
 
         {showSellSection && (
           <MarketSection>
@@ -645,3 +653,33 @@ const StyledDropdown = styled(Dropdown)`
   margin: 0px !important;
   width: 100% !important;
 `;
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+
+const LoadingState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  height: 100%;
+  min-height: 160px;
+`;
+
+const Spinner = styled.div`
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(245, 158, 11, 0.2);
+  border-top-color: #f59e0b;
+  border-radius: 50%;
+  animation: ${spin} 0.7s linear infinite;
+`;
+
+const LoadingText = styled.span`
+  font-size: 0.48rem;
+  color: #8a8a8a;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;

package/src/components/Marketplace/HistoryPanel.tsx

@@ -160,7 +160,7 @@ export const HistoryPanel: React.FC<IHistoryPanelProps> = ({
 
               {tx.goldAmount > 0 && (
                 <PriceSection>
-                  {tx.currency === 'dc' ? (
+                  {tx.metadata?.['currency'] === 'dc' ? (
                     // Show DC only
                     <DCPriceRow>
                       {atlasIMG && atlasJSON && (

package/src/components/Marketplace/Marketplace.tsx

@@ -65,6 +65,7 @@ export interface IMarketPlaceProps {
   acceptedCurrency?: MarketplaceAcceptedCurrency;
   onAcceptedCurrencyChange?: (value: MarketplaceAcceptedCurrency) => void;
   onActiveTabChange?: (tab: string) => void;
+  isLoading?: boolean;
 
   // Buy Order props
   buyOrderSelectedBlueprint?: IMarketplaceBlueprintSummary;
@@ -164,6 +165,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
 
   const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
     setIsBlueprintSearchOpen(false);
+    props.enableHotkeys?.();
     onBlueprintSelect?.(blueprint);
   };
 
@@ -239,10 +241,12 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
             yourBuyOrdersPage={yourBuyOrdersPage}
             onYourBuyOrdersPageChange={onYourBuyOrdersPageChange ?? (() => {})}
             onCancelBuyOrder={onCancelBuyOrder ?? (() => {})}
+            enableHotkeys={props.enableHotkeys}
+            disableHotkeys={props.disableHotkeys}
           />
           <BlueprintSearchModal
             isOpen={isBlueprintSearchOpen}
-            onClose={() => setIsBlueprintSearchOpen(false)}
+            onClose={() => { setIsBlueprintSearchOpen(false); props.enableHotkeys?.(); }}
             onSelect={handleBlueprintSelect}
             onSearch={onBlueprintSearch ?? (() => {})}
             blueprints={blueprintSearchResults}
@@ -251,6 +255,8 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
             isLoading={blueprintSearchIsLoading}
             atlasJSON={props.atlasJSON}
             atlasIMG={props.atlasIMG}
+            enableHotkeys={props.enableHotkeys}
+            disableHotkeys={props.disableHotkeys}
           />
         </>
       )}

package/src/stories/Features/marketplace/HistoryPanel.stories.tsx

@@ -41,7 +41,7 @@ const mockTransactions: IMarketplaceTransaction[] = [
     itemKey: 'items/iron-sword.png',
     itemName: 'Iron Sword',
     counterpartName: 'SomePlayer',
-    currency: 'gold',
+    metadata: { currency: 'gold' },
     createdAt: daysAgo(0),
     updatedAt: daysAgo(0),
   },
@@ -52,7 +52,7 @@ const mockTransactions: IMarketplaceTransaction[] = [
     itemKey: 'items/leather-armor.png',
     itemName: 'Leather Armor',
     counterpartName: 'AnotherPlayer',
-    currency: 'dc', // DC sale
+    metadata: { currency: 'dc' },
     createdAt: daysAgo(1),
     updatedAt: daysAgo(1),
   },
@@ -63,7 +63,7 @@ const mockTransactions: IMarketplaceTransaction[] = [
     itemKey: 'items/angelic-sword.png',
     itemName: 'Angelic Sword',
     counterpartName: 'DCBuyer',
-    currency: 'dc', // DC purchase
+    metadata: { currency: 'dc' },
     createdAt: daysAgo(2),
     updatedAt: daysAgo(2),
   },

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -49,9 +49,9 @@ const mockOpenBuyOrders: IMarketplaceBuyOrderItem[] = [
 ];
 
 const mockTransactions: IMarketplaceTransaction[] = [
-  { owner: 'player-1', type: MarketplaceTransactionType.Purchase, goldAmount: 450, itemKey: 'items/broad-sword', itemName: 'Broad Sword', counterpartName: 'MerchantKing', currency: 'gold', createdAt: daysAgo(1), updatedAt: daysAgo(1) },
-  { owner: 'player-1', type: MarketplaceTransactionType.Sale, goldAmount: 1200, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', counterpartName: 'ShadowBlade', currency: 'dc', createdAt: daysAgo(2), updatedAt: daysAgo(2) },
-  { owner: 'player-1', type: MarketplaceTransactionType.Purchase, goldAmount: 275000, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', counterpartName: 'DCBuyer', currency: 'dc', createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { owner: 'player-1', type: MarketplaceTransactionType.Purchase, goldAmount: 450, itemKey: 'items/broad-sword', itemName: 'Broad Sword', counterpartName: 'MerchantKing', metadata: { currency: 'gold' }, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { owner: 'player-1', type: MarketplaceTransactionType.Sale, goldAmount: 1200, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', counterpartName: 'ShadowBlade', metadata: { currency: 'dc' }, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  { owner: 'player-1', type: MarketplaceTransactionType.Purchase, goldAmount: 275000, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', counterpartName: 'DCBuyer', metadata: { currency: 'dc' }, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
   { owner: 'player-1', type: MarketplaceTransactionType.ListingFee, goldAmount: 60, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', createdAt: daysAgo(2), updatedAt: daysAgo(2) },
   { owner: 'player-1', type: MarketplaceTransactionType.Withdrawal, goldAmount: 3200, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
   { owner: 'player-1', type: MarketplaceTransactionType.Expired, goldAmount: 0, itemKey: 'items/leather-armor', itemName: 'Leather Armor', createdAt: daysAgo(7), updatedAt: daysAgo(7) },