@rpg-engine/long-bow 0.8.233 → 0.8.234

package/package.json

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

package/src/components/DCWallet/DCTransferPanel.tsx

@@ -15,9 +15,15 @@ export interface IDCTransferCharacterResult {
 export interface IDCTransferPanelProps {
   dcBalance: number;
   transferLoading: boolean;
-  transferResult: { success: boolean; message: string } | null;
+  transferResult: {
+    success: boolean;
+    message: string;
+    amount?: number;
+    fee?: number;
+  } | null;
   onSendTransfer: (recipientName: string, amount: number) => void;
   onClearTransferResult: () => void;
+  feePercent?: number;
   characterName?: string;
   onInputFocus?: () => void;
   onInputBlur?: () => void;
@@ -36,6 +42,7 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
   onInputBlur,
   onSearchCharacter,
   searchResults,
+  feePercent = 0,
 }) => {
   const [recipientName, setRecipientName] = useState<string>('');
   const [amount, setAmount] = useState<string>('');
@@ -97,7 +104,8 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
       return false;
     }
 
-    if (parsedAmount > dcBalance) {
+    const fee = Math.floor(parsedAmount * feePercent);
+    if (parsedAmount + fee > dcBalance) {
       setValidationError('Insufficient DC balance.');
       return false;
     }
@@ -109,7 +117,7 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
   const handleSendClick = useCallback((): void => {
     if (!validate()) return;
     setShowConfirm(true);
-  }, [recipientName, amount, dcBalance, characterName]);
+  }, [recipientName, amount, dcBalance, characterName, feePercent]);
 
   const handleConfirmTransfer = useCallback((): void => {
     setShowConfirm(false);
@@ -118,6 +126,10 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
     setAmount('');
   }, [recipientName, amount, onSendTransfer]);
 
