@rpg-engine/long-bow 0.8.136 → 0.8.137

package/package.json

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

package/src/components/DCWallet/DCHistoryPanel.tsx

@@ -1,7 +1,6 @@
 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 {
@@ -17,24 +16,24 @@ export interface IDCTransaction {
 const TRANSACTION_TYPE_LABELS: Record<string, string> = {
   Purchase: 'Purchase',
   Transfer: 'Transfer',
-  MarketplaceSale: 'Marketplace Sale',
-  MarketplacePurchase: 'Marketplace Buy',
-  StorePurchase: 'Store Purchase',
+  MarketplaceSale: 'Mkt Sale',
+  MarketplacePurchase: 'Mkt Buy',
+  StorePurchase: 'Store',
   Fee: 'Fee',
   Refund: 'Refund',
-  AdminAdjustment: 'Admin Adjustment',
+  AdminAdjustment: 'Admin',
 };
 
-const TRANSACTION_TYPE_OPTIONS: IOptionsProps[] = [
-  { id: 0, value: '', option: 'All Types' },
-  { id: 1, value: 'Purchase', option: 'Purchase' },
-  { id: 2, value: 'Transfer', option: 'Transfer' },
-  { id: 3, value: 'MarketplaceSale', option: 'Marketplace Sale' },
-  { id: 4, value: 'MarketplacePurchase', option: 'Marketplace Buy' },
-  { id: 5, value: 'StorePurchase', option: 'Store Purchase' },
-  { id: 6, value: 'Fee', option: 'Fee' },
-  { id: 7, value: 'Refund', option: 'Refund' },
-  { id: 8, value: 'AdminAdjustment', option: 'Admin Adjustment' },
+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' },
 ];
 
 export interface IDCHistoryPanelProps {
@@ -54,7 +53,14 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
 }) => {
   const [selectedType, setSelectedType] = React.useState<string>('');
 
-  const handleTypeChange = (value: string): void => {
+  // Auto-load on first mount (when History tab is opened)
+  React.useEffect(() => {
+    onRequestHistory(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
+    const value = e.target.value;
     setSelectedType(value);
     onRequestHistory(1, value || undefined);
   };
@@ -65,15 +71,18 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
 
   const formatDate = (dateStr: string): string => {
     const d = new Date(dateStr);
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+    return `${d.getMonth() + 1}/${d.getDate()}/${String(d.getFullYear()).slice(-2)}`;
   };
 
   return (
     <PanelContainer>
       <FilterRow>
         <FilterLabel>Filter:</FilterLabel>
-        <Dropdown options={TRANSACTION_TYPE_OPTIONS} onChange={handleTypeChange} width="200px" />
+        <TypeSelect value={selectedType} onChange={handleTypeChange}>
+          {TRANSACTION_TYPE_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </TypeSelect>
       </FilterRow>
 
       {loading && (
@@ -92,18 +101,20 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
           {transactions.map((tx) => {
             const isCredit = tx.amount > 0;
             const label = TRANSACTION_TYPE_LABELS[tx.type] ?? tx.type;
+            const subtitle = tx.note ?? (tx.relatedCharacterName ? tx.relatedCharacterName : '');
 
             return (
               <TransactionRow key={tx._id}>
-                <TxType>{label}</TxType>
-                <TxAmount $credit={isCredit}>
-                  {isCredit ? '+' : ''}{tx.amount} DC
-                </TxAmount>
-                <TxNote>
-                  {tx.note ?? (tx.relatedCharacterName ? `With: ${tx.relatedCharacterName}` : '')}
-                </TxNote>
-                <TxDate>{formatDate(tx.createdAt)}</TxDate>
-                <TxBalance>Balance: {tx.balanceAfter} DC</TxBalance>
+                <TxLeft>
+                  <TxType>{label}</TxType>
+                  {subtitle ? <TxNote>{subtitle}</TxNote> : null}
+                </TxLeft>
+                <TxRight>
+                  <TxAmount $credit={isCredit}>
+                    {isCredit ? '+' : ''}{tx.amount} DC
+                  </TxAmount>
+                  <TxDate>{formatDate(tx.createdAt)}</TxDate>
+                </TxRight>
               </TransactionRow>
             );
           })}
@@ -132,76 +143,115 @@ const FilterRow = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 `;
 
 const FilterLabel = styled.span`
-  font-size: 8px;
+  font-size: 7px;
   color: #f59e0b;
   font-family: 'Press Start 2P', cursive;
   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 TransactionList = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  max-height: 280px;
+  gap: 3px;
+  max-height: 260px;
   overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.3);
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(245, 158, 11, 0.4);
+    border-radius: 2px;
+  }
 `;
 
 const TransactionRow = styled.div`
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 215, 0, 0.2);
-  padding: 8px;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto auto;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(245, 158, 11, 0.15);
+  border-radius: 2px;
+  padding: 5px 7px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const TxLeft = styled.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const TxRight = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
   gap: 2px;
+  flex-shrink: 0;
 `;
 
 const TxType = styled.span`
-  font-size: 8px;
+  font-size: 7px;
   color: #f59e0b;
   font-family: 'Press Start 2P', cursive;
-  grid-column: 1;
-  grid-row: 1;
 `;
 
 const TxAmount = styled.span<{ $credit: boolean }>`
-  font-size: 10px;
+  font-size: 8px;
   font-family: 'Press Start 2P', cursive;
   color: ${({ $credit }) => ($credit ? uiColors.green : uiColors.red)};
-  font-weight: bold;
-  grid-column: 2;
-  grid-row: 1;
-  text-align: right;
+  white-space: nowrap;
 `;
 
 const TxNote = styled.span`
-  font-size: 7px;
+  font-size: 6px;
   color: ${uiColors.lightGray};
   font-family: 'Press Start 2P', cursive;
-  grid-column: 1;
-  grid-row: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const TxDate = styled.span`
-  font-size: 7px;
-  color: ${uiColors.lightGray};
+  font-size: 6px;
+  color: rgba(255, 255, 255, 0.4);
   font-family: 'Press Start 2P', cursive;
-  grid-column: 2;
-  grid-row: 2;
-  text-align: right;
-`;
-
-const TxBalance = styled.span`
-  font-size: 7px;
-  color: ${uiColors.white};
-  font-family: 'Press Start 2P', cursive;
-  grid-column: 1 / 3;
-  grid-row: 3;
-  opacity: 0.7;
+  white-space: nowrap;
 `;
 
 const LoadingRow = styled.div`
@@ -219,8 +269,8 @@ const Spinner = styled.div`
   border: 3px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   border-top: 3px solid #f59e0b;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   animation: spin 0.8s linear infinite;
 
   @keyframes spin {
@@ -230,7 +280,7 @@ const Spinner = styled.div`
 `;
 
 const EmptyMessage = styled.div`
-  font-size: 9px;
+  font-size: 8px;
   color: ${uiColors.lightGray};
   font-family: 'Press Start 2P', cursive;
   text-align: center;

package/src/components/DCWallet/DCTransferPanel.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { debounce } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FaPaperPlane } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -6,6 +7,11 @@ import { ConfirmModal } from '../ConfirmModal';
 import { Input } from '../Input';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 
+export interface IDCTransferCharacterResult {
+  _id: string;
+  name: string;
+}
+
 export interface IDCTransferPanelProps {
   dcBalance: number;
   transferLoading: boolean;
@@ -15,6 +21,8 @@ export interface IDCTransferPanelProps {
   characterName?: string;
   onInputFocus?: () => void;
   onInputBlur?: () => void;
+  onSearchCharacter?: (name: string) => void;
+  searchResults?: IDCTransferCharacterResult[];
 }
 
 export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
@@ -26,13 +34,33 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
   characterName,
   onInputFocus,
   onInputBlur,
+  onSearchCharacter,
+  searchResults,
 }) => {
   const [recipientName, setRecipientName] = useState<string>('');
   const [amount, setAmount] = useState<string>('');
   const [validationError, setValidationError] = useState<string>('');
   const [showConfirm, setShowConfirm] = useState<boolean>(false);
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const clearResultTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((name: string) => {
+        if (name.trim().length >= 2) {
+          onSearchCharacter?.(name.trim());
+        }
+      }, 300),
+    [onSearchCharacter]
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+
   useEffect(() => {
     if (transferResult) {
       if (clearResultTimerRef.current) {
@@ -93,15 +121,46 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
   return (
     <PanelContainer>
       <FieldLabel>Recipient Character Name</FieldLabel>
-      <StyledInput
-        type="text"
-        value={recipientName}
-        onChange={(e) => setRecipientName(e.target.value)}
-        onFocus={onInputFocus}
-        onBlur={onInputBlur}
-        placeholder="Enter character name"
-        disabled={transferLoading}
-      />
+      <AutocompleteWrapper ref={dropdownRef}>
+        <StyledInput
+          type="text"
+          value={recipientName}
+          onChange={(e) => {
+            setRecipientName(e.target.value);
+            debouncedSearch(e.target.value);
+            setShowDropdown(true);
+          }}
+          onFocus={() => {
+            onInputFocus?.();
+            if (recipientName.trim().length >= 2 && searchResults && searchResults.length > 0) {
+              setShowDropdown(true);
+            }
+          }}
+          onBlur={() => {
+            // Delay to allow dropdown click to register
+            setTimeout(() => setShowDropdown(false), 150);
+            onInputBlur?.();
+          }}
+          placeholder="Enter character name"
+          disabled={transferLoading}
+          autoComplete="off"
+        />
+        {showDropdown && searchResults && searchResults.length > 0 && (
+          <DropdownList>
+            {searchResults.map((char) => (
+              <DropdownItem
+                key={char._id}
+                onPointerDown={() => {
+                  setRecipientName(char.name);
+                  setShowDropdown(false);
+                }}
+              >
+                {char.name}
+              </DropdownItem>
+            ))}
+          </DropdownList>
+        )}
+      </AutocompleteWrapper>
 
       <FieldLabel>Amount (DC)</FieldLabel>
       <StyledInput
@@ -215,3 +274,36 @@ const ErrorMessage = styled.div`
   color: ${uiColors.red};
   font-family: 'Press Start 2P', cursive;
 `;
+
+const AutocompleteWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const DropdownList = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: rgba(10, 10, 30, 0.95);
+  border: 1px solid #f59e0b;
+  border-top: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 120px;
+  overflow-y: auto;
+  z-index: 10;
+`;
+
+const DropdownItem = styled.li`
+  padding: 6px 8px;
+  font-size: 11px;
+  font-family: 'Press Start 2P', cursive;
+  color: ${uiColors.white};
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.3);
+  }
+`;

package/src/components/DCWallet/DCWalletModal.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import { FaTimes } from 'react-icons/fa';
+import { FaShoppingCart, 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 } from './DCTransferPanel';
+import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
 
 type WalletTabId = 'balance' | 'transfer' | 'history';
 
@@ -22,6 +22,9 @@ export interface IDCWalletModalProps {
   characterName?: string;
   onInputFocus?: () => void;
   onInputBlur?: () => void;
+  onBuyDC?: () => void;
+  onSearchCharacter?: (name: string) => void;
+  searchResults?: IDCTransferCharacterResult[];
 }
 
 export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
@@ -37,6 +40,9 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
   characterName,
   onInputFocus,
   onInputBlur,
+  onBuyDC,
+  onSearchCharacter,
+  searchResults,
 }) => {
   const [activeTab, setActiveTab] = useState<WalletTabId>('balance');
 
@@ -55,7 +61,12 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
         <BalanceContent>
           <BalanceLabel>Your DC Balance</BalanceLabel>
           <BalanceAmount>{dcBalance.toLocaleString()} DC</BalanceAmount>
-          <BalanceHint>Buy DC packs from the Store &gt; Packs tab.</BalanceHint>
+          {onBuyDC && (
+            <BuyButton onPointerDown={onBuyDC} title="Buy Definya Coins">
+              <FaShoppingCart />
+              <BuyButtonLabel>Buy DC</BuyButtonLabel>
+            </BuyButton>
+          )}
         </BalanceContent>
       ),
     },
@@ -72,6 +83,8 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
           characterName={characterName}
           onInputFocus={onInputFocus}
           onInputBlur={onInputBlur}
+          onSearchCharacter={onSearchCharacter}
+          searchResults={searchResults}
         />
       ),
     },
@@ -110,7 +123,12 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
             <InternalTabs
               tabs={tabs}
               activeTab={activeTab}
-              onTabChange={(tabId: string) => setActiveTab(tabId as WalletTabId)}
+              onTabChange={(tabId: string) => {
+                setActiveTab(tabId as WalletTabId);
+                if (tabId === 'history') {
+                  onRequestHistory(1);
+                }
+              }}
               activeTextColor="#000000"
               activeColor="#fef08a"
               inactiveColor="#6b7280"
@@ -218,8 +236,29 @@ const BalanceAmount = styled.div`
   letter-spacing: 2px;
 `;
 
-const BalanceHint = styled.span`
+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: 7px;
-  color: ${uiColors.lightGray};
+  font-size: 8px;
 `;