@rpg-engine/long-bow 0.8.188 → 0.8.190

package/dist/components/Marketplace/MyCharacterListingsPanel.d.ts

@@ -1,4 +1,4 @@
-import { ICharacterListing } from '@rpg-engine/shared';
+import { ICharacter, ICharacterListing } from '@rpg-engine/shared';
 import React from 'react';
 export interface IMyCharacterListingsPanelProps {
     myCharacterListings: ICharacterListing[];
@@ -7,6 +7,9 @@ export interface IMyCharacterListingsPanelProps {
     itemsPerPage: number;
     onPageChange: (page: number) => void;
     onCharacterDelist: (listingId: string) => void;
+    /** Characters that can be listed (used for the List a Character modal) */
+    accountCharacters: ICharacter[];
+    onCharacterList: (characterId: string, price: number) => void;
     /** Items atlas — for UI sprites like the DC coin */
     atlasJSON: any;
     atlasIMG: any;

package/dist/long-bow.cjs.development.js

@@ -47625,195 +47625,6 @@ var EmptyText = /*#__PURE__*/styled__default.span.withConfig({
   componentId: "sc-1aiauep-17"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.48rem !important;color:#71717a !important;text-transform:uppercase;letter-spacing:1px;"]);
 
-var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
-  var myCharacterListings = _ref.myCharacterListings,
-    totalCount = _ref.totalCount,
-    currentPage = _ref.currentPage,
-    itemsPerPage = _ref.itemsPerPage,
-    onPageChange = _ref.onPageChange,
-    onCharacterDelist = _ref.onCharacterDelist,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    characterAtlasJSON = _ref.characterAtlasJSON,
-    characterAtlasIMG = _ref.characterAtlasIMG,
-    enableHotkeys = _ref.enableHotkeys;
-  var _useState = React.useState(null),
-    delistingListingId = _useState[0],
-    setDelistingListingId = _useState[1];
-  var itemsContainer = React.useRef(null);
-  React.useEffect(function () {
-    var _itemsContainer$curre;
-    (_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
-  }, [currentPage]);
-  var handleDelistClick = function handleDelistClick(listingId) {
-    setDelistingListingId(listingId);
-  };
-  var handleDelistConfirm = function handleDelistConfirm() {
-    if (delistingListingId) {
-      onCharacterDelist(delistingListingId);
-      setDelistingListingId(null);
-      enableHotkeys == null ? void 0 : enableHotkeys();
-    }
-  };
-  var getFormattedDate = function getFormattedDate(date) {
-    return new Date(date).toLocaleDateString();
-  };
-  return React__default.createElement(React__default.Fragment, null, delistingListingId && React__default.createElement(ConfirmModal, {
-    onClose: function onClose() {
-      setDelistingListingId(null);
-      enableHotkeys == null ? void 0 : enableHotkeys();
-    },
-    onConfirm: handleDelistConfirm,
-    message: "Are you sure you want to delist this character?"
-  }), React__default.createElement(ListingsContainer$1, {
-    id: "MarketContainer",
-    ref: itemsContainer
-  }, myCharacterListings.length === 0 ? React__default.createElement(EmptyState$6, null, React__default.createElement(User.User, {
-    width: 32,
-    height: 32
-  }), React__default.createElement(EmptyText$1, null, "You have no listed characters."), React__default.createElement(EmptySubtext, null, "Use the \"List Character\" tab to list a character for sale.")) : React__default.createElement(ListingsGrid$1, null, myCharacterListings.map(function (listing) {
-    return React__default.createElement(CharacterListingCard$1, {
-      key: listing._id
-    }, React__default.createElement(CharacterSprite$1, null, React__default.createElement(SpriteFromAtlas, {
-      atlasIMG: characterAtlasIMG,
-      atlasJSON: characterAtlasJSON,
-      spriteKey: listing.characterSnapshot.textureKey + "/down/standing/0.png",
-      imgScale: 3,
-      height: 64,
-      width: 64,
-      centered: true
-    })), React__default.createElement(CharacterInfo$1, null, React__default.createElement(CharacterName$3, null, listing.characterSnapshot.name || 'Unknown'), React__default.createElement(CharacterMeta$1, null, "Level ", listing.characterSnapshot.level), React__default.createElement(ListingPrice$1, null, React__default.createElement(DCCoinWrapper$4, null, React__default.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: "others/definya-coin.png",
-      imgScale: 1,
-      centered: true
-    })), shared.formatDCAmount(listing.price), " DC"), React__default.createElement(ListingMeta, null, "Listed ", getFormattedDate(listing.createdAt)), listing.isBeingBought && React__default.createElement(ListingStatus, {
-      "$status": "pending"
-    }, "Sale Pending")), React__default.createElement(ActionButton, {
-      icon: React__default.createElement(Delete.Delete, {
-        width: 16,
-        height: 16
-      }),
-      label: "Delist",
-      onClick: function onClick() {
-        return handleDelistClick(listing._id);
-      },
-      iconColor: "#ef4444",
-      disabled: listing.isBeingBought
-    }));
-  }))), totalCount > itemsPerPage && React__default.createElement(PagerFooter$2, null, React__default.createElement(Pagination$1, null, Array.from({
-    length: Math.ceil(totalCount / itemsPerPage)
-  }, function (_, i) {
-    return i + 1;
-  }).map(function (page) {
-    return React__default.createElement(PageButton, {
-      key: page,
-      "$active": currentPage === page,
-      type: "button",
-      onClick: function onClick() {
-        return onPageChange(page);
-      }
-    }, page);
-  }))));
-};
-var ListingsContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__ListingsContainer",
-  componentId: "sc-su21a6-0"
-})(["overflow-y:scroll;overflow-x:hidden;height:390px;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:250px;}"]);
-var ListingsGrid$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__ListingsGrid",
-  componentId: "sc-su21a6-1"
-})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px;"]);
-var CharacterListingCard$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__CharacterListingCard",
-  componentId: "sc-su21a6-2"
-})(["display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px;"]);
-var CharacterSprite$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__CharacterSprite",
-  componentId: "sc-su21a6-3"
-})(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;"]);
-var CharacterInfo$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__CharacterInfo",
-  componentId: "sc-su21a6-4"
-})(["display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;"]);
-var CharacterName$3 = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "MyCharacterListingsPanel__CharacterName",
-  componentId: "sc-su21a6-5"
-})(["font-family:'Press Start 2P',cursive;font-size:0.55rem;color:#f3f4f6;text-transform:uppercase;letter-spacing:0.5px;"]);
-var CharacterMeta$1 = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "MyCharacterListingsPanel__CharacterMeta",
-  componentId: "sc-su21a6-6"
-})(["font-size:0.45rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;"]);
-var ListingPrice$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__ListingPrice",
-  componentId: "sc-su21a6-7"
-})(["display:flex;align-items:center;gap:6px;font-family:'Press Start 2P',cursive;font-size:0.5rem;color:#fef08a;"]);
-var DCCoinWrapper$4 = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "MyCharacterListingsPanel__DCCoinWrapper",
-  componentId: "sc-su21a6-8"
-})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
-var ListingMeta = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "MyCharacterListingsPanel__ListingMeta",
-  componentId: "sc-su21a6-9"
-})(["font-size:0.38rem;color:#52525b;text-transform:uppercase;letter-spacing:0.5px;"]);
-var ListingStatus = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "MyCharacterListingsPanel__ListingStatus",
-  componentId: "sc-su21a6-10"
-})(["font-size:0.38rem;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px;", ""], function (_ref2) {
-  var $status = _ref2.$status;
-  return $status === 'pending' ? "\n          background: rgba(239, 68, 68, 0.2);\n          border: 1px solid rgba(239, 68, 68, 0.4);\n          color: #ef4444;\n        " : "\n          background: rgba(34, 197, 94, 0.2);\n          border: 1px solid rgba(34, 197, 94, 0.4);\n          color: #22c55e;\n        ";
-});
-var ActionButton = /*#__PURE__*/styled__default(CTAButton).withConfig({
-  displayName: "MyCharacterListingsPanel__ActionButton",
-  componentId: "sc-su21a6-11"
-})(["padding:6px 12px;height:28px;opacity:", ";pointer-events:", ";span{font-size:0.5rem;}svg{font-size:1rem;}"], function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? 0.5 : 1;
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? 'none' : 'auto';
-});
-var PagerFooter$2 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__PagerFooter",
-  componentId: "sc-su21a6-12"
-})(["display:flex;justify-content:center;align-items:center;padding:8px 0 4px;min-height:36px;width:95%;margin:0 auto;"]);
-var Pagination$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__Pagination",
-  componentId: "sc-su21a6-13"
-})(["display:flex;gap:6px;"]);
-var PageButton = /*#__PURE__*/styled__default.button.withConfig({
-  displayName: "MyCharacterListingsPanel__PageButton",
-  componentId: "sc-su21a6-14"
-})(["padding:6px 10px;font-family:'Press Start 2P',cursive;font-size:0.5rem;border-radius:4px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;&:hover{border-color:", ";color:", ";}"], function (_ref5) {
-  var $active = _ref5.$active;
-  return $active ? '#f59e0b' : 'rgba(255,255,255,0.12)';
-}, function (_ref6) {
-  var $active = _ref6.$active;
-  return $active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)';
-}, function (_ref7) {
-  var $active = _ref7.$active;
-  return $active ? '#f59e0b' : '#777';
-}, function (_ref8) {
-  var $active = _ref8.$active;
-  return $active ? '#f59e0b' : 'rgba(255,255,255,0.3)';
-}, function (_ref9) {
-  var $active = _ref9.$active;
-  return $active ? '#f59e0b' : '#bbb';
-});
-var EmptyState$6 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MyCharacterListingsPanel__EmptyState",
-  componentId: "sc-su21a6-15"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;min-height:200px;"]);
-var EmptyText$1 = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "MyCharacterListingsPanel__EmptyText",
-  componentId: "sc-su21a6-16"
-})(["font-size:0.55rem;color:#71717a;text-transform:uppercase;letter-spacing:1px;"]);
-var EmptySubtext = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "MyCharacterListingsPanel__EmptySubtext",
-  componentId: "sc-su21a6-17"
-})(["font-size:0.45rem;color:#52525b;text-transform:none;letter-spacing:0.5px;text-align:center;max-width:280px;"]);
-
 var CharacterListingModal = function CharacterListingModal(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -47881,7 +47692,7 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
     onPointerDown: handleClose,
     "aria-label": "Close",
     type: "button"
-  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(CharacterList$1, null, eligibleCharacters.length === 0 ? React__default.createElement(EmptyState$7, null, "No eligible characters to list.") : eligibleCharacters.map(function (character) {
+  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(CharacterList$1, null, eligibleCharacters.length === 0 ? React__default.createElement(EmptyState$6, null, "No eligible characters to list.") : eligibleCharacters.map(function (character) {
     var isSelected = selectedId === character._id;
     return React__default.createElement(CharacterRow, {
       key: character._id,
@@ -47907,7 +47718,7 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
       imgScale: 2,
       height: 40,
       width: 40
-    })), React__default.createElement(CharacterInfo$2, null, React__default.createElement(CharacterName$4, null, character.name || 'Unknown'), React__default.createElement(CharacterMeta$2, null, "Level ", getLevel(character))));
+    })), React__default.createElement(CharacterInfo$1, null, React__default.createElement(CharacterName$3, null, character.name || 'Unknown'), React__default.createElement(CharacterMeta$1, null, "Level ", getLevel(character))));
   })), React__default.createElement(PriceSection$1, null, React__default.createElement(PriceLabel, null, "Set Price (DC)"), React__default.createElement(PriceRow$1, null, React__default.createElement(Input, {
     onChange: function onChange(e) {
       return setPrice(e.target.value);
@@ -47927,7 +47738,7 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
     label: "List",
     disabled: !canList,
     onClick: handleListClick
-  })), price && Number(price) > 0 && React__default.createElement(PricePreview, null, React__default.createElement(DCCoinWrapper$5, null, React__default.createElement(SpriteFromAtlas, {
+  })), price && Number(price) > 0 && React__default.createElement(PricePreview, null, React__default.createElement(DCCoinWrapper$4, null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: "others/definya-coin.png",
@@ -47994,15 +47805,15 @@ var SpriteWrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CharacterListingModal__SpriteWrapper",
   componentId: "sc-1uxkx35-9"
 })(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;flex-shrink:0;width:40px;height:40px;"]);
-var CharacterInfo$2 = /*#__PURE__*/styled__default.div.withConfig({
+var CharacterInfo$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CharacterListingModal__CharacterInfo",
   componentId: "sc-1uxkx35-10"
 })(["display:flex;flex-direction:column;gap:4px;flex:1;"]);
-var CharacterName$4 = /*#__PURE__*/styled__default.span.withConfig({
+var CharacterName$3 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "CharacterListingModal__CharacterName",
   componentId: "sc-1uxkx35-11"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#f3f4f6 !important;"]);
-var CharacterMeta$2 = /*#__PURE__*/styled__default.span.withConfig({
+var CharacterMeta$1 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "CharacterListingModal__CharacterMeta",
   componentId: "sc-1uxkx35-12"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.4rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
@@ -48010,7 +47821,7 @@ var PricePreview = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CharacterListingModal__PricePreview",
   componentId: "sc-1uxkx35-13"
 })(["display:flex;align-items:center;gap:6px;"]);
-var DCCoinWrapper$5 = /*#__PURE__*/styled__default.span.withConfig({
+var DCCoinWrapper$4 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "CharacterListingModal__DCCoinWrapper",
   componentId: "sc-1uxkx35-14"
 })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
@@ -48034,67 +47845,204 @@ var ListBtn = /*#__PURE__*/styled__default(CTAButton).withConfig({
   displayName: "CharacterListingModal__ListBtn",
   componentId: "sc-1uxkx35-19"
 })(["flex-shrink:0;padding:10px 16px;height:32px;span{font-size:0.6rem;}svg{font-size:1.1rem;}"]);
-var EmptyState$7 = /*#__PURE__*/styled__default.div.withConfig({
+var EmptyState$6 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CharacterListingModal__EmptyState",
   componentId: "sc-1uxkx35-20"
 })(["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 CharacterListingForm = function CharacterListingForm(_ref) {
-  var accountCharacters = _ref.accountCharacters,
-    onCharacterList = _ref.onCharacterList,
+var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
+  var myCharacterListings = _ref.myCharacterListings,
+    totalCount = _ref.totalCount,
+    currentPage = _ref.currentPage,
+    itemsPerPage = _ref.itemsPerPage,
+    onPageChange = _ref.onPageChange,
+    onCharacterDelist = _ref.onCharacterDelist,
+    accountCharacters = _ref.accountCharacters,
+    _onCharacterList = _ref.onCharacterList,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     characterAtlasJSON = _ref.characterAtlasJSON,
     characterAtlasIMG = _ref.characterAtlasIMG,
     enableHotkeys = _ref.enableHotkeys,
     disableHotkeys = _ref.disableHotkeys;
-  var _useState = React.useState(false),
-    isModalOpen = _useState[0],
-    setIsModalOpen = _useState[1];
+  var _useState = React.useState(null),
+    delistingId = _useState[0],
+    setDelistingId = _useState[1];
+  var _useState2 = React.useState(false),
+    isListingModalOpen = _useState2[0],
+    setIsListingModalOpen = _useState2[1];
+  var itemsContainer = React.useRef(null);
+  React.useEffect(function () {
+    var _itemsContainer$curre;
+    (_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
+  }, [currentPage]);
+  var handleDelistConfirm = function handleDelistConfirm() {
+    if (delistingId) {
+      onCharacterDelist(delistingId);
+      setDelistingId(null);
+      enableHotkeys == null ? void 0 : enableHotkeys();
+    }
+  };
   var eligibleCount = accountCharacters.filter(function (c) {
     return !c.isListedForSale && !c.tradedAt;
   }).length;
-  return React__default.createElement(Wrapper$2, null, React__default.createElement(CharacterListingModal, {
-    isOpen: isModalOpen,
+  return React__default.createElement(React__default.Fragment, null, delistingId && React__default.createElement(ConfirmModal, {
     onClose: function onClose() {
-      return setIsModalOpen(false);
+      setDelistingId(null);
+      enableHotkeys == null ? void 0 : enableHotkeys();
+    },
+    onConfirm: handleDelistConfirm,
+    message: "Are you sure you want to delist this character?"
+  }), React__default.createElement(CharacterListingModal, {
+    isOpen: isListingModalOpen,
+    onClose: function onClose() {
+      return setIsListingModalOpen(false);
     },
     accountCharacters: accountCharacters,
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     characterAtlasJSON: characterAtlasJSON,
     characterAtlasIMG: characterAtlasIMG,
-    onCharacterList: onCharacterList,
+    onCharacterList: function onCharacterList(id, price) {
+      _onCharacterList(id, price);
+      setIsListingModalOpen(false);
+    },
     enableHotkeys: enableHotkeys,
     disableHotkeys: disableHotkeys
-  }), React__default.createElement(Description$4, null, "List one of your offline characters on the marketplace. Prices are set in DC."), React__default.createElement(OpenButton, {
+  }), React__default.createElement(Toolbar, null, React__default.createElement(ListCharacterBtn, {
     icon: React__default.createElement(ShoppingBag.ShoppingBag, {
-      width: 20,
-      height: 20
+      width: 16,
+      height: 16
     }),
     label: "List a Character" + (eligibleCount > 0 ? " (" + eligibleCount + " eligible)" : ''),
-    disabled: eligibleCount === 0,
     onClick: function onClick() {
-      return setIsModalOpen(true);
-    }
-  }), eligibleCount === 0 && React__default.createElement(NoEligible, null, "No eligible characters to list."));
+      return setIsListingModalOpen(true);
+    },
+    disabled: eligibleCount === 0
+  })), React__default.createElement(ListingsContainer$1, {
+    ref: itemsContainer
+  }, myCharacterListings.length === 0 ? React__default.createElement(EmptyState$7, null, React__default.createElement(User.User, {
+    width: 32,
+    height: 32
+  }), React__default.createElement(EmptyText$1, null, "No listed characters."), React__default.createElement(EmptySubtext, null, "Use the \"List Character\" tab to put a character up for sale.")) : React__default.createElement(ListingsGrid$1, null, myCharacterListings.map(function (listing) {
+    return React__default.createElement(CharacterListingCard$1, {
+      key: listing._id,
+      "$isBeingBought": listing.isBeingBought
+    }, React__default.createElement(CharacterSprite$1, null, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: characterAtlasIMG,
+      atlasJSON: characterAtlasJSON,
+      spriteKey: listing.characterSnapshot.textureKey + "/down/standing/0.png",
+      imgScale: 3,
+      height: 64,
+      width: 64,
+      centered: true
+    })), React__default.createElement(CharacterInfo$2, null, React__default.createElement(CharacterName$4, null, listing.characterSnapshot.name || 'Unknown'), React__default.createElement(CharacterMeta$2, null, "Lv.", listing.characterSnapshot.level, " \xB7 ", listing.characterSnapshot["class"]), React__default.createElement(ListingPrice$1, null, React__default.createElement(DCCoinWrapper$5, null, React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      spriteKey: "others/definya-coin.png",
+      imgScale: 1,
+      centered: true
+    })), shared.formatDCAmount(listing.price), " DC"), React__default.createElement(ListingDate, null, "Listed ", new Date(listing.createdAt).toLocaleDateString())), React__default.createElement(DelistBtn, {
+      icon: React__default.createElement(Delete.Delete, {
+        width: 14,
+        height: 14
+      }),
+      label: "Delist",
+      onClick: function onClick() {
+        return setDelistingId(listing._id);
+      },
+      disabled: listing.isBeingBought
+    }), listing.isBeingBought && React__default.createElement(PendingBadge, null, "Pending"));
+  }))), totalCount > itemsPerPage && React__default.createElement(PagerFooter$2, null, React__default.createElement(Pagination, {
+    currentPage: currentPage,
+    totalPages: Math.ceil(totalCount / itemsPerPage),
+    onPageChange: onPageChange
+  })));
 };
-var Wrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "CharacterListingForm__Wrapper",
-  componentId: "sc-fxv1tt-0"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 24px;width:95%;margin:0 auto;"]);
-var Description$4 = /*#__PURE__*/styled__default.p.withConfig({
-  displayName: "CharacterListingForm__Description",
-  componentId: "sc-fxv1tt-1"
-})(["margin:0;font-size:0.5rem;color:#666;text-align:center;line-height:1.6;max-width:320px;"]);
-var OpenButton = /*#__PURE__*/styled__default(CTAButton).withConfig({
-  displayName: "CharacterListingForm__OpenButton",
-  componentId: "sc-fxv1tt-2"
-})(["padding:14px 24px;span{font-size:0.65rem;}svg{font-size:1.2rem;}"]);
-var NoEligible = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "CharacterListingForm__NoEligible",
-  componentId: "sc-fxv1tt-3"
-})(["font-size:0.45rem;color:#52525b;text-transform:uppercase;letter-spacing:1px;"]);
+var ListingsContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__ListingsContainer",
+  componentId: "sc-su21a6-0"
+})(["overflow-y:scroll;overflow-x:hidden;height:390px;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:250px;}"]);
+var ListingsGrid$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__ListingsGrid",
+  componentId: "sc-su21a6-1"
+})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px;"]);
+var CharacterListingCard$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__CharacterListingCard",
+  componentId: "sc-su21a6-2"
+})(["display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(255,255,255,0.03);border:1px solid ", ";border-radius:8px;padding:12px;position:relative;opacity:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";background:", ";}"], function (_ref2) {
+  var $isBeingBought = _ref2.$isBeingBought;
+  return $isBeingBought ? 'rgba(239,68,68,0.3)' : 'rgba(255,255,255,0.08)';
+}, function (_ref3) {
+  var $isBeingBought = _ref3.$isBeingBought;
+  return $isBeingBought ? 0.7 : 1;
+}, function (_ref4) {
+  var $isBeingBought = _ref4.$isBeingBought;
+  return $isBeingBought ? 'rgba(239,68,68,0.5)' : 'rgba(245,158,11,0.3)';
+}, function (_ref5) {
+  var $isBeingBought = _ref5.$isBeingBought;
+  return $isBeingBought ? 'rgba(239,68,68,0.04)' : 'rgba(245,158,11,0.04)';
+});
+var CharacterSprite$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__CharacterSprite",
+  componentId: "sc-su21a6-3"
+})(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;width:64px;height:64px;flex-shrink:0;"]);
+var CharacterInfo$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__CharacterInfo",
+  componentId: "sc-su21a6-4"
+})(["display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:100%;"]);
+var CharacterName$4 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MyCharacterListingsPanel__CharacterName",
+  componentId: "sc-su21a6-5"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#f3f4f6 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var CharacterMeta$2 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MyCharacterListingsPanel__CharacterMeta",
+  componentId: "sc-su21a6-6"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.45rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var ListingPrice$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__ListingPrice",
+  componentId: "sc-su21a6-7"
+})(["display:flex;align-items:center;justify-content:center;gap:4px;font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#fef08a !important;line-height:1;"]);
+var DCCoinWrapper$5 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MyCharacterListingsPanel__DCCoinWrapper",
+  componentId: "sc-su21a6-8"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;"]);
+var ListingDate = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MyCharacterListingsPanel__ListingDate",
+  componentId: "sc-su21a6-9"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.35rem !important;color:#52525b !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var DelistBtn = /*#__PURE__*/styled__default(CTAButton).withConfig({
+  displayName: "MyCharacterListingsPanel__DelistBtn",
+  componentId: "sc-su21a6-10"
+})(["width:100%;padding:6px 10px;height:28px;margin-top:2px;span{font-size:0.48rem;}svg{font-size:0.9rem;}"]);
+var PendingBadge = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MyCharacterListingsPanel__PendingBadge",
+  componentId: "sc-su21a6-11"
+})(["position:absolute;top:6px;right:6px;background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.4);border-radius:4px;padding:2px 6px;font-family:'Press Start 2P',cursive !important;font-size:0.35rem !important;color:#ef4444 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var Toolbar = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__Toolbar",
+  componentId: "sc-su21a6-12"
+})(["width:95%;margin:10px auto 0 auto;display:flex;justify-content:flex-end;"]);
+var ListCharacterBtn = /*#__PURE__*/styled__default(CTAButton).withConfig({
+  displayName: "MyCharacterListingsPanel__ListCharacterBtn",
+  componentId: "sc-su21a6-13"
+})(["padding:8px 16px;height:32px;span{font-size:0.5rem;}svg{font-size:1rem;}"]);
+var PagerFooter$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__PagerFooter",
+  componentId: "sc-su21a6-14"
+})(["display:flex;justify-content:center;align-items:center;padding:8px 0 4px;min-height:36px;width:95%;margin:0 auto;"]);
+var EmptyState$7 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MyCharacterListingsPanel__EmptyState",
+  componentId: "sc-su21a6-15"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;min-height:200px;"]);
+var EmptyText$1 = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MyCharacterListingsPanel__EmptyText",
+  componentId: "sc-su21a6-16"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.48rem !important;color:#71717a !important;text-transform:uppercase;letter-spacing:1px;"]);
+var EmptySubtext = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MyCharacterListingsPanel__EmptySubtext",
+  componentId: "sc-su21a6-17"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#52525b !important;text-align:center;max-width:260px;line-height:1.6;"]);
 
 var Marketplace = function Marketplace(props) {
   var onClose = props.onClose,
@@ -48277,13 +48225,7 @@ var Marketplace = function Marketplace(props) {
       return setCharacterSubTab('my-listings');
     },
     type: "button"
-  }, "My Listings"), React__default.createElement(CharacterSubTab, {
-    "$active": characterSubTab === 'list',
-    onClick: function onClick() {
-      return setCharacterSubTab('list');
-    },
-    type: "button"
-  }, "List Character")), characterSubTab === 'browse' && React__default.createElement(CharacterMarketplacePanel, {
+  }, "My Listings")), characterSubTab === 'browse' && React__default.createElement(CharacterMarketplacePanel, {
     characterListings: characterListings != null ? characterListings : [],
     totalCount: characterListingsTotal != null ? characterListingsTotal : 0,
     currentPage: characterListingsPage != null ? characterListingsPage : 1,
@@ -48306,13 +48248,6 @@ var Marketplace = function Marketplace(props) {
     itemsPerPage: 10,
     onPageChange: onMyCharacterListingsPageChange != null ? onMyCharacterListingsPageChange : function () {},
     onCharacterDelist: onCharacterDelist != null ? onCharacterDelist : function () {},
-    atlasJSON: props.atlasJSON,
-    atlasIMG: props.atlasIMG,
-    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : props.atlasJSON,
-    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : props.atlasIMG,
-    enableHotkeys: props.enableHotkeys,
-    disableHotkeys: props.disableHotkeys
-  }), characterSubTab === 'list' && React__default.createElement(CharacterListingForm, {
     accountCharacters: accountCharacters != null ? accountCharacters : [],
     onCharacterList: onCharacterList != null ? onCharacterList : function () {},
     atlasJSON: props.atlasJSON,
@@ -48435,7 +48370,7 @@ var CharacterMarketplaceRows = function CharacterMarketplaceRows(_ref) {
     atlasJSON: atlasJSON,
     spriteKey: "others/definya-coin.png",
     imgScale: 1
-  })), React__default.createElement(DCPrice$2, null, shared.formatDCAmount(price))), isBeingBought && React__default.createElement(PendingBadge, null, "Sale Pending"))), React__default.createElement(ActionSection$2, null, React__default.createElement(CTAButton, {
+  })), React__default.createElement(DCPrice$2, null, shared.formatDCAmount(price))), isBeingBought && React__default.createElement(PendingBadge$1, null, "Sale Pending"))), React__default.createElement(ActionSection$2, null, React__default.createElement(CTAButton, {
     icon: onCharacterBuy ? React__default.createElement(Coins.Coins, {
       width: 18,
       height: 18
@@ -48494,7 +48429,7 @@ var ActionSection$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CharacterMarketplaceRows__ActionSection",
   componentId: "sc-1pxkdig-10"
 })(["flex-shrink:0;margin-left:0.75rem;"]);
-var PendingBadge = /*#__PURE__*/styled__default.span.withConfig({
+var PendingBadge$1 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "CharacterMarketplaceRows__PendingBadge",
   componentId: "sc-1pxkdig-11"
 })(["font-size:0.38rem;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px;background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.4);color:#ef4444;margin-top:4px;"]);
@@ -48548,6 +48483,63 @@ var OtherListingRow = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-1pxkdig-15"
 })(["opacity:0.85;&:hover{opacity:1;}"]);
 
+var CharacterListingForm = function CharacterListingForm(_ref) {
+  var accountCharacters = _ref.accountCharacters,
+    onCharacterList = _ref.onCharacterList,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    characterAtlasJSON = _ref.characterAtlasJSON,
+    characterAtlasIMG = _ref.characterAtlasIMG,
+    enableHotkeys = _ref.enableHotkeys,
+    disableHotkeys = _ref.disableHotkeys;
+  var _useState = React.useState(false),
+    isModalOpen = _useState[0],
+    setIsModalOpen = _useState[1];
+  var eligibleCount = accountCharacters.filter(function (c) {
+    return !c.isListedForSale && !c.tradedAt;
+  }).length;
+  return React__default.createElement(Wrapper$2, null, React__default.createElement(CharacterListingModal, {
+    isOpen: isModalOpen,
+    onClose: function onClose() {
+      return setIsModalOpen(false);
+    },
+    accountCharacters: accountCharacters,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    characterAtlasJSON: characterAtlasJSON,
+    characterAtlasIMG: characterAtlasIMG,
+    onCharacterList: onCharacterList,
+    enableHotkeys: enableHotkeys,
+    disableHotkeys: disableHotkeys
+  }), React__default.createElement(Description$4, null, "List one of your offline characters on the marketplace. Prices are set in DC."), React__default.createElement(OpenButton, {
+    icon: React__default.createElement(ShoppingBag.ShoppingBag, {
+      width: 20,
+      height: 20
+    }),
+    label: "List a Character" + (eligibleCount > 0 ? " (" + eligibleCount + " eligible)" : ''),
+    disabled: eligibleCount === 0,
+    onClick: function onClick() {
+      return setIsModalOpen(true);
+    }
+  }), eligibleCount === 0 && React__default.createElement(NoEligible, null, "No eligible characters to list."));
+};
+var Wrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "CharacterListingForm__Wrapper",
+  componentId: "sc-fxv1tt-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 24px;width:95%;margin:0 auto;"]);
+var Description$4 = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "CharacterListingForm__Description",
+  componentId: "sc-fxv1tt-1"
+})(["margin:0;font-size:0.5rem;color:#666;text-align:center;line-height:1.6;max-width:320px;"]);
+var OpenButton = /*#__PURE__*/styled__default(CTAButton).withConfig({
+  displayName: "CharacterListingForm__OpenButton",
+  componentId: "sc-fxv1tt-2"
+})(["padding:14px 24px;span{font-size:0.65rem;}svg{font-size:1.2rem;}"]);
+var NoEligible = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "CharacterListingForm__NoEligible",
+  componentId: "sc-fxv1tt-3"
+})(["font-size:0.45rem;color:#52525b;text-transform:uppercase;letter-spacing:1px;"]);
+
 var TabBody = function TabBody(_ref) {
   var id = _ref.id,
     children = _ref.children,