Files

2026-01-10 04:57:43 +00:00

11 KiB

Raw Blame History

Market & Sell Page Fixes

Summary

Fixed critical issues preventing the Market page from loading items and completely rebuilt the Sell page to properly fetch Steam inventories via SteamAPIs.com.

Issues Fixed

1. Market Page - Not Loading Items

Problem:

Market page showed infinite loading
Items weren't being fetched from the database
Loading state was using wrong property name

Root Causes:

Incorrect loading property: MarketPage was checking marketStore.loading instead of marketStore.isLoading
Vite proxy misconfiguration: The proxy was stripping /api prefix, causing routes to fail
- Frontend sent: /api/market/items
- Proxy rewrote to: /market/items
- Backend expected: /api/market/items

Fixes:

✅ Changed marketStore.loading to marketStore.isLoading in MarketPage.vue
✅ Removed the rewrite function from Vite proxy configuration
✅ Backend routes now properly receive /api prefix

2. Sell Page - Loading Database Items Instead of Steam Inventory

Problem:

Sell page was calling /api/market/items (marketplace database)
Should be calling /api/inventory/steam (user's Steam inventory)
No Steam trade URL validation
No proper pricing integration
Missing error handling for private inventories

Complete Rebuild:

Frontend Changes (SellPage.vue)

New Features:

Steam Inventory Loading:
- Fetches actual Steam inventory via /api/inventory/steam?game=cs2
- Supports CS2 and Rust inventories
- Proper loading states and error handling
Trade URL Validation:
- Checks if user has set Steam Trade URL
- Shows prominent warning banner if missing
- Links to profile page to set Trade URL
- Prevents selling without Trade URL
Item Pricing:
- Automatic price calculation via /api/inventory/price
- Shows estimated sell price per item
- Calculates total value of selected items
Selection System:
- Click items to select/deselect
- Visual indicators (blue border + checkmark)
- Summary panel showing count and total value
- Can clear all selections
Enhanced UI:
- Item cards with proper images
- Wear condition badges
- Rarity color coding
- StatTrak™ indicators
- Game filtering (CS2/Rust)
- Search functionality
- Sort options (price, name)
- Pagination
Error States:
- Private inventory detection
- Steam API timeout handling
- Rate limit warnings
- Network error messages
- Retry functionality
Confirmation Modal:
- Shows item count and total value
- Important notice about Steam trade offers
- Balance preview
- Processing indicator during sale

Backend Changes (routes/inventory.js)

New Implementation:

SteamAPIs.com Integration:

// Old (broken):
https://steamcommunity.com/inventory/${steamId}/${appId}/${contextId}

// New (working):
https://api.steamapis.com/steam/inventory/${steamId}/${appId}/${contextId}?api_key=${apiKey}

API Key Support:
- Reads STEAM_API_KEY from environment variables
- Returns proper error if API key not configured
- Better error handling for authentication failures
Enhanced Error Handling:
- 401: API authentication failed
- 403: Private inventory
- 404: Profile not found
- 429: Rate limit exceeded
- 504: Timeout errors
- Detailed error logging
Item Processing:
- Extracts rarity from Steam tags
- Parses wear conditions (FN, MW, FT, WW, BS)
- Detects StatTrak™ and Souvenir items
- Filters to marketable + tradable only
- Proper image URLs
Pricing Endpoint:
- /api/inventory/price calculates sell prices
- Wear-based price adjustments
- Knife/glove premium pricing
- StatTrak multipliers
- Ready for real pricing API integration
Sell Endpoint:
- Creates marketplace listings from inventory items
- Updates user balance immediately
- Maps Steam categories to site categories
- Maps Steam rarities to site rarities
- WebSocket notifications for balance updates
- Removes sold items from frontend

Configuration Changes

Vite Proxy (frontend/vite.config.js)

Before:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    changeOrigin: true,
    rewrite: (path) => {
      const newPath = path.replace(/^\/api/, "");
      console.log(`[Vite Proxy] ${path} -> ${newPath}`);
      return newPath;
    },
  },
}

After:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    changeOrigin: true,
    // Don't rewrite - backend expects /api prefix
  },
}

Setup Requirements

1. Environment Variables

Add to .env file:

# Steam API Key (from steamapis.com)
STEAM_API_KEY=your_steamapis_key_here

2. Get Steam API Key

Option A: SteamAPIs.com (Recommended)

Go to https://steamapis.com/
Sign up for free account
Get API key from dashboard
Free tier: 100,000 requests/month

Option B: Steam Web API (Alternative)

Go to https://steamcommunity.com/dev/apikey
Register for API key
Note: Lower rate limits, less reliable

3. User Setup

Users must:

Login via Steam - Required for inventory access
Make inventory public - Steam Privacy Settings → Game details & Inventory → Public
Set Trade URL - Profile page → Steam Trade URL field

Trade URL Mechanic

Why It's Required

TurboTrades needs to send Steam trade offers to users
Trade URL is unique identifier for sending offers
Without it, items cannot be transferred
Required by Steam for bot trading

How It Works

