wip story
This commit is contained in:
gala1234
@@ -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 = () => {
|
||||
<NymWalletTheme>
|
||||
<ApplicationLayout>
|
||||
<Settings />
|
||||
<ValidatorSettings />
|
||||
<ValidatorSettingsModal />
|
||||
<Admin />
|
||||
<AppRoutes />
|
||||
</ApplicationLayout>
|
||||
|
||||
@@ -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 ? (
|
||||
<Dialog open onClose={handleShowValidatorSettings} maxWidth="md" fullWidth>
|
||||
<NymCard
|
||||
title={
|
||||
<Box display="flex" alignItems="center">
|
||||
<DelegateIcon sx={{ mr: 1 }} />
|
||||
Settings
|
||||
</Box>
|
||||
}
|
||||
noPadding
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 3,
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'grey.300',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
Wallet Settings
|
||||
</Typography>
|
||||
</Box>
|
||||
<>
|
||||
<Tabs tabs={tabs} selectedTab={selectedTab} onChange={handleTabChange} disabled={false} />
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 3,
|
||||
}}
|
||||
>
|
||||
{selectedTab === 0 &&
|
||||
<ValidatorSelector
|
||||
type="Validator API Url"
|
||||
onChangeValidatorSelection={(selectedValidator) => onDataChanged(selectedValidator)}
|
||||
/>
|
||||
}
|
||||
{selectedTab === 1 &&
|
||||
<ValidatorSelector
|
||||
type={tabs[selectedTab]} onChangeValidatorSelection={(selectedAPI) => onDataChanged(selectedAPI)}
|
||||
/>
|
||||
}
|
||||
</Box>
|
||||
</>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: 3,
|
||||
bgcolor: 'grey.200',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
size="large"
|
||||
variant="contained"
|
||||
data-testid="validatorsSettings-button"
|
||||
color="primary"
|
||||
disableElevation
|
||||
onClick={async () => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
console.log('hello')
|
||||
} catch (e) {
|
||||
Console.error(e as string);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}}
|
||||
disabled={isSubmitting}
|
||||
endIcon={isSubmitting && <CircularProgress size={20} />}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</Box>
|
||||
</NymCard>
|
||||
</Dialog>
|
||||
) : null;
|
||||
};
|
||||
export { ValidatorSettingsModal } from './validator-modal';
|
||||
@@ -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<typeof ValidatorSettingsModal>;
|
||||
|
||||
export const Default = () => {
|
||||
const [open, setOpen] = React.useState<boolean>(true);
|
||||
return (
|
||||
<>
|
||||
<Paper elevation={0} sx={{ px: 4, pt: 2, pb: 4 }}>
|
||||
<h2>Lorem ipsum</h2>
|
||||
<Button variant="contained" onClick={() => setOpen(true)}>
|
||||
Show modal
|
||||
</Button>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</Paper>
|
||||
<ValidatorSettingsModal/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const NoSubheader = () => {
|
||||
const [open, setOpen] = React.useState<boolean>(true);
|
||||
return (
|
||||
<>
|
||||
<Paper elevation={0} sx={{ px: 4, pt: 2, pb: 4 }}>
|
||||
<h2>Lorem ipsum</h2>
|
||||
<Button variant="contained" onClick={() => setOpen(true)}>
|
||||
Show modal
|
||||
</Button>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</Paper>
|
||||
<ValidatorSettingsModal />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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 ? (
|
||||
<Dialog open onClose={handleShowValidatorSettings} maxWidth="md" fullWidth>
|
||||
<NymCard
|
||||
title={
|
||||
<Box display="flex" alignItems="center">
|
||||
<DelegateIcon sx={{ mr: 1 }} />
|
||||
Settings
|
||||
</Box>
|
||||
}
|
||||
noPadding
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 3,
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'grey.300',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
Wallet Settings
|
||||
</Typography>
|
||||
</Box>
|
||||
<>
|
||||
<Tabs tabs={tabs} selectedTab={selectedTab} onChange={handleTabChange} disabled={false} />
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 3,
|
||||
}}
|
||||
>
|
||||
{selectedTab === 0 &&
|
||||
<ValidatorSelector
|
||||
type="Validator API Url"
|
||||
onChangeValidatorSelection={(selectedValidator) => onDataChanged(selectedValidator)}
|
||||
/>
|
||||
}
|
||||
{selectedTab === 1 &&
|
||||
<ValidatorSelector
|
||||
type={tabs[selectedTab]} onChangeValidatorSelection={(selectedAPI) => onDataChanged(selectedAPI)}
|
||||
/>
|
||||
}
|
||||
</Box>
|
||||
</>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: 3,
|
||||
bgcolor: 'grey.200',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
size="large"
|
||||
variant="contained"
|
||||
data-testid="validatorsSettings-button"
|
||||
color="primary"
|
||||
disableElevation
|
||||
onClick={async () => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
console.log('hello')
|
||||
} catch (e) {
|
||||
Console.error(e as string);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}}
|
||||
disabled={isSubmitting}
|
||||
endIcon={isSubmitting && <CircularProgress size={20} />}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</Box>
|
||||
</NymCard>
|
||||
</Dialog>
|
||||
) : 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<typeof ValidatorSettings>;
|
||||
|
||||
export const AllControls = () => <ValidatorSettings />;
|
||||
Reference in New Issue
Block a user