diff --git a/tauri-wallet/src/components/NavigationCards.tsx b/tauri-wallet/src/components/NavigationCards.tsx index 69333c4934..0ecbc7fea5 100644 --- a/tauri-wallet/src/components/NavigationCards.tsx +++ b/tauri-wallet/src/components/NavigationCards.tsx @@ -41,7 +41,7 @@ export const BalanceCard = () => { {balanceError} ) : ( - {balance?.printableBalance} + {balance?.printable_balance} )} diff --git a/tauri-wallet/src/routes/bond/BondForm.tsx b/tauri-wallet/src/routes/bond/BondForm.tsx index f18d0972a8..73354a5952 100644 --- a/tauri-wallet/src/routes/bond/BondForm.tsx +++ b/tauri-wallet/src/routes/bond/BondForm.tsx @@ -11,15 +11,9 @@ import { import { useTheme } from '@material-ui/styles' import { useForm } from 'react-hook-form' import { yupResolver } from '@hookform/resolvers/yup' -import * as Yup from 'yup' import { EnumNodeType } from '../../types/global' import { NodeTypeSelector } from '../../components/NodeTypeSelector' -import { - isValidHostname, - validateAmount, - validateKey, - validateVersion, -} from '../../utils' +import { validationSchema } from './validationSchema' type TBondNodeFormProps = { // minimumBond: Coin @@ -27,74 +21,80 @@ type TBondNodeFormProps = { } type TBondFormFields = { + nodeType: EnumNodeType identityKey: string sphinxKey: string amount: string host: string version: string + location?: string + mixPort: number + verlocPort: number + clientsPort: number + httpApiPort: number } -const validationSchema = Yup.object().shape({ - identityKey: Yup.string() - .required('An indentity key is required') - .test('valid-id-key', 'A valid identity key is required', function (value) { - return validateKey(value || '') - }), - sphinxKey: Yup.string() - .required('A sphinx key is required') - .test( - 'valid-sphinx-key', - 'A valid sphinx key is required', - function (value) { - return validateKey(value || '') - } - ), - amount: Yup.string() - .required('An amount is required') - .test( - 'valid-amount', - 'A valid amount is required (min 100 punks)', - function (value) { - return validateAmount(value || '', '100000000') - // minimum amount needs to come from the backend - replace when available - } - ), +const defaultPorts = { + mixPort: 1789, + verlocPort: 1790, + httpApiPort: 8000, + clientsPort: 9000, +} - host: Yup.string() - .required('A host is required') - .test('valid-amount', 'A valid host is required', function (value) { - return !!value ? isValidHostname(value) : false - }), - version: Yup.string() - .required('A version is required') - .test('valid-version', 'A valid version is required', function (value) { - return !!value ? validateVersion(value) : false - }), -}) +const defaultValues = { + nodeType: EnumNodeType.Mixnode, + identityKey: '', + sphinxKey: '', + amount: '', + host: '', + version: '', + location: undefined, + ...defaultPorts, +} export const BondNodeForm = () => { const [advancedShown, setAdvancedShown] = React.useState(false) - const [nodeType, setNodeType] = useState(EnumNodeType.Mixnode) const { + reset, register, handleSubmit, + setValue, + watch, formState: { errors }, - } = useForm({ resolver: yupResolver(validationSchema) }) + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }) - const theme: Theme = useTheme() - console.log(errors) + const watchNodeType = watch('nodeType', EnumNodeType.Mixnode) const onSubmit = (data: TBondFormFields) => console.log(data) + const theme: Theme = useTheme() + return (
setNodeType(nodeType)} + nodeType={watchNodeType} + setNodeType={(nodeType) => { + setValue('nodeType', nodeType) + // reset( + // { + // // location: + // // nodeType === EnumNodeType.Mixnode ? undefined : '', + // ...defaultPorts, + // }, + // { + // keepErrors: true, + // keepDirty: true, + // keepValues: true, + // } + // ) + }} /> @@ -158,14 +158,17 @@ export const BondNodeForm = () => { {/* if it's a gateway - get location */} - {nodeType === EnumNodeType.Gateway && ( + {watchNodeType === EnumNodeType.Gateway && ( )} @@ -191,6 +194,13 @@ export const BondNodeForm = () => { checked={advancedShown} onChange={() => { setAdvancedShown((shown) => { + if (shown) { + reset(defaultPorts, { + keepErrors: true, + keepDirty: true, + keepValues: true, + }) + } return !shown }) }} @@ -204,43 +214,66 @@ export const BondNodeForm = () => { <> - {nodeType === EnumNodeType.Mixnode ? ( + {watchNodeType === EnumNodeType.Mixnode ? ( <> ) : ( )} @@ -259,6 +292,7 @@ export const BondNodeForm = () => { }} >