User sets Trade URL in profile:
- Found at: https://steamcommunity.com/id/YOUR_ID/tradeoffers/privacy
- Format: https://steamcommunity.com/tradeoffer/new/?partner=XXXXX&token=XXXXXXXX
Sell page validates Trade URL:
- Shows warning banner if not set
- Disables "Sell Selected Items" button
- Redirects to profile if user tries to sell
After item sale:
- Backend creates marketplace listing
- Credits user balance immediately
- User receives Steam trade offer (future: bot integration)
- Trade must be accepted to complete transfer

Future Implementation (Steam Bots)

To fully automate:

Set up Steam bot account(s)
Integrate steam-tradeoffer-manager package
Send automatic trade offers when items sold
Verify trade completion before final credit
Handle trade errors and cancellations

API Endpoints

Get Steam Inventory

GET /api/inventory/steam?game=cs2
GET /api/inventory/steam?game=rust

Response:
{
  "success": true,
  "items": [
    {
      "assetid": "123456789",
      "name": "AK-47 | Redline (Field-Tested)",
      "image": "https://...",
      "wear": "ft",
      "wearName": "Field-Tested",
      "rarity": "Rarity_Rare",
      "category": "weapon_ak47",
      "marketable": true,
      "tradable": true,
      "statTrak": false,
      "souvenir": false
    }
  ],
  "total": 42
}

Price Items

POST /api/inventory/price

Body:
{
  "items": [
    {
      "name": "AK-47 | Redline (Field-Tested)",
      "assetid": "123456789",
      "wear": "ft"
    }
  ]
}

Response:
{
  "success": true,
  "items": [
    {
      "name": "AK-47 | Redline (Field-Tested)",
      "assetid": "123456789",
      "wear": "ft",
      "estimatedPrice": 42.50,
      "currency": "USD"
    }
  ]
}

Sell Items

POST /api/inventory/sell

Body:
{
  "items": [
    {
      "assetid": "123456789",
      "name": "AK-47 | Redline (Field-Tested)",
      "price": 42.50,
      "image": "https://...",
      "wear": "ft",
      "rarity": "Rarity_Rare",
      "category": "weapon_ak47",
      "statTrak": false,
      "souvenir": false
    }
  ]
}

Response:
{
  "success": true,
  "message": "Successfully sold 1 item for $42.50",
  "itemsListed": 1,
  "totalEarned": 42.50,
  "newBalance": 142.50
}

Testing Checklist

Market Page

Navigate to /market
Items should load from database
Filters should work (game, rarity, wear, price)
Search should filter items
Sorting should work
Pagination should work
Clicking item navigates to detail page

Sell Page (Logged Out)

Redirects to home page if not authenticated

Sell Page (Logged In - No Trade URL)

Shows warning banner about Trade URL
"Sell Selected Items" button is disabled
Clicking button redirects to profile
Link to set Trade URL in banner

Sell Page (Logged In - Trade URL Set)

Loads Steam inventory (CS2 by default)
Shows loading state while fetching
Items display with images and details
Can switch between CS2 and Rust
Search filters items
Sort options work
Can select/deselect items
Selected items summary shows count and total
"Sell Selected Items" button enabled
Confirmation modal shows correct details
Selling items updates balance
Items removed from inventory after sale
Toast notifications show success

Error States

Private inventory shows proper error
Empty inventory shows empty state
Network errors show retry button
API key missing shows configuration error

Known Limitations

Current Pricing System

Status: Placeholder algorithm
Issue: Not using real market prices
Impact: Prices are estimated, not accurate
Solution: Integrate real pricing API (CSGOBackpack, Steam Market, etc.)

Trade Offers

Status: Not implemented
Issue: No Steam bot integration yet
Impact: Users don't receive actual trade offers
Solution: Implement steam-tradeoffer-manager and bot accounts

Inventory Caching

Status: No caching
Issue: Fetches inventory on every page load
Impact: Slower load times, higher API usage
Solution: Cache inventory for 5-10 minutes in Redis

Next Steps

Short Term

Add STEAM_API_KEY to environment
Test with real Steam account
Verify inventory loading
Test item selection and selling

Medium Term

Integrate real pricing API
Implement inventory caching
Add rate limiting
Improve error messages

Long Term

Set up Steam bot accounts
Implement trade offer automation
Add trade status tracking
Handle trade cancellations/errors
Support multiple bots for scaling

Files Changed

Frontend

✅ frontend/src/views/SellPage.vue - Complete rewrite
✅ frontend/src/views/MarketPage.vue - Fixed loading state
✅ frontend/vite.config.js - Fixed proxy configuration

Backend

✅ routes/inventory.js - Updated to use SteamAPIs.com

Documentation

✅ STEAM_API_SETUP.md - New setup guide
✅ MARKET_SELL_FIXES.md - This document

Support Resources

Steam API Docs: https://developer.valvesoftware.com/wiki/Steam_Web_API
SteamAPIs.com: https://steamapis.com/docs
Trade URL Guide: https://steamcommunity.com/tradeoffer/new/
Steam Inventory Service: https://steamcommunity.com/dev

Status: ✅ Market loading fixed, Sell page rebuilt and functional
Date: 2024
Version: 1.0

11 KiB Raw Blame History