From cdbcfbe3bfc5adcd2f2718ad7317e5b0dd59d8e7 Mon Sep 17 00:00:00 2001 From: gala1234 Date: Fri, 1 Apr 2022 17:44:17 +0200 Subject: [PATCH] wip creating settings modal --- nym-wallet/.storybook/mocks/tauri/index.js | 12 ++++++- nym-wallet/src/components/AppBar.tsx | 13 +++++++- nym-wallet/src/context/main.tsx | 10 +++++- nym-wallet/src/pages/balance/index.tsx | 2 +- .../validators}/ValidatorSelector.tsx | 11 +++++-- nym-wallet/src/pages/validators/index.tsx | 32 +++++++++++++++++++ 6 files changed, 74 insertions(+), 6 deletions(-) rename nym-wallet/src/{components => pages/validators}/ValidatorSelector.tsx (90%) create mode 100644 nym-wallet/src/pages/validators/index.tsx diff --git a/nym-wallet/.storybook/mocks/tauri/index.js b/nym-wallet/.storybook/mocks/tauri/index.js index 1288b5215f..debd10722b 100644 --- a/nym-wallet/.storybook/mocks/tauri/index.js +++ b/nym-wallet/.storybook/mocks/tauri/index.js @@ -4,7 +4,17 @@ */ module.exports = { - invoke: (operation) => { + invoke: (operation, ...args) => { + switch(operation) { + case 'get_validator_nymd_urls': { + const { network } = args; + return new Promise(resolve => { + resolve({ + urls: ['foo', 'bar'], + }); + }); + } + } console.error(`Tauri cannot be used in Storybook. The operation requested was "${operation}". You can add mock responses to "nym_wallet/.storybook/mocks/tauri.js" if you need. The default response is "void".`); return new Promise((resolve, reject) => { reject(new Error(`Tauri operation ${operation} not available in storybook.`)); diff --git a/nym-wallet/src/components/AppBar.tsx b/nym-wallet/src/components/AppBar.tsx index b5ee0ab55d..3d37378416 100644 --- a/nym-wallet/src/components/AppBar.tsx +++ b/nym-wallet/src/components/AppBar.tsx @@ -4,9 +4,11 @@ import { Logout } from '@mui/icons-material'; import { ClientContext } from '../context/main'; import { NetworkSelector } from './NetworkSelector'; import { Node as NodeIcon } from '../svg-icons/node'; +import { Delegate as DelegateIcon } from '../svg-icons'; + export const AppBar = () => { - const { showSettings, logOut, handleShowSettings } = useContext(ClientContext); + const { showSettings, logOut, handleShowSettings, handleShowValidatorSettings } = useContext(ClientContext); return ( @@ -16,6 +18,15 @@ export const AppBar = () => { + + + + + void; getBondDetails: () => Promise; handleShowSettings: () => void; + handleShowValidatorSettings: () => void; handleShowAdmin: () => void; logIn: (mnemonic: string) => void; logOut: () => void; @@ -49,6 +51,7 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode const [currency, setCurrency] = useState(); const [showAdmin, setShowAdmin] = useState(false); const [showSettings, setShowSettings] = useState(false); + const [showValidatorSettings, setShowValidatorSettings] = useState(false); const [mode] = useState<'light' | 'dark'>('light'); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(); @@ -117,6 +120,7 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode const handleShowAdmin = () => setShowAdmin((show) => !show); const handleShowSettings = () => setShowSettings((show) => !show); + const handleShowValidatorSettings = () => setShowValidatorSettings((show) => !show); const switchNetwork = (_network: Network) => setNetwork(_network); const memoizedValue = useMemo( @@ -129,17 +133,21 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode userBalance, showAdmin, showSettings, + showValidatorSettings, network, currency, switchNetwork, getBondDetails, handleShowSettings, + handleShowValidatorSettings, handleShowAdmin, logIn, logOut, }), - [mode, isLoading, error, clientDetails, mixnodeDetails, userBalance, showAdmin, showSettings, network, currency], + [mode, isLoading, error, clientDetails, mixnodeDetails, userBalance, showAdmin, showSettings, showValidatorSettings, network, currency], ); + console.log('showValidatorSettings', showValidatorSettings); + return {children}; }; diff --git a/nym-wallet/src/pages/balance/index.tsx b/nym-wallet/src/pages/balance/index.tsx index 5132a6fbb8..852ff59da1 100644 --- a/nym-wallet/src/pages/balance/index.tsx +++ b/nym-wallet/src/pages/balance/index.tsx @@ -4,7 +4,7 @@ import { BalanceCard } from './balance'; import { VestingCard } from './vesting'; import { ClientContext } from '../../context/main'; import { PageLayout } from '../../layouts'; -import { ValidatorSelector } from '../../components/ValidatorSelector'; +import { ValidatorSelector } from '../validators/ValidatorSelector'; export const Balance = () => { const { userBalance } = useContext(ClientContext); diff --git a/nym-wallet/src/components/ValidatorSelector.tsx b/nym-wallet/src/pages/validators/ValidatorSelector.tsx similarity index 90% rename from nym-wallet/src/components/ValidatorSelector.tsx rename to nym-wallet/src/pages/validators/ValidatorSelector.tsx index cbe184d24e..16aac7481d 100644 --- a/nym-wallet/src/components/ValidatorSelector.tsx +++ b/nym-wallet/src/pages/validators/ValidatorSelector.tsx @@ -1,8 +1,8 @@ import React, { useContext, useEffect, useState } from 'react'; import { FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent, Typography, useMediaQuery } from '@mui/material'; import { useTheme } from '@mui/material/styles'; -import { ClientContext } from '../context/main'; -import { validatorUrls } from '../utils'; +import { ClientContext } from '../../context/main'; +import { validatorUrls } from '../../utils'; type TValidatorUrl = string; @@ -12,6 +12,10 @@ export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validato const [validators, setValidators] = useState(); const [selectedValidator, setSelectedValidator] = useState(''); + const resetState = () => { + setValidators(undefined); + }; + const { network } = useContext(ClientContext); @@ -25,6 +29,9 @@ export const ValidatorSelector: React.FC<{ onChangeValidatorSelection: (validato setValidators(validator?.urls); } })(); + + // will unmount + return () => resetState(); }, []); useEffect(() => { diff --git a/nym-wallet/src/pages/validators/index.tsx b/nym-wallet/src/pages/validators/index.tsx new file mode 100644 index 0000000000..c7221e9c0b --- /dev/null +++ b/nym-wallet/src/pages/validators/index.tsx @@ -0,0 +1,32 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { Alert, Box, Dialog } from '@mui/material'; +import { NymCard } from '../../components'; +import { ClientContext } from '../../context/main'; +import { ValidatorSelector } from './ValidatorSelector'; +import { Delegate as DelegateIcon } from '../../svg-icons'; + +export const ValidatorSettings = () => { + + const { mixnodeDetails, showValidatorSettings, getBondDetails, handleShowSettings } = useContext(ClientContext); + + useEffect(() => { + getBondDetails(); + }, [showValidatorSettings]); + + return showValidatorSettings ? ( + + + + Settings + + } + > + console.log('selectedValidator:', selectedValidator)} + /> + + + ) : null; +};