Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display Metadata on /tradeoffers-pages #283

Open
wants to merge 11 commits into
base: master
Choose a base branch
from

Conversation

GODrums
Copy link
Collaborator

@GODrums GODrums commented Dec 13, 2024

Motivation

Closes #143.

Description

This PR adds the well-known enhancements from tradeoffer-popouts to the /tradeoffers-overview:

  • FetchSteamTrades-handler to fetch the data from the Steam API through the access token
  • trade_offers.ts page script:
    • Calculates and stores the api data in an accessible format in the DOM
    • Utilizes the localStorage as cache to avoid refetching from the API if there are no new trades since the last fetch
  • TradeOfferHolderMetadata Lit-component, which reads the required properties from the DOM
  • Removes the check regarding a CSFloat account for the "offer tracking on csfloat"-button. Since all Steam-API features rely on the same host permission, enabling the "offer tracking" is a mandatory pre-condition

Screenshots

Received tradeoffer example:
Screenshot 2024-12-13 211319
Sent tradeoffer example:
Screenshot 2024-12-13 211311

@GODrums GODrums requested a review from Step7750 December 13, 2024 20:27
@GODrums GODrums self-assigned this Dec 13, 2024
src/lib/alarms/trade_offer.ts Outdated Show resolved Hide resolved
src/lib/alarms/trade_offer.ts Outdated Show resolved Hide resolved
* @returns the trade offers
*/
async function fetchTradeOffers(isSentPage: boolean) {
const g_steamTrades = JSON.parse(localStorage.getItem('g_steamTrades') || '{}') as FetchSteamTradesResponse;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should generally avoid using localStorage within the Steam page since it is untyped and starts to "pollute" a common space for Steam itself and other extensions.

It's preferrable to use extension-specific storage or caching.

const g_steamTrades = JSON.parse(localStorage.getItem('g_steamTrades') || '{}') as FetchSteamTradesResponse;
let refetchRequired = true;
if (g_steamTrades.sent || g_steamTrades.received) {
const latestTradeId = Number.parseInt(g_steamTrades[isSentPage ? 'sent' : 'received']?.[0].offer_id);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of handling cache breaking in a more manual way, perhaps we should pass in the offer_id of the last element when making the FetchSteamTrades request.

You can then wrap FetchSteamTrades as a CachedHandler, add the trade_offer_id as a request parameter (perhaps along with the Steam of the user on the page), and then you get caching for "free".

Copy link
Collaborator Author

@GODrums GODrums Dec 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would really like the CachedHandler to be the solution, but I think can't quite do the job for two reasons:

  1. sent / received pages display different trade offers, hence the trade_offer_id would be different
  2. the cache is not persistent across browser restarts

I gave it a try in 0d4620b, but I couldn't get it to cache the requests correctly even for the same parameters.

src/lib/page_scripts/trade_offers.ts Outdated Show resolved Hide resolved
src/lib/page_scripts/trade_offers.ts Outdated Show resolved Hide resolved
src/lib/page_scripts/trade_offers.ts Outdated Show resolved Hide resolved
src/lib/page_scripts/trade_offers.ts Outdated Show resolved Hide resolved
src/lib/page_scripts/trade_offers.ts Outdated Show resolved Hide resolved
src/lib/page_scripts/trade_offers.ts Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

Show Float Values on Trade Offers Page
2 participants