diff --git a/tauri-wallet/package.json b/tauri-wallet/package.json
index 631cd97f0f..2615106295 100644
--- a/tauri-wallet/package.json
+++ b/tauri-wallet/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"@babel/preset-typescript": "^7.15.0",
+ "@hookform/resolvers": "^2.8.0",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
@@ -19,7 +20,10 @@
"clsx": "^1.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
- "react-router-dom": "^5.2.0"
+ "react-hook-form": "^7.14.2",
+ "react-router-dom": "^5.2.0",
+ "semver": "^6.3.0",
+ "yup": "^0.32.9"
},
"devDependencies": {
"@babel/core": "^7.15.0",
@@ -30,6 +34,7 @@
"@tauri-apps/cli": "^1.0.0-beta.9",
"@types/bs58": "^4.0.1",
"@types/react-router-dom": "^5.1.8",
+ "@types/semver": "^7.3.8",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"favicons-webpack-plugin": "^5.0.2",
@@ -39,6 +44,6 @@
"url-loader": "^4.1.1",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
- "webpack-dev-server": "^3.11.2"
+ "webpack-dev-server": "^4.1.0"
}
}
diff --git a/tauri-wallet/src/components/NavigationCards.tsx b/tauri-wallet/src/components/NavigationCards.tsx
index acb72b97fa..69333c4934 100644
--- a/tauri-wallet/src/components/NavigationCards.tsx
+++ b/tauri-wallet/src/components/NavigationCards.tsx
@@ -69,33 +69,35 @@ export const AddressCard = () => {
noPadding
Action={
- {
- setCopyState(EnumCopyState.copying)
- await handleCopy({
- text: clientDetails?.client_address || '',
- cb: (isCopied) => {
- if (isCopied) {
- setCopyState(EnumCopyState.copySuccess)
- setTimeout(() => {
- setCopyState(undefined)
- }, 2500)
- }
- },
- })
- }}
- >
- {copyState === EnumCopyState.copying ? (
-
- ) : copyState === EnumCopyState.copySuccess ? (
-
- ) : (
-
- )}
-
+
+ {
+ setCopyState(EnumCopyState.copying)
+ await handleCopy({
+ text: clientDetails?.client_address || '',
+ cb: (isCopied) => {
+ if (isCopied) {
+ setCopyState(EnumCopyState.copySuccess)
+ setTimeout(() => {
+ setCopyState(undefined)
+ }, 2500)
+ }
+ },
+ })
+ }}
+ >
+ {copyState === EnumCopyState.copying ? (
+
+ ) : copyState === EnumCopyState.copySuccess ? (
+
+ ) : (
+
+ )}
+
+
}
>
diff --git a/tauri-wallet/src/routes/bond/BondForm.tsx b/tauri-wallet/src/routes/bond/BondForm.tsx
index 322a9856ea..f18d0972a8 100644
--- a/tauri-wallet/src/routes/bond/BondForm.tsx
+++ b/tauri-wallet/src/routes/bond/BondForm.tsx
@@ -8,20 +8,84 @@ import {
TextField,
Theme,
} from '@material-ui/core'
-import { EnumNodeType } from '../../types/global'
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'
type TBondNodeFormProps = {
// minimumBond: Coin
// onSubmit: (values: BondingInformation) => void
}
+type TBondFormFields = {
+ identityKey: string
+ sphinxKey: string
+ amount: string
+ host: string
+ version: string
+}
+
+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
+ }
+ ),
+
+ 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
+ }),
+})
+
export const BondNodeForm = () => {
const [advancedShown, setAdvancedShown] = React.useState(false)
const [nodeType, setNodeType] = useState(EnumNodeType.Mixnode)
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({ resolver: yupResolver(validationSchema) })
+
const theme: Theme = useTheme()
+ console.log(errors)
+
+ const onSubmit = (data: TBondFormFields) => console.log(data)
return (