From 92e56c01212fc4636ed8b2ee54feab67a6fdf19d Mon Sep 17 00:00:00 2001 From: gala1234 Date: Tue, 5 Apr 2022 14:43:50 +0200 Subject: [PATCH] wip story --- nym-wallet/src/index.tsx | 4 +- nym-wallet/src/pages/validators/index.tsx | 124 +----------------- .../validators/validator-modal.story.tsx | 88 +++++++++++++ .../src/pages/validators/validator-modal.tsx | 123 +++++++++++++++++ ...torSelector.tsx => validator-selector.tsx} | 0 .../stories/validator-settings.stories.tsx | 10 -- 6 files changed, 214 insertions(+), 135 deletions(-) create mode 100644 nym-wallet/src/pages/validators/validator-modal.story.tsx create mode 100644 nym-wallet/src/pages/validators/validator-modal.tsx rename nym-wallet/src/pages/validators/{ValidatorSelector.tsx => validator-selector.tsx} (100%) delete mode 100644 nym-wallet/src/stories/validator-settings.stories.tsx diff --git a/nym-wallet/src/index.tsx b/nym-wallet/src/index.tsx index 9d3e2b5255..f3d823a99d 100644 --- a/nym-wallet/src/index.tsx +++ b/nym-wallet/src/index.tsx @@ -6,7 +6,7 @@ import { SnackbarProvider } from 'notistack'; import { AppRoutes, SignInRoutes } from './routes'; import { ClientContext, ClientContextProvider } from './context/main'; import { ApplicationLayout } from './layouts'; -import { Admin, Settings, ValidatorSettings } from './pages'; +import { Admin, Settings, ValidatorSettingsModal } from './pages'; import { ErrorFallback } from './components'; import { NymWalletTheme, WelcomeTheme } from './theme'; import { maximizeWindow } from './utils'; @@ -29,7 +29,7 @@ const App = () => { - + diff --git a/nym-wallet/src/pages/validators/index.tsx b/nym-wallet/src/pages/validators/index.tsx index 2c725521ef..cb8ffdfe57 100644 --- a/nym-wallet/src/pages/validators/index.tsx +++ b/nym-wallet/src/pages/validators/index.tsx @@ -1,123 +1 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { Button, Box, Dialog, CircularProgress, Typography } from '@mui/material'; -import { Tabs } from '../settings/tabs'; -import { NymCard } from '../../components'; -import { ClientContext } from '../../context/main'; -import { ValidatorSelector } from './ValidatorSelector'; -import { Delegate as DelegateIcon } from '../../svg-icons'; -import { Console } from '../../utils/console'; - -const tabs = ['Validators', 'APIs']; - -export const ValidatorSettings = () => { - const [selectedTab, setSelectedTab] = useState(0); - const [isSubmitting, setIsSubmitting] = useState(false); - const [data, setData] = useState({}); - - const { showValidatorSettings, getBondDetails, handleShowValidatorSettings } = useContext(ClientContext); - - const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab); - - useEffect(() => { - getBondDetails(); - }, [showValidatorSettings]); - - const onDataChanged = (selectedValidator?: string, selectedAPI?: string) => { - if (selectedValidator) { - setData(selectedValidator); - }; - if (selectedAPI) { - setData(selectedAPI); - }; - console.log('selectedValidator:', selectedValidator, 'selectedAPI', selectedAPI); - } - - const handleSubmit = (data: {}) => { - console.log('data', data); - } - - return showValidatorSettings ? ( - - - - Settings - - } - noPadding - > - - - Wallet Settings - - - <> - - - {selectedTab === 0 && - onDataChanged(selectedValidator)} - /> - } - {selectedTab === 1 && - onDataChanged(selectedAPI)} - /> - } - - - - - - - - ) : null; -}; +export { ValidatorSettingsModal } from './validator-modal'; \ No newline at end of file diff --git a/nym-wallet/src/pages/validators/validator-modal.story.tsx b/nym-wallet/src/pages/validators/validator-modal.story.tsx new file mode 100644 index 0000000000..8201a5f585 --- /dev/null +++ b/nym-wallet/src/pages/validators/validator-modal.story.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { ComponentMeta } from '@storybook/react'; + +import { Button, Paper } from '@mui/material'; +import { ValidatorSettingsModal } from './validator-modal'; + +export default { + title: 'Modals/Validator Setting Modal', + component: ValidatorSettingsModal, +} as ComponentMeta; + +export const Default = () => { + const [open, setOpen] = React.useState(true); + return ( + <> + +

Lorem ipsum

+ +

+ Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis + sunt velit elit do minim mollit non duis reprehenderit. Eiusmod dolore adipisicing ex nostrud consectetur + culpa exercitation do. Ad elit esse ipsum aliqua labore irure laborum qui culpa. +

+

+ Occaecat commodo excepteur anim ut officia dolor laboris dolore id occaecat enim qui eiusmod occaecat aliquip + ad tempor. Labore amet laborum magna amet consequat dolor cupidatat in consequat sunt aliquip magna laboris + tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna + elit ut mollit. +

+

+ Labore voluptate elit amet ipsum qui officia duis in et occaecat culpa ex do non labore mollit. Cillum + cupidatat duis ea dolore laboris laboris sunt duis anim consectetur cupidatat nulla ad minim sunt ea. Aliqua + amet commodo est irure sint magna sunt. Pariatur dolore commodo labore quis incididunt proident duis voluptate + exercitation in duis. Occaecat aliqua laboris reprehenderit nostrud est aute pariatur fugiat anim. Dolore sunt + cillum ea aliquip consectetur laborum ipsum qui veniam Lorem consectetur adipisicing velit magna aute. Amet + tempor quis excepteur minim culpa velit Lorem enim ad. +

+

+ Mollit laborum exercitation excepteur laboris adipisicing ipsum veniam cillum mollit voluptate do. Amet et + anim Lorem mollit minim duis cupidatat non. Consectetur sit deserunt nisi nisi non excepteur dolor eiusmod + aute aute irure anim dolore ipsum et veniam. +

+ + + + ); +}; + +export const NoSubheader = () => { + const [open, setOpen] = React.useState(true); + return ( + <> + +

Lorem ipsum

+ +

+ Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis + sunt velit elit do minim mollit non duis reprehenderit. Eiusmod dolore adipisicing ex nostrud consectetur + culpa exercitation do. Ad elit esse ipsum aliqua labore irure laborum qui culpa. +

+

+ Occaecat commodo excepteur anim ut officia dolor laboris dolore id occaecat enim qui eiusmod occaecat aliquip + ad tempor. Labore amet laborum magna amet consequat dolor cupidatat in consequat sunt aliquip magna laboris + tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna + elit ut mollit. +

+

+ Labore voluptate elit amet ipsum qui officia duis in et occaecat culpa ex do non labore mollit. Cillum + cupidatat duis ea dolore laboris laboris sunt duis anim consectetur cupidatat nulla ad minim sunt ea. Aliqua + amet commodo est irure sint magna sunt. Pariatur dolore commodo labore quis incididunt proident duis voluptate + exercitation in duis. Occaecat aliqua laboris reprehenderit nostrud est aute pariatur fugiat anim. Dolore sunt + cillum ea aliquip consectetur laborum ipsum qui veniam Lorem consectetur adipisicing velit magna aute. Amet + tempor quis excepteur minim culpa velit Lorem enim ad. +

+

+ Mollit laborum exercitation excepteur laboris adipisicing ipsum veniam cillum mollit voluptate do. Amet et + anim Lorem mollit minim duis cupidatat non. Consectetur sit deserunt nisi nisi non excepteur dolor eiusmod + aute aute irure anim dolore ipsum et veniam. +

+ + + + ); +}; \ No newline at end of file diff --git a/nym-wallet/src/pages/validators/validator-modal.tsx b/nym-wallet/src/pages/validators/validator-modal.tsx new file mode 100644 index 0000000000..ecafbd7681 --- /dev/null +++ b/nym-wallet/src/pages/validators/validator-modal.tsx @@ -0,0 +1,123 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { Button, Box, Dialog, CircularProgress, Typography } from '@mui/material'; +import { Tabs } from '../settings/tabs'; +import { NymCard } from '../../components'; +import { ClientContext } from '../../context/main'; +import { ValidatorSelector } from './validator-selector'; +import { Delegate as DelegateIcon } from '../../svg-icons'; +import { Console } from '../../utils/console'; + +const tabs = ['Validators', 'APIs']; + +export const ValidatorSettingsModal = () => { + const [selectedTab, setSelectedTab] = useState(0); + const [isSubmitting, setIsSubmitting] = useState(false); + const [data, setData] = useState({}); + + const { showValidatorSettings, getBondDetails, handleShowValidatorSettings } = useContext(ClientContext); + + const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab); + + useEffect(() => { + getBondDetails(); + }, [showValidatorSettings]); + + const onDataChanged = (selectedValidator?: string, selectedAPI?: string) => { + if (selectedValidator) { + setData(selectedValidator); + }; + if (selectedAPI) { + setData(selectedAPI); + }; + console.log('selectedValidator:', selectedValidator, 'selectedAPI', selectedAPI); + } + + const handleSubmit = (data: {}) => { + console.log('data', data); + } + + return showValidatorSettings ? ( + + + + Settings + + } + noPadding + > + + + Wallet Settings + + + <> + + + {selectedTab === 0 && + onDataChanged(selectedValidator)} + /> + } + {selectedTab === 1 && + onDataChanged(selectedAPI)} + /> + } + + + + + + + + ) : null; +}; diff --git a/nym-wallet/src/pages/validators/ValidatorSelector.tsx b/nym-wallet/src/pages/validators/validator-selector.tsx similarity index 100% rename from nym-wallet/src/pages/validators/ValidatorSelector.tsx rename to nym-wallet/src/pages/validators/validator-selector.tsx diff --git a/nym-wallet/src/stories/validator-settings.stories.tsx b/nym-wallet/src/stories/validator-settings.stories.tsx deleted file mode 100644 index 913435b5f9..0000000000 --- a/nym-wallet/src/stories/validator-settings.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -import { ComponentMeta } from '@storybook/react'; -import { ValidatorSettings } from 'src/pages'; - -export default { - title: 'ValidatorSettings', - component: ValidatorSettings, -} as ComponentMeta; - -export const AllControls = () => ; \ No newline at end of file