@rpg-engine/long-bow 0.8.233 → 0.8.234

package/dist/long-bow.esm.js

@@ -5843,7 +5843,9 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
     onInputFocus = _ref.onInputFocus,
     onInputBlur = _ref.onInputBlur,
     onSearchCharacter = _ref.onSearchCharacter,
-    searchResults = _ref.searchResults;
+    searchResults = _ref.searchResults,
+    _ref$feePercent = _ref.feePercent,
+    feePercent = _ref$feePercent === void 0 ? 0 : _ref$feePercent;
   var _useState = useState(''),
     recipientName = _useState[0],
     setRecipientName = _useState[1];
@@ -5903,7 +5905,8 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
       setValidationError('Amount must be a positive integer.');
       return false;
     }
-    if (parsedAmount > dcBalance) {
+    var fee = Math.floor(parsedAmount * feePercent);
+    if (parsedAmount + fee > dcBalance) {
       setValidationError('Insufficient DC balance.');
       return false;
     }
@@ -5913,13 +5916,16 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
   var handleSendClick = useCallback(function () {
     if (!validate()) return;
     setShowConfirm(true);
-  }, [recipientName, amount, dcBalance, characterName]);
+  }, [recipientName, amount, dcBalance, characterName, feePercent]);
   var handleConfirmTransfer = useCallback(function () {
     setShowConfirm(false);
     onSendTransfer(recipientName.trim(), parseInt(amount, 10));
     setRecipientName('');
     setAmount('');
   }, [recipientName, amount, onSendTransfer]);
