near-daos · VERZUOL1 · Apr 25, 2022 · Apr 25, 2022
diff --git a/....0/features/CreateProposal/components/AddMemberToGroupContent/AddMemberToGroupContent.tsx b/....0/features/CreateProposal/components/AddMemberToGroupContent/AddMemberToGroupContent.tsx
@@ -3,7 +3,7 @@ import React, { FC, useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 
-import { Input } from 'components/inputs/Input';
+import { DebouncedInput } from 'components/inputs/Input';
 import { Group } from 'features/vote-policy/components/Group';
 import { DropdownSelect } from 'components/inputs/selects/DropdownSelect';
 import { InputWrapper } from 'astro_2.0/features/CreateProposal/components/InputWrapper';
@@ -52,12 +52,15 @@ export const AddMemberToGroupContent: FC<AddMemberToGroupContentProps> = ({
           label={t('proposalCard.proposalTarget')}
           flex
         >
-          <Input
+          <DebouncedInput
             className={cn(styles.inputWrapper, styles.wide)}
             placeholder="someverylonglongname.near"
             isBorderless
             size="block"
             {...register('memberName')}
+            onValueChange={val =>
+              setValue('memberName', val, { shouldValidate: true })
+            }
           />
         </InputWrapper>
       </div>

diff --git a/...ts/CustomFunctionCallContent/components/BuyNftFromParasContent/BuyNftFromParasContent.tsx b/...ts/CustomFunctionCallContent/components/BuyNftFromParasContent/BuyNftFromParasContent.tsx
@@ -10,7 +10,7 @@ import {
 } from 'astro_2.0/features/CreateProposal/components/CustomFunctionCallContent/hooks';
 
 import { InputWrapper } from 'astro_2.0/features/CreateProposal/components/InputWrapper';
-import { Input } from 'components/inputs/Input';
+import { DebouncedInput, Input } from 'components/inputs/Input';
 import {
   DEFAULT_PROPOSAL_GAS,
   MAX_GAS,
@@ -108,12 +108,15 @@ export const BuyNftFromParasContent: FC = () => {
           label={t('proposalCard.proposalTarget')}
           flex
         >
-          <Input
+          <DebouncedInput
             className={cn(styles.inputWrapper, styles.wide)}
             placeholder={t('proposalCard.proposalTargetPlaceholder')}
             isBorderless
             size="block"
             {...register('target')}
+            onValueChange={val =>
+              setValue('target', val, { shouldValidate: true })
+            }
           />
         </InputWrapper>
       </div>

diff --git a/...nCallContent/components/TransferNftFromMintbaseContent/TransferNftFromMintbaseContent.tsx b/...nCallContent/components/TransferNftFromMintbaseContent/TransferNftFromMintbaseContent.tsx
@@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 
 import { InputWrapper } from 'astro_2.0/features/CreateProposal/components/InputWrapper';
-import { Input } from 'components/inputs/Input';
+import { DebouncedInput, Input } from 'components/inputs/Input';
 
 import {
   DEFAULT_PROPOSAL_GAS,
@@ -16,7 +16,7 @@ import styles from './TransferNftFromMintbaseContent.module.scss';
 
 export const TransferNftFromMintbaseContent: FC = () => {
   const { t } = useTranslation();
-  const { register } = useFormContext();
+  const { register, setValue } = useFormContext();
 
   return (
     <div className={styles.root}>
@@ -57,12 +57,15 @@ export const TransferNftFromMintbaseContent: FC = () => {
           label={t('proposalCard.proposalTarget')}
           flex
         >
-          <Input
+          <DebouncedInput
             className={cn(styles.inputWrapper, styles.wide)}
             placeholder={t('proposalCard.proposalTargetPlaceholder')}
             isBorderless
             size="block"
             {...register('target')}
+            onValueChange={val =>
+              setValue('target', val, { shouldValidate: true })
+            }
           />
         </InputWrapper>
       </div>

diff --git a/...s/CreateProposal/components/RemoveMemberFromGroupContent/RemoveMemberFromGroupContent.tsx b/...s/CreateProposal/components/RemoveMemberFromGroupContent/RemoveMemberFromGroupContent.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import cn from 'classnames';
 import { useFormContext } from 'react-hook-form';
-import { Input } from 'components/inputs/Input';
+import { DebouncedInput } from 'components/inputs/Input';
 import { DropdownSelect } from 'components/inputs/selects/DropdownSelect';
 import { Group } from 'features/vote-policy/components/Group';
 import { InputWrapper } from 'astro_2.0/features/CreateProposal/components/InputWrapper';
@@ -45,12 +45,15 @@ export const RemoveMemberFromGroupContent: FC<ChangeDaoNameContentProps> = ({
           label={t('proposalCard.proposalTarget')}
           flex
         >
-          <Input
+          <DebouncedInput
             className={cn(styles.inputWrapper, styles.wide)}
             placeholder="someverylonglongname.near"
             isBorderless
             size="block"
             {...register('memberName')}
+            onValueChange={val =>
+              setValue('memberName', val, { shouldValidate: true })
+            }
           />
         </InputWrapper>
       </div>

diff --git a/astro_2.0/features/CreateProposal/components/TransferContent/TransferContent.tsx b/astro_2.0/features/CreateProposal/components/TransferContent/TransferContent.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 
-import { Input } from 'components/inputs/Input';
+import { DebouncedInput, Input } from 'components/inputs/Input';
 import { DropdownSelect } from 'components/inputs/selects/DropdownSelect';
 import { Icon } from 'components/Icon';
 import { InputWrapper } from 'astro_2.0/features/CreateProposal/components/InputWrapper';
@@ -110,12 +110,15 @@ export const TransferContent: FC = () => {
         label={t('proposalCard.proposalTarget')}
         flex
       >
-        <Input
+        <DebouncedInput
           className={cn(styles.inputWrapper, styles.wide)}
           placeholder={t('proposalCard.proposalTargetPlaceholder')}
           isBorderless
           size="block"
           {...register('target')}
+          onValueChange={val =>
+            setValue('target', val, { shouldValidate: true })
+          }
         />
       </InputWrapper>
     </div>

diff --git a/astro_2.0/features/CreateProposal/helpers/newProposalObject.ts b/astro_2.0/features/CreateProposal/helpers/newProposalObject.ts
@@ -94,7 +94,7 @@ async function getTransferProposal(
     bond: dao.policy.proposalBond,
     data: {
       token_id: token?.tokenId,
-      receiver_id: data.target,
+      receiver_id: data.target.trim(),
       amount: new Decimal(data.amount).mul(10 ** token.decimals).toFixed(),
     },
   };

diff --git a/astro_2.0/features/CreateProposal/helpers/proposalObjectHelpers.ts b/astro_2.0/features/CreateProposal/helpers/proposalObjectHelpers.ts
@@ -227,7 +227,7 @@ export async function getTransferMintbaseNFTProposal(
   const [key, store] = tokenKey.split(':');
 
   const json = JSON.stringify({
-    token_ids: [[key, target]],
+    token_ids: [[key, target.trim()]],
   });
   const args = Buffer.from(json).toString('base64');
 
@@ -281,7 +281,7 @@ export async function getBuyNftFromParasProposal(
 
   const json = JSON.stringify({
     token_series_id: tokenKey,
-    receiver_id: target,
+    receiver_id: target.trim(),
   });
   const args = Buffer.from(json).toString('base64');
 

diff --git a/astro_2.0/features/CreateProposal/helpers/rootHelper.tsx b/astro_2.0/features/CreateProposal/helpers/rootHelper.tsx
@@ -432,7 +432,9 @@ export function validateUserAccount(
     return false;
   }
 
-  return nearService?.nearAccountExist(value || '');
+  const accountAddress = value.trim();
+
+  return nearService?.nearAccountExist(accountAddress || '');
 }
 
 export const gasValidation = yup
@@ -463,13 +465,12 @@ export function getValidationSchema(
             'Only numbers with five optional decimal place please',
             value => /^\d*(?:\.\d{0,5})?$/.test(`${value}`)
           ),
-        target: yup
-          .string()
-          .test(
-            'notValidNearAccount',
-            'Only valid near accounts are allowed',
-            value => validateUserAccount(value, nearService)
-          ),
+        target: yup.string().test({
+          name: 'notValidNearAccount',
+          exclusive: true,
+          message: 'Only valid near accounts are allowed',
+          test: async value => validateUserAccount(value, nearService),
+        }),
         details: yup.string().required('Required'),
         externalUrl: yup.string().url(),
         gas: gasValidation,
@@ -543,11 +544,12 @@ export function getValidationSchema(
         group: yup.string().required('Required'),
         memberName: yup
           .string()
-          .test(
-            'notValidNearAccount',
-            'Only valid near accounts are allowed',
-            value => validateUserAccount(value, nearService)
-          )
+          .test({
+            name: 'notValidNearAccount',
+            exclusive: true,
+            message: 'Only valid near accounts are allowed',
+            test: async value => validateUserAccount(value, nearService),
+          })
           .test(
             'daoMember',
             'Current DAO can not be specified in this field',
@@ -640,13 +642,12 @@ export function getValidationSchema(
                 }
               )
               .required('Required'),
-            target: yup
-              .string()
-              .test(
-                'notValidNearAccount',
-                'Only valid near accounts are allowed',
-                value => validateUserAccount(value, nearService)
-              ),
+            target: yup.string().test({
+              name: 'notValidNearAccount',
+              exclusive: true,
+              message: 'Only valid near accounts are allowed',
+              test: async value => validateUserAccount(value, nearService),
+            }),
             details: yup.string().required('Required'),
             externalUrl: yup.string().url(),
             gas: gasValidation,
@@ -660,13 +661,12 @@ export function getValidationSchema(
               .positive()
               .typeError('Must be a valid number.')
               .required('Required'),
-            target: yup
-              .string()
-              .test(
-                'notValidNearAccount',
-                'Only valid near accounts are allowed',
-                value => validateUserAccount(value, nearService)
-              ),
+            target: yup.string().test({
+              name: 'notValidNearAccount',
+              exclusive: true,
+              message: 'Only valid near accounts are allowed',
+              test: async value => validateUserAccount(value, nearService),
+            }),
             details: yup.string().required('Required'),
             externalUrl: yup.string().url(),
             actionsGas: gasValidation,

diff --git a/components/inputs/Input/DebouncedInput.tsx b/components/inputs/Input/DebouncedInput.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useDebounce } from 'react-use';
+import { InputProps } from 'components/inputs/Input/types';
+import { Input } from './Input';
+
+interface Props extends InputProps {
+  onValueChange: (value: string) => void;
+}
+
+export const DebouncedInput = React.forwardRef<HTMLInputElement, Props>(
+  ({ onValueChange, ...rest }, ref) => {
+    const [val, setVal] = React.useState('');
+
+    useDebounce(
+      () => {
+        onValueChange(val);
+      },
+      700,
+      [val]
+    );
+
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        onChange={({ currentTarget }) => {
+          setVal(currentTarget.value);
+        }}
+      />
+    );
+  }
+);
diff --git a/components/inputs/Input/Input.tsx b/components/inputs/Input/Input.tsx
@@ -1,23 +1,10 @@
 import cn from 'classnames';
-import { Property } from 'csstype';
 import { useId } from '@reach/auto-id';
-import React, { CSSProperties, ReactNode } from 'react';
+import React from 'react';
 
-import styles from './Input.module.scss';
+import { InputProps } from 'components/inputs/Input/types';
 
-interface InputProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'label'> {
-  label?: string | ReactNode;
-  description?: string | undefined;
-  isValid?: boolean | undefined;
-  inputSize?: number | undefined;
-  inputStyles?: CSSProperties;
-  size?: 'small' | 'medium' | 'large' | 'block' | 'content' | 'auto';
-  isBorderless?: boolean;
-  textAlign?: Property.TextAlign;
-  inputClassName?: string;
-  rightContent?: ReactNode;
-}
+import styles from './Input.module.scss';
 
 function getStateClass(isValid: boolean | undefined) {
   if (isValid === undefined) {

diff --git a/components/inputs/Input/index.ts b/components/inputs/Input/index.ts
@@ -1 +1,2 @@
 export * from './Input';
+export * from './DebouncedInput';
diff --git a/components/inputs/Input/types.ts b/components/inputs/Input/types.ts
@@ -0,0 +1,16 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { Property } from 'csstype';
+
+export interface InputProps
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'label'> {
+  label?: string | ReactNode;
+  description?: string | undefined;
+  isValid?: boolean | undefined;
+  inputSize?: number | undefined;
+  inputStyles?: CSSProperties;
+  size?: 'small' | 'medium' | 'large' | 'block' | 'content' | 'auto';
+  isBorderless?: boolean;
+  textAlign?: Property.TextAlign;
+  inputClassName?: string;
+  rightContent?: ReactNode;
+}
diff --git a/features/groups/helpers.ts b/features/groups/helpers.ts
@@ -22,7 +22,7 @@ function getAddRemoveMemberProposal(
     description: `${details}${EXTERNAL_LINK_SEPARATOR}${externalUrl}`,
     kind: isRemove ? 'RemoveMemberFromRole' : 'AddMemberToRole',
     data: {
-      member_id: memberName,
+      member_id: memberName.trim(),
       role: group,
     },
     bond: dao.policy.proposalBond,
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './Input';
		export * from './DebouncedInput';