feat: explore UI #4262

kayleegeorge · 2022-08-03T21:47:57Z

merging explore into main!

add route

feat(explore): add a top tokens hook with mock data

feat(explore): add useTokenPrice hook and dumby data

Co-authored-by: matteenm <105068213+matteenm@users.noreply.github.com>

* feat: add time selector dropdown UI * update time selector style

chore(deps): bump token-lists (#3929) (#3961) Co-authored-by: matteenm <105068213+matteenm@users.noreply.github.com> Co-authored-by: matteenm <105068213+matteenm@users.noreply.github.com>

* chore(deps): bump token-lists (#3929) * feat: empty to deploy 628417f (#3962) feat: empty to deploy * feat: fix metamask mobile browser connection (#3964) * fix metamask * forceActivate * remove forceActivate * unused change * feat(risk): cache risk check with ttl (#3965) Co-authored-by: matteenm <105068213+matteenm@users.noreply.github.com> Co-authored-by: Vignesh Mohankumar <vignesh@vigneshmohankumar.com>

* add token table UI * update token table with intial data pipeline * feat: Load token table with initial dummy data TODO: get token information (token name and symbol) * add token table UI and token row components * update table with token logo * update table with correct arrow * update table border * runs prettier (#3971) prettier * add header to tokenRow, format dollar util, add responsiveness * update table styling * update table styling and components setup * add back side padding * create header cell component * update table styling * fix padding * update css styling * Alphabetize styles Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

update width mobile breakpoint

hide header on token table when mobile view

* stack token name and symbol * style: clean up CSS

* add token table loading state * make token row components reusable * change typing and CSS styling * remove key props

* fix conflicts * style: CSS cleaning 2 * clean divs * add media breakpoint constants

* add favorites button frontend component * fix height and width CSS

fix small arrow sizing detail

* filter favorite tokens * fix atom * make showFavorite an atom * implement atom and clean CSS * change naming schema

* search bar CSS * style css fix * change from atom to useState

* fix favoriting bug * fix code styling * minor change

* search responsiveness * hide placeholder * css fix * shared file

* token detail draft * initial route path and some info * reduce PR * fixes * token null fix

* token detail draft * initial route path and some info * reduce PR * token header * remove flex * font sizes * fix CSS

* add timeframe options * map times * list times

* link routing * fix focus * Update index.tsx

* skeleton * padding change * fix link styling * add resource component

* remove swap button & responsiveness * center sparkline * remove margin

fix hover

* fix hover * initial network balance * fix network * checking 0 balance * add unsupported chain check * add network selector * multiple netwrk logic * change polygon logo * fix * naming

* for demo * link protocol info * colors in shared file

* animate chart mwaha * get rid of comments * add timeout * add fake widget * style * move loading into own file

* moved token price and delta into chart, expanded hoverability for crosshair

fix theme

vm · 2022-08-04T18:28:37Z

Need to fix a build issue (Kaylee is owning) and then this should be mergable. Zach will take a final look over it tomorrow for any deps issues or things I missed, then we can merge!

* add flyout * fix hover

merge main into explore

… page (#4194) * initial * initial footer * network balances * alphabetize * add smallest media breakpoint * Update colors.ts * rm console log * add loading and error state * fix multiple vs single * updates * updates * fix * Update settings.json * import fix

zzmp · 2022-08-05T14:04:09Z

src/theme/components.tsx

+function ToolTip() {
+  return (
+    <ToolTipWrapper>
+      <TooltipTriangle />


nit: This is overkill, and it should instead be done using a pseudo-element in CSS in the wrapper.

good point. @kayleegeorge can you update

what specifically do you mean by this @zzmp ?

this can be done in pure css without bringing in an svg dependency

src/components/AmplitudeAnalytics/constants.ts

zzmp · 2022-08-05T14:05:28Z

yarn.lock

-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.177.tgz#f70c0d19c30fab101cad46b52be60363c43c4578"
-  integrity sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==
+"@types/lodash@^4.14.168", "@types/lodash@^4.14.172":
+  version "4.14.182"


This doesn't actually need to be updated (but it doesn't hurt).

zzmp · 2022-08-05T14:06:21Z

yarn.lock

@@ -13891,6 +14127,13 @@ number-is-nan@^1.0.0:
  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=

+numbro@^2.3.6:


It's not great that this brings in yet another big number library. There's no easy alternative here?

we can switch to something else, i don't mind

yarn.lock

src/hooks/useTokenPrice.ts

src/hooks/useTokenRelevantResources.ts

src/components/Explore/TokenDetails/FooterBalanceSummary.tsx

src/hooks/useNetworkTokenBalances.ts

src/hooks/useTopTokens.ts

nits

JFrankfurt and others added 30 commits June 22, 2022 14:58

feat(explore): add /explore route (#3935)

4858329

add route

Explore use top tokens (#3954)

a5d11ce

feat(explore): add a top tokens hook with mock data

feat(explore): use token price (#3958)

7fec7b4

feat(explore): add useTokenPrice hook and dumby data

fix(explore): mock data fetching hook return type (#3959)

6b512ad

chore(deps): bump token-lists (#3929) (#3961)

aedc291

Co-authored-by: matteenm <105068213+matteenm@users.noreply.github.com>

feat: Kg/add time selector dropdown UI (#3956)

6cb88e5

* feat: add time selector dropdown UI * update time selector style

feat(explore): use token relevant resources (#3963)

1006fd6

chore(deps): bump token-lists (#3929) (#3961) Co-authored-by: matteenm <105068213+matteenm@users.noreply.github.com> Co-authored-by: matteenm <105068213+matteenm@users.noreply.github.com>

fix: add mobile responsiveness break point (#3988)

8576b6b

update width mobile breakpoint

fix: hide header when mobile (#3989)

bba3002

hide header on token table when mobile view

feat: stack token name and symbol (mobile view) (#3996)

52595ac

* stack token name and symbol * style: clean up CSS

feat: add token table loading state (#3984)

32ed745

* add token table loading state * make token row components reusable * change typing and CSS styling * remove key props

feat: token table mobile view (#4003)

f9edf65

* fix conflicts * style: CSS cleaning 2 * clean divs * add media breakpoint constants

feat: add favorites button frontend component (#4007)

36b6a16

* add favorites button frontend component * fix height and width CSS

fix: small arrow sizing detail (#4012)

005fcf4

fix small arrow sizing detail

feat: filter favorite tokens (#4010)

7b0ea20

* filter favorite tokens * fix atom * make showFavorite an atom * implement atom and clean CSS * change naming schema

feat: explore search bar UI (#4018)

3b9a49b

* search bar CSS * style css fix * change from atom to useState

fix: fix slow favoriting bug (#4033)

32eb460

* fix favoriting bug * fix code styling * minor change

feat: search responsiveness (#4034)

f073ba0

* search responsiveness * hide placeholder * css fix * shared file

feat: token link page with token address URL param (#4039)

5657d3f

* token detail draft * initial route path and some info * reduce PR * fixes * token null fix

feat: token detail page header UI (#4041)

5af989e

* token detail draft * initial route path and some info * reduce PR * token header * remove flex * font sizes * fix CSS

feat: add timeframe options UI (#4042)

dd310ad

* add timeframe options * map times * list times

feat: explore & token detail linking (#4048)

8c01c88

* link routing * fix focus * Update index.tsx

feat: token detail page metadata UI (#4047)

df5a68d

* skeleton * padding change * fix link styling * add resource component

feat: remove swap button (#4055)

60c4608

* remove swap button & responsiveness * center sparkline * remove margin

fix: token details color fix (#4056)

4140cba

fix hover

feat: network balances component (#4059)

38d25a4

* fix hover * initial network balance * fix network * checking 0 balance * add unsupported chain check * add network selector * multiple netwrk logic * change polygon logo * fix * naming

feat: add more and incorporate dummy data (#4066)

a021d90

* for demo * link protocol info * colors in shared file

feat: loading state for token detail (#4068)

0821ab9

* animate chart mwaha * get rid of comments * add timeout * add fake widget * style * move loading into own file

vercel bot deployed to Preview August 4, 2022 15:22 View deployment

refactor: moved token detail price into chart (#4274)

d9d5096

* moved token price and delta into chart, expanded hoverability for crosshair

vercel bot deployed to Preview August 4, 2022 17:11 View deployment

fix: update theme color files on explore (#4277)

c5fd8e1

fix theme

vm approved these changes Aug 4, 2022

View reviewed changes

vercel bot had a problem deploying to Preview August 4, 2022 18:14 Failure

fix: theme add hover state and flyout colors (#4279)

f2f4741

* add flyout * fix hover

vercel bot deployed to Preview August 4, 2022 18:51 View deployment

feat(token-details): lazy load some heavy stuff (#4282)

61865c6

vercel bot deployed to Preview August 4, 2022 19:30 View deployment

chore: merge main into explore (#4281)

f3a4764

merge main into explore

vercel bot deployed to Preview August 4, 2022 19:36 View deployment

Merge branch 'main' into explore

6beb0c4

vercel bot deployed to Preview August 4, 2022 19:46 View deployment

vercel bot deployed to Preview August 4, 2022 21:07 View deployment

zzmp suggested changes Aug 5, 2022

View reviewed changes

test: update snapshots based on color change (#4287)

dab8b29

vercel bot deployed to Preview August 5, 2022 14:29 View deployment

lint errors

95f4e53

vercel bot deployed to Preview August 5, 2022 14:38 View deployment

build: declare d3-curve-circlecorners types (#4288)

1aca48e

vercel bot deployed to Preview August 5, 2022 15:15 View deployment

fix: merging explore to main nits (#4289)

95b2fe9

nits

vercel bot deployed to Preview August 5, 2022 15:31 View deployment

vm enabled auto-merge (squash) August 5, 2022 15:37

zzmp approved these changes Aug 5, 2022

View reviewed changes

vm merged commit 25ea7f9 into main Aug 5, 2022

vm deleted the explore branch August 5, 2022 15:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: explore UI #4262

feat: explore UI #4262

kayleegeorge commented Aug 3, 2022

vm commented Aug 4, 2022

zzmp Aug 5, 2022

vm Aug 5, 2022

kayleegeorge Aug 5, 2022

zzmp Aug 5, 2022

zzmp Aug 5, 2022

zzmp Aug 5, 2022

vm Aug 5, 2022

feat: explore UI #4262

feat: explore UI #4262

Conversation

kayleegeorge commented Aug 3, 2022

vm commented Aug 4, 2022

zzmp Aug 5, 2022

Choose a reason for hiding this comment

vm Aug 5, 2022

Choose a reason for hiding this comment

kayleegeorge Aug 5, 2022

Choose a reason for hiding this comment

zzmp Aug 5, 2022

Choose a reason for hiding this comment

zzmp Aug 5, 2022

Choose a reason for hiding this comment

zzmp Aug 5, 2022

Choose a reason for hiding this comment

vm Aug 5, 2022

Choose a reason for hiding this comment