Implement the new UI for the NervosDAO #2645

WhiteMinds · 2023-04-24T11:44:51Z

Implement the new UI for the NervosDAO

Preview:

iShot_2023-04-26_15.41.11.mp4

devchenyan · 2023-04-26T15:14:18Z

Text and icon are too close together....

yanguoyu · 2023-04-27T01:09:07Z

These marks may have some bugs.

The correct display is like this, but the locked should wait for the ckb node to sync to 100%.

devchenyan · 2023-04-27T01:23:41Z

packages/neuron-ui/src/components/NervosDAO/index.tsx

+                className={styles.balance}
+              >
+                <span className={styles.number}>{isPrivacyMode ? '******' : shannonToCKBFormatter(`${free}`)}</span> CKB
+              </CopyZone>
+            </div>


import { HIDE_BALANCE } from 'utils/const'

how about replace '******' with HIDE_BALANCE

devchenyan · 2023-04-27T01:27:52Z

packages/neuron-ui/src/components/NervosDAODetail/CellsCard/index.tsx

+                )}
+              </div>
+              <div>{`${isPrivacyMode ? '******' : capacity} CKB`}</div>
+            </div>
+          )


how about replace '******' with HIDE_BALANCE

devchenyan · 2023-04-27T01:32:49Z

packages/neuron-ui/src/styles/theme.scss

+  --third-background-color: #ffffff;
+  --fourth-background-color: #ecf9f0;
  --main-text-color: #333333;
-  --secondary-text-color: #8DA394;
+  --main-shadow-color: #eeeeee;
+  --secondary-text-color: #8da394;
+  --third-text-color: #666666;
  --link-color: #{$main-color};
-  --notice-background-color: #D4F8E9;
-  --notice-text-color: #FF9737;
+  --notice-background-color: #d4f8e9;
+  --notice-text-color: #ff9737;
  --border-color: #999999;
-  --input-border-color: #F0F0F0;
+  --input-border-color: #f0f0f0;
  --input-hint-color: #666666;
-  --divide-line-color: #E5E5E5;
-  --step-no-activity-color: #E5E5E5;
+  --divide-line-color: #e5e5e5;
+  --step-no-activity-color: #e5e5e5;
  --activity-color: #{$main-color};
  --success-color: #{$main-color};
-  --error-color: #FF1E1E;
-  --input-disabled-color: #FAFAFA;
+  --error-color: #ff1e1e;
+  --input-disabled-color: #fafafa;
  --input-second-color: #999999;
  --input-button-color: #999999;
  --button-cancel-color: #999999;
  --svg-color: #666666;
  --dialog-secondary-text-color: #666666;
-  --disable-button-text-color: #CCCCCC;
+  --disable-button-text-color: #cccccc;
  --enable-button-text-color: #333333;
  --main-pagination-button-text-color: #666666;
  --main-pagination-text-color: #666666;
-  --warn-background-color: #FFF6EB;
-  --svg-fill-color: #FFFFFF;
+  --warn-background-color: #fff6eb;
+  --svg-fill-color: #ffffff;
  // table
-  --table-head-background-color: #FAFAFA;
-  --table-head-border-color: #F0F0F0;
+  --table-head-background-color: #fafafa;
+  --table-head-border-color: #f0f0f0;

  @media (prefers-color-scheme: dark) {
    --primary-color: #{$main-color};
    --primary-text-color: #232323;
    --main-background-color: #111614;
-    --secondary-background-color: #1E2423;
-    --main-text-color: #FFFFFF;
-    --secondary-text-color: #8DA394;
+    --secondary-background-color: #1e2423;
+    --main-text-color: #ffffff;
+    --main-shadow-color: #141b1a;
+    --secondary-text-color: #8da394;
+    --third-text-color: #cccccc;
    --link-color: #{$main-color};
-    --third-background-color: #2D3534;
-    --notice-background-color: #093F29;
-    --notice-text-color: #F78C2A;
-    --border-color: #343E3C;
-    --input-border-color: #343E3C;
-    --input-hint-color: #FFFFFF;
+    --third-background-color: #2d3534;
+    --fourth-background-color: var(--secondary-background-color);
+    --notice-background-color: #093f29;
+    --notice-text-color: #f78c2a;
+    --border-color: #343e3c;
+    --input-border-color: #343e3c;
+    --input-hint-color: #ffffff;
    --divide-line-color: rgba(240, 240, 240, 0.2);
    --step-no-activity-color: #666666;
    --activity-color: #{$main-color};
    --success-color: #{$main-color};
-    --error-color: #FF1E1E;
-    --input-disabled-color: #171B1A;
+    --error-color: #ff1e1e;
+    --input-disabled-color: #171b1a;
    --input-second-color: #999999;
-    --input-button-color: #FFFFFF;
+    --input-button-color: #ffffff;
    --button-cancel-color: #999999;
-    --svg-color: #FFFFFF;
+    --svg-color: #ffffff;
    --dialog-secondary-text-color: #999999;
    --disable-button-text-color: #666666;
-    --enable-button-text-color: #FFFFFF;
-    --main-pagination-button-text-color: #CCCCCC;
+    --enable-button-text-color: #ffffff;
+    --main-pagination-button-text-color: #cccccc;
    --main-pagination-text-color: #999999;
    --warn-background-color: rgba(255, 140, 0, 0.2);
    --svg-fill-color: #333333;
    // table
-    --table-head-background-color: #171B1A;
-    --table-head-border-color: #282E2D;
+    --table-head-background-color: #171b1a;
+    --table-head-border-color: #282e2d;


We don't need to format color

This is because the current automatic code style configuration is set up that way, and we shouldn't manually adjust the code style. We should create a separate issue later to address the configuration problem with the automation of the code style.

yanguoyu · 2023-04-28T02:37:58Z

packages/neuron-ui/src/components/NervosDAORecord/index.tsx

          {CellStatus.Depositing !== cellStatus && compensation >= BigInt(0)
-            ? `+${shannonToCKBFormatter(compensation.toString()).toString()} CKB`
+            ? `${isPrivacyMode ? '******' : `+${shannonToCKBFormatter(compensation.toString()).toString()}`} CKB`


How about using the const HIDE_BALANCE

yanguoyu · 2023-04-28T02:55:18Z

packages/neuron-ui/src/components/NervosDAODetail/hooks.ts

+      clearNervosDaoData()(dispatch)
+    }
+    // eslint-disable-next-line
+  }, [])


