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.

Sign up for GitHub

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

Jump to bottom

Trending Tokens UI implementation phase 1 #6276

Closed
wants to merge 23 commits into from
Closed

Trending Tokens UI implementation phase 1 #6276

wants to merge 23 commits into from

Conversation

greg-schrammel
Copy link
Contributor

@greg-schrammel greg-schrammel commented Nov 21, 2024 •
edited
Loading

Fixes APP-1957
Fixes APP-1958
Fixes APP-1959

What changed (plus any additional context for devs)

Screen.Recording.2024-11-25.at.14.50.21.mov
  • what should we do if user select a network that's in the expanded state? made it jump to other grid to be visible

What should we show when user pins all networks? like a placeholder to drag into to unpin

Screenshot 2024-11-25 at 14 52 05

ops forgot to enable this in the recording, it won't show again for 2 weeks after dismissed
it's not straight forward to add a border like in the designs, so ignored it for now but doable if we feel like it

Screenshot 2024-11-25 at 15 05 43

Screen recordings / screenshots

What to test

network switcher:

  • test you can expand/collapse, select networks, select all networks
  • on edit mode, test you can drag to reorder the pinned networks and drag to pin/unpin, unpinned networks shouldn't be reorderable but alphabetically ordered so if you drag into the unpinned section it should go to it's right position alphabetically

@linear Linear
Copy link

linear bot commented Nov 21, 2024

APP-1958 UI implementation (Phase 1)

@linear Linear
Copy link

linear bot commented Nov 25, 2024

APP-1957 Trending Tokens - Phase 1

walmat
walmat reviewed Nov 26, 2024
View reviewed changes
.eslintrc.js Show resolved Hide resolved
walmat
walmat reviewed Nov 26, 2024
View reviewed changes
src/styles/colors.ts Outdated Show resolved Hide resolved
walmat
walmat reviewed Nov 26, 2024
View reviewed changes
src/config/experimental.ts Outdated Show resolved Hide resolved
@derHowie
Copy link
Member

hey @greg-schrammel, what should I test for here do you think?

walmat
walmat requested changes Nov 27, 2024
View reviewed changes
Copy link
Contributor

@walmat walmat left a comment

Choose a reason for hiding this comment

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

only thing blocking merge at this point is network selection being limited to one network and storing that in the zustand store to display on the dropdown. Otherwise lgtm

src/screens/discover/components/NetworkSwitcher.tsx Outdated Show resolved Hide resolved
src/screens/discover/components/NetworkSwitcher.tsx Outdated Show resolved Hide resolved
@walmat
Copy link
Contributor

walmat commented Nov 27, 2024 •
edited
Loading

Screenshot 2024-11-27 at 12 39 37 PM

Another issue, let's wrap those pills in a horizontal scrollview in case it's needed

@walmat walmat mentioned this pull request Dec 5, 2024
Merged
@brunobar79
Copy link
Member

Launch in simulator or device for d1ae0df

@walmat
Wire up trending tokens UI (#6292)
394f6fc 
* implement gql query to get trending tokens for selected network and display them

* fix dragging issue with no chainId and tapping empty space resetting network to all networks

* add mock handler for navigating to swaps flow

* fix lint

* shuffle files and break out network switcher to be composable

* refactor SwapCoinIcon to use a size prop instead of small, large, xlarge, etc.

* add view token analytics event

* add time tracking to discover screen

* add tracking for if user has swapped a trending token

* decouple network selector from trending tokens and add rest of analytics events

* fix customize network banner not being dismissable

* revert white color token change
@walmat
Copy link
Contributor

walmat commented Dec 6, 2024

Removing myself as reviewer here since I authored some of this work. @greg-schrammel

@walmat walmat requested review from walmat and removed request for walmat December 6, 2024 17:19
@greg-schrammel greg-schrammel marked this pull request as ready for review December 10, 2024 17:33
@linear Linear
Copy link

linear bot commented Dec 10, 2024

APP-1959 Network Selector Redesign (Phase 1a)

@greg-schrammel greg-schrammel force-pushed the gregs/app-1958-ui-implementation-phase-1 branch from 281900d to 107199a Compare December 11, 2024 15:14
benisgold
benisgold requested changes Dec 11, 2024
View reviewed changes
Copy link
Member

@benisgold benisgold left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Simulator Screenshot - iPhone 16 Pro - 2024-12-11 at 10 37 54

depending on options selected can bleed off screen. i think this is intended to be scrollable

benisgold
benisgold reviewed Dec 11, 2024
View reviewed changes
Copy link
Member

@benisgold benisgold left a comment

Choose a reason for hiding this comment

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

Simulator Screenshot - iPhone 16 Pro - 2024-12-11 at 10 41 51

network number circle (where it says "7") is imperceptible on light mode

@brunobar79
Copy link
Member

Launch in simulator or device for 2c3b993

@walmat walmat mentioned this pull request Dec 11, 2024
Merged
@brunobar79
Copy link
Member

Launch in simulator or device for 9aa50ae

@maxbbb
Copy link
Contributor

maxbbb commented Dec 11, 2024

Screenshot 2024-12-11 at 3 42 17 PM

A few things with the row component

  • The volume and mcap don't have currency label
  • Price can overflow into percentage increase and vice versa
  • The horizontal inset doesn't line up with the edges of the info cards (it appears that it is on the left side when on an L2 because of the network badge, but it's not)
  • The shadow of the network badge is being cutoff at the edges of the row
  • all of the percentage increase labels are the same as the 1hr percentage increase label (this might just be a placeholder thing / backend idk)

maxbbb
maxbbb reviewed Dec 11, 2024
View reviewed changes
Copy link
Contributor

@maxbbb maxbbb left a comment

Choose a reason for hiding this comment

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

One of the comments relates to the network selection, in the video you select multiple networks at the same time but right now you can't, are you supposed to be able to?

src/components/Discover/TrendingTokens.tsx Outdated Show resolved Hide resolved
src/components/Discover/TrendingTokens.tsx Outdated Show resolved Hide resolved
src/state/networkSwitcher/networkSwitcher.ts Show resolved Hide resolved
src/components/NetworkSwitcher.tsx Outdated Show resolved Hide resolved
@brunobar79 brunobar79 added the release for release blockers and release candidate branches label Dec 12, 2024
@greg-schrammel greg-schrammel mentioned this pull request Dec 13, 2024
Merged
@brunobar79
Copy link
Member

Launch in simulator or device for 258e213

@walmat walmat closed this Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@maxbbb maxbbb maxbbb left review comments

@benisgold benisgold benisgold requested changes

@walmat walmat walmat requested changes

Assignees
No one assigned
Labels
release for release blockers and release candidate branches
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@greg-schrammel @derHowie @walmat @brunobar79 @maxbbb @benisgold