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

feat(uirefresh): component refresh - market selector #1073

Merged
merged 9 commits into from
Oct 2, 2024

Conversation

moo-onthelawn
Copy link
Contributor

@moo-onthelawn moo-onthelawn commented Sep 27, 2024

Update the market selector + dropdown for the ui refresh. Most changes flagged. See figma here.

Mainly:

  • Replace "Propose New Market" with "+ "Launch Market"
    • Move button to be next to search bar
  • Make tags wrap
  • Update tag styling
  • Remove "Open Interest" column
  • Remove "select market" at the top when dropdown is open
  • Reorder market stats
  • Update sort icon
  • Shrink sizing of market selector to min width

Note:

  • Made minor change on tablet markets view to have the search bar + tags stack because honestly it didn't make visual sense to have them side by side (and we stacked them for mobile anyways)
  • Increasing asset icon size (next to market name) + reducing market dropdown width to be done in follow up
  • testing uirefresh=true, and would add pml=true for the launch markets button
before after w/ flag after w/o flag
Screenshot 2024-09-27 at 12 55 38 PM Screenshot 2024-09-27 at 12 55 24 PM Screenshot 2024-09-27 at 12 57 07 PM

Views

  • MarketSelectorAndStats
    • Small visual change to render full height seperator when ui refresh enabled after market selector tab
w/ flag w/o flag
Screenshot 2024-09-27 at 11 05 18 AM Screenshot 2024-09-27 at 11 05 05 AM
  • MarketStatsDetails

    • Adjust ordering of market stats when ui refresh enabled
  • MarketFilter

    • When uirefresh enabled:
      • Replace "Propose new market" with "launch market" (requires pml flag as well)
      • Replace scrolling tag list with just wrapping (requested by product)
      • Update tag styling so that the tags have no borders or backgrounds (unless selected)
w/ flag w/o flag
Screenshot 2024-09-27 at 12 54 04 PM Screenshot 2024-09-27 at 12 53 43 PM
  • MarketDropdown
    • When uirefresh enabled:
      • Remove open interest column
      • Remove leverage tag on market name when uirefresh enabled
      • Remove "Select market" / "Tap to close" text when market dropdown open
      • Make market selector min width (instead of sidebar width)
    • Rip out sticky styling and replace with flex for scroll
      • This also fixes a bug where the last item of the dropdown wasn't shown when the banner is shown because we were miscalculating fixed heights

Components

  • SearchInput
    • Slightly updated padding to better match mocks
Before After
Screenshot 2024-09-27 at 11 02 17 AM Screenshot 2024-09-27 at 11 01 05 AM
  • SortIcon

    • Create new sort icon that uses two arrows (sort direction highlighted)
  • Table

    • Update to use new SortIcon when flag enabled
  • ToggleGroup

    • Update to allow a wrapping overflow (instead of scroll)
  • Separator

    • Added variant for fullHeight on VerticalSeparator

Packages

  • localization
    • bumped, but didn't end up using strings 🤷‍♀️

@moo-onthelawn moo-onthelawn requested a review from a team as a code owner September 27, 2024 14:58
Copy link

linear bot commented Sep 27, 2024

Copy link

vercel bot commented Sep 27, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
v4-staging ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 2, 2024 5:11pm
v4-testnet ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 2, 2024 5:11pm

@moo-onthelawn moo-onthelawn marked this pull request as draft September 27, 2024 15:50
Copy link
Contributor

@aforaleka aforaleka left a comment

Choose a reason for hiding this comment

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

also will updating the markets table row padding/height be a later change?

ah good point - missed sorry, updated now! Also updated the icon size in each row in the follow up PR here

Screenshot 2024-09-30 at 3 45 54 PM

Comment on lines 20 to 22
height: ${({ fullHeight }) => css`
${fullHeight ? css`100%;` : css`calc(100% - 1.5rem);`}
`}
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: do we need the double css`` wrapping?

className?: string;
};

export const SortIcon = ({ sortDirection, className }: ElementProps & StyleProps) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

coool i dig this! superrrr nit since in the preview link i feel like they look a little too cartoonish(?) -- can we align it more like the one in figma so the two vertical lines of the arrows are closer to same height?
imageimage

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ah yes - lemme update with achal's icons!

placeholder={stringGetter({ key: searchPlaceholderKey })}
onTextChange={onSearchTextChange}
/>
{uiRefresh && showProposeButton && showLaunchMarkets && launchMarketButton}
Copy link
Contributor

Choose a reason for hiding this comment

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

is adding the showLaunchMarkets to determine whether to show propose button an intentional change? since we used to just show the button when showProposeButton is true

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yess - so was following logic for when we enable the Launch Market route here - since the route doesn't exist unless pml is enabled, I also hide it here. Note that the existing "Propose markets" button logic doesn't change

{
columnKey: 'oraclePrice',
getCellValue: (row) => row.oraclePrice,
label: stringGetter({ key: STRING_KEYS.PRICE }),
renderCell: ({ oraclePrice, tickSizeDecimals }) => (
<$Output type={OutputType.Fiat} value={oraclePrice} fractionDigits={tickSizeDecimals} />
),
},
} satisfies ColumnDef<MarketData>,
Copy link
Contributor

Choose a reason for hiding this comment

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

could we potentially add this at the end and do something like satisfies ColumnDef<MarketData>[]?

Copy link
Contributor

@aforaleka aforaleka left a comment

Choose a reason for hiding this comment

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

🌶️🌶️🌶️🌶️

@moo-onthelawn moo-onthelawn merged commit b2ff91c into main Oct 2, 2024
9 checks passed
@moo-onthelawn moo-onthelawn deleted the mulan/ct-1217-component-refresh-market-selector branch October 2, 2024 17:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants