TurboTrades/TRADE_LINKS.md

Trade Links - Feature Documentation

Overview

Trade offer links are now automatically generated and displayed throughout the trade flow, allowing users to quickly access their Steam trade offers with a single click.

---

🔗 Trade Link Format

Steam trade offer links follow this format:

https://steamcommunity.com/tradeoffer/{OFFER_ID}

Example:

https://steamcommunity.com/tradeoffer/7182364598

---

✨ Where Trade Links Appear

1. Sell Page Modal (Trade Created State)

When a trade is successfully created, the modal displays:

• ✅ Large verification code
• 🔗 "Open Trade in Steam" button (primary blue button)
• 📋 Trade details
• 📝 Instructions

Button Style:

• Gradient background (primary → primary-dark)
• External link icon
• Opens in new tab
• Full width
• Prominent placement above trade details

Location: Between verification code and trade details

---

2. Transactions Page - Pending Trades List

Each pending trade shows:

• 🟡 Yellow highlight with pulsing indicator
• 💰 Total value
• 🔢 Verification code (inline)
• 🔗 "Open" button (small, primary blue)
• ℹ️ "Details" button (transparent)

Button Style:

• Compact size
• External link icon
• Primary background
• Opens in new tab

Location: In the action buttons area (right side)

---

3. Transactions Page - Trade Details Modal

When clicking "Details" on a pending trade:

• 📋 Full trade information
• 🔢 Large verification code display
• 🔗 "Open Trade in Steam" button (primary blue)
• 📝 Step-by-step instructions

Button Style:

• Same as Sell Page modal
• Full width
• Placed below verification code

Location: Above trade info section

---

🎯 User Experience Flow

Complete Journey with Trade Links:

1. User creates trade on Sell page

   • Modal opens with verification code
   • User sees "Open Trade in Steam" button

2. User clicks button

   • Opens Steam in new tab (desktop) or app (mobile)
   • Automatically navigates to specific trade offer

3. User verifies code

   • Compares code shown on site with Steam trade message
   • Code matches = safe to accept

4. Alternative: Check Later

   • User closes modal
   • Goes to Transactions page
   • Sees pending trade with "Open" button
   • Clicks to open trade directly
   • Or clicks "Details" for full modal view

---

💻 Technical Implementation

Backend (Bot Service)

File: services/steamBot.js

// Generate trade offer URL from offer ID
const tradeOfferUrl = `https://steamcommunity.com/tradeoffer/${offer.id}`;

// Include in bot response
return {
  offerId: offer.id,
  verificationCode,
  tradeOfferUrl,  // ← New field
  botId: this.botId,
  // ...
};

WebSocket Notifications: All trade events now include tradeOfferUrl:

• trade_sent
• trade_confirmed
• trade_created

---

Backend (Inventory Routes)

File: routes/inventory.js

Development Mode:

const mockOfferId = `DEV_${Date.now()}`;
const mockTradeOfferUrl = `https://steamcommunity.com/tradeoffer/${mockOfferId}`;

Trade Model:

const trade = new Trade({
  offerId,
  tradeOfferUrl,  // ← Saved to database
  verificationCode,
  // ...
});

API Response:

{
  "success": true,
  "trade": {
    "tradeId": "...",
    "offerId": "...",
    "verificationCode": "A3X9K2",
    "tradeOfferUrl": "https://steamcommunity.com/tradeoffer/...",
    "itemCount": 3,
    "totalValue": 75.50
  }
}

---

Frontend (Sell Page)

File: frontend/src/views/SellPage.vue

Button Component:

<a
  v-if="currentTrade?.tradeOfferUrl"
  :href="currentTrade.tradeOfferUrl"
  target="_blank"
  rel="noopener noreferrer"
  class="w-full px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-surface-dark font-semibold rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2 text-center"
>
  <ExternalLink class="w-5 h-5" />
  Open Trade in Steam
</a>

Data Flow:

// Trade created - store URL
currentTrade.value = {
  tradeId: trade.tradeId,
  offerId: trade.offerId,
  verificationCode: trade.verificationCode,
  tradeOfferUrl: trade.tradeOfferUrl,  // ← From API response
  // ...
};

---

Frontend (Transactions Page)

File: frontend/src/views/TransactionsPage.vue

Pending Trades List Button:

<a
  v-if="trade.tradeOfferUrl"
  :href="trade.tradeOfferUrl"
  target="_blank"
  rel="noopener noreferrer"
  class="px-4 py-2 bg-primary hover:bg-primary-dark text-surface-dark font-medium rounded-lg transition-colors text-sm flex items-center gap-1"
>
  <ExternalLink class="w-4 h-4" />
  Open
</a>

Trade Details Modal Button:

<a
  v-if="selectedTrade.tradeOfferUrl"
  :href="selectedTrade.tradeOfferUrl"
  target="_blank"
  rel="noopener noreferrer"
  class="w-full px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-surface-dark font-semibold rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2 text-center mb-4"
>
  <ExternalLink class="w-5 h-5" />
  Open Trade in Steam
</a>

---

📱 Platform Behavior

Desktop (Web Browser)

• Clicking link opens Steam client if installed
• Falls back to Steam website if client not available
• Opens in new browser tab

Mobile (iOS/Android)

• Clicking link opens Steam app if installed
• Falls back to mobile Steam website
• Seamless transition from browser to app

Steam Client

• Direct deep link to trade offer page
• No need to navigate through menus
• Instant access to specific trade

---

🔒 Security Features

Link Validation

