feat: revamp home ui #334

julia-eileen · 2024-10-16T16:41:14Z

Acceptance Criteria

Configure the project to allow the old UI codebase to coexist with the new one until the revamp is completed.
Implement a feature flag system using the useNewUiEnabled hook.
Modify the Sass build script to generate output for both the old and new UI.
Set up the project to allow a theming system (dark and light mode).
Update navigation, status components, and the homepage according to the new UI.

Security Checklist

Make sure you do not include new dependencies in the project unless strictly necessary and do not include dev-dependencies as production ones. More dependencies increase the possibility of one of them being hijacked and affecting us.

2024-10-16.12-30-01.mp4

2024-10-16.13-39-59.mp4

Release v0.19.0

Release v0.19.1

Release v0.20.0

Release: v0.20.1

Release v0.20.3

Release v0.20.4

julia-eileen · 2024-10-16T17:05:40Z

To quickly test the new UI without modifying the feature flag response, simply update the hooks/useNewUiEnabled.js file with the following content:

/**
 * Copyright (c) Hathor Labs and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { useFlag } from '@unleash/proxy-client-react';
import { UNLEASH_NEW_UI_FEATURE_FLAG } from '../constants';

export const useNewUiEnabled = () => {
  const newUiEnabled = useFlag(UNLEASH_NEW_UI_FEATURE_FLAG) || true;

  return newUiEnabled;
};

tuliomir

Thanks for contributing to our project! Here are some questions and suggestions on an initial partial review.

src/hooks/useIsMobile.js

src/hooks/useNewUiLoad.js

src/utils/getTheme.js

src/hooks/useMount.js

src/screens/DashboardTx.js

src/components/Switch.js

src/actions/index.js

src/components/GDPRConsent.js

src/components/Navigation.js

tuliomir

Not related to any file in specific: When running the application in localhost using the new UI, I'm receiving the following warning on browser console:

index.js:26 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    at li
    at ConditionalNavigation (http://localhost:3000/static/js/main.chunk.js:4765:5)

This may be related to some specific usage on the Navigation.js file, but I'm unsure of its source as of now.

julia-eileen · 2024-10-21T14:38:52Z

Not related to any file in specific: When running the application in localhost using the new UI, I'm receiving the following warning on browser console:
index.js:26 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    at li
    at ConditionalNavigation (http://localhost:3000/static/js/main.chunk.js:4765:5)
This may be related to some specific usage on the Navigation.js file, but I'm unsure of its source as of now.

It's because of the dropdown, can we fix it in the next PR? it would take some time to refactor this.

r4mmer · 2024-10-21T18:29:26Z

src/App.js

+    return newUiEnabled ? (
+      <ErrorMessage />
+    ) : (
+      <div className="content-wrapper">
+        <h3 className="text-danger">
+          Error loading the explorer. Please reload the page to try again.
+        </h3>
+      </div>
+    );
+  };


suggestion: Why not move the hook + logic to the ErrorMessage component?

This would make both the usage and later refactors to remove the old ui, simpler.

r4mmer · 2024-10-21T18:40:02Z

src/components/Navigation.js

+import moon from '../assets/images/moon.svg';
+import sun from '../assets/images/sun-dark.svg';
+import { ReactComponent as NewLogo } from '../assets/images/new-logo.svg';


question: Is there any difference between these import styles?

r4mmer · 2024-10-21T18:46:55Z

src/components/Navigation.js

+                theme === 'dark' ? 'dark-theme-logo' : 'light-theme-logo'
+              } theme-mainnet-btn`}
+            />
+            <span className="nav-title">Hathor Mainnet</span>


issue: The explorer works as the explorer for Hathor Testnet and some other custom networks.

Maybe we should get the connected network from the redux state.
See this line, the serverInfo received by setServerInfo can save the connected network on the redux and we can read it here and in the other places where mainnet is hard-coded.

r4mmer · 2024-10-21T18:47:51Z

src/components/Navigation.js

+          <button className="hide-mainnet-mobile">
+            <GlobeMainnet


To avoid confusion maybe we shoud rename this to "hide-network-mobile" and "GlobeNetwork".

r4mmer · 2024-10-21T19:00:10Z

src/components/Navigation.js

+            <span className="navbar-toggler-icon" />
+          </button>
+          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul className="navbar-nav me-auto">


Correct me if i'm wrong, but it seems there is a lot of duplicated items in the renderUi, renderNewUi and SideBar.
Maybe we should create a component for these duplicated items.

For instance, this list (ul) seems like it would have no problem being extracted to another component.
What do you think?

r4mmer · 2024-10-21T19:04:31Z

src/components/Navigation.js

-                placeholder="Search tx or address"
+                placeholder={`Search here`}


issue: The UI is not indicative of what can be searched.

We should keep the "Search tx or address" so users know that he can also search for an address.
Or maybe we can keep the "Search here" and when the user focus on the input it shows a message explaining that he can search both txs and addresses.

We changed it accordingly with the figma prototype.

Should we change it back?

r4mmer · 2024-10-21T19:19:14Z

src/components/Navigation.js

+          <img
+            src={theme === 'dark' ? sun : moon}
+            alt="themeColorButton"
+            className="theme-color-btn"
+            onClick={() => dispatch(toggleTheme())}
+          />


suggestion: Move this to the theme toggle component.

Maybe the theme toggle component should receive a bool to render as a switch or an image button.
This way we don't have to inline the theme toggle.

r4mmer · 2024-10-21T19:26:03Z

src/components/Navigation.js

+          {showSearchInput ? (
+            <input
+              type="search"
+              className={`form-control me-2 bg-dark text-light mobile-search-input ${
+                showSearchInput ? 'expanded' : ''
+              }`}
+              placeholder="Search..."
+              aria-label="Search"
+              ref={txSearchRef}
+              onKeyUp={handleKeyUp}
+              onBlur={() => setShowSearchInput(false)}
+              autoFocus
+            />
+          ) : (
+            <SearchIcon
+              fill={theme === 'dark' ? 'white' : 'black'}
+              onClick={toggleSearchInput}
+              className="mobile-search-icon"
+            />
+          )}


Suggestion: Extract this into another component.

Just an idea, since showSearchInput can be moved to the component and the rest seems to work.
Also, this Navigation component would be more straightforward and easier to read.

r4mmer · 2024-10-21T19:28:31Z

src/components/Switch.js

+import { useDispatch, useSelector } from 'react-redux';
+import { toggleTheme } from '../actions';
+
+export const SwitchButton = () => {


issue: Components we should have the same name as the file.

Also, this Switch maybe should be named ThemeSwitch to make it more indicative of what it does.

r4mmer · 2024-10-21T19:52:01Z

src/components/tx/TxRow.js

+  const parseTimestamp = timestamp => {
+    const date = new Date(timestamp * 1000);
+
+    const userLocale = navigator.language || navigator.userLanguage || 'en-US';
+
+    return new Intl.DateTimeFormat(userLocale, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    })
+      .format(date)
+      .replace(',', '');
+  };
+
+  const renderIdCell = id => {
+    const idStart = id.substring(0, isMobile ? 4 : 12);
+    const idEnd = id.substring(id.length - (isMobile ? 4 : 12), id.length);
+
+    return (
+      <div className="id-cell">
+        {idStart}
+        <div className="ellipsis">
+          <div className="ellipsi"></div>
+          <div className="ellipsi"></div>
+          <div className="ellipsi"></div>
+        </div>
+        {idEnd}
+      </div>
+    );
+  };


suggestion: Maybe we should move this to the utils folder so we can use this timestamp parser in other places as well.

We moved it, in the next PR it will be in the utils/date.js

pedroferreira1 and others added 11 commits July 12, 2024 10:43

Merge pull request HathorNetwork#273 from HathorNetwork/dev

62e4cd6

Release v0.19.0

Merge pull request HathorNetwork#277 from HathorNetwork/dev

4dca688

Release v0.19.1

Merge pull request HathorNetwork#306 from HathorNetwork/dev

2153b0c

Release v0.20.0

Merge pull request HathorNetwork#309 from HathorNetwork/dev

2a21404

Release: v0.20.1

Merge pull request HathorNetwork#322 from HathorNetwork/dev

c18ffa1

Merge pull request HathorNetwork#326 from HathorNetwork/dev

bbe9da4

Release v0.20.3

Merge pull request HathorNetwork#330 from HathorNetwork/dev

8a6d1fa

Release v0.20.4

feat: revamp home ui

d674ac9

fix date intl

5e0ca73

search bar fix

b9cbfc7

revert deploy config

bf1bf2f

julia-eileen requested a review from r4mmer as a code owner October 16, 2024 16:41

julia-eileen changed the base branch from master to dev October 16, 2024 16:57

tuliomir self-assigned this Oct 16, 2024

tuliomir added the enhancement New feature or request label Oct 16, 2024

tuliomir reviewed Oct 17, 2024

View reviewed changes

julia-eileen added 4 commits October 17, 2024 11:50

mobile breakpoint fix

bec6ea6

code review fixes

7ab148e

fix debbuging condition

1dd4bc4

theme utils refactor

483c66c

tuliomir self-requested a review October 21, 2024 14:01

switch refactor

330b5df

tuliomir reviewed Oct 21, 2024

View reviewed changes

tuliomir approved these changes Oct 21, 2024

View reviewed changes

r4mmer reviewed Oct 21, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: revamp home ui #334

feat: revamp home ui #334

julia-eileen commented Oct 16, 2024 •

edited

Loading

julia-eileen commented Oct 16, 2024

tuliomir left a comment

tuliomir left a comment

julia-eileen commented Oct 21, 2024

r4mmer Oct 21, 2024

r4mmer Oct 21, 2024

r4mmer Oct 21, 2024

r4mmer Oct 21, 2024

r4mmer Oct 21, 2024

r4mmer Oct 21, 2024

julia-eileen Oct 21, 2024

r4mmer Oct 21, 2024

r4mmer Oct 21, 2024

r4mmer Oct 21, 2024 •

edited

Loading

r4mmer Oct 21, 2024

julia-eileen Oct 21, 2024

		placeholder="Search tx or address"
		placeholder={`Search here`}

feat: revamp home ui #334

Are you sure you want to change the base?

feat: revamp home ui #334

Conversation

julia-eileen commented Oct 16, 2024 • edited Loading

Acceptance Criteria

Security Checklist

julia-eileen commented Oct 16, 2024

tuliomir left a comment

Choose a reason for hiding this comment

tuliomir left a comment

Choose a reason for hiding this comment

julia-eileen commented Oct 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

r4mmer Oct 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julia-eileen commented Oct 16, 2024 •

edited

Loading

r4mmer Oct 21, 2024 •

edited

Loading