Hubble Responsive #1466

vutuanlinh2k2 · 2023-07-27T06:40:30Z

Summary of changes

Provide a detailed description of proposed changes.

Update useDarkMode hooks with useLocalStorageState
Responsive design for Hubble Stats
Add SideBarMenu components in webb-ui-kit

Proposed area of change

Put an x in the boxes that apply.

Reference issue to close (if applicable)

Specify any issues that can be closed from these changes (e.g. Closes #233).

Screen Recording

If possible provide a screen recording of proposed change.

Screen.Recording.2023-07-27.at.13.38.04.mov

Code Checklist

Please be sure to add .stories documentation if any additions are made to libs/webb-ui-components.

I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

github-actions · 2023-07-27T06:50:46Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	dda1d9df12a97d6fef0dca1ed85ccddb4fdf9136
🔍 Latest deploy log	https://app.netlify.com/sites/development-hubble-bridge/deploys/64c213bfc837154ff903a87b
😎 Deploy Preview	https://64c213bfc837154ff903a87b--development-hubble-bridge.netlify.app

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

github-actions · 2023-07-27T07:19:18Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	57f1ad339592a8ad73a59e0e24cbc40efb512749
🔍 Latest deploy log	https://app.netlify.com/sites/development-hubble-bridge/deploys/64c21a6fe98dcf5a26c0db71
😎 Deploy Preview	https://64c21a6fe98dcf5a26c0db71--development-hubble-bridge.netlify.app

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

github-actions · 2023-07-27T07:19:57Z

✅ Deploy Preview for webb hubble statistic is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	57f1ad339592a8ad73a59e0e24cbc40efb512749
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-stats/deploys/64c21a8d81a48f5e1b27abae
😎 Deploy Preview	https://64c21a8d81a48f5e1b27abae--hubble-stats.netlify.app

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

github-actions · 2023-07-27T08:03:37Z

✅ Deploy Preview for webb hubble statistic is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	368deafc74cd2f4d33a37da291e7c50aa0925fe7
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-stats/deploys/64c224cb5f78cf5dc3760445
😎 Deploy Preview	https://64c224cb5f78cf5dc3760445--hubble-stats.netlify.app

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

github-actions · 2023-07-27T08:03:47Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	368deafc74cd2f4d33a37da291e7c50aa0925fe7
🔍 Latest deploy log	https://app.netlify.com/sites/development-hubble-bridge/deploys/64c224dc9cc7a55d1262a307
😎 Deploy Preview	https://64c224dc9cc7a55d1262a307--development-hubble-bridge.netlify.app

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

monaiuu

LGTM, nice job on the responsive breakpoints!

libs/webb-ui-components/src/components/SideBar/SideBar.tsx

AtelyPham · 2023-07-27T11:13:28Z

libs/webb-ui-components/src/components/SideBar/SideBarMenu.tsx

+              <div>
+                <a
+                  href={logoLink ? logoLink : '/'}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Logo size="md" />
+                </a>
+
+                <div className="mt-11 flex flex-col gap-4">
+                  {items.map((itemProps, index) => (
+                    <SideBarItem
+                      key={index}
+                      {...itemProps}
+                      isSidebarOpen={true}
+                      isActive={activeItem === index}
+                      setIsActive={() => setActiveItem(index)}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between gap-2 p-2">
+                <div className="group flex items-center justify-between">
+                  <Link href={footer.href} aTagProps={{ target: '_blank' }}>
+                    <footer.Icon
+                      width={24}
+                      height={24}
+                      className="cursor-pointer !fill-mono-100 dark:!fill-mono-60 group-hover:!fill-mono-200 dark:group-hover:!fill-mono-0"
+                    />
+                  </Link>
+
+                  <div className="pl-2">
+                    <Link href={footer.href} aTagProps={{ target: '_blank' }}>
+                      <Typography
+                        variant="body1"
+                        className="cursor-pointer text-mono-100 dark:text-mono-60 group-hover:text-mono-200 dark:group-hover:text-mono-0"
+                      >
+                        {footer.name}
+                      </Typography>
+                    </Link>
+                  </div>
+
+                  {!footer.isInternal ? (
+                    <div className="pl-[26px]">
+                      <Link href={footer.href} aTagProps={{ target: '_blank' }}>
+                        <ExternalLinkLine
+                          className="cursor-pointer !fill-mono-100 dark:!fill-mono-60 group-hover:!fill-mono-200 dark:group-hover:!fill-mono-0"
+                          width={24}
+                          height={24}
+                        />
+                      </Link>
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                </div>
+
+                <ThemeToggle />
+              </div>


Why don't we reuse the SideBar component instead of reimplementing it here?

libs/webb-ui-components/src/components/Table/Table.tsx

libs/webb-ui-components/src/components/TableAndChartTabs/TableAndChartTabs.tsx

libs/webb-ui-components/src/hooks/useDarkMode.ts

AtelyPham · 2023-07-27T11:21:57Z

Left some comments.

AtelyPham

Just a bit of feedback on the UI! The section that I've highlighted with a red rectangle seems a bit odd. I believe it might be due to the background blur on the cards behind it.

AtelyPham · 2023-07-27T11:30:43Z

Could you also add a responsive sidebar to the Hubble Bridge, or alternatively, create an issue for it? This way, we can keep track of it for future reference. Your help is greatly appreciated! 🙏

AtelyPham · 2023-07-27T11:33:30Z

Additionally, there are quite a few warnings and errors appearing on the console. Could you please take a look at these as well?

vutuanlinh2k2 · 2023-07-27T13:10:30Z

Just a bit of feedback on the UI! The section that I've highlighted with a red rectangle seems a bit odd. I believe it might be due to the background blur on the cards behind it.

@devpavan04 since you are working on the charts for Hubble Stats maybe you can help me take a look at this after this PR got merged!

monaiuu · 2023-07-27T15:04:11Z

@vutuanlinh2k2 just tested the preview link on my tablet & mobile devices. I get these blue lines around the components, can you check on this as well? (I'm on IOS)

github-actions · 2023-07-28T08:16:49Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	b0a097e4118bb51e1ccad2a04d40691337977c73
🔍 Latest deploy log	https://app.netlify.com/sites/development-hubble-bridge/deploys/64c3796bbfe6ca55db86f9dd
😎 Deploy Preview	https://64c3796bbfe6ca55db86f9dd--development-hubble-bridge.netlify.app

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

github-actions · 2023-07-28T08:29:28Z

✅ Deploy Preview for webb hubble statistic is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	663538a5e487278e45bc95bb213a6b7a81dc7d78
🔍 Latest deploy log	https://app.netlify.com/sites/hubble-stats/deploys/64c37c57d39150534c702c93
😎 Deploy Preview	https://64c37c57d39150534c702c93--hubble-stats.netlify.app

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

github-actions · 2023-07-31T06:35:04Z

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @vutuanlinh2k2

Name	Link
🔨 Latest commit	663538a5e487278e45bc95bb213a6b7a81dc7d78
🔍 Latest deploy log	https://app.netlify.com/sites/development-hubble-bridge/deploys/64c75610f4454978d469a852
😎 Deploy Preview	https://64c75610f4454978d469a852--development-hubble-bridge.netlify.app

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

vutuanlinh2k2 · 2023-07-31T06:51:12Z

@vutuanlinh2k2 just tested the preview link on my tablet & mobile devices. I get these blue lines around the components, can you check on this as well? (I'm on IOS)

@monaiuu I believe this problem is solved in the latest preview link 😊 Can you check the site again!

AtelyPham

LGTM! Great work @vutuanlinh2k2 🔥

vutuanlinh2k2 added 14 commits July 19, 2023 22:15

feat: add network table

c61029e

chore: remove useStatae in NetworkTableContainer

09d9070

chore: merge with develop

f62485a

chore: update basic layout

60099d0

chore: refactor + responsive Shielded tables

e476253

chore: add reponsive design to Pool Transaction table + refactor code

17768ac

chore: refactor sidebar components + add SideBarItem component

4581d68

feat: add SideBarMenu

f171c27

chore: refactor code

82e3b79

chore: update Brige Dapp sidebar

0744aa3

chore: merge with develop

71e49b4

chore: responsive Network Tables

d456a2f

feat: update useDarkMode with use-local-storage-state

70023c4

feat: add forwardRef

dda1d9d

vutuanlinh2k2 requested a review from monaiuu July 27, 2023 06:40

vutuanlinh2k2 requested review from AtelyPham and devpavan04 as code owners July 27, 2023 06:40

fix: fix localStorage error when deploy

57f1ad3

vutuanlinh2k2 added the wip 🚧 Work in-progress label Jul 27, 2023

chore: remove unnecessary code

368deaf

vutuanlinh2k2 added needs review 👓 Pull request needs a review and removed wip 🚧 Work in-progress labels Jul 27, 2023

monaiuu approved these changes Jul 27, 2023

View reviewed changes

AtelyPham reviewed Jul 27, 2023

View reviewed changes

libs/webb-ui-components/src/components/SideBar/SideBar.tsx Outdated Show resolved Hide resolved

AtelyPham reviewed Jul 27, 2023

View reviewed changes

libs/webb-ui-components/src/hooks/useDarkMode.ts Show resolved Hide resolved

AtelyPham reviewed Jul 27, 2023

View reviewed changes

vutuanlinh2k2 changed the title ~~feat: add network table~~ Hubble Responsive Jul 27, 2023

vutuanlinh2k2 mentioned this pull request Jul 27, 2023

[TASK] Add Bridge Hubble SideMenuBar #1467

Closed

chore: update based comments

abdb4c1

vutuanlinh2k2 added 2 commits July 28, 2023 14:56

chore: refactor SideBar code

3d573a5

chore: fix outline for sidebarmenu hamburger and content

b0a097e

chore: fix minor errors

663538a

vutuanlinh2k2 added needs review 👓 Pull request needs a review and removed needs changes 🔧 PR has requested changes or conflicts that need to be addressed labels Jul 31, 2023

vutuanlinh2k2 requested review from monaiuu and AtelyPham July 31, 2023 06:46

AtelyPham approved these changes Jul 31, 2023

View reviewed changes

AtelyPham merged commit fb5b3a2 into develop Jul 31, 2023
8 checks passed

AtelyPham deleted the linh/hubble-stats-responsive branch July 31, 2023 09:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hubble Responsive #1466

Hubble Responsive #1466

vutuanlinh2k2 commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

monaiuu left a comment

AtelyPham Jul 27, 2023

AtelyPham commented Jul 27, 2023

AtelyPham left a comment

AtelyPham commented Jul 27, 2023

AtelyPham commented Jul 27, 2023

vutuanlinh2k2 commented Jul 27, 2023

monaiuu commented Jul 27, 2023

github-actions bot commented Jul 28, 2023

github-actions bot commented Jul 28, 2023

github-actions bot commented Jul 31, 2023

vutuanlinh2k2 commented Jul 31, 2023

AtelyPham left a comment

Hubble Responsive #1466

Hubble Responsive #1466

Conversation

vutuanlinh2k2 commented Jul 27, 2023

Summary of changes

Proposed area of change

Reference issue to close (if applicable)

Screen Recording

Code Checklist

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

github-actions bot commented Jul 27, 2023

monaiuu left a comment

Choose a reason for hiding this comment

AtelyPham Jul 27, 2023

Choose a reason for hiding this comment

AtelyPham commented Jul 27, 2023

AtelyPham left a comment

Choose a reason for hiding this comment

AtelyPham commented Jul 27, 2023

AtelyPham commented Jul 27, 2023

vutuanlinh2k2 commented Jul 27, 2023

monaiuu commented Jul 27, 2023

github-actions bot commented Jul 28, 2023

github-actions bot commented Jul 28, 2023

github-actions bot commented Jul 31, 2023

vutuanlinh2k2 commented Jul 31, 2023

AtelyPham left a comment

Choose a reason for hiding this comment