types#ValidFormField TypeScript Examples

export function useAccountId(initialValue = '', isOwned = false): ValidFormField<string> {
  const { keyring } = useApi();

  const validate = useCallback(
    (value: OrFalsy<string>): Validation => {
      if (!value?.trim() || (isOwned && !keyring?.getAccount(value))) {
        return { isValid: false, message: 'Specified account does not exist' };
      }

      return { isValid: true, message: null };
    },
    [keyring, isOwned]
  );

  return useFormField<string>(initialValue || keyring?.getAccounts()[0].address || '', validate);
}

export function useNonEmptyString(initialValue = ''): ValidFormField<string> {
  const validate = useCallback((value?: string | null): Validation => {
    if (!value || value.length === 0) {
      return { isValid: false, message: 'Value cannot be empty' };
    }

    return { isValid: true };
  }, []);
  return useFormField(initialValue, validate);
}

export function useFormField<T>(
  defaultValue: T,
  validate: ValidateFn<T> = value => ({ isValid: !isNull(value), message: null })
): ValidFormField<T> {
  const [value, setValue] = useState<T>(defaultValue);
  const [validation, setValidation] = useState<Omit<Validation, 'isError'>>(validate(value));
  const isTouched = useRef(false);

  const isError = useMemo(() => {
    if (!isTouched.current) {
      return false;
    }

    return !validation.isValid;
  }, [validation.isValid]);

  const onChange = useCallback(
    (value?: T | null) => {
      if (!isUndefined(value) && !isNull(value)) {
        setValue(value);
        setValidation(validate(value));
        isTouched.current = true;
      }
    },
    [validate]
  );

  return useMemo(
    () => ({
      value,
      onChange,
      isValid: validation.isValid,
      isTouched: isTouched.current,
      isWarning: validation.isWarning || false,
      message: validation.message,
      isError,
    }),
    [value, onChange, isError, validation.isValid, validation.isWarning, validation.message]
  );
}

export function useNonZeroBn(initialValue: BN | number = BN_ZERO): ValidFormField<BN> {
  const value = useMemo(() => bnToBn(initialValue), [initialValue]);

  return useFormField(value, isValid);
}

// nestingNumber counts the depth of nested components
export function findComponent(
  registry: Registry,
  type: TypeDef,
  nestingNumber = 0
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
): React.ComponentType<ArgComponentProps<any>> {
  if (type.info === TypeDefInfo.Si) {
    return findComponent(registry, registry.lookup.getTypeDef(type.type));
  }

  if (type.info === TypeDefInfo.Option) {
    return (props: React.PropsWithChildren<ValidFormField<unknown>>) => (
      <Option
        component={findComponent(registry, type.sub as TypeDef)}
        registry={registry}
        typeDef={type}
        {...props}
      />
    );
  }

  if (type.info === TypeDefInfo.Enum) {
    return (props: React.PropsWithChildren<ValidFormField<Record<string, unknown>>>) => (
      <Enum
        components={(type.sub as TypeDef[]).map(enumVariant =>
          findComponent(registry, enumVariant)
        )}
        registry={registry}
        typeDef={type}
        {...props}
      />
    );
  }

  if (type.info === TypeDefInfo.Struct) {
    if (Array.isArray(type.sub)) {
      const components = type.sub.map(
        subtype =>
          ({
            Component: findComponent(registry, subtype, nestingNumber + 1),
            name: subtype.name,
          } as SubComponent)
      );
      return (props: ArgComponentProps<Record<string, unknown>>) =>
        SubForm({ ...props, components, nestingNumber, type });
    }
  }

  if (type.info === TypeDefInfo.Vec) {
    if (type.sub && !Array.isArray(type.sub)) {
      const Component = findComponent(registry, type.sub, nestingNumber + 1);
      return (props: ArgComponentProps<unknown[]>) =>
        Vector({ ...props, Component, nestingNumber, type });
    }
  }

  if (type.info === TypeDefInfo.Compact) {
    return findComponent(registry, type.sub as TypeDef);
  }

  switch (type.type) {
    case 'AccountId':
    case 'Address':
      return AddressSelect;

    case 'Balance':
      return InputBalance;

    case 'bool':
      return Bool;

    case 'u8':
    case 'i8':
    case 'i32':
    case 'u32':
    case 'i64':
    case 'u64':
    case 'BN':
      return InputNumber;

    default:
      return Input;
  }
}