Skip to content

Redesign the create offer page with each setting in its own card - #1006

Open
Rigidity wants to merge 4 commits into
mainfrom
rigidity/redesign-create-offer-cards
Open

Rigidity wants to merge 4 commits into
mainfrom
rigidity/redesign-create-offer-cards

Conversation

@Rigidity

@Rigidity Rigidity commented Nov 15, 2026 •

Copy link
Copy Markdown
Collaborator

The create offer page had become cluttered. This redesign takes its layout from ent-wallet's create offer screen:

  • You offer / You request: two side-by-side cards with a ⇄ divider between them (they stack with ⇅ on narrow screens). Asset rows come first and the small "+ Token / + NFT / + Option" buttons sit below. An empty side shows a dashed placeholder.
  • Offer Settings: each option is in its own card.
    • Network Fee: the fee input, with a note that it's required for request-only offers.
    • Expiration: a switch in the card header. When it's on, the existing duration / date & time input shows below it.
    • NFT Offers: "One offer" or "One offer per NFT". This card only appears when offering more than one NFT. It moved out of the asset list, where it was a switch.
    • Split coins first: a switch in the card header. When it's on, the split fee input shows below it. It's disabled, with an explanation, while each NFT gets its own offer.

The setting card (OfferSettingCard in src/components/OfferSettings.tsx) takes an optional switch for its header. The NFT Offers choice (OfferChoice) uses native radio inputs in a fieldset, so it doesn't add a dependency. What the page passes to offer creation is unchanged, and src/pages/MakeOffer.test.tsx checks the settings that reach the confirmation dialog.

Review

Two review loops, each run with separate correctness, tests and simplification reviewers. The second loop ran after the switch change and the rebase onto main. Neither found anything at major or above. Fixes from the second loop:

  • OfferChoice no longer has per-option details or a disabled state, which nothing has used since expiration and coin splitting became switches.
  • New tests check that both typed fees reach the confirmation dialog, and that an NFT row that hasn't been filled in doesn't count as an offered NFT.

Decisions to confirm

  • Network fee always visible. ent-wallet hides its offer fee behind a checkbox. I kept the fee visible because Sage requires one for request-only offers and applies the default fee setting. Switching to a checkbox would only change MakeOffer.tsx.
  • New wording for the labels and descriptions above.

New strings are wrapped with Lingui; the next release needs pnpm extract.

- Lay the two options side by side only from lg, so the expiration inputs get the full card width on medium screens
- Group the options in a fieldset with a legend, and name each radio by its title with its description linked separately
- Build the setting card from CardHeader, CardTitle and CardDescription
- Add tests for the choice control and for how the settings reach the offer dialogs
@Rigidity
Rigidity force-pushed the rigidity/redesign-create-offer-cards branch from 58a0e17 to 0ab0b34 Compare November 15, 2026 04:29
- Drop OfferChoice's per-option details and disabled state, which
  nothing uses since expiration and coin splitting became switches
- Test that each typed fee reaches the dialog, and that an NFT row that
  hasn't been filled in doesn't count as an offered NFT

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant