@rpg-engine/long-bow 0.8.155 → 0.8.157

package/src/components/Marketplace/Marketplace.tsx

@@ -12,12 +12,14 @@ 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 { Wallet } from 'pixelarticons/react/Wallet';
 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 { DCWalletContent, IDCWalletContentProps } from '../DCWallet/DCWalletContent';
 import { BlueprintSearchModal } from './BlueprintSearchModal';
 import { BuyOrderPanel } from './BuyOrderPanel';
 import { BuyPanel } from './BuyPanel';
@@ -46,6 +48,7 @@ export interface IMarketPlaceProps {
   equipmentSet?: IEquipmentSet | null;
   onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
   onFulfillBuyOrder?: (buyOrderId: string) => void;
+  onDCCoinClick?: () => void;
   onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
   availableGold: number;
   selectedItemToSell: IItem | null;
@@ -103,9 +106,12 @@ export interface IMarketPlaceProps {
   historySelectedType?: string;
   onHistoryTypeChange?: (type: string) => void;
   onHistoryPageChange?: (page: number) => void;
+
+  // Wallet tab
+  walletProps?: IDCWalletContentProps;
 }
 
-type ActiveTab = 'marketplace' | 'sell' | 'buy-orders' | 'history' | 'settings';
+type ActiveTab = 'marketplace' | 'sell' | 'buy-orders' | 'history' | 'wallet' | 'settings';
 
 export const Marketplace: React.FC<IMarketPlaceProps> = props => {
   const {
@@ -145,6 +151,8 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
     historySelectedType = 'All',
     onHistoryTypeChange,
     onHistoryPageChange,
+    // Wallet
+    walletProps,
   } = props;
 
   const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
@@ -203,6 +211,15 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
             label: 'History',
             icon: <Clock width={18} height={18} />,
           },
+          ...(walletProps
+            ? [
+                {
+                  id: 'wallet',
+                  label: 'Wallet',
+                  icon: <Wallet width={18} height={18} />,
+                },
+              ]
+            : []),
           {
             id: 'settings',
             label: 'Settings',
@@ -276,6 +293,10 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
         />
       )}
 
+      {activeTab === 'wallet' && walletProps && (
+        <DCWalletContent {...walletProps} />
+      )}
+
       {activeTab === 'settings' && (
         <MarketplaceSettingsPanel
           acceptedCurrency={acceptedCurrency}

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -28,6 +28,7 @@ export interface IMarketPlaceRowsPropos {
   scale?: number;
   onMarketPlaceItemBuy?: () => void;
   onMarketPlaceItemRemove?: () => void;
+  onDCCoinClick?: () => void;
   disabled?: boolean;
 }
 
@@ -41,6 +42,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   scale,
   onMarketPlaceItemBuy,
   onMarketPlaceItemRemove,
+  onDCCoinClick,
   disabled,
 }) => {
   const renderGems = (item: IItem) => {
@@ -105,9 +107,9 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
               <GoldPrice>{itemPrice}</GoldPrice>
             </GoldPriceRow>
             {dcEquivalentPrice !== undefined && (
-              <DCPriceRow>
+              <DCPriceRow $clickable={!!onDCCoinClick} onPointerDown={onDCCoinClick}>
                 <DCCoinWrapper>
-                  <SimpleTooltip content="Definya Coin" direction="top">
+                  <SimpleTooltip content={onDCCoinClick ? 'Buy Definya Coin' : 'Definya Coin'} direction="top">
                     <SpriteFromAtlas
                       atlasIMG={atlasIMG}
                       atlasJSON={atlasJSON}
@@ -150,6 +152,7 @@ export interface IGroupedMarketplaceRowProps {
   getDCEquivalentPrice: (goldPrice: number) => number;
   characterId: string;
   onBuy: (id: string) => void;
+  onDCCoinClick?: () => void;
 }
 
 export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
@@ -162,6 +165,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
   getDCEquivalentPrice,
   characterId,
   onBuy,
+  onDCCoinClick,
 }) => {
   const [expanded, setExpanded] = useState(false);
   const totalOffers = otherListings.length + 1;
@@ -185,6 +189,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
           }
           equipmentSet={equipmentSet}
           onMarketPlaceItemBuy={() => onBuy(bestListing._id)}
+          onDCCoinClick={onDCCoinClick}
           disabled={bestListing.owner === characterId}
         />
         {hasMultiple && (
@@ -211,6 +216,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
               }
               equipmentSet={equipmentSet}
               onMarketPlaceItemBuy={() => onBuy(listing._id)}
+              onDCCoinClick={onDCCoinClick}
               disabled={listing.owner === characterId}
             />
           ))}
@@ -347,11 +353,18 @@ const GoldPrice = styled.span`
   line-height: 1;
 `;
 
-const DCPriceRow = styled.div`
+const DCPriceRow = styled.div<{ $clickable?: boolean }>`
   display: flex;
   align-items: center;
   gap: 0.3rem;
   margin-left: 0.5rem;
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  border-radius: 4px;
+  transition: opacity 0.15s;
+
+  &:hover {
+    opacity: ${({ $clickable }) => ($clickable ? '0.75' : '1')};
+  }
 `;
 
 const DCCoinWrapper = styled.span`

package/src/components/shared/Tabs/Tabs.tsx

