From d7220b1fecbe40deaaa075e21d7ec75c00b8053b Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 3 Aug 2022 13:42:48 +0200 Subject: [PATCH 01/10] adding info text in filters and renaming --- explorer/src/components/Filters/Filters.tsx | 2 ++ explorer/src/components/Filters/filterSchema.ts | 6 +++++- explorer/src/typeDefs/filters.ts | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index c62b09a53f..355be16223 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/explorer/src/components/Filters/Filters.tsx @@ -25,6 +25,7 @@ import { useIsMobile } from '../../hooks/useIsMobile'; const FilterItem = ({ label, id, + tooltipInfo, value, marks, scale, @@ -36,6 +37,7 @@ const FilterItem = ({ }) => ( {label} + {tooltipInfo} onChange(id, newValue as number[])} diff --git a/explorer/src/components/Filters/filterSchema.ts b/explorer/src/components/Filters/filterSchema.ts index 1d6b742f90..0dce1c327e 100644 --- a/explorer/src/components/Filters/filterSchema.ts +++ b/explorer/src/components/Filters/filterSchema.ts @@ -18,6 +18,8 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({ { label: '90', value: 90 }, { label: '100', value: 100 }, ], + tooltipInfo: + 'As a delegator you want to chose nodes with lower profit margin, meaning more payout for their delegators', }, stakeSaturation: { label: 'Stake saturation (%)', @@ -43,9 +45,10 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({ }, ], max: upperSaturationValue, + tooltipInfo: "Select nodes with <100% saturation. Any additional stake above 100% saturation won't get rewards", }, stake: { - label: 'Stake (NYM)', + label: 'Routing Score (%)', id: EnumFilterKey.stake, value: [20, 90], min: 20, @@ -92,6 +95,7 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({ label: '1B', }, ], + tooltipInfo: 'The higher the routing score the better the performance of the node and so its rewards', }, }); diff --git a/explorer/src/typeDefs/filters.ts b/explorer/src/typeDefs/filters.ts index 8ec2a918c9..07add70a85 100644 --- a/explorer/src/typeDefs/filters.ts +++ b/explorer/src/typeDefs/filters.ts @@ -15,6 +15,7 @@ export type TFilterItem = { min?: number; max?: number; scale?: (value: number) => number; + tooltipInfo?: string; }; export type TFilters = { [key in EnumFilterKey]: TFilterItem }; From 4ff80bbab2327197a15e23d8d7d872f6d5768e6e Mon Sep 17 00:00:00 2001 From: Gala Date: Tue, 2 Aug 2022 14:33:48 +0200 Subject: [PATCH 02/10] fixing dark mode progress bar --- .../balance/components/vesting-timeline.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx index 47fea9e9b1..c97786bfc0 100644 --- a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx +++ b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx @@ -1,5 +1,6 @@ /* eslint-disable react/no-array-index-key */ import React, { useContext } from 'react'; +import { useTheme } from '@mui/material/styles'; import { Box, Tooltip, Typography } from '@mui/material'; import { format } from 'date-fns'; import { AppContext } from '../../../context/main'; @@ -21,6 +22,9 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc userBalance: { currentVestingPeriod, vestingAccountInfo }, } = useContext(AppContext); + const theme = useTheme(); + const { mode } = theme.palette; + const nextPeriod = typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods ? Number(vestingAccountInfo?.periods[currentVestingPeriod.In + 1]?.start_time) @@ -30,11 +34,23 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc - + {vestingAccountInfo?.periods.map((period, i, arr) => ( = calculateMarkerPosition(arr.length, i) ? '#121726' : '#B9B9B9'} + color={ + +percentageComplete.toFixed(2) >= calculateMarkerPosition(arr.length, i) + ? mode === 'light' + ? '#121726' + : '#6cd925' + : '#B9B9B9' + } tooltipText={format(new Date(Number(period.start_time) * 1000), 'HH:mm do MMM yyyy')} key={i} /> From 06c4dd601dfef2c37ecaf3dde0ac5575f092f118 Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 3 Aug 2022 14:06:33 +0200 Subject: [PATCH 03/10] filter by use routing score instead of stake parameter --- .../src/components/Filters/filterSchema.ts | 73 ++++++------------- explorer/src/context/main.tsx | 4 +- explorer/src/typeDefs/filters.ts | 2 +- 3 files changed, 24 insertions(+), 55 deletions(-) diff --git a/explorer/src/components/Filters/filterSchema.ts b/explorer/src/components/Filters/filterSchema.ts index 0dce1c327e..40f230e734 100644 --- a/explorer/src/components/Filters/filterSchema.ts +++ b/explorer/src/components/Filters/filterSchema.ts @@ -47,64 +47,33 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({ max: upperSaturationValue, tooltipInfo: "Select nodes with <100% saturation. Any additional stake above 100% saturation won't get rewards", }, - stake: { - label: 'Routing Score (%)', - id: EnumFilterKey.stake, - value: [20, 90], - min: 20, - max: 90, + routingScore: { + label: 'Routing score (%)', + id: EnumFilterKey.routingScore, + value: [0, 100], marks: [ - { - value: 0, - label: '1', - }, - { - value: 10, - label: '10', - }, - { - value: 20, - label: '100', - }, - { - value: 30, - label: '1k', - }, - { - value: 40, - label: '10k', - }, - { - value: 50, - label: '100k', - }, - { - value: 60, - label: '1M', - }, - { - value: 70, - label: '10M', - }, - { - value: 80, - label: '100M', - }, - { - value: 90, - label: '1B', - }, + { label: '0', value: 0 }, + { label: '10', value: 10 }, + { label: '20', value: 20 }, + { label: '30', value: 30 }, + { label: '40', value: 40 }, + { label: '50', value: 50 }, + { label: '60', value: 60 }, + { label: '70', value: 70 }, + { label: '80', value: 80 }, + { label: '90', value: 90 }, + { label: '100', value: 100 }, ], tooltipInfo: 'The higher the routing score the better the performance of the node and so its rewards', }, }); -const formatStakeValuesToMinorDenom = ([value_1, value_2]: number[]) => { - const lowerValue = 10 ** (value_1 / 10) * 1_000_000; - const upperValue = 10 ** (value_2 / 10) * 1_000_000; +// const formatStakeValuesToMinorDenom = ([value_1, value_2]: number[]) => { +// const lowerValue = 10 ** (value_1 / 10) * 1_000_000; +// const upperValue = 10 ** (value_2 / 10) * 1_000_000; - return [lowerValue, upperValue]; -}; +// return [lowerValue, upperValue]; +// }; const formatStakeSaturationValues = ([value_1, value_2]: number[]) => { const lowerValue = value_1 / 100; @@ -114,7 +83,7 @@ const formatStakeSaturationValues = ([value_1, value_2]: number[]) => { }; export const formatOnSave = (filters: TFilters) => ({ - stake: formatStakeValuesToMinorDenom(filters.stake.value), + routingScore: filters.routingScore.value, profitMargin: filters.profitMargin.value, stakeSaturation: formatStakeSaturationValues(filters.stakeSaturation.value), }); diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx index 7fca785209..9255eb20e3 100644 --- a/explorer/src/context/main.tsx +++ b/explorer/src/context/main.tsx @@ -102,8 +102,8 @@ export const MainContextProvider: React.FC = ({ children }) => { m.mix_node.profit_margin_percent <= filters.profitMargin[1] && m.stake_saturation >= filters.stakeSaturation[0] && m.stake_saturation <= filters.stakeSaturation[1] && - +m.pledge_amount.amount + +m.total_delegation.amount >= filters.stake[0] && - +m.pledge_amount.amount + +m.total_delegation.amount <= filters.stake[1], + m.avg_uptime >= filters.routingScore[0] && + m.avg_uptime <= filters.routingScore[1], ); setMixnodes({ data: filtered, isLoading: false }); }; diff --git a/explorer/src/typeDefs/filters.ts b/explorer/src/typeDefs/filters.ts index 07add70a85..2152f3a35f 100644 --- a/explorer/src/typeDefs/filters.ts +++ b/explorer/src/typeDefs/filters.ts @@ -4,7 +4,7 @@ import { Mark } from '@mui/base'; export enum EnumFilterKey { profitMargin = 'profitMargin', stakeSaturation = 'stakeSaturation', - stake = 'stake', + routingScore = 'routingScore', } export type TFilterItem = { From c8533e3ec8cad2f91e3f4d788857bffa44c85f85 Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 3 Aug 2022 14:15:03 +0200 Subject: [PATCH 04/10] cleaning --- .../src/components/Filters/filterSchema.ts | 7 ------- .../balance/components/vesting-timeline.tsx | 20 ++----------------- 2 files changed, 2 insertions(+), 25 deletions(-) diff --git a/explorer/src/components/Filters/filterSchema.ts b/explorer/src/components/Filters/filterSchema.ts index 40f230e734..a994b698a4 100644 --- a/explorer/src/components/Filters/filterSchema.ts +++ b/explorer/src/components/Filters/filterSchema.ts @@ -68,13 +68,6 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({ }, }); -// const formatStakeValuesToMinorDenom = ([value_1, value_2]: number[]) => { -// const lowerValue = 10 ** (value_1 / 10) * 1_000_000; -// const upperValue = 10 ** (value_2 / 10) * 1_000_000; - -// return [lowerValue, upperValue]; -// }; - const formatStakeSaturationValues = ([value_1, value_2]: number[]) => { const lowerValue = value_1 / 100; const upperValue = value_2 / 100; diff --git a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx index c97786bfc0..47fea9e9b1 100644 --- a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx +++ b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx @@ -1,6 +1,5 @@ /* eslint-disable react/no-array-index-key */ import React, { useContext } from 'react'; -import { useTheme } from '@mui/material/styles'; import { Box, Tooltip, Typography } from '@mui/material'; import { format } from 'date-fns'; import { AppContext } from '../../../context/main'; @@ -22,9 +21,6 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc userBalance: { currentVestingPeriod, vestingAccountInfo }, } = useContext(AppContext); - const theme = useTheme(); - const { mode } = theme.palette; - const nextPeriod = typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods ? Number(vestingAccountInfo?.periods[currentVestingPeriod.In + 1]?.start_time) @@ -34,23 +30,11 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc - + {vestingAccountInfo?.periods.map((period, i, arr) => ( = calculateMarkerPosition(arr.length, i) - ? mode === 'light' - ? '#121726' - : '#6cd925' - : '#B9B9B9' - } + color={+percentageComplete.toFixed(2) >= calculateMarkerPosition(arr.length, i) ? '#121726' : '#B9B9B9'} tooltipText={format(new Date(Number(period.start_time) * 1000), 'HH:mm do MMM yyyy')} key={i} /> From 3f544dbc69b77def87c79fcba6969991146731b1 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 4 Aug 2022 14:59:17 +0200 Subject: [PATCH 05/10] adding Advanced filtering text and hover fix --- explorer/src/components/Filters/Filters.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index 355be16223..9d79fda9cc 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/explorer/src/components/Filters/Filters.tsx @@ -125,6 +125,7 @@ export const Filters = () => { message="Filters applied" TransitionComponent={Slide} transitionDuration={250} + id="hello" > { Filters applied - + + Advanced filtering From c80d8d354acf3d4f6e2b2cef299fc41b6a1a093e Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 4 Aug 2022 15:17:44 +0200 Subject: [PATCH 06/10] adding nodes number info --- explorer/src/components/Filters/Filters.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index 9d79fda9cc..c53fca153b 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/explorer/src/components/Filters/Filters.tsx @@ -52,7 +52,7 @@ const FilterItem = ({ ); export const Filters = () => { - const { filterMixnodes, fetchMixnodes } = useMainContext(); + const { filterMixnodes, fetchMixnodes, mixnodes } = useMainContext(); const { status } = useParams<{ status: MixnodeStatusWithAll | undefined }>(); const isMobile = useIsMobile(); @@ -125,7 +125,6 @@ export const Filters = () => { message="Filters applied" TransitionComponent={Slide} transitionDuration={250} - id="hello" > { Clear } - sx={{ width: 300 }} + sx={{ width: 300, alignItems: 'center' }} > - Filters applied + {mixnodes?.data?.length} mix nodes matched your criteria From 57a9f18f5a6951ce14e824c4283f2154fe92138c Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 4 Aug 2022 16:30:33 +0200 Subject: [PATCH 07/10] fixing padding marging and wording --- explorer/src/components/Filters/Filters.tsx | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index c53fca153b..2f324451da 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/explorer/src/components/Filters/Filters.tsx @@ -125,24 +125,29 @@ export const Filters = () => { message="Filters applied" TransitionComponent={Slide} transitionDuration={250} + sx={{ + '& .MuiAlert-action': { + p: 0, + mr: 0, + }, + }} > - Clear + } - sx={{ width: 300, alignItems: 'center' }} + sx={{ width: 400, alignItems: 'center' }} > - {mixnodes?.data?.length} mix nodes matched your criteria + {mixnodes?.data?.length} mixnodes matched your criteria - - Advanced filtering - - + } onClick={handleToggleShowFilters}> + Advanced filters + Mixnode filters From 3a79f43a8dfb404c0fb373be16cf51aa09a84ea3 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 4 Aug 2022 17:23:32 +0200 Subject: [PATCH 08/10] styling --- explorer/src/components/Filters/Filters.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index 2f324451da..3a7614c987 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/explorer/src/components/Filters/Filters.tsx @@ -126,9 +126,11 @@ export const Filters = () => { TransitionComponent={Slide} transitionDuration={250} sx={{ + '& .MuiAlert-outlined': { pr: '11px' }, '& .MuiAlert-action': { p: 0, - mr: 0, + marginRight: 0, + alignItems: 'center', }, }} > @@ -136,11 +138,10 @@ export const Filters = () => { severity="info" variant={isMobile ? 'standard' : 'outlined'} action={ - From eee1abe593d58a9d90e6f297d82237d1abc52bfa Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 4 Aug 2022 18:15:12 +0200 Subject: [PATCH 10/10] removing extra styles --- explorer/src/components/Filters/Filters.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index 3c78f27906..1a04688428 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/explorer/src/components/Filters/Filters.tsx @@ -6,7 +6,6 @@ import { DialogContent, DialogActions, DialogTitle, - IconButton, Slider, Typography, Box, @@ -125,20 +124,12 @@ export const Filters = () => { message="Filters applied" TransitionComponent={Slide} transitionDuration={250} - sx={{ - '& .MuiAlert-outlined': { pr: '11px' }, - '& .MuiAlert-action': { - p: 0, - marginRight: 0, - alignItems: 'center', - }, - }} > + }