@rpg-engine/long-bow 0.8.167 → 0.8.169

package/dist/stories/Features/trading/MarketplaceRows.stories.d.ts

@@ -3,3 +3,4 @@ declare const meta: Meta;
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
 export declare const HighStackQuantity: Story;
+export declare const DCOnly: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.167",
+  "version": "0.8.169",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "0.10.93",
+    "@rpg-engine/shared": "0.10.100",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Marketplace/BuyPanel.tsx

@@ -3,6 +3,7 @@ import {
   IEquipmentSet,
   IMarketplaceBuyOrderItem,
   IMarketplaceItem,
+  MarketplaceAcceptedCurrency,
   MarketplaceBuyOrderStatus,
 } from '@rpg-engine/shared';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -112,6 +113,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   ]);
   const [buyingItemId, setBuyingItemId] = useState<string | null>(null);
   const [fulfillingBuyOrderId, setFulfillingBuyOrderId] = useState<string | null>(null);
+  const [currencyFilter, setCurrencyFilter] = useState<'gold' | 'dc' | null>(null);
 
   const itemsContainer = useRef<HTMLDivElement>(null);
 
@@ -127,9 +129,23 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   const getDCEquivalentPrice = (goldPrice: number): number =>
     dcToGoldSwapRate > 0 ? goldToDC(goldPrice) : 0;
 
