[APR] PoolTable Filter #251

Rawallon · 2023-08-29T21:26:17Z

Altered calculatePoolStats to return tokens used on Pool
Add PoolType return to calcutePoolStats/Route
Altered PoolListTable column headings
Added Downshift as a dependency
Implemented Multi selector with Downshift
Implemented TokenFilter with Multi selector component
Implemented util function to generate API url with filters
Changed token filter name and added Type
Better Ux on MultiSelect
Refactor PoolTable to use queryParams to sort and order
Adds initial min tvl and limit on filter url
Implemented function to filter selected items
Moved MultiSelectDropdown to components folder
Smaller text on the popover
Add max width to MultiSelect
Add empty state to poolTable
Added hasMorePool conditional to PoolTable

linear · 2023-08-29T21:26:23Z

BAL-710 UI for filter on poolTable

input filter poolTable

by name
by network
by token

image.png
from breadcrumbs select a field on filter

ribeirojose · 2023-08-29T21:37:05Z

would take a look into https://ui.shadcn.com/docs/components/combobox

Rawallon · 2023-08-30T12:25:49Z

@ribeirojose I got the Downshift recommendantion from this thread on shadcn's repo about multi-select

netlify · 2023-08-30T13:04:00Z

✅ Deploy Preview for balancer-tools ready!

Name	Link
🔨 Latest commit	`81cb3f7`
🔍 Latest deploy log	https://app.netlify.com/sites/balancer-tools/deploys/64f0bea5fca3d100087fe897
😎 Deploy Preview	https://deploy-preview-251--balancer-tools.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

ribeirojose · 2023-08-30T14:08:47Z

@ribeirojose I got the Downshift recommendantion from this thread on shadcn's repo about multi-select

Cool! Haven't tried out the PR yet but just pointed it as a resource. This comment from the thread you mentioned is 🔥 shadcn-ui/ui#66 (comment)

apps/balancer-tools/src/app/apr/round/(components)/TokenFilterInput.tsx

apps/balancer-tools/src/app/apr/(utils)/getFilteredApiUrl.ts

apps/balancer-tools/src/app/apr/round/(components)/TokenFilterInput.tsx

Rawallon · 2023-08-31T12:15:30Z

Here's how to select looks like

chrome_gPk5QwrF4r.mp4

I think we could iterate on it to end up with something like Balancer's, but I think this is good enough as it is, what do you guys think?

Here's the balancer search

This reverts commit 435e80a.

Co-Authored-By: José Ribeiro <32641844+ribeirojose@users.noreply.github.com>

apps/balancer-tools/src/app/apr/round/(components)/PoolTableWrapper.tsx

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx

ribeirojose · 2023-08-31T14:52:17Z

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx

