add stories for test my node

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<typeof Packets>;
+
+const Transfer: ComponentStory<typeof Packets> = (args) => (
+  <Box width="500px">
+    <Packets {...args} />
+  </Box>
+);
+
+export const HighTransfer = Transfer.bind({});
+HighTransfer.args = {
+  sent: '100',
+  received: '80',
+};
+
+export const LowTransfer = Transfer.bind({});
+LowTransfer.args = {
+  sent: '100',
+  received: '50',
+};

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<typeof Path>;
+
+const Template: ComponentStory<typeof Path> = (args) => (
+  <Box display="flex">
+    <Path {...args} />
+  </Box>
+);
+
+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',
+};

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<typeof Results>;
+
+const Template: ComponentStory<typeof Results> = (args) => <Results {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  layer: '1',
+  packetsSent: '1000',
+  packetsReceived: '5000',
+};

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<typeof NodeSpeed>;
+
+const Template: ComponentStory<typeof NodeSpeed> = (args) => (
+  <Box display="flex" alignContent="center">
+    <NodeSpeed {...args} />
+  </Box>
+);
+
+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',
+};

nym-wallet/src/components/TestMyNode/Results/index.tsx

@@ -4,10 +4,16 @@ import { Box, Button, Card, Chip, CircularProgress, Divider, Grid, Stack, Typogr
 import format from 'date-fns/format';
 import { ResultsCard } from '../components/ResultsCard';
 import { ResultsCardDetail } from '../components/ResultsCardDetail';
-import { PathChip } from '../components/PathChip';
 import { NodePath } from 'src/svg-icons/node-path';
 
-const NodeSpeed = ({ Mbps, performance }: { Mbps: number; performance: 'poor' | 'fair' | 'good' }) => (
+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' }) => (
   <ResultsCard
     label="Node speed"
     detail={`${performance === 'good' ? 'Fast' : performance === 'poor' ? 'Slow' : 'Fair'} node`}
@@ -42,24 +48,35 @@ const NodeSpeed = ({ Mbps, performance }: { Mbps: number; performance: 'poor' |
   </ResultsCard>
 );
 
-const Packets = ({ sent, received }: { sent: string; received: string }) => (
-  <ResultsCard label="Packets" detail="98% packets" isOk>
-    <Divider sx={{ my: 2 }} />
-    <ResultsCardDetail label="Packets sent" detail={sent} />
-    <Divider sx={{ my: 2 }} />
-    <ResultsCardDetail label="Packets received" detail={received} />
-  </ResultsCard>
-);
+export const Packets = ({ sent, received }: { sent: string; received: string }) => {
+  const percentage = Math.round((+received / +sent) * 100);
+  return (
+    <ResultsCard label="Packets" detail={`${percentage}% packets`} isOk={percentage > 75}>
+      <Divider sx={{ my: 2 }} />
+      <ResultsCardDetail label="Packets sent" detail={sent} />
+      <Divider sx={{ my: 2 }} />
+      <ResultsCardDetail label="Packets received" detail={received} />
+    </ResultsCard>
+  );
+};
 
-const Path = ({ layer }: { layer: '1' | '2' | '3' | 'gateway' }) => (
-  <ResultsCard label="Path" detail="Your node was in layer 2" isOk>
-    <Box sx={{ mt: 2 }}>
+export const Path = ({ layer }: { layer: Layer }) => (
+  <ResultsCard label="Path" detail={getLayerDescription(layer)} isOk>
+    <Box sx={{ mt: 3 }}>
       <NodePath layer={layer} />
     </Box>
   </ResultsCard>
 );
 
-export const Results = () => (
+export const Results = ({
+  packetsSent,
+  packetsReceived,
+  layer,
+}: {
+  packetsSent: string;
+  packetsReceived: string;
+  layer: '1' | '2' | '3' | 'gateway';
+}) => (
   <>
     <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
       <Box display="flex" gap={1}>
@@ -76,8 +93,8 @@ export const Results = () => (
       </Grid>
       <Grid item container direction="column" md={7}>
         <Stack spacing={2}>
-          <Packets sent="5000" received="1000" />
-          <Path layer="gateway" />
+          <Packets sent={packetsSent} received={packetsReceived} />
+          <Path layer={layer} />
         </Stack>
       </Grid>
     </Grid>

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<typeof TestProgress>;
+
+const Template: ComponentStory<typeof TestProgress> = ({ 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 (
+    <Box display="flex" alignContent="center">
+      <TestProgress packetsSent={sent} totalPackets={totalPackets} />
+    </Box>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  packetsSent: 0,
+  totalPackets: 100,
+};

nym-wallet/src/pages/test-my-node/index.tsx

@@ -30,7 +30,7 @@ export const TestNode = () => {
     <NymCard title="Test Node">
       {view === 'overview' && <Overview onStartTest={startTest} />}
       {view === 'start-test' && <TestProgress totalPackets={totalPackets} packetsSent={packetsSent} />}
-      {view === 'results' && <Results />}
+      {view === 'results' && <Results layer="1" packetsSent="5000" packetsReceived="1000" />}
     </NymCard>
   );
 };