csfloat
Feature: Modal to allow users to list directly from inventory to CSFloat
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
FetchRecommendedPricehandler to get price suggestions from CSFloat - Added
ListItemhandler to create listings via CSFloat API - Created
ListItemModalcomponent with:- Buy Now and Auction modes
- Item tradability validation
Testing
No build / run errors
Buy Now Happy Path
https://github.com/user-attachments/assets/10c545d5-630d-4ec3-a4f6-7088acc5e2a2
Auction Happy Path
https://github.com/user-attachments/assets/de527c64-7c3c-4759-b5ab-772462bc1dec
Not Logged In
https://github.com/user-attachments/assets/4666843d-bcf1-40cd-be85-3ed59b3e19ff
Price Fetch Failed
https://github.com/user-attachments/assets/e12cab39-52fc-47a5-9909-8576253bee4c
Got to most of it today -- will have time tomorrow to address UX/UI issues, CSS organization, and CSFloat auth state checking.
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
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.
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.
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.
@GODrums -- nice! didn't know that endpoint existed. got it in.
Before (karambit black pearl):
After (karambit black pearl):
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.
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.
@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.
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.
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.
Again, thank you for your work on this @IzaakPrats!
Let me know if you get stuck on the last few feedback items – I'm happy to assist and help getting it merged.
Hey @GODrums / @Step7750 -- I just got home from a vacation. Will likely get this merged in either this afternoon or this weekend. Thanks for the support!
Got the final comments resolved and rebased on current master branch.
Looks like I'll need approval from @Step7750 in order to merge -- is there a process for merging I should follow?
cc @GODrums
@IzaakPrats Don't worry, @Step7750 will take a look at it as soon as he can find some time. With his approval, you are free to merge it anytime. Thanks again for this great PR!