@@ -32,7 +32,7 @@ export const Tabs: React.FC<ITabsProps> = ({ options, activeTabId, onTabChange,
 
 const TabsContainer = styled.div`
   display: flex;
-  gap: 15px;
+  gap: 10px;
   width: 95%;
   margin: 0 auto 15px auto;
   border-bottom: 2px solid rgba(255, 255, 255, 0.1);
@@ -42,18 +42,19 @@ const TabsContainer = styled.div`
 const TabButton = styled.button<{ $active: boolean }>`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 5px;
   background: transparent;
   border: none;
   border-bottom: ${({ $active }) => ($active ? '3px solid #f59e0b' : '3px solid transparent')};
   color: ${({ $active }) => ($active ? '#ffffff' : '#888888')};
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.70rem;
-  letter-spacing: 1px;
+  font-size: 0.60rem;
+  letter-spacing: 0.5px;
   cursor: pointer;
-  padding: 5px 10px 10px 10px;
+  padding: 5px 7px 10px 7px;
   transition: color 0.2s, border-bottom 0.2s;
-  
+  white-space: nowrap;
+
   &:hover {
     color: #ffffff;
   }

package/src/index.tsx

@@ -11,6 +11,7 @@ export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
 export * from './components/DailyTasks/DailyTasks';
+export * from './components/DCWallet/DCWalletContent';
 export * from './components/DCWallet/DCWalletModal';
 export * from './components/LoginStreak/LoginStreakPanel';
 export * from './components/DPad/JoystickDPad';

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

@@ -46,6 +46,11 @@ const mockOpenBuyOrders: IMarketplaceBuyOrderItem[] = [
   { _id: 'obo-1', owner: 'player-2', itemBlueprintKey: 'items/abyssal-tide-staff', itemRarity: 'Epic', maxPrice: 1500, escrowedGold: 1500, fee: 75, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
   { _id: 'obo-2', owner: 'player-3', itemBlueprintKey: 'items/wooden-shield', maxPrice: 200, escrowedGold: 200, fee: 10, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(5), updatedAt: daysAgo(5) },
   { _id: 'obo-3', owner: 'player-4', itemBlueprintKey: 'items/fire-wand', itemRarity: 'Rare', maxPrice: 800, escrowedGold: 800, fee: 40, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  { _id: 'obo-4', owner: 'player-5', itemBlueprintKey: 'items/broad-sword', maxPrice: 350, escrowedGold: 350, fee: 17, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { _id: 'obo-5', owner: 'player-6', itemBlueprintKey: 'items/barbarian-helmet', itemRarity: 'Uncommon', maxPrice: 600, escrowedGold: 600, fee: 30, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { _id: 'obo-6', owner: 'player-7', itemBlueprintKey: 'items/leather-armor', maxPrice: 420, escrowedGold: 420, fee: 21, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
+  { _id: 'obo-7', owner: 'player-8', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Legendary', maxPrice: 5000, escrowedGold: 5000, fee: 250, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  { _id: 'obo-8', owner: 'player-9', itemBlueprintKey: 'items/greater-life-potion', maxPrice: 90, stackQty: 10, escrowedGold: 900, fee: 45, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
 ];
 
 const mockTransactions: IMarketplaceTransaction[] = [
@@ -111,6 +116,7 @@ const Template: Story = () => {
         }))}
         equipmentSet={equipmentSetMock}
         onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
+        onDCCoinClick={() => console.log('open store: packs tab')}
         onFulfillBuyOrder={buyOrderId => console.log('fulfill buy order:', buyOrderId)}
         availableGold={0}
         selectedItemToSell={null}
@@ -163,7 +169,7 @@ const Template: Story = () => {
         onYourBuyOrdersPageChange={p => console.log('your orders page:', p)}
         onCancelBuyOrder={id => setYourBuyOrders(prev => prev.filter(o => o._id !== id))}
         openBuyOrders={mockOpenBuyOrders}
-        openBuyOrdersTotal={mockOpenBuyOrders.length}
+        openBuyOrdersTotal={mockOpenBuyOrders.length} // 8 items → pagination shows (page size = 5)
         openBuyOrdersPage={1}
         onOpenBuyOrdersPageChange={(p: number) => console.log('open orders page:', p)}
         // Blueprint Search props
@@ -182,6 +188,31 @@ const Template: Story = () => {
         onHistoryTypeChange={setHistoryType}
         onHistoryPageChange={p => console.log('history page:', p)}
         onActiveTabChange={tab => console.log('tab changed:', tab)}
+        // Wallet tab
+        walletProps={{
+          dcBalance: 150,
+          historyData: {
+            transactions: [
+              { _id: 'tx-1', type: 'Purchase', amount: 100, balanceAfter: 150, createdAt: new Date(Date.now() - 1 * 86400000).toISOString() },
+              { _id: 'tx-2', type: 'Transfer', amount: -25, balanceAfter: 50, relatedCharacterName: 'DarkKnight42', createdAt: new Date(Date.now() - 2 * 86400000).toISOString() },
+              { _id: 'tx-3', type: 'MarketplaceSale', amount: 10, balanceAfter: 75, note: 'Angelic Sword', createdAt: new Date(Date.now() - 3 * 86400000).toISOString() },
+              { _id: 'tx-4', type: 'StorePurchase', amount: -50, balanceAfter: 65, createdAt: new Date(Date.now() - 5 * 86400000).toISOString() },
+              { _id: 'tx-5', type: 'Fee', amount: -2, balanceAfter: 115, createdAt: new Date(Date.now() - 7 * 86400000).toISOString() },
+            ],
+            totalPages: 1,
+            currentPage: 1,
+          },
+          historyLoading: false,
+          onRequestHistory: (page, type) => console.log('wallet history:', page, type),
+          transferLoading: false,
+          transferResult: null,
+          onSendTransfer: (name, amount) => console.log('transfer:', name, amount),
+          onClearTransferResult: () => console.log('clear transfer result'),
+          characterName: 'HeroPlayer',
+          onBuyDC: () => console.log('buy DC'),
+          onSearchCharacter: (name) => console.log('search character:', name),
+          searchResults: [],
+        }}
       />
     </RPGUIRoot>
   );