react-bootstrap#FormGroup TypeScript Examples

render() {
    if (this.state.toConfirm) return <Redirect to='/checkout-confirm' />

    if (this.state.isLoading) return null;
    return (
      <div className="well-bs col-md-12 full-page no-padding-top">
        <div className="white-box no-margin-top">
          <div className="checkout ">
            <img src={supportedCards} alt="Supported cards" />
            <Form>
              <FormGroup
                controlId="card"
                validationState={this.getCardNumberValidationState()}>
                <ControlLabel>Card number</ControlLabel>
                <FormControl
                  name="card"
                  type="text"
                  value={this.state.card}
                  onChange={this.handleChange} />
                <FormControl.Feedback />
              </FormGroup>
              <div className="form-row">
                <FormGroup
                  controlId="expDate">
                  <ControlLabel>Expiration date</ControlLabel>
                  <FormControl
                    name="expDate"
                    type="date"
                    value={this.state.expDate}
                    onChange={this.handleChange} />
                  <FormControl.Feedback />
                </FormGroup>
                <FormGroup
                  className="ccv"
                  controlId="ccv">
                  <ControlLabel>CCV</ControlLabel>
                  <FormControl
                    name="ccv"
                    type="text"
                    value={this.state.ccv}
                    onChange={this.handleChange} />
                  <FormControl.Feedback />
                </FormGroup>
              </div>
            </Form>
          </div>
        </div>
        <div className="pull-right">
          <button className="btn btn-black" type="button" onClick={this.onCheckout}>{`Pay ($${this.getOrderTotal()})`}</button>
        </div>
      </div>
    );
  }

render() {
    if (this.state.redirect) return <Redirect to="/" />;

    return (
      <div className="Login">
        <form onSubmit={this.onLogin}>
          <FormGroup controlId="email" validationState={this.state.emailValid}>
            <ControlLabel>Email</ControlLabel>
            <FormControl
              name="email"
              type="email"
              bsSize="large"
              value={this.state.email}
              onChange={this.onEmailChange}
            />
            <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="password"
            validationState={this.state.passwordValid}
          >
            <ControlLabel>Password</ControlLabel>
            <FormControl
              name="password"
              type="password"
              bsSize="large"
              value={this.state.password}
              onChange={this.onPasswordChange}
            />
            <FormControl.Feedback />
          </FormGroup>
          <Button
            block
            bsSize="large"
            type="submit"
            disabled={
              this.state.passwordValid !== "success" ||
              this.state.emailValid !== "success"
            }
          >
            {this.state.loading && (
              <Glyphicon glyph="refresh" className="spinning" />
            )}
            Log in
          </Button>
        </form>
      </div>
    );
  }

showSignupForm = () => {
    return (
      <form onSubmit={this.onSignup}>
        <FormGroup controlId="email" validationState={this.state.emailValid}>
          <ControlLabel>Email</ControlLabel>
          <FormControl
            name="email"
            type="email"
            bsSize="large"
            value={this.state.email}
            onChange={this.onEmailChange}
          />
          <FormControl.Feedback />
        </FormGroup>
        <FormGroup
          controlId="password"
          validationState={this.state.passwordValid}
        >
          <ControlLabel>Password</ControlLabel>
          <FormControl
            name="password"
            type="password"
            bsSize="large"
            value={this.state.password}
            onChange={this.onPasswordChange}
          />
          <FormControl.Feedback />
          <HelpBlock>Must be at least 8 characters</HelpBlock>
        </FormGroup>
        <FormGroup
          controlId="confirmPassword"
          validationState={this.state.confirmPasswordValid}
        >
          <ControlLabel>Confirm Password</ControlLabel>
          <FormControl
            name="confirmPassword"
            type="password"
            bsSize="large"
            value={this.state.confirmPassword}
            onChange={this.onConfirmPasswordChange}
          />
          <FormControl.Feedback />
        </FormGroup>
        <Button
          block
          bsSize="large"
          type="submit"
          disabled={
            this.state.passwordValid !== "success" ||
            this.state.confirmPasswordValid !== "success" ||
            this.state.emailValid !== "success"
          }
        >
          {this.state.loading && (
            <Glyphicon glyph="refresh" className="spinning" />
          )}
          Log in
        </Button>
      </form>
    );
  };