+  var transferAmount = parseInt(amount, 10);
+  var transferFee = Math.floor(transferAmount * feePercent);
+  var transferTotal = transferAmount + transferFee;
   return React.createElement(PanelContainer$1, null, React.createElement(FieldLabel, null, "Recipient Character Name"), React.createElement(AutocompleteWrapper, {
     ref: dropdownRef
   }, React.createElement(StyledInput, {
@@ -5965,7 +5971,7 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
     onBlur: onInputBlur,
     placeholder: "0",
     disabled: transferLoading
-  }), validationError && React.createElement(ErrorMessage, null, validationError), React.createElement(ButtonRow, null, React.createElement(CTAButton, {
+  }), feePercent > 0 && React.createElement(FeeDisclosure, null, feePercent * 100, "% transfer fee is added to the sender debit."), validationError && React.createElement(ErrorMessage, null, validationError), React.createElement(ButtonRow, null, React.createElement(CTAButton, {
     icon: React.createElement(FaPaperPlane, null),
     label: transferLoading ? 'Sending...' : 'Send',
     onClick: handleSendClick,
@@ -5973,8 +5979,8 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
     fullWidth: true
   })), transferLoading && React.createElement(Spinner$1, null), transferResult && React.createElement(ResultMessage, {
     "$success": transferResult.success
-  }, transferResult.message), showConfirm && React.createElement(ConfirmModal, {
-    message: "Transfer " + parseInt(amount, 10) + " DC to \"" + recipientName.trim() + "\"?",
+  }, transferResult.message, !!transferResult.fee && " \xB7 " + transferResult.fee.toLocaleString() + " DC fee"), showConfirm && React.createElement(ConfirmModal, {
+    message: feePercent > 0 ? "Transfer " + transferAmount.toLocaleString() + " DC to \"" + recipientName.trim() + "\"? Fee: " + transferFee.toLocaleString() + " DC \xB7 Total: " + transferTotal.toLocaleString() + " DC" : "Transfer " + transferAmount.toLocaleString() + " DC to \"" + recipientName.trim() + "\"?",
     onConfirm: handleConfirmTransfer,
     onClose: function onClose() {
       return setShowConfirm(false);
@@ -6015,17 +6021,21 @@ var ErrorMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCTransferPanel__ErrorMessage",
   componentId: "sc-k1vvb1-6"
 })(["font-size:9px !important;color:", " !important;font-family:'Press Start 2P',cursive !important;"], uiColors.red);
+var FeeDisclosure = /*#__PURE__*/styled.p.withConfig({
+  displayName: "DCTransferPanel__FeeDisclosure",
+  componentId: "sc-k1vvb1-7"
+})(["margin:0;color:rgba(254,240,138,0.65);font-size:7px !important;line-height:1.4 !important;"]);
 var AutocompleteWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCTransferPanel__AutocompleteWrapper",
-  componentId: "sc-k1vvb1-7"
+  componentId: "sc-k1vvb1-8"
 })(["position:relative;width:100%;"]);
 var DropdownList = /*#__PURE__*/styled.ul.withConfig({
   displayName: "DCTransferPanel__DropdownList",
-  componentId: "sc-k1vvb1-8"
+  componentId: "sc-k1vvb1-9"
 })(["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;"]);
 var DropdownItem = /*#__PURE__*/styled.li.withConfig({
   displayName: "DCTransferPanel__DropdownItem",
-  componentId: "sc-k1vvb1-9"
+  componentId: "sc-k1vvb1-10"
 })(["padding:6px 8px;font-size:11px;font-family:'Press Start 2P',cursive;color:", ";cursor:pointer;&:hover{background:rgba(245,158,11,0.3);}"], uiColors.white);
 
 var DC_TO_USD$1 = 100;
@@ -6044,7 +6054,9 @@ var DCWalletContent = function DCWalletContent(_ref) {
     onInputBlur = _ref.onInputBlur,
     onBuyDC = _ref.onBuyDC,
     onSearchCharacter = _ref.onSearchCharacter,
-    searchResults = _ref.searchResults;
+    searchResults = _ref.searchResults,
+    _ref$feePercent = _ref.feePercent,
+    feePercent = _ref$feePercent === void 0 ? 0 : _ref$feePercent;
   var usdValue = (dcBalance / DC_TO_USD$1).toFixed(2);
   var tabs = [{
     id: 'transfer',
@@ -6053,6 +6065,7 @@ var DCWalletContent = function DCWalletContent(_ref) {
       dcBalance: dcBalance,
       transferLoading: transferLoading,
       transferResult: transferResult,
+      feePercent: feePercent,
       onSendTransfer: onSendTransfer,
       onClearTransferResult: onClearTransferResult,
       characterName: characterName,
@@ -13060,7 +13073,9 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
     onMoneyWithdraw = _ref.onMoneyWithdraw,
     currentPage = _ref.currentPage,
     _ref$dcToGoldSwapRate = _ref.dcToGoldSwapRate,
-    dcToGoldSwapRate = _ref$dcToGoldSwapRate === void 0 ? 0 : _ref$dcToGoldSwapRate;
+    dcToGoldSwapRate = _ref$dcToGoldSwapRate === void 0 ? 0 : _ref$dcToGoldSwapRate,
+    _ref$commissionPercen = _ref.commissionPercent,
+    commissionPercent = _ref$commissionPercen === void 0 ? 0 : _ref$commissionPercen;
   var _useState = useState(''),
     price = _useState[0],
     setPrice = _useState[1];
@@ -13078,6 +13093,10 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
     var _itemsContainer$curre;
     (_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
   }, [currentPage]);
+  var parsedPrice = Number(price);
+  var netGoldProceeds = parsedPrice - Math.floor(parsedPrice * commissionPercent);
+  var netDCProceeds = goldToDC(netGoldProceeds);
+  var netProceedsLabel = listingCurrency === MarketplaceAcceptedCurrency.Gold ? netGoldProceeds.toLocaleString() + " gold" : listingCurrency === MarketplaceAcceptedCurrency.Dc ? formatDCAmount(netDCProceeds) + " DC" : netGoldProceeds.toLocaleString() + " gold or " + formatDCAmount(netDCProceeds) + " DC";
   return React.createElement(React.Fragment, null, isCreatingOffer && React.createElement(ConfirmModal, {
     onClose: setIsCreatingOffer.bind(null, false),
     onConfirm: function onConfirm() {
@@ -13151,7 +13170,7 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
         setIsCreatingOffer(true);
       }
     }
-  })), React.createElement(CurrencyToggleRow, null, React.createElement(CurrencyToggleLabel, null, "Accept:"), LISTING_CURRENCY_OPTIONS.map(function (opt) {
+  })), commissionPercent > 0 && React.createElement(FeeDisclosure$1, null, commissionPercent * 100, "% marketplace commission is deducted from seller proceeds."), price && Number(price) > 0 && commissionPercent > 0 && React.createElement(NetProceeds, null, "You'll receive: ", netProceedsLabel, ' ', "(after ", commissionPercent * 100, "% commission)"), React.createElement(CurrencyToggleRow, null, React.createElement(CurrencyToggleLabel, null, "Accept:"), LISTING_CURRENCY_OPTIONS.map(function (opt) {
     return React.createElement(CurrencyToggleButton, {
       key: opt.value,
       "$active": listingCurrency === opt.value,
@@ -13236,48 +13255,56 @@ var SellDescription = /*#__PURE__*/styled.p.withConfig({
 var PriceInputWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__PriceInputWrapper",
   componentId: "sc-1yyi6jn-5"
-})(["display:flex;flex-direction:column;flex-grow:1;p{margin:0 0 8px 0;font-size:0.6rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;}.price-input{width:60px;height:32px;flex-grow:1;font-size:0.7rem;}.offer-btn{padding:10px 14px;height:32px;}"]);
+})(["display:flex;flex-direction:column;flex-grow:1;> p:first-child{margin:0 0 8px 0;font-size:0.6rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;}.price-input{width:60px;height:32px;flex-grow:1;font-size:0.7rem;}.offer-btn{padding:10px 14px;height:32px;}"]);
+var NetProceeds = /*#__PURE__*/styled.p.withConfig({
+  displayName: "ManagmentPanel__NetProceeds",
+  componentId: "sc-1yyi6jn-6"
+})(["margin:8px 0 0;color:#fef08a;font-size:8px !important;line-height:1.5 !important;"]);
+var FeeDisclosure$1 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "ManagmentPanel__FeeDisclosure",
+  componentId: "sc-1yyi6jn-7"
+})(["margin:6px 0 0;color:rgba(254,240,138,0.65);font-size:7px !important;line-height:1.4 !important;"]);
 var GoldIcon$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__GoldIcon",
-  componentId: "sc-1yyi6jn-6"
+  componentId: "sc-1yyi6jn-8"
 })(["position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;flex-shrink:0;top:-0.5rem;left:-0.5rem;"]);
 var WealthWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__WealthWrapper",
-  componentId: "sc-1yyi6jn-7"
+  componentId: "sc-1yyi6jn-9"
 })(["display:flex;flex-direction:column;gap:8px;flex-grow:1;& > :last-child{margin-top:auto;}"]);
 var BalanceRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__BalanceRow",
-  componentId: "sc-1yyi6jn-8"
+  componentId: "sc-1yyi6jn-10"
 })(["display:flex;align-items:center;justify-content:flex-end;gap:10px;background:rgba(0,0,0,0.3);border-radius:4px;border:1px solid rgba(255,255,255,0.05);padding:8px 12px;"]);
 var BalanceAmount$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "ManagmentPanel__BalanceAmount",
