@rpg-engine/long-bow 0.8.145 → 0.8.148

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 from 'react';
+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,25 +58,48 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
     yourBuyOrdersPage,
     onYourBuyOrdersPageChange,
     onCancelBuyOrder,
+    enableHotkeys,
+    disableHotkeys,
   } = props;
 
+  // Local blueprint display: cleared immediately on Place Request so the
+  // panel returns to "Select Item" without waiting for the consumer to update
+  // 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(() => {
+    if (selectedBlueprint) {
+      setDisplayedBlueprint(selectedBlueprint);
+      setIsDetailsOpen(true);
+    }
+  }, [selectedBlueprint]);
+
+  // Place request: clear display + close modal, then notify consumer
   const handleConfirm = () => {
     onPlaceBuyOrder();
+    setDisplayedBlueprint(undefined);
+    setIsDetailsOpen(false);
     onCloseDetails?.();
+    enableHotkeys?.();
   };
 
+  // Cancel: just close the modal, keep blueprint displayed for reopening
   const handleCloseDetails = () => {
-    onCloseDetails?.();
+    setIsDetailsOpen(false);
+    enableHotkeys?.();
   };
 
   return (
     <PanelWrapper>
       {/* ── Details modal ── */}
-      {selectedBlueprint && (
+      {displayedBlueprint && isDetailsOpen && (
         <BuyOrderDetailsModal
           isOpen
           onClose={handleCloseDetails}
-          blueprint={selectedBlueprint}
+          blueprint={displayedBlueprint}
           quantity={currentQuantity}
           maxPrice={currentMaxPrice}
           rarity={selectedRarity}
@@ -82,18 +109,20 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
           onConfirm={handleConfirm}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
+          enableHotkeys={enableHotkeys}
+          disableHotkeys={disableHotkeys}
         />
       )}
 
       {/* ── Form row — outside scroll so dropdown isn't clipped ── */}
       <FormRow>
-        {selectedBlueprint ? (
+        {displayedBlueprint ? (
           <SelectedBlueprintDisplay onPointerDown={onOpenBlueprintSearch}>
             <RarityContainer $rarity={selectedRarity}>
               <SpriteFromAtlas
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
-                spriteKey={selectedBlueprint.texturePath || selectedBlueprint.key}
+                spriteKey={displayedBlueprint.texturePath || displayedBlueprint.key}
                 width={32}
                 height={32}
                 imgScale={2}
@@ -101,7 +130,7 @@ export const BuyOrderPanel: React.FC<IBuyOrderPanelProps> = (props) => {
               />
             </RarityContainer>
             <ChangeTextWrapper>
-              <BlueprintName>{selectedBlueprint.name}</BlueprintName>
+              <BlueprintName>{displayedBlueprint.name}</BlueprintName>
               <ChangeText>change</ChangeText>
             </ChangeTextWrapper>
           </SelectedBlueprintDisplay>
@@ -116,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
@@ -170,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/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

@@ -164,6 +164,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
 
   const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
     setIsBlueprintSearchOpen(false);
+    props.enableHotkeys?.();
     onBlueprintSelect?.(blueprint);
   };
 
@@ -239,10 +240,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 +254,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/BuyOrderPanel.stories.tsx

@@ -1,10 +1,12 @@
 import {
+  IMarketplaceBlueprintSearchRequest,
   IMarketplaceBlueprintSummary,
   IMarketplaceBuyOrderItem,
   MarketplaceBuyOrderStatus,
 } from '@rpg-engine/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { BlueprintSearchModal } from '../../../components/Marketplace/BlueprintSearchModal';
 import { BuyOrderPanel } from '../../../components/Marketplace/BuyOrderPanel';
 import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
 import atlasJSON from '../../../mocks/atlas/items/items.json';
@@ -44,6 +46,36 @@ const mockSelectedBlueprint: IMarketplaceBlueprintSummary = {
   texturePath: 'swords/broad-sword.png',
 };
 
+const mockBlueprintSearchResults: IMarketplaceBlueprintSummary[] = [
+  {
+    key: 'items/broad-sword',
+    name: 'Broad Sword',
+    type: 'Weapon',
+    subType: 'Sword',
+    tier: 1,
+    textureAtlas: 'items',
+    texturePath: 'swords/broad-sword.png',
+  },
+  {
+    key: 'items/angelic-sword',
+    name: 'Angelic Sword',
+    type: 'Weapon',
+    subType: 'Sword',
+    tier: 5,
+    textureAtlas: 'items',
+    texturePath: 'swords/angelic-sword.png',
+  },
+  {
+    key: 'items/leather-armor',
+    name: 'Leather Armor',
+    type: 'Armor',
+    subType: 'Body',
+    tier: 1,
+    textureAtlas: 'items',
+    texturePath: 'armors/leather-armor.png',
+  },
+];
+
 const mockBuyOrders: IMarketplaceBuyOrderItem[] = [
   {
     _id: 'order-1',
@@ -84,113 +116,197 @@ const mockBuyOrders: IMarketplaceBuyOrderItem[] = [
 
 const DefaultWrapper = () => {
   const [selectedBlueprint, setSelectedBlueprint] = useState<IMarketplaceBlueprintSummary | undefined>();
+  const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
   const [quantity, setQuantity] = useState(0);
   const [maxPrice, setMaxPrice] = useState(0);
   const [rarity, setRarity] = useState('');
   const [yourOrders, setYourOrders] = useState<IMarketplaceBuyOrderItem[]>(mockBuyOrders);
 
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    setSelectedBlueprint(blueprint);
+  };
+
   return (
-    <BuyOrderPanel
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
-      selectedBlueprint={selectedBlueprint}
-      onOpenBlueprintSearch={() => setSelectedBlueprint(mockSelectedBlueprint)}
-      onCloseDetails={() => {
-        setSelectedBlueprint(undefined);
-        setQuantity(0);
-        setMaxPrice(0);
-        setRarity('');
-      }}
-      onQuantityChange={setQuantity}
-      onMaxPriceChange={setMaxPrice}
-      onRarityChange={setRarity}
-      onPlaceBuyOrder={() => {
-        if (selectedBlueprint) {
-          const newOrder: IMarketplaceBuyOrderItem = {
-            _id: `order-${Date.now()}`,
-            owner: 'character-1',
-            itemBlueprintKey: selectedBlueprint.key,
-            itemRarity: rarity as any,
-            maxPrice,
-            escrowedGold: maxPrice,
-            fee: Math.floor(maxPrice * 0.05),
-            status: MarketplaceBuyOrderStatus.Active,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-          };
-          setYourOrders(prev => [newOrder, ...prev]);
-        }
-      }}
-      currentQuantity={quantity}
-      currentMaxPrice={maxPrice}
-      selectedRarity={rarity}
-      yourBuyOrders={yourOrders}
-      yourBuyOrdersTotal={yourOrders.length}
-      yourBuyOrdersPage={1}
-      onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
-      onCancelBuyOrder={(id) => setYourOrders(prev => prev.filter(o => o._id !== id))}
-    />
+    <>
+      <BuyOrderPanel
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        selectedBlueprint={selectedBlueprint}
+        onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+        onCloseDetails={() => {
+          setSelectedBlueprint(undefined);
+          setQuantity(0);
+          setMaxPrice(0);
+          setRarity('');
+        }}
+        onQuantityChange={setQuantity}
+        onMaxPriceChange={setMaxPrice}
+        onRarityChange={setRarity}
+        onPlaceBuyOrder={() => {
+          if (selectedBlueprint) {
+            const newOrder: IMarketplaceBuyOrderItem = {
+              _id: `order-${Date.now()}`,
+              owner: 'character-1',
+              itemBlueprintKey: selectedBlueprint.key,
+              itemRarity: rarity as any,
+              maxPrice,
+              escrowedGold: maxPrice,
+              fee: Math.floor(maxPrice * 0.05),
+              status: MarketplaceBuyOrderStatus.Active,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            };
+            setYourOrders(prev => [newOrder, ...prev]);
+          }
+        }}
+        currentQuantity={quantity}
+        currentMaxPrice={maxPrice}
+        selectedRarity={rarity}
+        yourBuyOrders={yourOrders}
+        yourBuyOrdersTotal={yourOrders.length}
+        yourBuyOrdersPage={1}
+        onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
+        onCancelBuyOrder={(id) => setYourOrders(prev => prev.filter(o => o._id !== id))}
+      />
+      <BlueprintSearchModal
+        isOpen={isBlueprintSearchOpen}
+        onClose={() => setIsBlueprintSearchOpen(false)}
+        onSelect={handleBlueprintSelect}
+        onSearch={(req: IMarketplaceBlueprintSearchRequest) => console.log('search:', req)}
+        blueprints={mockBlueprintSearchResults}
+        totalCount={mockBlueprintSearchResults.length}
+        currentPage={1}
+        isLoading={false}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+      />
+    </>
   );
 };
 
 const WithBlueprintWrapper = () => {
   const [selectedBlueprint, setSelectedBlueprint] = useState<IMarketplaceBlueprintSummary | undefined>(mockSelectedBlueprint);
+  const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
   const [quantity, setQuantity] = useState(0);
   const [maxPrice, setMaxPrice] = useState(0);
   const [rarity, setRarity] = useState('');
   const [yourOrders, setYourOrders] = useState<IMarketplaceBuyOrderItem[]>(mockBuyOrders);
 
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    setSelectedBlueprint(blueprint);
+  };
+
   return (
-    <BuyOrderPanel
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
-      selectedBlueprint={selectedBlueprint}
-      onOpenBlueprintSearch={() => setSelectedBlueprint(mockSelectedBlueprint)}
-      onCloseDetails={() => {
-        setSelectedBlueprint(undefined);
-        setQuantity(0);
-        setMaxPrice(0);
-        setRarity('');
-      }}
-      onQuantityChange={setQuantity}
-      onMaxPriceChange={setMaxPrice}
-      onRarityChange={setRarity}
-      onPlaceBuyOrder={() => console.log('place order')}
-      currentQuantity={quantity}
-      currentMaxPrice={maxPrice}
-      selectedRarity={rarity}
-      yourBuyOrders={yourOrders}
-      yourBuyOrdersTotal={yourOrders.length}
-      yourBuyOrdersPage={1}
-      onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
-      onCancelBuyOrder={(id) => setYourOrders(prev => prev.filter(o => o._id !== id))}
-    />
+    <>
+      <BuyOrderPanel
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        selectedBlueprint={selectedBlueprint}
+        onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+        onCloseDetails={() => {
+          setSelectedBlueprint(undefined);
+          setQuantity(0);
+          setMaxPrice(0);
+          setRarity('');
+        }}
+        onQuantityChange={setQuantity}
+        onMaxPriceChange={setMaxPrice}
+        onRarityChange={setRarity}
+        onPlaceBuyOrder={() => {
+          if (selectedBlueprint) {
+            const newOrder: IMarketplaceBuyOrderItem = {
+              _id: `order-${Date.now()}`,
+              owner: 'character-1',
+              itemBlueprintKey: selectedBlueprint.key,
+              itemRarity: rarity as any,
+              maxPrice,
+              escrowedGold: maxPrice,
+              fee: Math.floor(maxPrice * 0.05),
+              status: MarketplaceBuyOrderStatus.Active,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            };
+            setYourOrders(prev => [newOrder, ...prev]);
+          }
+        }}
+        currentQuantity={quantity}
+        currentMaxPrice={maxPrice}
+        selectedRarity={rarity}
+        yourBuyOrders={yourOrders}
+        yourBuyOrdersTotal={yourOrders.length}
+        yourBuyOrdersPage={1}
+        onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
+        onCancelBuyOrder={(id) => setYourOrders(prev => prev.filter(o => o._id !== id))}
+      />
+      <BlueprintSearchModal
+        isOpen={isBlueprintSearchOpen}
+        onClose={() => setIsBlueprintSearchOpen(false)}
+        onSelect={handleBlueprintSelect}
+        onSearch={(req: IMarketplaceBlueprintSearchRequest) => console.log('search:', req)}
+        blueprints={mockBlueprintSearchResults}
+        totalCount={mockBlueprintSearchResults.length}
+        currentPage={1}
+        isLoading={false}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+      />
+    </>
   );
 };
 
 const EmptyWrapper = () => {
+  const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
+  const [selectedBlueprint, setSelectedBlueprint] = useState<IMarketplaceBlueprintSummary | undefined>();
   const [quantity, setQuantity] = useState(0);
   const [maxPrice, setMaxPrice] = useState(0);
   const [rarity, setRarity] = useState('');
 
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    setSelectedBlueprint(blueprint);
+  };
+
   return (
-    <BuyOrderPanel
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
-      onOpenBlueprintSearch={() => console.log('Opening blueprint search...')}
-      onQuantityChange={setQuantity}
-      onMaxPriceChange={setMaxPrice}
-      onRarityChange={setRarity}
-      onPlaceBuyOrder={() => console.log('place order')}
-      currentQuantity={quantity}
-      currentMaxPrice={maxPrice}
-      selectedRarity={rarity}
-      yourBuyOrders={[]}
-      yourBuyOrdersTotal={0}
-      yourBuyOrdersPage={1}
-      onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
-      onCancelBuyOrder={(id) => console.log('Cancel:', id)}
-    />
+    <>
+      <BuyOrderPanel
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        selectedBlueprint={selectedBlueprint}
+        onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+        onCloseDetails={() => {
+          setSelectedBlueprint(undefined);
+          setQuantity(0);
+          setMaxPrice(0);
+          setRarity('');
+        }}
+        onQuantityChange={setQuantity}
+        onMaxPriceChange={setMaxPrice}
+        onRarityChange={setRarity}
+        onPlaceBuyOrder={() => console.log('place order')}
+        currentQuantity={quantity}
+        currentMaxPrice={maxPrice}
+        selectedRarity={rarity}
+        yourBuyOrders={[]}
+        yourBuyOrdersTotal={0}
+        yourBuyOrdersPage={1}
+        onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
+        onCancelBuyOrder={(id) => console.log('Cancel:', id)}
+      />
+      <BlueprintSearchModal
+        isOpen={isBlueprintSearchOpen}
+        onClose={() => setIsBlueprintSearchOpen(false)}
+        onSelect={handleBlueprintSelect}
+        onSearch={(req: IMarketplaceBlueprintSearchRequest) => console.log('search:', req)}
+        blueprints={mockBlueprintSearchResults}
+        totalCount={mockBlueprintSearchResults.length}
+        currentPage={1}
+        isLoading={false}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+      />
+    </>
   );
 };
 

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) },
@@ -69,6 +69,7 @@ const Template: Story = () => {
   const [blueprintResults, setBlueprintResults] = React.useState<IMarketplaceBlueprintSummary[]>([]);
   const [blueprintLoading, setBlueprintLoading] = React.useState(false);
   const [historyType, setHistoryType] = React.useState('All');
+  const [yourBuyOrders, setYourBuyOrders] = React.useState<IMarketplaceBuyOrderItem[]>(mockYourBuyOrders);
 
   const handleBlueprintSearch = (request: any) => {
     console.log('blueprint search:', request);
@@ -132,12 +133,34 @@ const Template: Story = () => {
         onBuyOrderQuantityChange={setQuantity}
         onBuyOrderMaxPriceChange={setMaxPrice}
         onBuyOrderRarityChange={setSelectedRarity}
-        onPlaceBuyOrder={() => console.log('place buy order:', selectedBlueprint?.name, quantity, maxPrice, selectedRarity)}
-        yourBuyOrders={mockYourBuyOrders}
-        yourBuyOrdersTotal={mockYourBuyOrders.length}
+        onPlaceBuyOrder={() => {
+          if (selectedBlueprint) {
+            const newOrder: IMarketplaceBuyOrderItem = {
+              _id: `bo-${Date.now()}`,
+              owner: 'player-1',
+              itemBlueprintKey: selectedBlueprint.key,
+              itemRarity: selectedRarity as any,
+              maxPrice,
+              escrowedGold: maxPrice,
+              fee: Math.floor(maxPrice * 0.05),
+              status: MarketplaceBuyOrderStatus.Active,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            };
+            setYourBuyOrders(prev => [newOrder, ...prev]);
+          }
+        }}
+        onClearBuyOrderBlueprint={() => {
+          setSelectedBlueprint(undefined);
+          setQuantity(1);
+          setMaxPrice(0);
+          setSelectedRarity('');
+        }}
+        yourBuyOrders={yourBuyOrders}
+        yourBuyOrdersTotal={yourBuyOrders.length}
         yourBuyOrdersPage={1}
         onYourBuyOrdersPageChange={p => console.log('your orders page:', p)}
-        onCancelBuyOrder={id => console.log('cancel order:', id)}
+        onCancelBuyOrder={id => setYourBuyOrders(prev => prev.filter(o => o._id !== id))}
         openBuyOrders={mockOpenBuyOrders}
         openBuyOrdersTotal={mockOpenBuyOrders.length}
         openBuyOrdersPage={1}