export default function RedeemInfo(): JSX.Element {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const { address, prices } = useSelector((state: StoreType) => state.general);
  const { id } = useSelector((state: StoreType) => state.redeem);
  const requests = useSelector((state: StoreType) => state.redeem.redeemRequests).get(address) || [];
  const [showModal, setShowModal] = useState(false);
  const request = requests.filter(request => request.id === id)[0];

  const onClose = () => {
    dispatch(resetRedeemWizardAction());
    dispatch(changeRedeemStepAction('AMOUNT_AND_ADDRESS'));
  };

  const openModal = () => {
    dispatch(changeRedeemIdAction(request.id));
    setShowModal(true);
  };

  const closeModal = () => setShowModal(false);

  return (
    <React.Fragment>
      <FormGroup className='text-center'>
        {request && (
          <React.Fragment>
            <div className='wizard-redeem-title'>
              <i className='fas fa-exclamation-circle'></i>
              {t('redeem_page.redeem_processed')}
            </div>
            <div className='row'>
              <div className='col-12 info-redeem-title'>
                <span>{t('redeem_page.will_receive_BTC')}&nbsp;</span> {displayBtcAmount(request.amountBTC)} BTC
              </div>
            </div>
            <div className='row'>
              <div className='col-12 info-redeem-price'>
                                ~${getUsdAmount(request.amountPolkaBTC, prices.bitcoin.usd)}
              </div>
            </div>
            <div className='row'>
              <div className='col btc-destination-address'>
                {t('redeem_page.btc_destination_address')}
              </div>
            </div>
            <div className='row '>
              <div className='col payment-address'>
                <span className='copy-address'>{request.userBTCAddress}</span>
              </div>
            </div>
            <div className='row'>
              <div className='col inform-you'>{t('redeem_page.we_will_inform_you_btc')}</div>
            </div>
            <div className='row'>
              <div className='col typically-takes'>{t('redeem_page.typically_takes')}</div>
            </div>
          </React.Fragment>
        )}
      </FormGroup>
      <div className='row'>
        <div className='col text-center'>
          <button
            className='btn black-button app-btn'
            onClick={openModal}>
            {t('redeem_page.view_progress')}
          </button>
        </div>
      </div>
      <div className='row'>
        <div className='col text-center'>
          <button
            className='btn green-button mt-5 app-btn'
            onClick={onClose}>
            {t('close')}
          </button>
        </div>
      </div>
      <RedeemModal
        show={showModal}
        onClose={closeModal} />
    </React.Fragment>
  );
}

