@rpg-engine/long-bow 0.8.156 → 0.8.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.156",
+  "version": "0.8.157",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/DCWallet/DCHistoryPanel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { Dropdown, IOptionsProps } from '../Dropdown';
 import { Pagination } from '../shared/Pagination/Pagination';
 
 export interface IDCTransaction {
@@ -35,16 +36,16 @@ const TRANSACTION_TYPE_COLORS: Record<string, string> = {
   AdminAdjustment: '#9ca3af', // gray  — admin
 };
 
-const TRANSACTION_TYPE_OPTIONS = [
-  { value: '', label: 'All Types' },
-  { value: 'Purchase', label: 'Purchase' },
-  { value: 'Transfer', label: 'Transfer' },
-  { value: 'MarketplaceSale', label: 'Marketplace Sale' },
-  { value: 'MarketplacePurchase', label: 'Marketplace Buy' },
-  { value: 'StorePurchase', label: 'Store Purchase' },
-  { value: 'Fee', label: 'Fee' },
-  { value: 'Refund', label: 'Refund' },
-  { value: 'AdminAdjustment', label: 'Admin Adjustment' },
+const TRANSACTION_TYPE_OPTIONS: IOptionsProps[] = [
+  { id: 1, value: '', option: 'All Types' },
+  { id: 2, value: 'Purchase', option: 'Purchase' },
+  { id: 3, value: 'Transfer', option: 'Transfer' },
+  { id: 4, value: 'MarketplaceSale', option: 'Marketplace Sale' },
+  { id: 5, value: 'MarketplacePurchase', option: 'Marketplace Buy' },
+  { id: 6, value: 'StorePurchase', option: 'Store Purchase' },
+  { id: 7, value: 'Fee', option: 'Fee' },
+  { id: 8, value: 'Refund', option: 'Refund' },
+  { id: 9, value: 'AdminAdjustment', option: 'Admin Adjustment' },
 ];
 
 export interface IDCHistoryPanelProps {
@@ -70,8 +71,7 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
-    const value = e.target.value;
+  const handleTypeChange = (value: string): void => {
     setSelectedType(value);
     onRequestHistory(1, value || undefined);
   };
@@ -88,12 +88,13 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
   return (
     <PanelContainer>
       <FilterRow>
-        <FilterLabel>Filter:</FilterLabel>
-        <TypeSelect value={selectedType} onChange={handleTypeChange}>
-          {TRANSACTION_TYPE_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>{opt.label}</option>
-          ))}
-        </TypeSelect>
+        <FilterLabel>FILTER BY TYPE</FilterLabel>
+        <StyledDropdown
+          key={selectedType}
+          options={TRANSACTION_TYPE_OPTIONS}
+          onChange={handleTypeChange}
+          width="100%"
+        />
       </FilterRow>
 
       {loading && (
@@ -154,42 +155,24 @@ const PanelContainer = styled.div`
 const FilterRow = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 2px;
+  gap: 12px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 8px 12px;
 `;
 
-const FilterLabel = styled.span`
-  font-size: 7px;
-  color: #f59e0b;
-  font-family: 'Press Start 2P', cursive;
+const FilterLabel = styled.p`
+  margin: 0;
+  font-size: 0.7rem;
+  color: #ccc;
+  text-transform: uppercase;
+  letter-spacing: 1px;
   white-space: nowrap;
 `;
 
-const TypeSelect = styled.select`
-  background: rgba(0, 0, 0, 0.7);
-  border: 1px solid rgba(245, 158, 11, 0.4);
-  border-radius: 3px;
-  color: #f59e0b;
-  font-size: 7px;
-  font-family: 'Press Start 2P', cursive;
-  padding: 3px 5px;
-  cursor: pointer;
-  outline: none;
-  flex: 1;
-
-  option {
-    background: #1a1a2e;
-    color: #f59e0b;
-  }
-
-  &:hover {
-    border-color: #f59e0b;
-  }
-
-  &:focus {
-    border-color: #f59e0b;
-    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
-  }
+const StyledDropdown = styled(Dropdown)`
+  margin: 0px !important;
 `;
 
 const TransactionList = styled.div`

package/src/components/DCWallet/DCWalletContent.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { FaShoppingCart } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { InternalTabs } from '../InternalTabs/InternalTabs';
+import { DCHistoryPanel, IDCTransaction } from './DCHistoryPanel';
+import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
+
+type WalletTabId = 'balance' | 'transfer' | 'history';
+
+export interface IDCWalletContentProps {
+  dcBalance: number;
+  historyData: { transactions: IDCTransaction[]; totalPages: number; currentPage: number } | null;
+  historyLoading: boolean;
+  onRequestHistory: (page: number, type?: string) => void;
+  transferLoading: boolean;
+  transferResult: { success: boolean; message: string } | null;
+  onSendTransfer: (recipientName: string, amount: number) => void;
+  onClearTransferResult: () => void;
+  characterName?: string;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+  onBuyDC?: () => void;
+  onSearchCharacter?: (name: string) => void;
+  searchResults?: IDCTransferCharacterResult[];
+}
+
+export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
+  dcBalance,
+  historyData,
+  historyLoading,
+  onRequestHistory,
+  transferLoading,
+  transferResult,
+  onSendTransfer,
+  onClearTransferResult,
+  characterName,
+  onInputFocus,
+  onInputBlur,
+  onBuyDC,
+  onSearchCharacter,
+  searchResults,
+}) => {
+  const [activeTab, setActiveTab] = useState<WalletTabId>('balance');
+
+  const tabs = [
+    {
+      id: 'balance',
+      title: 'Balance',
+      content: (
+        <BalanceContent>
+          <BalanceLabel>Your DC Balance</BalanceLabel>
+          <BalanceAmount>{dcBalance.toLocaleString()} DC</BalanceAmount>
+          <DCHint>Spend on the Store, buy items on the Marketplace, or transfer to any player.</DCHint>
+          {onBuyDC && (
+            <BuyButton onPointerDown={onBuyDC} title="Buy Definya Coins">
+              <FaShoppingCart />
+              <BuyButtonLabel>Buy More DC</BuyButtonLabel>
+            </BuyButton>
+          )}
+        </BalanceContent>
+      ),
+    },
+    {
+      id: 'transfer',
+      title: 'Transfer',
+      content: (
+        <DCTransferPanel
+          dcBalance={dcBalance}
+          transferLoading={transferLoading}
+          transferResult={transferResult}
+          onSendTransfer={onSendTransfer}
+          onClearTransferResult={onClearTransferResult}
+          characterName={characterName}
+          onInputFocus={onInputFocus}
+          onInputBlur={onInputBlur}
+          onSearchCharacter={onSearchCharacter}
+          searchResults={searchResults}
+        />
+      ),
+    },
+    {
+      id: 'history',
+      title: 'History',
+      content: (
+        <DCHistoryPanel
+          transactions={historyData?.transactions ?? []}
+          totalPages={historyData?.totalPages ?? 0}
+          currentPage={historyData?.currentPage ?? 1}
+          loading={historyLoading}
+          onRequestHistory={onRequestHistory}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <WalletContainer>
+      <InternalTabs
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={(tabId: string) => {
+          setActiveTab(tabId as WalletTabId);
+          if (tabId === 'history') {
+            onRequestHistory(1);
+          }
+        }}
+        activeTextColor="#000000"
+        activeColor="#fef08a"
+        inactiveColor="#6b7280"
+        borderColor="#f59e0b"
+        hoverColor="#fef3c7"
+      />
+    </WalletContainer>
+  );
+};
+
+const WalletContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 300px;
+  gap: 0.5rem;
+`;
+
+const BalanceContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 32px 16px;
+`;
+
+const BalanceLabel = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 10px;
+  color: ${uiColors.lightGray};
+`;
+
+const BalanceAmount = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 28px;
+  color: #fef08a;
+  text-shadow: 2px 2px 0 #000;
+  letter-spacing: 2px;
+`;
+
+const DCHint = styled.p`
+  margin: 0 !important;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 8px !important;
+  color: rgba(255, 255, 255, 0.4) !important;
+  text-align: center !important;
+  line-height: 1.8 !important;
+  max-width: 280px;
+`;
+
+const BuyButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 10px 20px;
+  background: #f59e0b;
+  border: none;
+  border-radius: 6px;
+  color: #000;
+  cursor: pointer;
+  font-size: 1rem;
+
+  &:hover {
+    background: #fbbf24;
+  }
+
+  &:active {
+    background: #d97706;
+  }
+`;
+
+const BuyButtonLabel = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 8px;
+`;

package/src/components/DCWallet/DCWalletModal.tsx

@@ -1,51 +1,14 @@
-import React, { useCallback, useState } from 'react';
-import { FaShoppingCart, FaTimes } from 'react-icons/fa';
+import React, { useCallback } from 'react';
+import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
 import ModalPortal from '../Abstractions/ModalPortal';
-import { InternalTabs } from '../InternalTabs/InternalTabs';
-import { DCHistoryPanel, IDCTransaction } from './DCHistoryPanel';
-import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
+import { DCWalletContent, IDCWalletContentProps } from './DCWalletContent';
 
-type WalletTabId = 'balance' | 'transfer' | 'history';
-
-export interface IDCWalletModalProps {
-  dcBalance: number;
+export interface IDCWalletModalProps extends IDCWalletContentProps {
   onClose: () => void;
-  historyData: { transactions: IDCTransaction[]; totalPages: number; currentPage: number } | null;
-  historyLoading: boolean;
-  onRequestHistory: (page: number, type?: string) => void;
-  transferLoading: boolean;
-  transferResult: { success: boolean; message: string } | null;
-  onSendTransfer: (recipientName: string, amount: number) => void;
-  onClearTransferResult: () => void;
-  characterName?: string;
-  onInputFocus?: () => void;
-  onInputBlur?: () => void;
-  onBuyDC?: () => void;
-  onSearchCharacter?: (name: string) => void;
-  searchResults?: IDCTransferCharacterResult[];
 }
 
-export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
-  dcBalance,
-  onClose,
-  historyData,
-  historyLoading,
-  onRequestHistory,
-  transferLoading,
-  transferResult,
-  onSendTransfer,
-  onClearTransferResult,
-  characterName,
-  onInputFocus,
-  onInputBlur,
-  onBuyDC,
-  onSearchCharacter,
-  searchResults,
-}) => {
-  const [activeTab, setActiveTab] = useState<WalletTabId>('balance');
-
+export const DCWalletModal: React.FC<IDCWalletModalProps> = ({ onClose, ...contentProps }) => {
   const stopPropagation = useCallback(
     (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
       e.stopPropagation();
@@ -53,56 +16,6 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
     []
   );
 
-  const tabs = [
-    {
-      id: 'balance',
-      title: 'Balance',
-      content: (
-        <BalanceContent>
-          <BalanceLabel>Your DC Balance</BalanceLabel>
-          <BalanceAmount>{dcBalance.toLocaleString()} DC</BalanceAmount>
-          {onBuyDC && (
-            <BuyButton onPointerDown={onBuyDC} title="Buy Definya Coins">
-              <FaShoppingCart />
-              <BuyButtonLabel>Buy More DC</BuyButtonLabel>
-            </BuyButton>
-          )}
-        </BalanceContent>
-      ),
-    },
-    {
-      id: 'transfer',
-      title: 'Transfer',
-      content: (
-        <DCTransferPanel
-          dcBalance={dcBalance}
-          transferLoading={transferLoading}
-          transferResult={transferResult}
-          onSendTransfer={onSendTransfer}
-          onClearTransferResult={onClearTransferResult}
-          characterName={characterName}
-          onInputFocus={onInputFocus}
-          onInputBlur={onInputBlur}
-          onSearchCharacter={onSearchCharacter}
-          searchResults={searchResults}
-        />
-      ),
-    },
-    {
-      id: 'history',
-      title: 'History',
-      content: (
-        <DCHistoryPanel
-          transactions={historyData?.transactions ?? []}
-          totalPages={historyData?.totalPages ?? 0}
-          currentPage={historyData?.currentPage ?? 1}
-          loading={historyLoading}
-          onRequestHistory={onRequestHistory}
-        />
-      ),
-    },
-  ];
-
   return (
     <ModalPortal>
       <Overlay onPointerDown={onClose} />
@@ -119,23 +32,7 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
             </CloseButton>
           </Header>
 
-          <WalletContainer>
-            <InternalTabs
-              tabs={tabs}
-              activeTab={activeTab}
-              onTabChange={(tabId: string) => {
-                setActiveTab(tabId as WalletTabId);
-                if (tabId === 'history') {
-                  onRequestHistory(1);
-                }
-              }}
-              activeTextColor="#000000"
-              activeColor="#fef08a"
-              inactiveColor="#6b7280"
-              borderColor="#f59e0b"
-              hoverColor="#fef3c7"
-            />
-          </WalletContainer>
+          <DCWalletContent {...contentProps} />
         </ModalContent>
       </ModalContainer>
     </ModalPortal>
@@ -205,60 +102,3 @@ const CloseButton = styled.button`
     color: #ffffff;
   }
 `;
-
-const WalletContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 300px;
-  gap: 0.5rem;
-`;
-
-const BalanceContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 32px 16px;
-`;
-
-const BalanceLabel = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 10px;
-  color: ${uiColors.lightGray};
-`;
-
-const BalanceAmount = styled.div`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 28px;
-  color: #fef08a;
-  text-shadow: 2px 2px 0 #000;
-  letter-spacing: 2px;
-`;
-
-const BuyButton = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  padding: 10px 20px;
-  background: #f59e0b;
-  border: none;
-  border-radius: 6px;
-  color: #000;
-  cursor: pointer;
-  font-size: 1rem;
-
-  &:hover {
-    background: #fbbf24;
-  }
-
-  &:active {
-    background: #d97706;
-  }
-`;
-
-const BuyButtonLabel = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 8px;
-`;

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';
@@ -104,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 {
@@ -146,6 +151,8 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
     historySelectedType = 'All',
     onHistoryTypeChange,
     onHistoryPageChange,
+    // Wallet
+    walletProps,
   } = props;
 
   const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
@@ -204,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',
@@ -277,6 +293,10 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
         />
       )}
 
+      {activeTab === 'wallet' && walletProps && (
+        <DCWalletContent {...walletProps} />
+      )}
+
       {activeTab === 'settings' && (
         <MarketplaceSettingsPanel
           acceptedCurrency={acceptedCurrency}

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

@@ -188,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>
   );