+  const handleBuyClick = (listingId: string): void => {
+    // All currencies go through the confirmation modal
+    setBuyingItemId(listingId);
+  };
+
   const groupedItems = useMemo(() => {
+    const filtered = currencyFilter === null
+      ? items
+      : items.filter(i => {
+          const c = i.acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+          if (currencyFilter === 'gold') return c === MarketplaceAcceptedCurrency.Gold || c === MarketplaceAcceptedCurrency.GoldOrDc;
+          if (currencyFilter === 'dc') return c === MarketplaceAcceptedCurrency.Dc || c === MarketplaceAcceptedCurrency.GoldOrDc;
+          return true;
+        });
+
     const groups = new Map<string, IMarketplaceItem[]>();
-    for (const entry of items) {
+    for (const entry of filtered) {
       const key = entry.item.key;
       if (!groups.has(key)) {
         groups.set(key, []);
@@ -143,7 +159,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
         otherListings: sorted.slice(1),
       };
     });
-  }, [items]);
+  }, [items, currencyFilter]);
 
   const visibleBuyOrders = useMemo(() => {
     const normalizedName = name.trim().toLowerCase();
@@ -199,30 +215,36 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
 
   return (
     <>
-      {buyingItemId && buyingItem && hasDCBalance && (
-        <MarketplaceBuyModal
-          goldPrice={buyingItem.price}
-          dcEquivalentPrice={getDCEquivalentPrice(buyingItem.price)}
-          dcBalance={dcBalance}
-          onClose={() => setBuyingItemId(null)}
-          onConfirm={(paymentMethod) => {
-            onMarketPlaceItemBuy?.(buyingItemId, paymentMethod);
-            setBuyingItemId(null);
-            enableHotkeys?.();
-          }}
-        />
-      )}
-      {buyingItemId && !hasDCBalance && (
-        <ConfirmModal
-          onClose={setBuyingItemId.bind(null, null)}
-          onConfirm={() => {
-            onMarketPlaceItemBuy?.(buyingItemId);
-            setBuyingItemId(null);
-            enableHotkeys?.();
-          }}
-          message="Are you sure you want to buy this item?"
-        />
-      )}
+      {buyingItemId && buyingItem && (() => {
+        const listingCurrency = buyingItem.acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+        const isDcOnly = listingCurrency === MarketplaceAcceptedCurrency.Dc;
+        const showPaymentChoiceModal = listingCurrency === MarketplaceAcceptedCurrency.GoldOrDc && hasDCBalance;
+        return showPaymentChoiceModal ? (
+          <MarketplaceBuyModal
+            goldPrice={buyingItem.price}
+            dcEquivalentPrice={getDCEquivalentPrice(buyingItem.price)}
+            dcBalance={dcBalance}
+            onClose={() => setBuyingItemId(null)}
+            onConfirm={(paymentMethod) => {
+              onMarketPlaceItemBuy?.(buyingItemId, paymentMethod);
+              setBuyingItemId(null);
+              enableHotkeys?.();
+            }}
+          />
+        ) : (
+          <ConfirmModal
+            onClose={setBuyingItemId.bind(null, null)}
+            onConfirm={() => {
+              onMarketPlaceItemBuy?.(buyingItemId, isDcOnly ? 'dc' : undefined);
+              setBuyingItemId(null);
+              enableHotkeys?.();
+            }}
+            message={isDcOnly
+              ? "Are you sure you want to buy this item with DC?"
+              : "Are you sure you want to buy this item?"}
+          />
+        );
+      })()}
       {fulfillingBuyOrderId && (
         <ConfirmModal
           onClose={setFulfillingBuyOrderId.bind(null, null)}
@@ -270,6 +292,22 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
         </FilterButton>
       </ToolbarRow>
 
+      {showSellSection && (
+        <CurrencyFilterRow>
+          <CurrencyFilterLabel>Currency:</CurrencyFilterLabel>
+          {(['gold', 'dc'] as const).map(c => (
+            <CurrencyFilterButton
+              key={c}
+              $active={currencyFilter === c}
+              onPointerDown={() => setCurrencyFilter(prev => prev === c ? null : c)}
+              type="button"
+            >
+              {c === 'gold' ? 'Gold' : 'DC'}
+            </CurrencyFilterButton>
+          ))}
+        </CurrencyFilterRow>
+      )}
+
       {showFilters && (
         <OptionsWrapper showFilters={showFilters}>
             <WrapperContainer $sell={showSellSection}>
@@ -430,7 +468,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
                       dcToGoldSwapRate={dcToGoldSwapRate}
                       getDCEquivalentPrice={getDCEquivalentPrice}
                       characterId={characterId}
-                      onBuy={setBuyingItemId}
+                      onBuy={handleBuyClick}
                       onDCCoinClick={onDCCoinClick}
                     />
                   ))
@@ -708,3 +746,36 @@ const LoadingText = styled.span`
   text-transform: uppercase;
   letter-spacing: 1px;
 `;
+
+const CurrencyFilterRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 95%;
+  margin: 0 auto 8px auto;
+`;
+
+const CurrencyFilterLabel = styled.span`
+  font-size: 0.45rem !important;
+  color: #666 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+`;
+
+const CurrencyFilterButton = styled.button<{ $active: boolean }>`
+  padding: 3px 8px;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.4rem !important;
+  border-radius: 4px;
+  border: 1px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.12)')} !important;
+  background: ${({ $active }) => ($active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)')} !important;
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#777')} !important;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+
+  &:hover {
+    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.3)')} !important;
+    color: ${({ $active }) => ($active ? '#f59e0b' : '#bbb')} !important;
+  }
+`;

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -1,4 +1,4 @@
-import { IEquipmentSet, IItem, IMarketplaceItem, MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
+import { goldToDC, IEquipmentSet, IItem, IMarketplaceItem, MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
 import { Coins } from 'pixelarticons/react/Coins';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React, { useEffect, useRef, useState } from 'react';
@@ -27,8 +27,15 @@ export interface IManagmentPanelProps {
   disableHotkeys?: () => void;
   onMoneyWithdraw: () => void;
   currentPage: number;
+  dcToGoldSwapRate?: number;
 }
 
+const LISTING_CURRENCY_OPTIONS: { value: MarketplaceAcceptedCurrency; label: string }[] = [
+  { value: MarketplaceAcceptedCurrency.GoldOrDc, label: 'Both' },
+  { value: MarketplaceAcceptedCurrency.Gold, label: 'Gold' },
+  { value: MarketplaceAcceptedCurrency.Dc, label: 'DC' },
+];
+
 export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
   items,
   atlasIMG,
@@ -45,10 +52,14 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
   disableHotkeys,
   onMoneyWithdraw,
   currentPage,
+  dcToGoldSwapRate = 0,
 }) => {
   const [price, setPrice] = useState('');
   const [isCreatingOffer, setIsCreatingOffer] = useState(false);
   const [removingItemId, setRemovingItemId] = useState<string | null>(null);
+  const [listingCurrency, setListingCurrency] = useState<MarketplaceAcceptedCurrency>(
+    acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc
+  );
 
   const itemsContainer = useRef<HTMLDivElement>(null);
 
@@ -63,7 +74,7 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
           onClose={setIsCreatingOffer.bind(null, false)}
           onConfirm={() => {
             if (selectedItemToSell && price && Number(price)) {
-              onAddItemToMarketplace(selectedItemToSell, Number(price), acceptedCurrency);
+              onAddItemToMarketplace(selectedItemToSell, Number(price), listingCurrency);
               setPrice('');
               onSelectedItemToSellRemove(selectedItemToSell);
               setIsCreatingOffer(false);
@@ -124,6 +135,19 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
                   }}
                 />
               </Flex>
+              <CurrencyToggleRow>
+                <CurrencyToggleLabel>Accept:</CurrencyToggleLabel>
+                {LISTING_CURRENCY_OPTIONS.map(opt => (
+                  <CurrencyToggleButton
+                    key={opt.value}
+                    $active={listingCurrency === opt.value}
+                    onPointerDown={() => setListingCurrency(opt.value)}
+                    type="button"
+                  >
+                    {opt.label}
+                  </CurrencyToggleButton>
+                ))}
+              </CurrencyToggleRow>
             </PriceInputWrapper>
           </Flex>
         </InnerOptionsWrapper>
@@ -169,17 +193,25 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
       </OptionsWrapper>
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {items?.map(({ item, price, _id }: IMarketplaceItem, index: number) => (
-          <MarketplaceRows
-            key={`${item.key}_${index}`}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            item={item}
-            itemPrice={price}
-            equipmentSet={equipmentSet}
-            onMarketPlaceItemRemove={setRemovingItemId.bind(null, _id)}
-          />
-        ))}
+        {items?.map(({ item, price, _id, acceptedCurrency: itemCurrency }: IMarketplaceItem, index: number) => {
+          const currency = itemCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+          const isDcOnly = currency === MarketplaceAcceptedCurrency.Dc;
+          const showDcPrice = isDcOnly || (dcToGoldSwapRate > 0 && currency !== MarketplaceAcceptedCurrency.Gold);
+
+          return (
+            <MarketplaceRows
+              key={`${item.key}_${index}`}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              item={item}
+              itemPrice={price}
+              dcEquivalentPrice={showDcPrice ? goldToDC(price) : undefined}
+              acceptedCurrency={currency}
+              equipmentSet={equipmentSet}
+              onMarketPlaceItemRemove={setRemovingItemId.bind(null, _id)}
+            />
+          );
+        })}
       </ItemComponentScrollWrapper>
     </>
   );
@@ -322,12 +354,44 @@ const ItemComponentScrollWrapper = styled.div`
 const SmallCTAButton = styled(CTAButton)`
   padding: 8px 12px;
   height: 32px;
-  
+
   span {
     font-size: 0.65rem;
   }
-  
+
   svg {
     font-size: 1.1rem;
   }
 `;
+
+const CurrencyToggleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+`;
+
+const CurrencyToggleLabel = styled.span`
+  font-size: 0.5rem;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+`;
+
+const CurrencyToggleButton = styled.button<{ $active: boolean }>`
+  padding: 3px 8px;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.45rem !important;
+  border-radius: 4px;
+  border: 1px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.15)')} !important;
+  background: ${({ $active }) => ($active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)')} !important;
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#aaa')} !important;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+
+  &:hover {
+    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.35)')} !important;
+    color: ${({ $active }) => ($active ? '#f59e0b' : '#ddd')} !important;
+  }
+`;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -4,6 +4,7 @@ import {
   IEquipmentSet,
   IItem,
   IMarketplaceItem,
+  MarketplaceAcceptedCurrency,
 } from '@rpg-engine/shared';
 import { Coins } from 'pixelarticons/react/Coins';
 import { Delete } from 'pixelarticons/react/Delete';
@@ -26,6 +27,7 @@ export interface IMarketPlaceRowsPropos {
   item: IItem;
   itemPrice: number;
   dcEquivalentPrice?: number;
+  acceptedCurrency?: MarketplaceAcceptedCurrency;
   equipmentSet?: IEquipmentSet | null;
   scale?: number;
   onMarketPlaceItemBuy?: () => void;
@@ -40,6 +42,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   item,
   itemPrice,
   dcEquivalentPrice,
+  acceptedCurrency,
   equipmentSet,
   scale,
   onMarketPlaceItemBuy,
@@ -93,21 +96,29 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
             <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
               {item.name}
             </Ellipsis>
+            {acceptedCurrency === MarketplaceAcceptedCurrency.Dc && (
+              <CurrencyBadge $color="#a78bfa">DC only</CurrencyBadge>
+            )}
+            {acceptedCurrency === MarketplaceAcceptedCurrency.Gold && (
+              <CurrencyBadge $color="#fef08a">Gold only</CurrencyBadge>
+            )}
           </ItemName>
           <PriceRow>
-            <GoldPriceRow>
-              <GoldIcon>
-                <SimpleTooltip content="Gold Coin" direction="top">
-                  <SpriteFromAtlas
-                    atlasIMG={atlasIMG}
-                    atlasJSON={atlasJSON}
-                    spriteKey="others/gold-coin-qty-5.png"
-                    imgScale={1}
-                  />
-                </SimpleTooltip>
-              </GoldIcon>
-              <GoldPrice>{itemPrice}</GoldPrice>
-            </GoldPriceRow>
+            {acceptedCurrency !== MarketplaceAcceptedCurrency.Dc && (
+              <GoldPriceRow>
+                <GoldIcon>
+                  <SimpleTooltip content="Gold Coin" direction="top">
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey="others/gold-coin-qty-5.png"
+                      imgScale={1}
+                    />
+                  </SimpleTooltip>
+                </GoldIcon>
+                <GoldPrice>{itemPrice}</GoldPrice>
+              </GoldPriceRow>
+            )}
             {dcEquivalentPrice !== undefined && (
               <DCPriceRow $clickable={!!onDCCoinClick} onPointerDown={onDCCoinClick}>
                 <DCCoinWrapper>
@@ -169,20 +180,27 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
   onBuy,
   onDCCoinClick,
 }) => {
-  const makeRow = (listing: IMarketplaceItem) => (
-    <MarketplaceRows
-      key={listing._id}
-      atlasIMG={atlasIMG}
-      atlasJSON={atlasJSON}
-      item={listing.item}
-      itemPrice={listing.price}
-      dcEquivalentPrice={dcToGoldSwapRate > 0 ? getDCEquivalentPrice(listing.price) : undefined}
-      equipmentSet={equipmentSet}
-      onMarketPlaceItemBuy={() => onBuy(listing._id)}
-      onDCCoinClick={onDCCoinClick}
-      disabled={listing.owner === characterId}
-    />
-  );
+  const makeRow = (listing: IMarketplaceItem) => {
+    const listingCurrency = listing.acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+    const isDcOnly = listingCurrency === MarketplaceAcceptedCurrency.Dc;
+    const showDcPrice = isDcOnly || (dcToGoldSwapRate > 0 && listingCurrency !== MarketplaceAcceptedCurrency.Gold);
+
+    return (
+      <MarketplaceRows
+        key={listing._id}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        item={listing.item}
+        itemPrice={listing.price}
+        dcEquivalentPrice={showDcPrice ? getDCEquivalentPrice(listing.price) : undefined}
+        acceptedCurrency={listingCurrency}
+        equipmentSet={equipmentSet}
+        onMarketPlaceItemBuy={() => onBuy(listing._id)}
+        onDCCoinClick={isDcOnly ? undefined : onDCCoinClick}
+        disabled={listing.owner === characterId}
+      />
+    );
+  };
 
   return (
     <GroupedRowContainer
@@ -303,6 +321,21 @@ const GemContainer = styled.p`
   font-size: ${uiFonts.size.xsmall} !important;
 `;
 
+const CurrencyBadge = styled.span<{ $color: string }>`
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 4px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.38rem;
+  color: ${({ $color }) => $color};
+  border: 1px solid ${({ $color }) => $color};
+  border-radius: 3px;
+  opacity: 0.85;
+  vertical-align: middle;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
 const RarityContainer = styled.div<{ item: IItem }>`
   border-color: ${({ item }) => rarityColor(item)};
   box-shadow: ${({ item }) => `0 0 5px 8px ${rarityColor(item)}`} inset,

package/src/components/Marketplace/MarketplaceSettingsPanel.tsx

@@ -12,13 +12,18 @@ export interface IMarketplaceSettingsPanelProps {
 const CURRENCY_OPTIONS: { value: MarketplaceAcceptedCurrency; label: string; description: string }[] = [
   {
     value: MarketplaceAcceptedCurrency.GoldOrDc,
-    label: 'Gold or DC',
-    description: 'Accept both Gold and Definya Coin as payment',
+    label: 'Both',
+    description: 'Gold & DC',
   },
   {
     value: MarketplaceAcceptedCurrency.Gold,
-    label: 'Gold only',
-    description: 'Only accept Gold as payment',
+    label: 'Gold',
+    description: 'Gold only',
+  },
+  {
+    value: MarketplaceAcceptedCurrency.Dc,
+    label: 'DC',
+    description: 'DC only',
   },
 ];
 
@@ -39,11 +44,10 @@ export const MarketplaceSettingsPanel: React.FC<IMarketplaceSettingsPanelProps>
             >
               <OptionLabel $active={acceptedCurrency === option.value}>{option.label}</OptionLabel>
               <OptionDescription>{option.description}</OptionDescription>
-              {acceptedCurrency === option.value && <ActiveBadge>Active</ActiveBadge>}
             </OptionCard>
           ))}
         </OptionsGrid>
-        <Hint>Buyers will only be able to pay using the currency you accept.</Hint>
+        <Hint>Default currency for new listings.</Hint>
       </Section>
     </Wrapper>
   );
@@ -72,7 +76,7 @@ const SectionLabel = styled.p`
 
 const OptionsGrid = styled.div`
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 `;
 
@@ -80,45 +84,36 @@ const OptionCard = styled.button<{ $active: boolean }>`
   position: relative;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 14px 16px;
-  background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.12)' : 'rgba(0, 0, 0, 0.25)')};
-  border: 2px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.08)')};
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 10px 8px;
+  background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.12)' : 'rgba(0, 0, 0, 0.25)')} !important;
+  border: 2px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.08)')} !important;
   border-radius: 6px;
   cursor: pointer;
-  text-align: left;
+  text-align: center;
   transition: border-color 0.15s, background 0.15s;
 
   &:hover {
-    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.25)')};
-    background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.15)' : 'rgba(255,255,255,0.04)')};
+    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.25)')} !important;
+    background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.15)' : 'rgba(255,255,255,0.04)')} !important;
   }
 `;
 
 const OptionLabel = styled.span<{ $active: boolean }>`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.6rem;