-  componentId: "sc-1yyi6jn-9"
+  componentId: "sc-1yyi6jn-11"
 })(["font-family:'Press Start 2P',cursive;font-size:0.8rem;color:", ";text-shadow:0 2px 4px rgba(0,0,0,0.5);margin-left:auto;"], function (props) {
   return props.$disabled ? uiColors.lightGray : '#fef08a';
 });
 var BalanceCurrencyLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "ManagmentPanel__BalanceCurrencyLabel",
-  componentId: "sc-1yyi6jn-10"
+  componentId: "sc-1yyi6jn-12"
 })(["font-size:0.5rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;min-width:45px;text-align:right;"]);
 var ItemComponentScrollWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__ItemComponentScrollWrapper",
-  componentId: "sc-1yyi6jn-11"
+  componentId: "sc-1yyi6jn-13"
 })(["overflow-y:scroll;overflow-x:hidden;height:335px;width:95%;margin:1rem auto 0 auto;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.05);border-radius:4px;@media (max-width:950px){height:195px;}"]);
 var SmallCTAButton = /*#__PURE__*/styled(CTAButton).withConfig({
   displayName: "ManagmentPanel__SmallCTAButton",
-  componentId: "sc-1yyi6jn-12"
+  componentId: "sc-1yyi6jn-14"
 })(["padding:8px 12px;height:32px;span{font-size:0.65rem;}svg{font-size:1.1rem;}"]);
 var CurrencyToggleRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__CurrencyToggleRow",
