448 lines
11 KiB
Markdown
448 lines
11 KiB
Markdown
# 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:**
|
|
1. **Incorrect loading property:** MarketPage was checking `marketStore.loading` instead of `marketStore.isLoading`
|
|
2. **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:**
|
|
1. **Steam Inventory Loading:**
|
|
- Fetches actual Steam inventory via `/api/inventory/steam?game=cs2`
|
|
- Supports CS2 and Rust inventories
|
|
- Proper loading states and error handling
|
|
|
|
2. **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
|
|
|
|
3. **Item Pricing:**
|
|
- Automatic price calculation via `/api/inventory/price`
|
|
- Shows estimated sell price per item
|
|
- Calculates total value of selected items
|
|
|
|
4. **Selection System:**
|
|
- Click items to select/deselect
|
|
- Visual indicators (blue border + checkmark)
|
|
- Summary panel showing count and total value
|
|
- Can clear all selections
|
|
|
|
5. **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
|
|
|
|
6. **Error States:**
|
|
- Private inventory detection
|
|
- Steam API timeout handling
|
|
- Rate limit warnings
|
|
- Network error messages
|
|
- Retry functionality
|
|
|
|
7. **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:**
|
|
|
|
1. **SteamAPIs.com Integration:**
|
|
```javascript
|
|
// Old (broken):
|
|
https://steamcommunity.com/inventory/${steamId}/${appId}/${contextId}
|
|
|
|
// New (working):
|
|
https://api.steamapis.com/steam/inventory/${steamId}/${appId}/${contextId}?api_key=${apiKey}
|
|
```
|
|
|
|
2. **API Key Support:**
|
|
- Reads `STEAM_API_KEY` from environment variables
|
|
- Returns proper error if API key not configured
|
|
- Better error handling for authentication failures
|
|
|
|
3. **Enhanced Error Handling:**
|
|
- 401: API authentication failed
|
|
- 403: Private inventory
|
|
- 404: Profile not found
|
|
- 429: Rate limit exceeded
|
|
- 504: Timeout errors
|
|
- Detailed error logging
|
|
|
|
4. **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
|
|
|
|
5. **Pricing Endpoint:**
|
|
- `/api/inventory/price` calculates sell prices
|
|
- Wear-based price adjustments
|
|
- Knife/glove premium pricing
|
|
- StatTrak multipliers
|
|
- Ready for real pricing API integration
|
|
|
|
6. **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:**
|
|
```javascript
|
|
proxy: {
|
|
"/api": {
|
|
target: "http://localhost:3000",
|
|
changeOrigin: true,
|
|
rewrite: (path) => {
|
|
const newPath = path.replace(/^\/api/, "");
|
|
console.log(`[Vite Proxy] ${path} -> ${newPath}`);
|
|
return newPath;
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
**After:**
|
|
```javascript
|
|
proxy: {
|
|
"/api": {
|
|
target: "http://localhost:3000",
|
|
changeOrigin: true,
|
|
// Don't rewrite - backend expects /api prefix
|
|
},
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Setup Requirements
|
|
|
|
### 1. Environment Variables
|
|
|
|
Add to `.env` file:
|
|
|
|
```env
|
|
# Steam API Key (from steamapis.com)
|
|
STEAM_API_KEY=your_steamapis_key_here
|
|
```
|
|
|
|
### 2. Get Steam API Key
|
|
|
|
**Option A: SteamAPIs.com (Recommended)**
|
|
1. Go to https://steamapis.com/
|
|
2. Sign up for free account
|
|
3. Get API key from dashboard
|
|
4. Free tier: 100,000 requests/month
|
|
|
|
**Option B: Steam Web API (Alternative)**
|
|
1. Go to https://steamcommunity.com/dev/apikey
|
|
2. Register for API key
|
|
3. Note: Lower rate limits, less reliable
|
|
|
|
### 3. User Setup
|
|
|
|
Users must:
|
|
1. **Login via Steam** - Required for inventory access
|
|
2. **Make inventory public** - Steam Privacy Settings → Game details & Inventory → Public
|
|
3. **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
|
|
|
|
1. **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`
|
|
|
|
2. **Sell page validates Trade URL:**
|
|
- Shows warning banner if not set
|
|
- Disables "Sell Selected Items" button
|
|
- Redirects to profile if user tries to sell
|
|
|
|
3. **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:
|
|
1. Set up Steam bot account(s)
|
|
2. Integrate steam-tradeoffer-manager package
|
|
3. Send automatic trade offers when items sold
|
|
4. Verify trade completion before final credit
|
|
5. Handle trade errors and cancellations
|
|
|
|
---
|
|
|
|
## API Endpoints
|
|
|
|
### Get Steam Inventory
|
|
```http
|
|
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
|
|
```http
|
|
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
|
|
```http
|
|
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
|
|
1. Add STEAM_API_KEY to environment
|
|
2. Test with real Steam account
|
|
3. Verify inventory loading
|
|
4. Test item selection and selling
|
|
|
|
### Medium Term
|
|
1. Integrate real pricing API
|
|
2. Implement inventory caching
|
|
3. Add rate limiting
|
|
4. Improve error messages
|
|
|
|
### Long Term
|
|
1. Set up Steam bot accounts
|
|
2. Implement trade offer automation
|
|
3. Add trade status tracking
|
|
4. Handle trade cancellations/errors
|
|
5. 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 |