fix: ipv6 connect peer and block host

.changeset/rich-oranges-pay.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The host blocklist dialog now supports adding IPv6 addresses.

.changeset/tame-cougars-sit.md

@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+The connect to peer dialog now supports IPv6 addresses. Closes https://github.com/SiaFoundation/web/issues/624

apps/renterd/components/Hosts/HostsAllowBlockDialog/BlocklistForm.tsx

@@ -6,7 +6,6 @@ import {
   Text,
   Separator,
   Tooltip,
-  hostnameOrIpRegex,
   FormTextFieldFormik,
   FieldGroupFormik,
 } from '@siafoundation/design-system'
@@ -30,11 +29,7 @@ const suggestions = [
 ]
 
 const validationSchema = Yup.object().shape({
-  address: Yup.string()
-    .required('Required')
-    .test('address', 'Invalid hostname or IP address', (v) => {
-      return hostnameOrIpRegex().test(v || '')
-    }),
+  address: Yup.string().required('Required'),
 })
 
 export function BlocklistForm() {

libs/design-system/src/app/SyncerConnectPeerDialog.tsx

@@ -1,33 +1,40 @@
 'use client'
 
 import { Paragraph } from '../core/Paragraph'
-import { triggerSuccessToast } from '../lib/toast'
-import {
-  FormFieldFormik,
-  FormSubmitButtonFormik,
-} from '../components/FormFormik'
+import { triggerErrorToast, triggerSuccessToast } from '../lib/toast'
 import { Response } from '@siafoundation/react-core'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { hostnameOrIpRegex } from '../lib/ipRegex'
 import { Dialog } from '../core/Dialog'
+import { ConfigFields } from '../form/configurationFields'
+import { useDialogFormHelpers } from '../form/useDialogFormHelpers'
+import { useForm } from 'react-hook-form'
+import { useCallback } from 'react'
+import { FormSubmitButton } from '../components/Form'
+import { FieldText } from '../form/FieldText'
 
-const initialValues = {
-  port: 9981,
-  ip: '',
+function getDefaultValues() {
+  return {
+    address: '',
+  }
 }
 
-const validationSchema = Yup.object().shape({
-  port: Yup.number()
-    .required('Required')
-    .min(0, 'Out of valid range')
-    .max(65535, 'Out of valid range'),
-  ip: Yup.string()
-    .required('Required')
-    .test('ip', 'Invalid hostname or IP address', (v) =>
-      hostnameOrIpRegex().test(v || '')
-    ),
-})
+type Values = ReturnType<typeof getDefaultValues>
+
+function getFields(): ConfigFields<Values, never> {
+  return {
+    address: {
+      type: 'text',
+      title: 'Address',
+      placeholder: 'host.acme.com:9981 or 127.0.0.1:9981',
+      autoComplete: 'off',
+      validation: {
+        required: 'required',
+      },
+    },
+  }
+}
+
+const defaultValues = getDefaultValues()
+const fields = getFields()
 
 export type SyncerConnectPeerDialogParams = void
 
@@ -45,73 +52,51 @@ export function SyncerConnectPeerDialog({
   connect,
   onOpenChange,
 }: Props) {
-  const formik = useFormik({
-    initialValues,
-    validationSchema,
-    onSubmit: async (values, actions) => {
-      const netAddress = `${values.ip}:${values.port}`
-      const response = await connect(netAddress)
+  const form = useForm({
+    mode: 'all',
+    defaultValues,
+  })
+
+  const { handleOpenChange, closeAndReset } = useDialogFormHelpers({
+    form,
+    onOpenChange,
+    defaultValues,
+  })
+
+  const onSubmit = useCallback(
+    async (values: Values) => {
+      const response = await connect(values.address)
       if (response.error) {
-        const formattedError = response.error.replace(
-          `invalid peer address: address ${netAddress}:`,
-          ''
-        )
-        actions.setStatus({ error: formattedError })
+        triggerErrorToast({ title: response.error })
       } else {
         triggerSuccessToast({ title: 'Connected to peer' })
-        actions.resetForm()
-        onOpenChange(false)
+        closeAndReset()
       }
     },
-  })
+    [closeAndReset, connect]
+  )
 
   return (
     <Dialog
       trigger={trigger}
       title="Connect peer"
       open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          formik.resetForm()
-        }
-        onOpenChange(open)
-      }}
+      onOpenChange={handleOpenChange}
       contentVariants={{
         className: 'w-[400px]',
       }}
+      onSubmit={form.handleSubmit(onSubmit)}
+      controls={
+        <div className="px-1">
+          <FormSubmitButton form={form} size="medium" className="w-full">
+            Connect
+          </FormSubmitButton>
+        </div>
+      }
     >
       <div className="flex flex-col gap-4">
         <Paragraph size="14">Connect to a peer by IP address.</Paragraph>
-        <form onSubmit={formik.handleSubmit}>
-          <div className="flex flex-col gap-4">
-            <FormFieldFormik
-              formik={formik}
-              title="Address"
-              name="ip"
-              placeholder="host.acme.com or 127.0.0.1"
-              autoComplete="off"
-              type="text"
-              variants={{
-                size: 'medium',
-              }}
-            />
-            <FormFieldFormik
-              formik={formik}
-              title="Port"
-              name="port"
-              disableGroupSeparators
-              placeholder="9981"
-              autoComplete="off"
-              type="number"
-              variants={{
-                size: 'medium',
-              }}
-            />
-            <FormSubmitButtonFormik formik={formik} size="medium">
-              Connect
-            </FormSubmitButtonFormik>
-          </div>
-        </form>
+        <FieldText form={form} fields={fields} name="address" size="medium" />
       </div>
     </Dialog>
   )

libs/design-system/src/components/Form.tsx

@@ -102,13 +102,15 @@ type FormSubmitProps<Values extends FieldValues> = {
   size?: React.ComponentProps<typeof Button>['size']
   variant?: React.ComponentProps<typeof Button>['variant']
   children: React.ReactNode
+  className?: string
   withStatusError?: boolean
 }
 
 export function FormSubmitButton<Values extends FieldValues>({
   form,
   size = 'medium',
   variant = 'accent',
+  className,
   children,
 }: FormSubmitProps<Values>) {
   return (
@@ -117,6 +119,7 @@ export function FormSubmitButton<Values extends FieldValues>({
         <Text color="red">{formik.status.error}</Text>
       )} */}
       <Button
+        className={className}
         size={size}
         variant={variant}
         state={form.formState.isSubmitting ? 'waiting' : undefined}

libs/design-system/src/form/ConfigurationNumber.tsx

@@ -25,6 +25,8 @@ export function ConfigurationNumber<
     decimalsLimit = 2,
     after,
     placeholder: _placeholder,
+    disableGroupSeparators,
+    autoComplete,
     units,
     prefix,
   } = field
@@ -52,6 +54,8 @@ export function ConfigurationNumber<
           units={units}
           prefix={prefix}
           decimalsLimit={decimalsLimit}
+          disableGroupSeparators={disableGroupSeparators}
+          autoComplete={autoComplete}
           placeholder={placeholder}
           state={
             error

libs/design-system/src/form/ConfigurationText.tsx

@@ -30,6 +30,7 @@ export function ConfigurationText<
           name={name}
           placeholder={placeholder}
           type={type}
+          autoComplete={field.autoComplete}
           state={
             error
               ? 'invalid'

libs/design-system/src/form/FieldNumber.tsx

@@ -32,6 +32,8 @@ export function FieldNumber<
       units={units}
       size={size}
       decimalsLimit={decimalsLimit}
+      disableGroupSeparators={field.disableGroupSeparators}
+      autoComplete={field.autoComplete}
       placeholder={placeholder ? new BigNumber(placeholder) : undefined}
       state={
         error

libs/design-system/src/form/FieldText.tsx

@@ -35,7 +35,9 @@ export function FieldText<
       name={name}
       placeholder={field.placeholder}
       size={size}
-      autoComplete={autoComplete}
+      autoComplete={
+        autoComplete !== undefined ? autoComplete : field.autoComplete
+      }
       type={field.type}
       readOnly={field.readOnly}
       spellCheck={spellCheck}

libs/design-system/src/form/configurationFields.ts

@@ -61,6 +61,10 @@ export type ConfigField<
 
   validation: RegisterOptions<Values>
   trigger?: Path<Values>[]
+
+  // other
+  disableGroupSeparators?: boolean
+  autoComplete?: string
 }
 
 export type ConfigFields<

libs/design-system/src/index.ts

@@ -178,7 +178,6 @@ export * from './lib/mnemonics'
 export * from './lib/contracts'
 export * from './lib/chartData'
 export * from './lib/chartStats'
-export * from './lib/ipRegex'
 export * from './lib/getOs'
 export * from './lib/countryEmoji'
 export * from './lib/nodeToImage'