-  componentId: "sc-1yyi6jn-13"
+  componentId: "sc-1yyi6jn-15"
 })(["display:flex;align-items:center;gap:6px;margin-top:8px;"]);
 var CurrencyToggleLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "ManagmentPanel__CurrencyToggleLabel",
-  componentId: "sc-1yyi6jn-14"
+  componentId: "sc-1yyi6jn-16"
 })(["font-size:0.5rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;"]);
 var CurrencyToggleButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "ManagmentPanel__CurrencyToggleButton",
-  componentId: "sc-1yyi6jn-15"
+  componentId: "sc-1yyi6jn-17"
 })(["padding:3px 8px;font-family:'Press Start 2P',cursive !important;font-size:0.45rem !important;border-radius:4px;border:1px solid ", " !important;background:", " !important;color:", " !important;cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;&:hover{border-color:", " !important;color:", " !important;}"], function (_ref3) {
   var $active = _ref3.$active;
   return $active ? '#f59e0b' : 'rgba(255,255,255,0.15)';
@@ -13296,7 +13323,7 @@ var CurrencyToggleButton = /*#__PURE__*/styled.button.withConfig({
 });
 var DCPreview = /*#__PURE__*/styled.span.withConfig({
   displayName: "ManagmentPanel__DCPreview",
-  componentId: "sc-1yyi6jn-16"
+  componentId: "sc-1yyi6jn-18"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.4rem !important;color:rgba(167,139,250,0.8) !important;white-space:nowrap;margin-left:auto;"]);
 
 var CURRENCY_OPTIONS = [{
@@ -13939,7 +13966,9 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
     characterAtlasIMG = _ref.characterAtlasIMG,
     onCharacterList = _ref.onCharacterList,
     enableHotkeys = _ref.enableHotkeys,
-    disableHotkeys = _ref.disableHotkeys;
+    disableHotkeys = _ref.disableHotkeys,
+    _ref$commissionPercen = _ref.commissionPercent,
+    commissionPercent = _ref$commissionPercen === void 0 ? 0 : _ref$commissionPercen;
   var _useState = useState(null),
     selectedId = _useState[0],
     setSelectedId = _useState[1];
@@ -14057,7 +14086,7 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
     centered: true
   })), React.createElement(PricePreviewAmount, null, React.createElement(MMORPGNumber, {
     value: Number(price)
-  }), " DC")), React.createElement(DCRateStrip, null)))));
+  }), " DC")), price && Number(price) > 0 && commissionPercent > 0 && React.createElement(NetProceeds$1, null, "You'll receive:", ' ', (Number(price) - Math.floor(Number(price) * commissionPercent)).toLocaleString(), " DC", ' ', "(after ", commissionPercent * 100, "% commission)"), React.createElement(DCRateStrip, null)))));
 };
 var scaleIn$3 = /*#__PURE__*/keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
 var Overlay$8 = /*#__PURE__*/styled.div.withConfig({
@@ -14072,25 +14101,29 @@ var ModalContent$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__ModalContent",
   componentId: "sc-1uxkx35-2"
 })(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:440px;max-width:92%;max-height:80dvh;display:flex;flex-direction:column;gap:16px;overflow:hidden;pointer-events:auto;animation:", " 0.15s ease-out;"], scaleIn$3);
+var NetProceeds$1 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "CharacterListingModal__NetProceeds",
+  componentId: "sc-1uxkx35-3"
+})(["margin:0;color:#fef08a;font-size:8px !important;line-height:1.5 !important;"]);
 var Header$c = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__Header",
