@rpg-engine/long-bow 0.8.140 → 0.8.145

package/src/components/Marketplace/HistoryPanel.tsx

@@ -0,0 +1,422 @@
+import {
+  formatDCAmount,
+  goldToDC,
+  IMarketplaceTransaction,
+  MarketplaceTransactionType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Dropdown } from '../Dropdown';
+import { IOptionsProps } from '../Dropdown';
+import { Pager } from '../Pager';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SimpleTooltip } from '../shared/SimpleTooltip';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IHistoryPanelProps {
+  transactions: IMarketplaceTransaction[];
+  totalCount: number;
+  currentPage: number;
+  itemsPerPage: number;
+  selectedType: string;
+  onTypeChange: (type: string) => void;
+  onPageChange: (page: number) => void;
+  atlasJSON?: any;
+  atlasIMG?: any;
+  dcToGoldSwapRate?: number;
+}
+
+const HISTORY_ITEMS_PER_PAGE = 10;
+
+const TRANSACTION_TYPE_FILTER_ALL = 'All';
+
+// Format "BuyOrderPlaced" → "BUY ORDER PLACED", "ListingFee" → "LISTING FEE"
+const formatTransactionLabel = (type: string): string => {
+  const words = type.split(/(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])/);
+  return words.join(' ').toUpperCase();
+};
+
+const transactionTypeOptions: IOptionsProps[] = [
+  {
+    id: 1,
+    value: TRANSACTION_TYPE_FILTER_ALL,
+    option: TRANSACTION_TYPE_FILTER_ALL,
+  },
+  ...Object.values(MarketplaceTransactionType).map((type, index) => ({
+    id: index + 2,
+    value: type as string,
+    option: formatTransactionLabel(type as string),
+  })),
+];
+
+const TRANSACTION_TYPE_COLORS: Record<MarketplaceTransactionType, string> = {
+  [MarketplaceTransactionType.Purchase]: uiColors.red,
+  [MarketplaceTransactionType.Sale]: uiColors.lightGreen,
+  [MarketplaceTransactionType.ListingFee]: uiColors.red,
+  [MarketplaceTransactionType.Withdrawal]: uiColors.lightGreen,
+  [MarketplaceTransactionType.Expired]: uiColors.cardinal,
+  [MarketplaceTransactionType.Unlisted]: uiColors.lightGray,
+  [MarketplaceTransactionType.BuyOrderPlaced]: uiColors.red,
+  [MarketplaceTransactionType.BuyOrderFulfilled]: uiColors.lightGreen,
+  [MarketplaceTransactionType.BuyOrderExpired]: uiColors.cardinal,
+  [MarketplaceTransactionType.BuyOrderCancelled]: uiColors.lightGreen,
+};
+
+const formatDate = (date: Date): string => {
+  const d = new Date(date);
+  return d.toLocaleDateString('en-US', {
+    month: 'short',
+    day: '2-digit',
+    year: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+const getGoldSign = (type: MarketplaceTransactionType): string => {
+  const positive: MarketplaceTransactionType[] = [
+    MarketplaceTransactionType.Sale,
+    MarketplaceTransactionType.Withdrawal,
+    MarketplaceTransactionType.BuyOrderCancelled,
+  ];
+  const negative: MarketplaceTransactionType[] = [
+    MarketplaceTransactionType.Purchase,
+    MarketplaceTransactionType.ListingFee,
+    MarketplaceTransactionType.BuyOrderPlaced,
+  ];
+
+  if (positive.includes(type)) return '+';
+  if (negative.includes(type)) return '-';
+  return '';
+};
+
+export const HistoryPanel: React.FC<IHistoryPanelProps> = ({
+  transactions,
+  totalCount,
+  currentPage,
+  itemsPerPage,
+  selectedType,
+  onTypeChange,
+  onPageChange,
+  atlasJSON,
+  atlasIMG,
+  dcToGoldSwapRate = 0,
+}) => {
+  const getDCEquivalentPrice = (goldPrice: number): number =>
+    dcToGoldSwapRate > 0 ? goldToDC(goldPrice) : 0;
+  return (
+    <PanelWrapper>
+      {/* ── Filter row — outside scroll so dropdown isn't clipped ── */}
+      <FilterRow>
+        <FilterLabel>FILTER BY TYPE</FilterLabel>
+        <StyledDropdown
+          key={selectedType}
+          options={transactionTypeOptions}
+          onChange={onTypeChange}
+          width="200px"
+        />
+      </FilterRow>
+
+      {/* ── Scrollable transaction list ── */}
+      <ScrollArea id="MarketContainer">
+        {transactions.length === 0 ? (
+          <EmptyState>No transactions yet</EmptyState>
+        ) : (
+          transactions.map((tx, index) => (
+            <RowWrapper key={index} $even={index % 2 === 0} $accentColor={TRANSACTION_TYPE_COLORS[tx.type]}>
+              <ItemSection>
+                <ItemDetails>
+                  {tx.itemName ? (
+                    <ItemName>
+                      <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
+                        {tx.itemName}
+                      </Ellipsis>
+                    </ItemName>
+                  ) : (
+                    <ItemName>
+                      <NoItemText>
+                        {tx.type === MarketplaceTransactionType.Withdrawal
+                          ? 'Gold Withdrawal'
+                          : '--'}
+                      </NoItemText>
+                    </ItemName>
+                  )}
+                  <MetaRow>
+                    <Label
+                      $bg={TRANSACTION_TYPE_COLORS[tx.type]}
+                    >
+                      {formatTransactionLabel(tx.type)}
+                    </Label>
+                    <SecondaryText>{formatDate(tx.createdAt)}</SecondaryText>
+                    {tx.counterpartName && (
+                      <SecondaryText>
+                        w/ {tx.counterpartName}
+                      </SecondaryText>
+                    )}
+                  </MetaRow>
+                </ItemDetails>
+              </ItemSection>
+
+              {tx.goldAmount > 0 && (
+                <PriceSection>
+                  {tx.currency === 'dc' ? (
+                    // Show DC only
+                    <DCPriceRow>
+                      {atlasIMG && atlasJSON && (
+                        <DCCoinWrapper>
+                          <SimpleTooltip content="Definya Coin" direction="top">
+                            <SpriteFromAtlas
+                              atlasIMG={atlasIMG}
+                              atlasJSON={atlasJSON}
+                              spriteKey="others/definya-coin.png"
+                              imgScale={1}
+                            />
+                          </SimpleTooltip>
+                        </DCCoinWrapper>
+                      )}
+                      <DCPrice $type={tx.type}>
+                        {getGoldSign(tx.type)}
+                        {formatDCAmount(getDCEquivalentPrice(tx.goldAmount))}
+                      </DCPrice>
+                    </DCPriceRow>
+                  ) : (
+                    // Show Gold only
+                    <GoldPriceRow>
+                      {atlasIMG && atlasJSON && (
+                        <GoldIcon>
+                          <SimpleTooltip content="Gold Coin" direction="top">
+                            <SpriteFromAtlas
+                              atlasIMG={atlasIMG}
+                              atlasJSON={atlasJSON}
+                              spriteKey="others/gold-coin-qty-5.png"
+                              imgScale={1}
+                            />
+                          </SimpleTooltip>
+                        </GoldIcon>
+                      )}
+                      <GoldAmount $type={tx.type}>
+                        {getGoldSign(tx.type)}
+                        {tx.goldAmount}g
+                      </GoldAmount>
+                    </GoldPriceRow>
+                  )}
+                </PriceSection>
+              )}
+            </RowWrapper>
+          ))
+        )}
+      </ScrollArea>
+
+      <PagerContainer>
+        <Pager
+          totalItems={totalCount}
+          currentPage={currentPage}
+          itemsPerPage={itemsPerPage}
+          onPageChange={onPageChange}
+        />
+      </PagerContainer>
+    </PanelWrapper>
+  );
+};
+
+// ── Styled components matching MarketplaceRows / BuyOrderRows layout ──
+
+const PanelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 2.5%;
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+const FilterRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 8px 12px;
+`;
+
+const FilterLabel = styled.p`
+  margin: 0;
+  font-size: 0.7rem;
+  color: #ccc;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  white-space: nowrap;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin: 0px !important;
+`;
+
+const ScrollArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: scroll;
+  max-height: 420px;
+`;
+
+const RowWrapper = styled.div<{ $even?: boolean; $accentColor?: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.8rem;
+  box-sizing: border-box;
+  background: ${({ $even }) => $even ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.15)'};
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border-left: 4px solid ${({ $accentColor }) => $accentColor || 'transparent'};
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.2);
+    border-left-color: #f59e0b;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-1px);
+  }
+`;
+
+const ItemSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+`;
+
+const ItemDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+`;
+
+const ItemName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem !important;
+  color: #ffffff;
+`;
+
+const NoItemText = styled.span`
+  color: #888;
+`;
+
+const MetaRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
+`;
+
+const Label = styled.span<{ $bg: string }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem !important;
+  color: #fff;
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: ${({ $bg }) => $bg};
+  padding: 2px 6px;
+  border-radius: 8px;
+`;
+
+const SecondaryText = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem !important;
+  color: rgba(255, 255, 255, 0.5) !important;
+  white-space: nowrap;
+`;
+
+const PriceSection = styled.div`
+  flex-shrink: 0;
+  margin-left: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+`;
+
+const GoldPriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+`;
+
+const DCPriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+`;
+
+const DCCoinWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: -0.6rem;
+  left: -0.5rem;
+`;
+
+const DCPrice = styled.span<{ $type: MarketplaceTransactionType }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem !important;
+  color: rgba(254, 240, 138, 0.65);
+  white-space: nowrap;
+`;
+
+const GoldIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: -0.6rem;
+  left: -0.5rem;
+`;
+
+const GoldAmount = styled.span<{ $type: MarketplaceTransactionType }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem !important;
+  color: ${({ $type }) => {
+    const positive: MarketplaceTransactionType[] = [
+      MarketplaceTransactionType.Sale,
+      MarketplaceTransactionType.Withdrawal,
+      MarketplaceTransactionType.BuyOrderCancelled,
+      MarketplaceTransactionType.BuyOrderFulfilled,
+    ];
+    const negative: MarketplaceTransactionType[] = [
+      MarketplaceTransactionType.Purchase,
+      MarketplaceTransactionType.ListingFee,
+      MarketplaceTransactionType.BuyOrderPlaced,
+    ];
+    if (positive.includes($type)) return `${uiColors.lightGreen} !important`;
+    if (negative.includes($type)) return `${uiColors.red} !important`;
+    return '#888 !important';
+  }};
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 45px;
+  font-size: 0.5rem;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+`;
+
+const PagerContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+`;
+
+export { HISTORY_ITEMS_PER_PAGE, TRANSACTION_TYPE_FILTER_ALL };