From 2843879d05a074efd5353c9aa75300ff64971e5d Mon Sep 17 00:00:00 2001
From: neokry <neokry.eth@gmail.com>
Date: Mon, 27 Mar 2023 14:56:24 -0700
Subject: [PATCH] Adds debounce to address validation

---
 .../AllocationForm/AllocationForm.schema.ts      | 16 +++++++++++++++-
 .../modules/create-dao/components/VetoForm.tsx   |  6 +++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts
index e6e4cd679..c688dd457 100644
--- a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts
+++ b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts
@@ -1,14 +1,28 @@
+import { debounce } from 'lodash'
 import * as Yup from 'yup'
 
 import { isValidAddress } from 'src/utils/ens'
 import { getProvider } from 'src/utils/provider'
 
+const validateAddress = async (
+  value: string | undefined,
+  res: (value: boolean | PromiseLike<boolean>) => void
+) => {
+  try {
+    res(!!value && (await isValidAddress(value, getProvider())))
+  } catch (err) {
+    res(false)
+  }
+}
+
+export const deboucedValidateAddress = debounce(validateAddress, 500)
+
 const allocationSchema = Yup.object().shape({
   founderAddress: Yup.string()
     .test(
       'isValidAddress',
       'invalid address',
-      (value: string | undefined) => !!value && isValidAddress(value, getProvider())
+      (value) => new Promise((res) => deboucedValidateAddress(value, res))
     )
     .required('*'),
   allocationPercentage: Yup.number()
diff --git a/apps/web/src/modules/create-dao/components/VetoForm.tsx b/apps/web/src/modules/create-dao/components/VetoForm.tsx
index e70bafa68..626295e38 100644
--- a/apps/web/src/modules/create-dao/components/VetoForm.tsx
+++ b/apps/web/src/modules/create-dao/components/VetoForm.tsx
@@ -11,11 +11,11 @@ import {
   defaultFormButtonWithPrev,
 } from 'src/components/Fields/styles.css'
 import { Icon } from 'src/components/Icon'
-import { getEnsAddress, isValidAddress } from 'src/utils/ens'
+import { getEnsAddress } from 'src/utils/ens'
 import { isEmpty } from 'src/utils/helpers'
-import { getProvider } from 'src/utils/provider'
 
 import { useFormStore } from '../stores'
+import { deboucedValidateAddress } from './AllocationForm/AllocationForm.schema'
 
 interface VetoFormProps {
   title: string
@@ -44,7 +44,7 @@ export const vetoValidationSchema = Yup.object().shape({
       .test(
         'isValidAddress',
         'invalid address',
-        (value: string | undefined) => !!value && isValidAddress(value, getProvider())
+        (value) => new Promise((res) => deboucedValidateAddress(value, res))
       ),
   }),
 })