-  componentId: "sc-1uxkx35-3"
+  componentId: "sc-1uxkx35-4"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
 var Title$d = /*#__PURE__*/styled.h3.withConfig({
   displayName: "CharacterListingModal__Title",
-  componentId: "sc-1uxkx35-4"
+  componentId: "sc-1uxkx35-5"
 })(["margin:0;font-family:'Press Start 2P',cursive !important;font-size:0.65rem !important;color:#fef08a !important;"]);
 var CloseButton$f = /*#__PURE__*/styled.button.withConfig({
   displayName: "CharacterListingModal__CloseButton",
-  componentId: "sc-1uxkx35-5"
+  componentId: "sc-1uxkx35-6"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
 var CharacterList$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__CharacterList",
-  componentId: "sc-1uxkx35-6"
+  componentId: "sc-1uxkx35-7"
 })(["display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:260px;padding:2px;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.3);border-radius:4px;}"]);
 var CharacterRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__CharacterRow",
-  componentId: "sc-1uxkx35-7"
+  componentId: "sc-1uxkx35-8"
 })(["display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid ", ";border-radius:6px;background:", ";cursor:", ";opacity:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";background:", ";}&:focus-visible{outline:2px solid rgba(245,158,11,0.6);outline-offset:2px;}"], function (_ref2) {
   var $selected = _ref2.$selected,
     $disabled = _ref2.$disabled;
@@ -14116,7 +14149,7 @@ var CharacterRow = /*#__PURE__*/styled.div.withConfig({
 });
 var RadioCircle$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__RadioCircle",
-  componentId: "sc-1uxkx35-8"
+  componentId: "sc-1uxkx35-9"
 })(["width:14px;height:14px;border-radius:50%;border:2px solid ", ";flex-shrink:0;display:flex;align-items:center;justify-content:center;&::after{content:'';width:6px;height:6px;border-radius:50%;background:", ";opacity:", ";transition:opacity 0.15s;}"], function (_ref8) {
   var $selected = _ref8.$selected,
     $disabled = _ref8.$disabled;
@@ -14130,55 +14163,55 @@ var RadioCircle$1 = /*#__PURE__*/styled.div.withConfig({
 });
 var ActiveTag = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__ActiveTag",
-  componentId: "sc-1uxkx35-9"
+  componentId: "sc-1uxkx35-10"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.35rem !important;color:#666 !important;background:rgba(255,255,255,0.06);padding:3px 6px;border-radius:3px;white-space:nowrap;margin-left:auto;"]);
 var SpriteWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__SpriteWrapper",
-  componentId: "sc-1uxkx35-10"
+  componentId: "sc-1uxkx35-11"
 })(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;flex-shrink:0;width:40px;height:40px;"]);
 var CharacterInfo$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__CharacterInfo",
-  componentId: "sc-1uxkx35-11"
+  componentId: "sc-1uxkx35-12"
 })(["display:flex;flex-direction:column;gap:4px;flex:1;"]);
 var CharacterName$3 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__CharacterName",
-  componentId: "sc-1uxkx35-12"
+  componentId: "sc-1uxkx35-13"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#f3f4f6 !important;"]);
 var CharacterMeta$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__CharacterMeta",
-  componentId: "sc-1uxkx35-13"
+  componentId: "sc-1uxkx35-14"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.4rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var PricePreview = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__PricePreview",
-  componentId: "sc-1uxkx35-14"
+  componentId: "sc-1uxkx35-15"
 })(["display:flex;align-items:center;gap:6px;"]);
 var DCCoinWrapper$4 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__DCCoinWrapper",
-  componentId: "sc-1uxkx35-15"
+  componentId: "sc-1uxkx35-16"
 })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
 var PricePreviewAmount = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterListingModal__PricePreviewAmount",
-  componentId: "sc-1uxkx35-16"
+  componentId: "sc-1uxkx35-17"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#fef08a !important;"]);
 var PriceSection$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__PriceSection",