-  color: ${({ $active }) => ($active ? '#f59e0b' : '#cccccc')};
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.55rem !important;
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#999')} !important;
   letter-spacing: 0.5px;
 `;
 
 const OptionDescription = styled.span`
-  font-size: 0.5rem;
-  color: #888;
-  line-height: 1.5;
+  font-size: 0.45rem !important;
+  color: #555 !important;
+  line-height: 1.4;
 `;
 
-const ActiveBadge = styled.span`
-  position: absolute;
-  top: 8px;
-  right: 10px;
-  font-size: 0.45rem;
-  color: #f59e0b;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  opacity: 0.8;
-`;
 
 const Hint = styled.p`
   margin: 14px 0 0 0;

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -1,7 +1,9 @@
 import {
   IMarketplaceBlueprintSummary,
   IMarketplaceBuyOrderItem,
+  IMarketplaceItem,
   IMarketplaceTransaction,
+  MarketplaceAcceptedCurrency,
   MarketplaceBuyOrderStatus,
   MarketplaceTransactionType,
 } from '@rpg-engine/shared';
@@ -80,6 +82,27 @@ const mockTransactions: IMarketplaceTransaction[] = [
   { owner: 'player-1', type: MarketplaceTransactionType.BuyOrderCancelled, goldAmount: 300, itemKey: 'items/leather-armor', itemName: 'Leather Armor', createdAt: daysAgo(10), updatedAt: daysAgo(10) },
 ];
 