+                      return (
+                        <Badge key={value + idx} color="blue">
+                          <div
+                            className="flex gap-2 items-center w-max"


I think either gap-1 or adding some more horizontal padding will make this look better.

gap-1 would reduce the gap tho

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx

ribeirojose · 2023-08-31T14:57:38Z

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx

+  );
+
+  return (
+    <div className="relative">


Shouldn't it wrap at some point and have some max width/height? How would this show on mobile? e.g. https://tools-monorepo-dxnj3a8mv-ribeirojose.vercel.app/apr/round/74?tokens=WETH%2CsdBal%2CB-80BAL-20WETH%2CjEUR%2Cbb-USD%2B%2CwstETH%2CDOLA%2CwBETH%2CwjAURA%2CswETH%2CstaBAL3%2CauraBAL%2CagEUR%2CPAR

From that above example ☝️ we also need an empty state when that search doesn't yield any results. Can you track that on Linear?

I was thinking about it, do you think we should limit number os tokens to be searched at once?

cc @luizakp

I just checked Balancer UI and they don't handle this case as well... from all the pool type the max amount of tokens is 8. So I think it makes sense to limit 8 tokens.WDYT?

ribeirojose · 2023-08-31T14:59:10Z

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx

+
+  return (
+    <div className="relative">
+      <Downshift {...rest} onChange={changeHandler()}>


Keyboard arrow navigation doesn't work for this Select 😞 no need to work on this now since we've already put a lot of time here, but it's certainly something that's very intuitive to me that I couldn't use here

👍 Downshift should help with that, I'll take a stab at it later

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx

Rawallon · 2023-08-31T17:03:51Z

@ribeirojose @luizakp Need you guys' approval

Base automatically changed from rawallon/bal-718-pool-list-design-must-be-consistent-with-pool-metadata-left to main August 29, 2023 21:32

Rawallon force-pushed the rawallon/bal-710-ui-for-filter-on-pooltable branch from 2ac1767 to df86cb5 Compare August 30, 2023 13:03

ribeirojose reviewed Aug 30, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/round/(components)/TokenFilterInput.tsx Outdated Show resolved Hide resolved

ribeirojose reviewed Aug 30, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/(utils)/getFilteredApiUrl.ts Outdated Show resolved Hide resolved

Rawallon commented Aug 30, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/round/(components)/TokenFilterInput.tsx Outdated Show resolved Hide resolved

Rawallon and others added 17 commits August 31, 2023 09:26

Altered calculatePoolStats to return tokens used on Pool

39fc62c

Add PoolType return to calcutePoolStats/Route

92bf20f

Adjust typings

f746676

Altered tooltip position

76a7d7d

Align text to right on PoolTable

dbdd292

Moved enum export outside of route.ts

04135c9

Added Downshift as a dependency

300f999

Implemeneted Multi selector with Downshift

7b68932

WIP: Initial token filter input

74d74dd

Refactor MultiSelector to get coins from Pools

13ffa6f

Implemented util function to get filter from URL search params

bd35679

Revert "fix pool tokens source in APR"

ab429ae

This reverts commit 435e80a.

Update pnpm-lock.yaml

fa65ead

Refactor getFilteredApiUrl

e097de9

Co-Authored-By: José Ribeiro <32641844+ribeirojose@users.noreply.github.com>

Changed token filter name and added Type

7c2ea9c

Replaced _ by ,

194b68b

Redirect with router

242bda1

ribeirojose reviewed Aug 31, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/round/(components)/PoolTableWrapper.tsx Outdated Show resolved Hide resolved

Format

c8d5b91

Rawallon added 5 commits August 31, 2023 11:14

Format

a6db0b7

Implemented function to filter selected items

0a9b69e

Implemented existing components

41fab0a

Update MultiSelectDropdown.tsx

d29dfa3

Moved MultiSelectDropdown to components folder

50e60a0

Rawallon force-pushed the rawallon/bal-710-ui-for-filter-on-pooltable branch from eaac9ad to 50e60a0 Compare August 31, 2023 14:26

Update TokenFilterInput.tsx

013bc7d

Rawallon requested review from ribeirojose and luizakp August 31, 2023 14:31

Rawallon marked this pull request as ready for review August 31, 2023 14:31

ribeirojose reviewed Aug 31, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx Outdated Show resolved Hide resolved

ribeirojose reviewed Aug 31, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx Outdated Show resolved Hide resolved

Removed unused args on funcs

f88a9a1

Rawallon force-pushed the rawallon/bal-710-ui-for-filter-on-pooltable branch from 95d5708 to f88a9a1 Compare August 31, 2023 14:48

ribeirojose reviewed Aug 31, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx Show resolved Hide resolved

ribeirojose reviewed Aug 31, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx Outdated Show resolved Hide resolved

ribeirojose reviewed Aug 31, 2023

View reviewed changes

luizakp previously approved these changes Aug 31, 2023

View reviewed changes

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx Outdated Show resolved Hide resolved

Rawallon added 2 commits August 31, 2023 12:53

Smaller text on the popover

e2a924f

Add max width to MultiSelect

60186d2

Rawallon dismissed luizakp’s stale review via 60186d2 August 31, 2023 15:55

Rawallon added 3 commits August 31, 2023 13:22

Add width value to table header

ea8984a

Add empty text to poolTable

f8f49b8

Added hasMorePool conditional to PoolTable

81cb3f7

ribeirojose approved these changes Aug 31, 2023

View reviewed changes

Rawallon merged commit 320c48a into main Aug 31, 2023
10 checks passed

Rawallon deleted the rawallon/bal-710-ui-for-filter-on-pooltable branch August 31, 2023 17:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[APR] PoolTable Filter #251

[APR] PoolTable Filter #251

Rawallon commented Aug 29, 2023 •

edited

Loading

linear bot commented Aug 29, 2023

ribeirojose commented Aug 29, 2023

Rawallon commented Aug 30, 2023

netlify bot commented Aug 30, 2023 •

edited

Loading

ribeirojose commented Aug 30, 2023

Rawallon commented Aug 31, 2023 •

edited

Loading

ribeirojose Aug 31, 2023 •

edited

Loading

Rawallon Aug 31, 2023

ribeirojose Aug 31, 2023 •

edited

Loading

ribeirojose Aug 31, 2023 •

edited

Loading

Rawallon Aug 31, 2023

luizakp Aug 31, 2023

ribeirojose Aug 31, 2023 •

edited

Loading

Rawallon Aug 31, 2023

Rawallon commented Aug 31, 2023

[APR] PoolTable Filter #251

[APR] PoolTable Filter #251

Conversation

Rawallon commented Aug 29, 2023 • edited Loading

linear bot commented Aug 29, 2023

ribeirojose commented Aug 29, 2023

Rawallon commented Aug 30, 2023

netlify bot commented Aug 30, 2023 • edited Loading

✅ Deploy Preview for balancer-tools ready!

ribeirojose commented Aug 30, 2023

Rawallon commented Aug 31, 2023 • edited Loading

ribeirojose Aug 31, 2023 • edited Loading

Choose a reason for hiding this comment

Rawallon Aug 31, 2023

Choose a reason for hiding this comment

ribeirojose Aug 31, 2023 • edited Loading

Choose a reason for hiding this comment

ribeirojose Aug 31, 2023 • edited Loading

Choose a reason for hiding this comment

Rawallon Aug 31, 2023

Choose a reason for hiding this comment

luizakp Aug 31, 2023

Choose a reason for hiding this comment

ribeirojose Aug 31, 2023 • edited Loading

Choose a reason for hiding this comment

Rawallon Aug 31, 2023

Choose a reason for hiding this comment

Rawallon commented Aug 31, 2023

Rawallon commented Aug 29, 2023 •

edited

Loading

netlify bot commented Aug 30, 2023 •

edited

Loading

Rawallon commented Aug 31, 2023 •

edited

Loading

ribeirojose Aug 31, 2023 •

edited

Loading

ribeirojose Aug 31, 2023 •

edited

Loading

ribeirojose Aug 31, 2023 •

edited

Loading

ribeirojose Aug 31, 2023 •

edited

Loading