-  componentId: "sc-1uxkx35-17"
+  componentId: "sc-1uxkx35-18"
 })(["display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,0.06);padding-top:12px;"]);
 var PriceLabel = /*#__PURE__*/styled.p.withConfig({
   displayName: "CharacterListingModal__PriceLabel",
-  componentId: "sc-1uxkx35-18"
+  componentId: "sc-1uxkx35-19"
 })(["margin:0;font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var PriceRow$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__PriceRow",
-  componentId: "sc-1uxkx35-19"
+  componentId: "sc-1uxkx35-20"
 })(["display:flex;gap:8px;align-items:center;.price-input{flex:1;height:12px;}"]);
 var ListBtn = /*#__PURE__*/styled(CTAButton).withConfig({
   displayName: "CharacterListingModal__ListBtn",
-  componentId: "sc-1uxkx35-20"
+  componentId: "sc-1uxkx35-21"
 })(["flex-shrink:0;padding:10px 16px;height:32px;span{font-size:0.6rem;}svg{font-size:1.1rem;}"]);
 var EmptyState$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterListingModal__EmptyState",
-  componentId: "sc-1uxkx35-21"
+  componentId: "sc-1uxkx35-22"
 })(["display:flex;align-items:center;justify-content:center;padding:32px 16px;font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#666 !important;text-transform:uppercase;letter-spacing:1px;"]);
 
 var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
@@ -14196,7 +14229,9 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
     characterAtlasJSON = _ref.characterAtlasJSON,
     characterAtlasIMG = _ref.characterAtlasIMG,
     enableHotkeys = _ref.enableHotkeys,
-    disableHotkeys = _ref.disableHotkeys;
+    disableHotkeys = _ref.disableHotkeys,
+    _ref$commissionPercen = _ref.commissionPercent,
+    commissionPercent = _ref$commissionPercen === void 0 ? 0 : _ref$commissionPercen;
   var _useState = useState(null),
     delistingId = _useState[0],
     setDelistingId = _useState[1];
@@ -14239,7 +14274,8 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
       setIsListingModalOpen(false);
     },
     enableHotkeys: enableHotkeys,
-    disableHotkeys: disableHotkeys
+    disableHotkeys: disableHotkeys,
+    commissionPercent: commissionPercent
   }), React.createElement(Toolbar, null, React.createElement(ListCharacterBtn, {
     icon: React.createElement(ShoppingBag, {
       width: 16,
@@ -14398,7 +14434,9 @@ var CharacterTradePanel = function CharacterTradePanel(_ref) {
     characterAtlasJSON = _ref.characterAtlasJSON,
     characterAtlasIMG = _ref.characterAtlasIMG,
     enableHotkeys = _ref.enableHotkeys,
-    disableHotkeys = _ref.disableHotkeys;
+    disableHotkeys = _ref.disableHotkeys,
+    _ref$commissionPercen = _ref.commissionPercent,
+    commissionPercent = _ref$commissionPercen === void 0 ? 0 : _ref$commissionPercen;
   var _useState = useState('browse'),
     subTab = _useState[0],
     setSubTab = _useState[1];
@@ -14445,7 +14483,8 @@ var CharacterTradePanel = function CharacterTradePanel(_ref) {
     characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : atlasJSON,
     characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : atlasIMG,
     enableHotkeys: enableHotkeys,
-    disableHotkeys: disableHotkeys
+    disableHotkeys: disableHotkeys,
+    commissionPercent: commissionPercent
   }));
 };
 var CharacterSubTabs = /*#__PURE__*/styled.div.withConfig({
@@ -14665,7 +14704,8 @@ var Marketplace = function Marketplace(props) {
     characterAtlasJSON: characterAtlasJSON,
     characterAtlasIMG: characterAtlasIMG,
     enableHotkeys: props.enableHotkeys,
-    disableHotkeys: props.disableHotkeys
+    disableHotkeys: props.disableHotkeys,
+    commissionPercent: props.commissionPercent
   }), activeTab === 'sell' && React.createElement(ManagmentPanel, Object.assign({}, props, {
     acceptedCurrency: acceptedCurrency
   })), activeTab === 'buy-orders' && React.createElement(React.Fragment, null, React.createElement(BuyOrderPanel, {