+const currencyForIndex = (i: number): MarketplaceAcceptedCurrency | undefined => {
+  if (i === 1) return MarketplaceAcceptedCurrency.Dc;
+  if (i === 3) return MarketplaceAcceptedCurrency.Gold;
+  if (i === 5) return MarketplaceAcceptedCurrency.Dc;
+  return undefined; // defaults to GoldOrDc
+};
+
+const dcOnlyItem: IMarketplaceItem = {
+  _id: 'dc-only-listing-1',
+  owner: 'player-99',
+  price: 5000,
+  acceptedCurrency: MarketplaceAcceptedCurrency.Dc,
+  item: {
+    ...items[0],
+    _id: 'dc-item-short-sword',
+    key: 'short-sword-dc-exclusive',
+    name: 'Voidwalker Blade',
+    rarity: 'Rare',
+  },
+};
+
 const Template: Story = () => {
   const [page, setPage] = React.useState(1);
   const [openBuyOrdersPage, setOpenBuyOrdersPage] = React.useState(1);
@@ -129,12 +152,16 @@ const Template: Story = () => {
         atlasIMG={atlasIMG}
         atlasJSON={atlasJSON}
         onClose={() => console.log('close')}
-        items={items.map(item => ({
-          item,
-          price: Math.round(Math.random() * 1000),
-          _id: Math.random().toString(),
-          owner: Math.random().toString(),
-        }))}
+        items={[
+          ...items.map((item, i) => ({
+            item,
+            price: Math.round(Math.random() * 1000),
+            _id: Math.random().toString(),
+            owner: Math.random().toString(),
+            ...(currencyForIndex(i) && { acceptedCurrency: currencyForIndex(i) }),
+          })),
+          dcOnlyItem,
+        ]}
         equipmentSet={equipmentSetMock}
         onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
         onDCCoinClick={() => console.log('open store: packs tab')}

package/src/stories/Features/trading/MarketplaceRows.stories.tsx

@@ -1,3 +1,4 @@
+import { MarketplaceAcceptedCurrency, goldToDC } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../..';
@@ -36,3 +37,17 @@ export const HighStackQuantity: Story = () => (
     />
   </RPGUIRoot>
 );
+
+export const DCOnly: Story = () => (
+  <RPGUIRoot>
+    <MarketplaceRows
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      itemPrice={5000}
+      item={items[1]}
+      acceptedCurrency={MarketplaceAcceptedCurrency.Dc}
+      dcEquivalentPrice={goldToDC(5000)}
+      onMarketPlaceItemBuy={() => {}}
+    />
+  </RPGUIRoot>
+);