Trending Tokens UI implementation phase 1 #6276
Conversation
| @@ -39,5 +39,6 @@ module.exports = { | |||
| ], | |||
| 'jest/expect-expect': 'off', | |||
| 'jest/no-disabled-tests': 'off', | |||
| 'no-nested-ternary': 'off', | |||
| @@ -49,7 +49,7 @@ const darkModeColors = { | |||
| skeleton: '#191B21', | |||
| stackBackground: '#000000', | |||
| surfacePrimary: '#000000', | |||
| white: '#12131A', | |||
| white: '#000', | |||
There was a problem hiding this comment.
hesitant to do this, can we make a new color instead?
There was a problem hiding this comment.
can you add remote config as well?
There was a problem hiding this comment.
let's split these components up into separate files pls
|
hey @greg-schrammel, what should I test for here do you think? |
| const toggleSelected = (chainId: ChainId) => { | ||
| if (selected.includes(chainId)) unselect(chainId); | ||
| else select(chainId); | ||
| }; |
There was a problem hiding this comment.
From what I understand of the spec, we only want to be able to select one network at a time (or all networks). This allows multiple to be selected.
| const unselect = (chainId: ChainId) => | ||
| setSelected(s => { | ||
| if (s === 'all') return []; | ||
| return s.filter(id => id !== chainId); | ||
| }); | ||
| const select = (chainId: ChainId) => | ||
| setSelected(s => { | ||
| if (s === 'all') return [chainId]; | ||
| return multiple ? [...s, chainId] : [chainId]; | ||
| }); |
There was a problem hiding this comment.
From what I understand of the spec, we only want to be able to select one network at a time (or all networks). This allows multiple to be selected.
This is probably more relevant here actually
| transform: [{ translateY: translationY.value }], | ||
| })); | ||
|
|
||
| const [selected, setSelected] = useState<ChainId[] | 'all'>([]); |
There was a problem hiding this comment.
should this be stored in the zustand store?
There was a problem hiding this comment.
I actually think it makes sense to move a lot of the internal helpers (selection, editing, etc.) to the Zustand store but that's my personal preference
Another issue, let's wrap those pills in a horizontal scrollview in case it's needed |
Fixes APP-1957
Fixes APP-1958
What changed (plus any additional context for devs)
Screen.Recording.2024-11-25.at.14.50.21.mov
I couldn't make the Drag N Drop we already have work, but don't like this implementation, it forces rerenders in the js thread, I think a better solution is to absolutely position everything and track it all in shared values
Newfilter is not goodWhat should we show when user pins all networks? like a placeholder to drag into to unpin
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
Screen recordings / screenshots
What to test