From ecdf192b471081d8c9689c19d5899738e9225c84 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Wed, 7 Sep 2022 22:43:04 +0100 Subject: [PATCH] initial ui for test my node use svg for node path adjust layout for overiew page add stories for test my node remove placeholder nav item add top margin to app bar add print to pdf functionality for node test results --- nym-wallet/package.json | 1 + .../src/assets/test-node-illustration.jpg | Bin 0 -> 39465 bytes nym-wallet/src/components/AppBar.tsx | 2 +- .../components/TestMyNode/Overview/index.tsx | 40 ++++++ .../TestMyNode/Results/Packets.stories.tsx | 27 ++++ .../TestMyNode/Results/Path.stories.tsx | 35 +++++ .../TestMyNode/Results/Results.stories.tsx | 18 +++ .../TestMyNode/Results/Speed.stories.tsx | 33 +++++ .../components/TestMyNode/Results/index.tsx | 109 +++++++++++++++ .../TestProgress/TestProgress.stories.tsx | 38 ++++++ .../TestMyNode/TestProgress/index.tsx | 34 +++++ .../components/OverviewDescription.tsx | 13 ++ .../TestMyNode/components/PathChip.tsx | 6 + .../TestMyNode/components/ResultsCard.tsx | 21 +++ .../components/ResultsCardDetail.tsx | 22 +++ .../node-settings/test-my-node/index.tsx | 36 +++++ nym-wallet/src/svg-icons/node-path.tsx | 128 ++++++++++++++++++ 17 files changed, 562 insertions(+), 1 deletion(-) create mode 100644 nym-wallet/src/assets/test-node-illustration.jpg create mode 100644 nym-wallet/src/components/TestMyNode/Overview/index.tsx create mode 100644 nym-wallet/src/components/TestMyNode/Results/Packets.stories.tsx create mode 100644 nym-wallet/src/components/TestMyNode/Results/Path.stories.tsx create mode 100644 nym-wallet/src/components/TestMyNode/Results/Results.stories.tsx create mode 100644 nym-wallet/src/components/TestMyNode/Results/Speed.stories.tsx create mode 100644 nym-wallet/src/components/TestMyNode/Results/index.tsx create mode 100644 nym-wallet/src/components/TestMyNode/TestProgress/TestProgress.stories.tsx create mode 100644 nym-wallet/src/components/TestMyNode/TestProgress/index.tsx create mode 100644 nym-wallet/src/components/TestMyNode/components/OverviewDescription.tsx create mode 100644 nym-wallet/src/components/TestMyNode/components/PathChip.tsx create mode 100644 nym-wallet/src/components/TestMyNode/components/ResultsCard.tsx create mode 100644 nym-wallet/src/components/TestMyNode/components/ResultsCardDetail.tsx create mode 100644 nym-wallet/src/pages/bonding/node-settings/test-my-node/index.tsx create mode 100644 nym-wallet/src/svg-icons/node-path.tsx diff --git a/nym-wallet/package.json b/nym-wallet/package.json index 26d58da9d1..edc9f3fabf 100644 --- a/nym-wallet/package.json +++ b/nym-wallet/package.json @@ -48,6 +48,7 @@ "react-hook-form": "^7.14.2", "react-router-dom": "6", "recharts": "^2.1.13", + "react-to-print": "^2.14.7", "semver": "^6.3.0", "string-to-color": "^2.2.2", "use-clipboard-copy": "^0.2.0", diff --git a/nym-wallet/src/assets/test-node-illustration.jpg b/nym-wallet/src/assets/test-node-illustration.jpg new file mode 100644 index 0000000000000000000000000000000000000000..edc79e8dbba5a12223db45ab86ae65d22bad959a GIT binary patch literal 39465 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 literal 0 HcmV?d00001 diff --git a/nym-wallet/src/components/AppBar.tsx b/nym-wallet/src/components/AppBar.tsx index 24b2f93942..3022646798 100644 --- a/nym-wallet/src/components/AppBar.tsx +++ b/nym-wallet/src/components/AppBar.tsx @@ -15,7 +15,7 @@ export const AppBar = () => { const navigate = useNavigate(); return ( - + diff --git a/nym-wallet/src/components/TestMyNode/Overview/index.tsx b/nym-wallet/src/components/TestMyNode/Overview/index.tsx new file mode 100644 index 0000000000..2ebcf7180b --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/Overview/index.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Button, Grid, Stack } from '@mui/material'; +import testNode from 'src/assets/test-node-illustration.jpg'; +import { OverviewDescription } from '../components/OverviewDescription'; + +const content = [ + { + title: 'How is works', + description: + 'This is your APY playground - play with the parameters on left to see estimated rewards on the right side', + }, + { + title: 'Test path', + description: + 'This is your APY playground - play with the parameters on left to see estimated rewards on the right side', + }, + { + title: 'Results', + description: + 'This is your APY playground - play with the parameters on left to see estimated rewards on the right side', + }, +]; + +export const Overview = ({ onStartTest }: { onStartTest: () => void }) => ( + + + + + + + {content.map(OverviewDescription)} + + + + + + +); diff --git a/nym-wallet/src/components/TestMyNode/Results/Packets.stories.tsx b/nym-wallet/src/components/TestMyNode/Results/Packets.stories.tsx new file mode 100644 index 0000000000..32901ea50c --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/Results/Packets.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Box } from '@mui/material'; +import { Packets } from '.'; + +export default { + title: 'Test my node / Packets', + component: Packets, +} as ComponentMeta; + +const Transfer: ComponentStory = (args) => ( + + + +); + +export const HighTransfer = Transfer.bind({}); +HighTransfer.args = { + sent: '100', + received: '80', +}; + +export const LowTransfer = Transfer.bind({}); +LowTransfer.args = { + sent: '100', + received: '50', +}; diff --git a/nym-wallet/src/components/TestMyNode/Results/Path.stories.tsx b/nym-wallet/src/components/TestMyNode/Results/Path.stories.tsx new file mode 100644 index 0000000000..2c4601801a --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/Results/Path.stories.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Box } from '@mui/material'; +import { Path } from '.'; + +export default { + title: 'Test my node / Node path', + component: Path, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const Gateway = Template.bind({}); +Gateway.args = { + layer: 'gateway', +}; + +export const LayerOne = Template.bind({}); +LayerOne.args = { + layer: '1', +}; + +export const LayerTwo = Template.bind({}); +LayerTwo.args = { + layer: '2', +}; + +export const LayerThree = Template.bind({}); +LayerThree.args = { + layer: '3', +}; diff --git a/nym-wallet/src/components/TestMyNode/Results/Results.stories.tsx b/nym-wallet/src/components/TestMyNode/Results/Results.stories.tsx new file mode 100644 index 0000000000..30dbc9f941 --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/Results/Results.stories.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Box } from '@mui/material'; +import { NodeSpeed, Results } from '.'; + +export default { + title: 'Test my node / Results', + component: Results, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + layer: '1', + packetsSent: '1000', + packetsReceived: '5000', +}; diff --git a/nym-wallet/src/components/TestMyNode/Results/Speed.stories.tsx b/nym-wallet/src/components/TestMyNode/Results/Speed.stories.tsx new file mode 100644 index 0000000000..e8e3d9d078 --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/Results/Speed.stories.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Box } from '@mui/material'; +import { NodeSpeed } from '.'; + +export default { + title: 'Test my node / Node speed', + component: NodeSpeed, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const FastNode = Template.bind({}); +FastNode.args = { + Mbps: 500, + performance: 'good', +}; + +export const FairNode = Template.bind({}); +FairNode.args = { + Mbps: 100, + performance: 'fair', +}; + +export const SlowNode = Template.bind({}); +SlowNode.args = { + Mbps: 10, + performance: 'poor', +}; diff --git a/nym-wallet/src/components/TestMyNode/Results/index.tsx b/nym-wallet/src/components/TestMyNode/Results/index.tsx new file mode 100644 index 0000000000..a5b6e04bb9 --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/Results/index.tsx @@ -0,0 +1,109 @@ +import React, { useRef } from 'react'; +import { ArrowForward, CheckCircleOutline, Description, Download } from '@mui/icons-material'; +import { Box, Button, Card, Chip, CircularProgress, Divider, Grid, Stack, Typography } from '@mui/material'; +import format from 'date-fns/format'; +import { ResultsCard } from '../components/ResultsCard'; +import { ResultsCardDetail } from '../components/ResultsCardDetail'; +import { NodePath } from 'src/svg-icons/node-path'; +import { useReactToPrint } from 'react-to-print'; + +export type Layer = '1' | '2' | '3' | 'gateway'; + +const getLayerDescription = (layer: Layer) => { + if (layer === 'gateway') return 'Your node was in the Gateway layer'; + return `Your node was in layer ${layer}`; +}; + +export const NodeSpeed = ({ Mbps, performance }: { Mbps: number; performance: 'poor' | 'fair' | 'good' }) => ( + + + + + + {Mbps} + + Mbps + + + +); + +export const Packets = ({ sent, received }: { sent: string; received: string }) => { + const percentage = Math.round((+received / +sent) * 100); + return ( + 75}> + + + + + + ); +}; + +export const Path = ({ layer }: { layer: Layer }) => ( + + + + + +); + +export const Results = ({ + packetsSent, + packetsReceived, + layer, +}: { + packetsSent: string; + packetsReceived: string; + layer: '1' | '2' | '3' | 'gateway'; +}) => { + const ref = useRef(null); + const handleSaveToPdf = useReactToPrint({ documentTitle: 'Test results', content: () => ref.current }); + return ( + <> + + + + Test date + + {format(new Date(), 'dd/MM/yyyy HH:mm')} + + + + + + + + + + + + + + + + ); +}; diff --git a/nym-wallet/src/components/TestMyNode/TestProgress/TestProgress.stories.tsx b/nym-wallet/src/components/TestMyNode/TestProgress/TestProgress.stories.tsx new file mode 100644 index 0000000000..47241e8f1e --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/TestProgress/TestProgress.stories.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Box } from '@mui/material'; +import { TestProgress } from '.'; + +export default { + title: 'Test my node / Test progress', + component: TestProgress, +} as ComponentMeta; + +const Template: ComponentStory = ({ packetsSent, totalPackets }) => { + const [sent, setSent] = React.useState(packetsSent); + + const mockPacketTransfer = (sent: number) => { + if (sent - 1 < totalPackets) { + setSent(sent); + setTimeout(() => { + mockPacketTransfer(sent + 1); + }, 25); + } + }; + + React.useEffect(() => { + mockPacketTransfer(0); + }, []); + + return ( + + + + ); +}; + +export const Default = Template.bind({}); +Default.args = { + packetsSent: 0, + totalPackets: 100, +}; diff --git a/nym-wallet/src/components/TestMyNode/TestProgress/index.tsx b/nym-wallet/src/components/TestMyNode/TestProgress/index.tsx new file mode 100644 index 0000000000..3e910855a3 --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/TestProgress/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Box, CircularProgress, Stack, Typography } from '@mui/material'; + +export const TestProgress = ({ totalPackets, packetsSent }: { totalPackets: number; packetsSent: number }) => { + const percentage = Math.round((packetsSent / totalPackets) * 100); + + return ( + + Test in progress + + + + {percentage}% + + + Sending packets... + {`${packetsSent} / ${totalPackets}`} + + ); +}; diff --git a/nym-wallet/src/components/TestMyNode/components/OverviewDescription.tsx b/nym-wallet/src/components/TestMyNode/components/OverviewDescription.tsx new file mode 100644 index 0000000000..19de926986 --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/components/OverviewDescription.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Box, Typography } from '@mui/material'; + +export const OverviewDescription = ({ title, description }: { title: string; description: string }) => ( + + + {title} + + + {description} + + +); diff --git a/nym-wallet/src/components/TestMyNode/components/PathChip.tsx b/nym-wallet/src/components/TestMyNode/components/PathChip.tsx new file mode 100644 index 0000000000..f6154cfc4b --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/components/PathChip.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Chip } from '@mui/material'; + +export const PathChip = ({ label, highlight }: { label: string; highlight: boolean }) => ( + +); diff --git a/nym-wallet/src/components/TestMyNode/components/ResultsCard.tsx b/nym-wallet/src/components/TestMyNode/components/ResultsCard.tsx new file mode 100644 index 0000000000..c6837fea0f --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/components/ResultsCard.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CheckCircleOutline } from '@mui/icons-material'; +import { Card } from '@mui/material'; +import { ResultsCardDetail } from './ResultsCardDetail'; + +export const ResultsCard: React.FC<{ label: string; detail: string; isOk: boolean }> = ({ + label, + detail, + isOk, + children, +}) => ( + + } + /> + {children} + +); diff --git a/nym-wallet/src/components/TestMyNode/components/ResultsCardDetail.tsx b/nym-wallet/src/components/TestMyNode/components/ResultsCardDetail.tsx new file mode 100644 index 0000000000..8819baf335 --- /dev/null +++ b/nym-wallet/src/components/TestMyNode/components/ResultsCardDetail.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Box, Stack, Typography } from '@mui/material'; + +export const ResultsCardDetail = ({ + label, + detail, + DescriptionIcon, + boldLabel, +}: { + label: string; + detail: string; + DescriptionIcon?: React.ReactNode; + boldLabel?: boolean; +}) => ( + + {label} + + {detail} + {DescriptionIcon} + + +); diff --git a/nym-wallet/src/pages/bonding/node-settings/test-my-node/index.tsx b/nym-wallet/src/pages/bonding/node-settings/test-my-node/index.tsx new file mode 100644 index 0000000000..521d0dd7a3 --- /dev/null +++ b/nym-wallet/src/pages/bonding/node-settings/test-my-node/index.tsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import { NymCard } from 'src/components'; +import { Overview } from 'src/components/TestMyNode/Overview'; +import { Results } from 'src/components/TestMyNode/Results'; +import { TestProgress } from 'src/components/TestMyNode/TestProgress'; + +export const TestNode = () => { + const [view, setView] = useState('overview'); + const [packetsSent, setPacketsSent] = useState(0); + const totalPackets = 500; + + const mockPacketTransfer = (sent: number) => { + if (sent - 1 < totalPackets) { + setPacketsSent(sent); + setTimeout(() => { + mockPacketTransfer(sent + 1); + }, 12.5); + } + if (sent === totalPackets) { + setView('results'); + } + }; + + const startTest = () => { + setView('start-test'); + mockPacketTransfer(0); + }; + + return ( + + {view === 'overview' && } + {view === 'start-test' && } + {view === 'results' && } + + ); +}; diff --git a/nym-wallet/src/svg-icons/node-path.tsx b/nym-wallet/src/svg-icons/node-path.tsx new file mode 100644 index 0000000000..6d87aefcfe --- /dev/null +++ b/nym-wallet/src/svg-icons/node-path.tsx @@ -0,0 +1,128 @@ +import React from 'react'; + +// fill="#FB6E4E" fill-opacity="0.05" +// text #1D2125 +// white bg #FBFBFB +// orange bg #FB6E4E + +const withHighlight = (shouldHighlight: boolean) => ({ + background: shouldHighlight ? '#FB6E4E' : '#FBFBFB', + text: shouldHighlight ? '#FB6E4E' : '#1D2125', + bgOpacity: shouldHighlight ? '0.05' : '1', +}); + +export const NodePath = ({ layer }: { layer: '1' | '2' | '3' | 'gateway' }) => ( + + + + + + + + + + + + + + + + + + + + + + +);