types#Validation TypeScript Examples

export function getValidation({
  isError,
  isSuccess,
  isValid,
  isWarning,
  message,
}: Validation): Validation {
  return { isError, isSuccess, isValid, isWarning, message };
}

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);
}

function validate(metadata: Abi | undefined, { isWasmRequired }: Options): Validation {
  if (!metadata) {
    return {
      isValid: false,
      isError: true,
      message:
        'Invalid contract file format. Please upload the generated .contract bundle for your smart contract.',
    };
  }

  const wasm = metadata.info.source.wasm;
  const isWasmEmpty = wasm.isEmpty;
  const isWasmInvalid = !isWasm(wasm.toU8a());

  if (isWasmRequired && (isWasmEmpty || isWasmInvalid)) {
    return {
      isValid: false,
      isError: true,
      message: 'This contract bundle has an empty or invalid WASM field.',
    };
  }

  return {
    isValid: true,
    isError: false,
    isSuccess: true,
    message: isWasmRequired ? 'Valid contract bundle!' : 'Valid metadata file!',
  };
}

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 FormField({
  children,
  className,
  help,
  id,
  isError,
  isSuccess,
  isWarning,
  label,
  message,
}: Props & Validation) {
  const validationState = useMemo((): ValidationState => {
    if (!message) return null;

    if (isError) return 'error';
    if (isWarning) return 'warning';
    if (isSuccess) return 'success';

    return null;
  }, [isError, isSuccess, isWarning, message]);

  return (
    <div className={classes('form-field', className)}>
      {label && (
        <label data-tip={help} htmlFor={id}>
          {label}
          {help && (
            <>
              <InformationCircleIcon data-tip data-for={`formFieldHelp-${id}`} />
              <ReactTooltip id={`formFieldHelp-${id}`}>{help}</ReactTooltip>
            </>
          )}
        </label>
      )}
      {children}
      {message && validationState && (
        <div className={classes('validation', validationState && validationState)}>
          {['error', 'warning'].includes(validationState) && <ExclamationCircleIcon />}
          {validationState === 'success' && <CheckCircleIcon />}
          {message}
        </div>
      )}
    </div>
  );
}

export function useBalance(
  initialValue: BN | string | number = 0,
  { bitLength = DEFAULT_BITLENGTH, isZeroable = true, maxValue }: ValidateOptions = {}
): UseBalance {
  const { api } = useApi();

  const validate = useCallback(
    (value: BN | null | undefined): Validation => {
      let message: React.ReactNode;
      let isError = false;

      if (!value) {
        isError = true;
        return {
          isError,
        };
      }

      if (value?.lt(BN_ZERO)) {
        isError = true;
        message = 'Value cannot be negative';
      }

      if (value?.gt(getGlobalMaxValue(bitLength))) {
        isError = true;
        message = 'Value exceeds global maximum';
      }

      if (!isZeroable && value?.isZero()) {
        isError = true;
        message = 'Value cannot be zero';
      }

      if (value && value?.bitLength() > (bitLength || DEFAULT_BITLENGTH)) {
        isError = true;
        message = "Value's bitlength is too high";
      }

      if (maxValue && maxValue.gtn(0) && value?.gt(maxValue)) {
        isError = true;
        message = `Value cannot exceed ${formatBalance(maxValue?.toString())}`;
      }

      return {
        isError,
        isValid: !isError,
        message,
      };
    },
    [bitLength, isZeroable, maxValue]
  );

  const balance = useFormField<BN>(
    isBn(initialValue) ? toSats(api, initialValue) : toBalance(api, initialValue),
    validate
  );

  return balance;
}

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]
  );
}

function isValid(value?: BN | null): Validation {
  if (!value || value?.isZero()) {
    return { isValid: false, message: 'Value cannot be zero' };
  }

  return { isValid: true };
}