Feature: Modal to allow users to list directly from inventory to CSFloat

[IzaakPrats]

Issue #277 List from Inventory

This PR adds the ability to list items directly on CSFloat from the Steam inventory. Users can create both buy now and auction listings with a streamlined interface.

Features

• Direct listing creation from Steam inventory
• Support for both Buy Now and Auction listing types
• Recommended price fetching from CSFloat*
• Price adjustment via input or percentage slider
• Configurable auction duration (1-14 days)
• Trade hold detection to prevent bad ux
• Success state with direct links to view listing/stall

Implementation Details

• Added new FetchRecommendedPrice handler to get price suggestions from CSFloat
• Added ListItem handler to create listings via CSFloat API
• Created ListItemModal component with:
  • Buy Now and Auction modes
  • Item tradability validation

Testing

No build / run errors

Buy Now Happy Path

csfloat_buy_now_happy_path.mov

Auction Happy Path

csfloat_auction_happy_path.mov

Not Logged In

csfloat_not_logged_in.mov

Price Fetch Failed

csfloat_cant_fetch_price.mov

[Step7750]

Thanks for contributing to the CSFloat extension! We appreciate community contributions and definitely wasn't expecting a substantial PR.

I've added a couple comments, some in relation to code style and others for the UX -- it'd be great if we could try to match a similar UI style to either Steam or CSFloat for the model.

[IzaakPrats]

Got to most of it today -- will have time tomorrow to address UX/UI issues, CSS organization, and CSFloat auth state checking.

[IzaakPrats]

Got caught up with work -- still getting this done. Had issues logging in last night. btw I noticed that the API lists valid auction durations as 1, 3, 5, 7, and 14 but (iirc) the csfloat site only allows for 1, 3, 7, or 14.

Also, ran into an issue with listing prices -- what do you think about including subtotal & sale fees? Is there an easy way to fetch a user's sale fee %?

cc @Step7750

[GODrums]

Hey @IzaakPrats,

thank you for the great contribution!

You should be correct regarding the auction options, I believe the API docs are just outdated here.
I personally also really like the idea of explicitly displaying the subtotal & sale fee. The fee is always 2% of the sale price, so you should be able to calculate it locally.

[IzaakPrats]

Got quite a bit done on this. Still need to add auth validation, debug a ux issue where sometimes items won't open the modal, and add a confirmation dialogue. Should be good after that! :)

Also, lmk if there is a better icon i should use instead of the karambit.

[IzaakPrats]

Requested review again and updated PR comment with new e2e tests

[GODrums]

Really like the current version already!

I do think we should explicitly handle Dopplers though. Instead of using the standard /price-list, which only features the price for the cheapest overall Doppler, we can use the /price-list/doppler-endpoint to get phase-specific prices with the phase_name-attribute.

[IzaakPrats]

@GODrums -- nice! didn't know that endpoint existed. got it in.

Before (karambit black pearl):

After (karambit black pearl):

[GODrums]

Thank you, looks great!

Just tested it myself and noticed that in some cases the font-family is not applied correctly due to Steam's default CSS, for example the input and button elements still use Steam's original font-family.

We likely have to create a manual rule to overwrite it for these elements.

[GODrums]

Another nit:

There seems to be an edge case whenever a user is not signed in to csfloat right now, where the /listings-request returns a 401. In that case the modal seems to be stuck at Loading... - optimally we would have an error case here displaying some sort of warning telling the user to sign in on Csfloat again.

We / I can also solve this as follow-up to this PR though.

[IzaakPrats]

@GODrums - good catches! got both of those issues handled. Added a css override at the modal content level and made a new way for unauth exceptions to bubble up to the modal.

[GODrums]

LGTM, thank you for this huge PR!

Tested on Chrome and works.
Tested also on Firefox, but the /listings endpoint doesn't support moz-extension origins yet (@Step7750 should probably be fixed server-sided?)

[Step7750]

This is awesome! I'll try to get to re-reviewing this tomorrow -- feel free to ping me if I don't get to it.

@GODrums I can allow-list that endpoint for the Firefox extension, I'll set a reminder before this goes live.

[Step7750]

Thank you @IzaakPrats!

I've added a few comments, but we're very close to getting this merged. As mentioned briefly earlier, it's rare to see a quality PR like this from a community contribution -- so thank you again.

[Step7750]

IMO, we should make the LIST_ITEM and ListItem scoped with CSFloat since it could also mean listing the item on Steam.

[IzaakPrats]

Makes sense but it's kind of already scoped by being in this extension -- not sure this would ever wrap the actual steam listing functionality since listing via extension is only csfloat. Happy to make the change if you think it would help clarify tho

[IzaakPrats]

Got those nits in @Step7750

by the way, do you have logging on extension usage? I'd be curious to know how many people use the extension to list and in the future, how many people use the Search on CSFloat button that go on to purchase.

[IzaakPrats]

Looks like I missed a few comments. Will address those this week