Why not add wallet.id into the dependence?

should dispatch need also?

Copied from

neuron/packages/neuron-ui/src/components/NervosDAO/hooks.ts

Line 78 in 30dcbc0

export const useInitData = ({

I'm not sure if the previous eslint-disable-next-line was intentional, as there were no relevant comments.

yanguoyu · 2023-04-28T02:58:38Z

packages/neuron-ui/src/components/NervosDAODetail/CellsCard/index.tsx

+  const [showingLockInfo, setShowingLockInfo] = useState<CKBComponents.Script | null>(null)
+
+  useEffect(() => {
+    Promise.all([getAllNetworks(), getCurrentNetworkID()])


Because current transaction detail is in the main window, we can get networks and networkID from useState.

Oh, that's nice, updated.

packages/neuron-ui/src/components/NervosDAODetail/CellsCard/index.tsx

packages/neuron-ui/src/components/DepositDialog/index.tsx

packages/neuron-ui/src/components/LockInfoDialog/index.tsx

packages/neuron-ui/src/components/NervosDAO/hooks.ts

alexsupa597 · 2023-05-04T00:47:32Z

...ges/neuron-ui/src/components/CompensationPeriodTooltip/compensationPeriodTooltip.module.scss

-$tile-yellow-hover: #fa8f00;
-$tile-grey-hover: #888;
-$divider-color: #b3b3b3;
+$tile-green: #00c891;


Try to use css parameters instead of sass parameters.

alexsupa597 · 2023-05-04T02:46:09Z

packages/neuron-ui/src/components/NervosDAODetail/hooks.ts

+      clearNervosDaoData()(dispatch)
+    }
+    // eslint-disable-next-line
+  }, [])


should dispatch need also?

alexsupa597 · 2023-05-04T03:02:42Z

packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss

@@ -30,7 +30,7 @@

      .syncStatus {
        height: 32px;
-        background-color: #FFFFFF99;
+        background-color: #ffffff99;


The case of the css needs to be uniform.

We can merge this issue and discuss it together on #2645 (comment)

WhiteMinds · 2023-05-04T08:48:08Z

Text and icon are too close together....

I thought this had already been implemented in another PR.
It has been handled now.

WhiteMinds · 2023-05-04T08:52:46Z

These marks may have some bugs.
The correct display is like this, but the locked should wait for the ckb node to sync to 100%.

The locked amount is not displayed because syncStatus is not SyncStatus.SyncCompleted, but SyncStatus.Syncing.

NaN issues should be handled in Magickbase/neuron-public-issues#125 (comment) .

WhiteMinds · 2023-05-04T09:19:02Z

@devchenyan @yanguoyu @JeffreyMa597 All comments have been processed or responded to.

yanguoyu · 2023-05-05T02:36:07Z

These marks may have some bugs. The correct display is like this, but the `locked` should wait for the `ckb` node to sync to 100%.

The locked amount is not displayed because syncStatus is not SyncStatus.SyncCompleted, but SyncStatus.Syncing.

NaN issues should be handled in Magickbase/neuron-public-issues#125 (comment) .

Actually, Magickbase/neuron-public-issues#125 (comment) fix the NaN because of the adapt light client, but this branch is not based on the light-client branch, and develop is not show NaN, so current branch also does not show NaN.

WhiteMinds · 2023-05-05T05:29:19Z

Actually, Magickbase/neuron-public-issues#125 (comment) fix the NaN because of the adapt light client, but this branch is not based on the light-client branch, and develop is not show NaN, so current branch also does not show NaN.

I confirmed that it is the same issue, and I handled the testing in the same way as described in #2635, which worked normally.

WhiteMinds added 7 commits April 24, 2023 19:08

feat: implmenet clsx

4d19757

chore: upgrade the prettier version to 2.3.0 uniformly

8b8f86e

styles: execute prettier for the file to be modified

e9e7611

feat: allow the component's style attribute to pass custom css variables

0b92ef0

feat: implement Tabs component

4c4f57d

feat: support the active state of child routes for the Navbar component

2a02a44

feat: implement Breadcrumbs in the PageContainer component

43b4ead

WhiteMinds force-pushed the feat/115_NewDesignForDao branch 3 times, most recently from c778da6 to 9ae90e6 Compare April 26, 2023 04:11

WhiteMinds marked this pull request as ready for review April 26, 2023 07:44

WhiteMinds requested review from yanguoyu, Keith-CY and alexsupa597 and removed request for yanguoyu, Keith-CY and alexsupa597 April 26, 2023 07:44

WhiteMinds mentioned this pull request Apr 26, 2023

New design for Neuron-Nervos DAO Magickbase/neuron-public-issues#115

Closed

yanguoyu requested a review from devchenyan April 27, 2023 00:47

devchenyan reviewed Apr 27, 2023

View reviewed changes

yanguoyu reviewed Apr 28, 2023

View reviewed changes

WhiteMinds mentioned this pull request Apr 28, 2023

feat: update new ui design for history #2637

Merged

alexsupa597 reviewed May 4, 2023

View reviewed changes

WhiteMinds force-pushed the feat/115_NewDesignForDao branch from e8bc0c9 to 30dcbc0 Compare May 4, 2023 08:29

WhiteMinds added 4 commits May 4, 2023 17:15

feat: implement the new UI for the NervosDAO

1a2f90a

feat: implement the new UI for the CompensationProgressBar

0c83889

feat: implement the new UI for the PasswordRequestDialog

b3547bf

refactor: reuse HIDE_BALANCE constant

ae458f4

WhiteMinds force-pushed the feat/115_NewDesignForDao branch from 30dcbc0 to ae458f4 Compare May 4, 2023 09:15

WhiteMinds force-pushed the feat/115_NewDesignForDao branch from cc953e6 to ae458f4 Compare May 5, 2023 05:06

yanguoyu approved these changes May 5, 2023

View reviewed changes

alexsupa597 approved these changes May 5, 2023

View reviewed changes

devchenyan approved these changes May 6, 2023

View reviewed changes

WhiteMinds merged commit f170723 into nervosnetwork:new-ui-design May 8, 2023

WhiteMinds deleted the feat/115_NewDesignForDao branch May 8, 2023 07:06

yanguoyu mentioned this pull request May 8, 2023

Feat: adopt new UI #2654

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement the new UI for the NervosDAO #2645

Implement the new UI for the NervosDAO #2645

WhiteMinds commented Apr 24, 2023 •

edited

Loading

devchenyan commented Apr 26, 2023 •

edited

Loading

yanguoyu commented Apr 27, 2023

devchenyan Apr 27, 2023

WhiteMinds May 4, 2023

devchenyan Apr 27, 2023

WhiteMinds May 4, 2023

devchenyan Apr 27, 2023

WhiteMinds May 4, 2023

yanguoyu Apr 28, 2023

WhiteMinds May 4, 2023

yanguoyu Apr 28, 2023

alexsupa597 May 4, 2023

WhiteMinds May 4, 2023

yanguoyu Apr 28, 2023

WhiteMinds May 4, 2023

alexsupa597 May 4, 2023

WhiteMinds May 4, 2023

alexsupa597 May 4, 2023

alexsupa597 May 4, 2023

WhiteMinds May 4, 2023

WhiteMinds commented May 4, 2023

WhiteMinds commented May 4, 2023

WhiteMinds commented May 4, 2023

yanguoyu commented May 5, 2023

WhiteMinds commented May 5, 2023

Implement the new UI for the NervosDAO #2645

Implement the new UI for the NervosDAO #2645

Conversation

WhiteMinds commented Apr 24, 2023 • edited Loading

devchenyan commented Apr 26, 2023 • edited Loading

yanguoyu commented Apr 27, 2023

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

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

WhiteMinds commented May 4, 2023

WhiteMinds commented May 4, 2023

WhiteMinds commented May 4, 2023

yanguoyu commented May 5, 2023

WhiteMinds commented May 5, 2023

WhiteMinds commented Apr 24, 2023 •

edited

Loading

devchenyan commented Apr 26, 2023 •

edited

Loading