ProposalTransactionFormModal = ({
  show,
  onHide,
  onProposalTransactionAdded,
}: ProposalTransactionFormModalProps) => {
  const [address, setAddress] = useState('');
  const [abi, setABI] = useState<Interface>();
  const [value, setValue] = useState('');
  const [func, setFunction] = useState('');
  const [args, setArguments] = useState<string[]>([]);

  const [isABIUploadValid, setABIUploadValid] = useState<boolean>();
  const [abiFileName, setABIFileName] = useState<string | undefined>('');

  const addressValidator = (s: string) => {
    if (!utils.isAddress(s)) {
      return false;
    }
    // To avoid blocking stepper progress, do not `await`
    populateABIIfExists(s);
    return true;
  };

  const valueValidator = (v: string) => !v || !new BigNumber(v).isNaN();

  const argumentsValidator = (a: string[]) => {
    if (!func) {
      return true;
    }

    try {
      return !!abi?._encodeParams(abi?.functions[func]?.inputs, args);
    } catch {
      return false;
    }
  };

  const setArgument = (index: number, value: string) => {
    const values = [...args];
    values[index] = value;
    setArguments(values);
  };

  let abiErrorTimeout: NodeJS.Timeout;
  const setABIInvalid = () => {
    setABIUploadValid(false);
    setABIFileName(undefined);
    abiErrorTimeout = setTimeout(() => {
      setABIUploadValid(undefined);
    }, 5_000);
  };

  const validateAndSetABI = (file: File | undefined) => {
    if (abiErrorTimeout) {
      clearTimeout(abiErrorTimeout);
    }
    if (!file) {
      return;
    }

    const reader = new FileReader();
    reader.onload = async e => {
      try {
        const abi = e?.target?.result?.toString() ?? '';
        setABI(new Interface(JSON.parse(abi)));
        setABIUploadValid(true);
        setABIFileName(file.name);
      } catch {
        setABIInvalid();
      }
    };
    reader.readAsText(file);
  };

  const getContractInformation = async (address: string) => {
    const response = await fetch(buildEtherscanApiQuery(address));
    const json = await response.json();
    return json?.result?.[0];
  };

  const getABI = async (address: string) => {
    let info = await getContractInformation(address);
    if (info?.Proxy === '1' && utils.isAddress(info?.Implementation)) {
      info = await getContractInformation(info.Implementation);
    }
    return info.ABI;
  };

  const populateABIIfExists = async (address: string) => {
    if (abiErrorTimeout) {
      clearTimeout(abiErrorTimeout);
    }

    try {
      const result = await getABI(address);
      setABI(new Interface(JSON.parse(result)));
      setABIUploadValid(true);
      setABIFileName('etherscan-abi-download.json');
    } catch {
      setABIUploadValid(undefined);
      setABIFileName(undefined);
    }
  };

  const stepForwardOrCallback = () => {
    if (currentStep !== steps.length - 1) {
      return stepForward();
    }
    onProposalTransactionAdded({
      address,
      value: value ? utils.parseEther(value).toString() : '0',
      signature: func,
      calldata: (func && abi?._encodeParams(abi?.functions[func]?.inputs, args)) || '0x',
    });
    clearState();
  };

  const steps = [
    {
      label: 'Address',
      name: 'address',
      validator: () => addressValidator(address),
    },
    {
      label: 'Value',
      name: 'value',
      validator: () => valueValidator(value),
    },
    {
      label: 'Function',
      name: 'function',
    },
    {
      label: 'Arguments',
      name: 'arguments',
      validator: () => argumentsValidator(args),
    },
    {
      label: 'Summary',
      name: 'summary',
    },
  ];

  const { stepForward, stepBackwards, currentStep } = useStepProgress({
    steps,
    startingStep: 0,
  });

  const clearState = () => {
    setAddress('');
    setABI(undefined);
    setValue('');
    setFunction('');
    setArguments([]);
    setABIUploadValid(undefined);
    setABIFileName(undefined);

    for (let i = currentStep; i > 0; i--) {
      stepBackwards();
    }
  };

  return (
    <Modal
      show={show}
      onHide={() => {
        onHide();
        clearState();
      }}
      dialogClassName={classes.transactionFormModal}
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title>
          <Trans>Add a Proposal Transaction</Trans>
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <StepProgressBar className={classes.stepProgressBar} steps={steps} />
        <Step step={0}>
          <label htmlFor="callee-address">
            <Trans>Address (Callee or Recipient)</Trans>
          </label>
          <FormControl
            value={address}
            type="text"
            id="callee-address"
            onChange={e => setAddress(e.target.value)}
          />
        </Step>
        <Step step={1}>
          <label htmlFor="eth-value">
            <Trans>Value in ETH (Optional)</Trans>
          </label>
          <FormControl value={value} id="eth-value" onChange={e => setValue(e.target.value)} />
        </Step>
        <Step step={2}>
          <label htmlFor="function">
            <Trans>Function (Optional)</Trans>
          </label>
          <FormControl
            value={func}
            as="select"
            id="function"
            onChange={e => setFunction(e.target.value)}
          >
            <option className="text-muted">Select Contract Function</option>
            {abi && Object.keys(abi.functions).map(func => <option value={func}>{func}</option>)}
          </FormControl>
          <label style={{ marginTop: '1rem' }} htmlFor="import-abi">
            {abiFileName === 'etherscan-abi-download.json' ? abiFileName : 'ABI'}
          </label>
          <Form.Control
            type="file"
            id="import-abi"
            accept="application/JSON"
            isValid={isABIUploadValid}
            isInvalid={isABIUploadValid === false}
            onChange={(e: ChangeEvent<HTMLInputElement>) => validateAndSetABI(e.target.files?.[0])}
          />
        </Step>
        <Step step={3}>
          {abi?.functions[func]?.inputs?.length ? (
            <FormGroup as={Row}>
              {abi?.functions[func]?.inputs.map((input, i) => (
                <>
                  <FormLabel column sm="3">
                    {input.name}
                  </FormLabel>
                  <Col sm="9">
                    <InputGroup className="mb-2">
                      <InputGroup.Text className={classes.inputGroupText}>
                        {input.type}
                      </InputGroup.Text>
                      <FormControl
                        value={args[i] ?? ''}
                        onChange={e => setArgument(i, e.target.value)}
                      />
                    </InputGroup>
                  </Col>
                </>
              ))}
            </FormGroup>
          ) : (
            <Trans>No arguments required </Trans>
          )}
        </Step>
        <Step step={4}>
          <Row>
            <Col sm="3">
              <b>
                <Trans>Address</Trans>
              </b>
            </Col>
            <Col sm="9" className="text-break">
              <a href={buildEtherscanAddressLink(address)} target="_blank" rel="noreferrer">
                {address}
              </a>
            </Col>
          </Row>
          <Row>
            <Col sm="3">
              <b>
                <Trans>Value</Trans>
              </b>
            </Col>
            <Col sm="9">{value ? `${value} ETH` : <Trans>None</Trans>}</Col>
          </Row>
          <Row>
            <Col sm="3">
              <b>
                <Trans>Function</Trans>
              </b>
            </Col>
            <Col sm="9" className="text-break">
              {func || <Trans>None</Trans>}
            </Col>
          </Row>
          <Row>
            <Col sm="3">
              <b>
                <Trans>Arguments</Trans>
              </b>
            </Col>
            <Col sm="9">
              <hr />
            </Col>
            <Col sm="9">{abi?.functions[func]?.inputs?.length ? '' : <Trans>None</Trans>}</Col>
          </Row>
          {abi?.functions[func]?.inputs.map((input, i) => (
            <Row key={i}>
              <Col sm="3" className={classes.functionName}>
                {i + 1}. {input.name}
              </Col>
              <Col sm="9" className="text-break">
                {args[i]}
              </Col>
            </Row>
          ))}
        </Step>
        <div className="d-flex justify-content-between align-items-center pt-3">
          <Button
            onClick={stepBackwards}
            variant="outline-secondary"
            size="lg"
            disabled={currentStep === 0}
          >
            <Trans>Back</Trans>
          </Button>
          <Button onClick={stepForwardOrCallback} variant="primary" size="lg">
            {currentStep !== steps.length - 1 ? (
              <Trans>Next</Trans>
            ) : (
              <Trans>Add Transaction</Trans>
            )}
          </Button>
        </div>
      </Modal.Body>
    </Modal>
  );
}