+  const transferAmount = parseInt(amount, 10);
+  const transferFee = Math.floor(transferAmount * feePercent);
+  const transferTotal = transferAmount + transferFee;
+
   return (
     <PanelContainer>
       <FieldLabel>Recipient Character Name</FieldLabel>
@@ -174,6 +186,12 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
         disabled={transferLoading}
       />
 
+      {feePercent > 0 && (
+        <FeeDisclosure>
+          {feePercent * 100}% transfer fee is added to the sender debit.
+        </FeeDisclosure>
+      )}
+
       {validationError && <ErrorMessage>{validationError}</ErrorMessage>}
 
       <ButtonRow>
@@ -191,12 +209,17 @@ export const DCTransferPanel: React.FC<IDCTransferPanelProps> = ({
       {transferResult && (
         <ResultMessage $success={transferResult.success}>
           {transferResult.message}
+          {!!transferResult.fee && ` · ${transferResult.fee.toLocaleString()} DC fee`}
         </ResultMessage>
       )}
 
       {showConfirm && (
         <ConfirmModal
-          message={`Transfer ${parseInt(amount, 10)} DC to "${recipientName.trim()}"?`}
+          message={
+            feePercent > 0
+              ? `Transfer ${transferAmount.toLocaleString()} DC to "${recipientName.trim()}"? Fee: ${transferFee.toLocaleString()} DC · Total: ${transferTotal.toLocaleString()} DC`
+              : `Transfer ${transferAmount.toLocaleString()} DC to "${recipientName.trim()}"?`
+          }
           onConfirm={handleConfirmTransfer}
           onClose={() => setShowConfirm(false)}
         />
@@ -275,6 +298,13 @@ const ErrorMessage = styled.div`
   font-family: 'Press Start 2P', cursive !important;
 `;
 
+const FeeDisclosure = styled.p`
+  margin: 0;
+  color: rgba(254, 240, 138, 0.65);
+  font-size: 7px !important;
+  line-height: 1.4 !important;
+`;
+
 const AutocompleteWrapper = styled.div`
   position: relative;
   width: 100%;

package/src/components/DCWallet/DCWalletContent.tsx

@@ -13,7 +13,13 @@ export interface IDCWalletContentProps {
   historyLoading: boolean;
   onRequestHistory: (page: number, type?: string) => void;
   transferLoading: boolean;
-  transferResult: { success: boolean; message: string } | null;
+  transferResult: {
+    success: boolean;
+    message: string;
+    amount?: number;
+    fee?: number;
+  } | null;
+  feePercent?: number;
   onSendTransfer: (recipientName: string, amount: number) => void;
   onClearTransferResult: () => void;
   characterName?: string;
@@ -43,6 +49,7 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
   onBuyDC,
   onSearchCharacter,
   searchResults,
+  feePercent = 0,
 }) => {
   const usdValue = (dcBalance / DC_TO_USD).toFixed(2);
 
@@ -55,6 +62,7 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
           dcBalance={dcBalance}
           transferLoading={transferLoading}
           transferResult={transferResult}
+          feePercent={feePercent}
           onSendTransfer={onSendTransfer}
           onClearTransferResult={onClearTransferResult}
           characterName={characterName}

package/src/components/DCWallet/__test__/DCTransferPanel.spec.tsx

@@ -0,0 +1,115 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { DCTransferPanel } from '../DCTransferPanel';
+
+jest.mock('../../ConfirmModal', () => ({
+  ConfirmModal: ({ message }) => <div data-testid="confirm-modal">{message}</div>,
+}));
+
+jest.mock('../../Input', () => ({
+  Input: React.forwardRef((props, ref) => <input ref={ref} {...props} />),
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('react-icons/fa', () => ({
+  FaPaperPlane: () => <svg />,
+}));
+
+describe('DCTransferPanel fee disclosure', () => {
+  let container;
+
+  const renderPanel = (overrides = {}) => {
+    act(() => {
+      ReactDOM.render(
+        <DCTransferPanel
+          dcBalance={2000}
+          transferLoading={false}
+          transferResult={null}
+          onSendTransfer={jest.fn()}
+          onClearTransferResult={jest.fn()}
+          {...overrides}
+        />,
+        container
+      );
+    });
+  };
+
+  const enterTransfer = (recipient, amount) => {
+    const inputs = container.querySelectorAll('input');
+    act(() => {
+      Simulate.change(inputs[0], { target: { value: recipient } });
+      Simulate.change(inputs[1], { target: { value: amount } });
+    });
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+    jest.clearAllMocks();
+  });
+
+  it('should show the fee in the transfer result', () => {
+    renderPanel({
+      transferResult: { success: true, message: 'Transfer complete', fee: 50 },
+    });
+
+    expect(container.textContent).toMatch(/50 DC fee/i);
+  });
+
+  it('should show no fee line when the fee is zero', () => {
+    renderPanel({
+      transferResult: { success: true, message: 'Transfer complete', fee: 0 },
+    });
+
+    expect(container.textContent).not.toMatch(/fee/i);
+  });
+
+  it('should block an amount whose fee exceeds the balance', () => {
+    const onSendTransfer = jest.fn();
+    renderPanel({ dcBalance: 1000, feePercent: 0.05, onSendTransfer });
+    enterTransfer('Trader', '1000');
+
+    act(() => {
+      Simulate.click(container.querySelector('button'));
+    });
+
+    expect(container.textContent).toMatch(/insufficient DC balance/i);
+    expect(container.querySelector('[data-testid="confirm-modal"]')).toBeNull();
+    expect(onSendTransfer).not.toHaveBeenCalled();
+  });
+
+  it('should include the fee and total in the confirm message', () => {
+    renderPanel({ feePercent: 0.05 });
+    enterTransfer('Trader', '1000');
+
+    act(() => {
+      Simulate.click(container.querySelector('button'));
+    });
+
+    expect(container.textContent).toMatch(/fee: 50 DC/i);
+    expect(container.textContent).toMatch(/total: 1,?050 DC/i);
+  });
+
+  it('should show the transfer fee disclosure beside the amount field', () => {
+    renderPanel({ feePercent: 0.05 });
+
+    expect(container.textContent).toMatch(/5% transfer fee is added to the sender debit/i);
+  });
+});

package/src/components/Marketplace/CharacterListingModal.tsx

@@ -25,6 +25,7 @@ export interface ICharacterListingModalProps {
   characterAtlasJSON: any;
   characterAtlasIMG: any;
   onCharacterList: (characterId: string, price: number) => void;
+  commissionPercent?: number;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
 }
@@ -41,6 +42,7 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
   onCharacterList,
   enableHotkeys,
   disableHotkeys,
+  commissionPercent = 0,
 }) => {
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [price, setPrice] = useState('');
@@ -191,6 +193,13 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
                 <PricePreviewAmount><MMORPGNumber value={Number(price)} /> DC</PricePreviewAmount>
               </PricePreview>
             )}
+            {price && Number(price) > 0 && commissionPercent > 0 && (
+              <NetProceeds>
+                You'll receive:{' '}
+                {(Number(price) - Math.floor(Number(price) * commissionPercent)).toLocaleString()} DC
+                {' '}(after {commissionPercent * 100}% commission)
+              </NetProceeds>
+            )}
             <DCRateStrip />
           </PriceSection>
         </ModalContent>
@@ -237,6 +246,13 @@ const ModalContent = styled.div`
   animation: ${scaleIn} 0.15s ease-out;
 `;
 
+const NetProceeds = styled.p`
+  margin: 0;
+  color: #fef08a;
+  font-size: 8px !important;
+  line-height: 1.5 !important;
+`;
+
 const Header = styled.div`
   display: flex;
   align-items: center;

package/src/components/Marketplace/CharacterTradePanel.tsx

@@ -28,6 +28,7 @@ export interface ICharacterTradePanelProps {
   characterAtlasIMG?: any;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
+  commissionPercent?: number;
 }
 
 export const CharacterTradePanel: React.FC<ICharacterTradePanelProps> = ({
@@ -54,6 +55,7 @@ export const CharacterTradePanel: React.FC<ICharacterTradePanelProps> = ({
   characterAtlasIMG,
   enableHotkeys,
   disableHotkeys,
+  commissionPercent = 0,
 }) => {
   const [subTab, setSubTab] = useState<'browse' | 'my-listings'>('browse');
 
@@ -113,6 +115,7 @@ export const CharacterTradePanel: React.FC<ICharacterTradePanelProps> = ({
           characterAtlasIMG={characterAtlasIMG ?? atlasIMG}
           enableHotkeys={enableHotkeys}
           disableHotkeys={disableHotkeys}
+          commissionPercent={commissionPercent}
         />
       )}
     </>

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -28,6 +28,7 @@ export interface IManagmentPanelProps {
   onMoneyWithdraw: () => void;
   currentPage: number;
   dcToGoldSwapRate?: number;
+  commissionPercent?: number;
 }
 
 const LISTING_CURRENCY_OPTIONS: { value: MarketplaceAcceptedCurrency; label: string }[] = [
@@ -53,6 +54,7 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
   onMoneyWithdraw,
   currentPage,
   dcToGoldSwapRate = 0,
+  commissionPercent = 0,
 }) => {
   const [price, setPrice] = useState('');
   const [isCreatingOffer, setIsCreatingOffer] = useState(false);
@@ -67,6 +69,16 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
     itemsContainer.current?.scrollTo(0, 0);
   }, [currentPage]);
 
+  const parsedPrice = Number(price);
+  const netGoldProceeds = parsedPrice - Math.floor(parsedPrice * commissionPercent);
+  const netDCProceeds = goldToDC(netGoldProceeds);
+  const netProceedsLabel =
+    listingCurrency === MarketplaceAcceptedCurrency.Gold
+      ? `${netGoldProceeds.toLocaleString()} gold`
+      : listingCurrency === MarketplaceAcceptedCurrency.Dc
+        ? `${formatDCAmount(netDCProceeds)} DC`
+        : `${netGoldProceeds.toLocaleString()} gold or ${formatDCAmount(netDCProceeds)} DC`;
+
   return (
     <>
       {isCreatingOffer && (
@@ -135,6 +147,17 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
                   }}
                 />
               </Flex>
+              {commissionPercent > 0 && (
+                <FeeDisclosure>
+                  {commissionPercent * 100}% marketplace commission is deducted from seller proceeds.
+                </FeeDisclosure>
+              )}
+              {price && Number(price) > 0 && commissionPercent > 0 && (
+                <NetProceeds>
+                  You'll receive: {netProceedsLabel}
+                  {' '}(after {commissionPercent * 100}% commission)
+                </NetProceeds>
+              )}
               <CurrencyToggleRow>
                 <CurrencyToggleLabel>Accept:</CurrencyToggleLabel>
                 {LISTING_CURRENCY_OPTIONS.map(opt => (
@@ -266,7 +289,7 @@ const PriceInputWrapper = styled.div`
   flex-direction: column;
   flex-grow: 1;
 
-  p {
+  > p:first-child {
     margin: 0 0 8px 0;
     font-size: 0.6rem;
     color: #888;
@@ -287,6 +310,20 @@ const PriceInputWrapper = styled.div`
   }
 `;
 
+const NetProceeds = styled.p`
+  margin: 8px 0 0;
+  color: #fef08a;
+  font-size: 8px !important;
+  line-height: 1.5 !important;
+`;
+
+const FeeDisclosure = styled.p`
+  margin: 6px 0 0;
+  color: rgba(254, 240, 138, 0.65);
+  font-size: 7px !important;
+  line-height: 1.4 !important;
+`;
+
 const GoldIcon = styled.div`
   position: relative;
   display: flex;

package/src/components/Marketplace/Marketplace.tsx

@@ -136,6 +136,7 @@ export interface IMarketPlaceProps {
   characterNameFilter?: string;
   onCharacterNameFilterChange?: (name: string) => void;
   fullScreen?: boolean;
+  commissionPercent?: number;
 }
 
 type ActiveTab = 'marketplace' | 'characters' | 'sell' | 'buy-orders' | 'history' | 'wallet' | 'settings';
@@ -313,6 +314,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
           characterAtlasIMG={characterAtlasIMG}
           enableHotkeys={props.enableHotkeys}
           disableHotkeys={props.disableHotkeys}
+          commissionPercent={props.commissionPercent}
         />
       )}
 
@@ -404,4 +406,3 @@ const PagerContainer = styled.div`
   margin: 6px auto 0 auto;
   padding: 4px 10px;
 `;
-

package/src/components/Marketplace/MyCharacterListingsPanel.tsx

@@ -31,6 +31,7 @@ export interface IMyCharacterListingsPanelProps {
   characterAtlasIMG: any;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
+  commissionPercent?: number;
 }
 
 export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps> = ({
@@ -49,6 +50,7 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
   characterAtlasIMG,
   enableHotkeys,
   disableHotkeys,
+  commissionPercent = 0,
 }) => {
   const [delistingId, setDelistingId] = useState<string | null>(null);
   const [isListingModalOpen, setIsListingModalOpen] = useState(false);
@@ -93,6 +95,7 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
         }}
         enableHotkeys={enableHotkeys}
         disableHotkeys={disableHotkeys}
+        commissionPercent={commissionPercent}
       />
 
       <Toolbar>

package/src/components/Marketplace/__test__/CharacterListingModal.spec.tsx

@@ -0,0 +1,114 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { CharacterListingModal } from '../CharacterListingModal';
+
+jest.mock('../../Abstractions/ModalPortal', () => ({
+  __esModule: true,
+  default: ({ children }) => <>{children}</>,
+}));
+
+jest.mock('../../ConfirmModal', () => ({
+  ConfirmModal: ({ message }) => <div>{message}</div>,
+}));
+
+jest.mock('../../Input', () => ({
+  Input: props => <input {...props} />,
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('../../shared/DCRateStrip', () => ({
+  DCRateStrip: () => null,
+}));
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({
+  SpriteFromAtlas: () => null,
+}));
+
+jest.mock('../../shared/MMORPGNumber', () => ({
+  MMORPGNumber: ({ value }) => <>{value}</>,
+}));
+
+jest.mock('pixelarticons/react/ShoppingBag', () => ({
+  ShoppingBag: () => <svg />,
+}));
+
+jest.mock('react-icons/fa', () => ({
+  FaTimes: () => <svg />,
+}));
+
+describe('CharacterListingModal commission disclosure', () => {
+  let container;
+
+  const character = {
+    _id: 'character-1',
+    name: 'Trader',
+    textureKey: 'knight',
+    skills: { level: 10 },
+  };
+
+  const renderModal = (commissionPercent = 0) => {
+    act(() => {
+      ReactDOM.render(
+        <CharacterListingModal
+          isOpen
+          onClose={jest.fn()}
+          accountCharacters={[character]}
+          atlasJSON={{}}
+          atlasIMG=""
+          characterAtlasJSON={{}}
+          characterAtlasIMG=""
+          onCharacterList={jest.fn()}
+          commissionPercent={commissionPercent}
+        />,
+        container
+      );
+    });
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+  });
+
+  it('should show net proceeds after commission', () => {
+    renderModal(0.05);
+
+    act(() => {
+      Simulate.change(container.querySelector('.price-input'), {
+        target: { value: '1000' },
+      });
+    });
+
+    expect(container.textContent).toMatch(/You'll receive: 950 DC/i);
+    expect(container.textContent).toMatch(/after 5% commission/i);
+  });
+
+  it('should hide net proceeds when commission is zero', () => {
+    renderModal();
+
+    act(() => {
+      Simulate.change(container.querySelector('.price-input'), {
+        target: { value: '1000' },
+      });
+    });
+
+    expect(container.textContent).not.toMatch(/You'll receive/i);
+  });
+});

package/src/components/Marketplace/__test__/ManagmentPanel.spec.tsx

@@ -0,0 +1,125 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import { MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { ManagmentPanel } from '../ManagmentPanel';
+
+jest.mock('../../ConfirmModal', () => ({
+  ConfirmModal: ({ message }) => <div>{message}</div>,
+}));
+
+jest.mock('../../Input', () => ({
+  Input: props => <input {...props} />,
+}));
+
+jest.mock('../../Item/Inventory/ItemSlot', () => ({
+  ItemSlot: () => <div data-testid="item-slot" />,
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick, disabled }) => (
+    <button disabled={disabled} onClick={onClick}>
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({
+  SpriteFromAtlas: () => null,
+}));
+
+jest.mock('../MarketplaceRows', () => ({
+  MarketplaceRows: () => <div data-testid="marketplace-row" />,
+}));
+
+jest.mock('pixelarticons/react/ShoppingBag', () => ({
+  ShoppingBag: () => <svg />,
+}));
+
+jest.mock('pixelarticons/react/Wallet', () => ({
+  Wallet: () => <svg />,
+}));
+
+describe('ManagmentPanel commission disclosure', () => {
+  let container;
+
+  const renderPanel = (commissionPercent = 0, acceptedCurrency = MarketplaceAcceptedCurrency.GoldOrDc) => {
+    act(() => {
+      ReactDOM.render(
+        <ManagmentPanel
+          items={[]}
+          atlasJSON={{}}
+          atlasIMG=""
+          availableGold={0}
+          selectedItemToSell={{ _id: 'item-1', name: 'Sword', stackQty: 1 }}
+          onSelectedItemToSellRemove={jest.fn()}
+          onAddItemToMarketplace={jest.fn()}
+          onMoneyWithdraw={jest.fn()}
+          onMarketPlaceItemRemove={jest.fn()}
+          currentPage={1}
+          acceptedCurrency={acceptedCurrency}
+          commissionPercent={commissionPercent}
+        />,
+        container
+      );
+    });
+  };
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    HTMLElement.prototype.scrollTo = jest.fn();
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+  });
+
+  it('shows net gold proceeds after commission', () => {
+    renderPanel(0.05);
+
+    act(() => {
+      Simulate.change(container.querySelector('.price-input'), {
+        target: { value: '1000' },
+      });
+    });
+
+    expect(container.textContent).toMatch(/You'll receive: 950 gold/i);
+    expect(container.textContent).toMatch(/after 5% commission/i);
+  });
+
+  it('shows the commission disclosure before a price is entered', () => {
+    renderPanel(0.05);
+
+    expect(container.textContent).toMatch(/5% marketplace commission is deducted from seller proceeds/i);
+  });
+
+  it('hides net proceeds when commission is zero', () => {
+    renderPanel();
+
+    act(() => {
+      Simulate.change(container.querySelector('.price-input'), {
+        target: { value: '1000' },
+      });
+    });
+
+    expect(container.textContent).not.toMatch(/You'll receive/i);
+  });
+
+  it('shows net DC proceeds for a DC-only listing', () => {
+    renderPanel(0.05, MarketplaceAcceptedCurrency.Dc);
+
+    act(() => {
+      Simulate.change(container.querySelector('.price-input'), {
+        target: { value: '1000' },
+      });
+    });
+
+    expect(container.textContent).toMatch(/You'll receive: 0\.17 DC/i);
+  });
+});