• ✅ Links generated server-side (not user input)
• ✅ Offer ID comes from Steam bot response
• ✅ No risk of link manipulation

Safe External Links

• ✅ target="_blank" - Opens in new tab
• ✅ rel="noopener noreferrer" - Security best practice
• ✅ Only official Steam domain

Verification Code

• ✅ Code shown on site AND in Steam trade message
• ✅ User must verify codes match
• ✅ Prevents accepting wrong/fake trades

---

📊 Database Schema

Trade Model

Field: tradeOfferUrl

tradeOfferUrl: {
  type: String,
  required: false,  // Optional for backwards compatibility
}

Example Document:

{
  "_id": "507f1f77bcf86cd799439011",
  "offerId": "7182364598",
  "tradeOfferUrl": "https://steamcommunity.com/tradeoffer/7182364598",
  "verificationCode": "A3X9K2",
  "userId": "...",
  "steamId": "...",
  "state": "pending",
  "items": [...],
  "totalValue": 75.50
}

---

🧪 Testing

Development Mode

Mock Trade URL:

const mockOfferId = `DEV_${Date.now()}`;
const mockTradeOfferUrl = `https://steamcommunity.com/tradeoffer/${mockOfferId}`;

Test Flow:

1. Set BYPASS_BOT_REQUIREMENT=true
2. Create trade on Sell page
3. Verify button appears in modal
4. Click "Open Trade in Steam"
5. Link opens (will show Steam error for mock ID, that's expected)
6. Check Transactions page
7. Verify "Open" button appears
8. Click "Details" - verify button in modal

---

Production Mode

Real Trade URL:

const tradeOfferUrl = `https://steamcommunity.com/tradeoffer/${offer.id}`;

Test Flow:

1. Configure real Steam bot
2. Create actual trade
3. Click "Open Trade in Steam"
4. Steam client/website opens
5. Navigate to correct trade offer
6. Verify code matches
7. Accept trade
8. Verify trade completes

---

🎨 UI/UX Design

Button Styles

Primary Button (Full Width):

- Background: Gradient (cyan → blue)
- Text: Dark surface color (high contrast)
- Icon: External link (5x5)
- Padding: 1.5rem vertical
- Border radius: 0.5rem
- Hover: 90% opacity
- Full width responsive

Compact Button (Inline):

- Background: Solid primary
- Text: Dark surface color
- Icon: External link (4x4)
- Padding: 0.5rem vertical
- Border radius: 0.5rem
- Hover: Darker primary
- Fixed width (auto)

Placement Strategy

1. Sell Modal: After verification code (most important action)
2. Pending List: In action buttons (quick access)
3. Details Modal: Above trade info (prominent but not blocking)

---

🚀 Benefits

User Experience

• ✅ One-click access to Steam trade
• ✅ No manual searching through trade offers
• ✅ Direct deep linking to specific trade
• ✅ Mobile-friendly (opens Steam app)
• ✅ Multiple access points (modal, list, details)

Conversion Rate

• ✅ Reduces friction in trade acceptance
• ✅ Faster completion time
• ✅ Less user confusion about where to go
• ✅ Higher acceptance rate expected

Support

• ✅ Fewer support tickets ("Where's my trade?")
• ✅ Easier troubleshooting (direct links to trades)
• ✅ Better user guidance (clear call-to-action)

---

📝 User Instructions

For Users:

When selling items:

1. Click "Sell Selected Items"
2. Review and confirm
3. Look for the big blue button that says "Open Trade in Steam"
4. Click the button
5. Steam will open showing your trade
6. Check the verification code matches
7. Accept the trade

If you close the modal:

1. Go to "Transactions" page
2. Find your pending trade (yellow box at top)
3. Click the "Open" button to view trade
4. Or click "Details" for full information

---

⚠️ Troubleshooting

Link doesn't open Steam

Issue: Clicking link does nothing or opens browser

Solutions:

• Install Steam client
• Update Steam client to latest version
• Check browser allows opening external apps
• Try copying link and pasting in Steam chat

Link opens but shows error

Issue: Steam shows "Invalid Trade Offer"

Causes:

• Trade was already accepted/declined/expired
• Bot cancelled the trade
• Network/Steam API issues

Solutions:

• Refresh page to check trade status
• Check if trade is still pending
• Contact support if issue persists

Mobile app doesn't open

Issue: Link opens browser instead of app

Solutions:

• Install Steam Mobile App
• Enable "Open in app" in browser settings
• Try long-press → "Open in Steam App"

---

🔄 Future Enhancements

Potential Improvements:

• Copy link button (clipboard)
• QR code for mobile scanning
• Countdown timer until trade expires
• "Trade not showing up?" help link
• Share trade link (for admin support)
• Track link click analytics
• Mobile app deep linking optimization
• Browser extension auto-open support

---

📚 Related Documentation

• TRADE_WORKFLOW.md - Complete trade system flow
• TRADE_SETUP.md - Setup and configuration
• TRADE_UI_COMPLETE.md - UI features and design
• STEAM_BOT_SETUP.md - Bot configuration

---

✅ Status

Status: ✅ Complete and Live

Added: 2024 Last Updated: 2024

Platforms Tested:

• ✅ Desktop (Windows, macOS, Linux)
• ✅ Mobile (iOS Safari, Android Chrome)
• ✅ Steam Client (Desktop)
• ✅ Steam Mobile App (iOS, Android)

---

Summary: Trade links are now fully integrated throughout the platform, providing users with quick, one-click access to their Steam trade offers from multiple locations in the UI.