react-bootstrap#FormControl JavaScript Examples

createNewFolderExample = props => {
	return <div>
		<h5 className={'mb-0'}>Create new folder</h5>
		<div>To create folder we need URI of parent folder</div>
		<div>For this example we'll use metadataRoot folder's details above</div>
		<code>createNewFolder(parentUri, folderName, options)</code>
		<div>
			<label className={'mr-2'}>parentFolderUri:</label><span className={'comment'}>{props.state.folderDetails ?
			Utils.getSelfUri(props.state.folderDetails.links) :
			<Button
				bsstyle={'btn-sm btn-primary mr-2'}
				onClick={props.getFolderDetails}>Get
			</Button>}</span>
		</div>
		<Row className={'mt-3'}>
			<Col md={5}>
				<FormGroup>
					<FormControl
						type={'text'}
						placeholder={'folderName'}
						value={props.state.newFolder}
						onChange={e => props.setState({newFolder: e.target.value})}
					/>
				</FormGroup>
			</Col>
			<Col md={2}>
				<Button
					bsstyle={'btn btn-primary mr-2 btn-loading'}
					onClick={props.createNewFolder}
					disabled={!props.state.folderDetails || !props.state.newFolder || props.state.creatingNewFolder}
				>
					{props.state.creatingNewFolder && <i className={'fas fa-spinner fa-spin'}/>} Create
				</Button>
			</Col>
		</Row>
		<hr/>
	</div>
}

SearchTokenInput = ({ value, onChange, inputRef }) => {
  return (
    <div className="mt-1 flex flex-row w-100">
      <InputGroup>
        <InputGroup.Prepend>
          <InputGroup.Text className="search-icon border-right-0">
            <BsSearch />
          </InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl
          ref={inputRef}
          placeholder="Search"
          className={'shadow-none border-left-0 search-box'}
          value={value}
          onChange={onChange}
        />
      </InputGroup>
    </div>
  );
}

render() {
    return (
      <Navbar.Form>
        <Form onSubmit={this.handleSubmit}>
          <FormGroup style={formGroupStyle}>
            <FormControl
              type="text"
              name="email"
              placeholder="Email"
              onChange={this.handleInputChange}
            />
            <FormControl
              type="password"
              name="password"
              placeholder="Password"
              onChange={this.handleInputChange}
              style={passwordStyle}
            />
            <Button type="submit" bsStyle="success" style={logInButtonStyle}>
              LOGIN
            </Button>
          </FormGroup>
        </Form>
      </Navbar.Form>
    );
  }

FieldGroup = ({ id, label, help, error, ...props }) => {
    return (
        <FormGroup controlId={id} validationState={error ? 'error' : null}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl {...props} />
            {help && <HelpBlock>{help}</HelpBlock>}
            {error && <div className="alert alert-danger">{error}</div>}
        </FormGroup>
    );
}

SelectFieldGroup = ({ id, label, options, help, error, ...props }) => {
    return (
        <FormGroup controlId={id} validationState={error ? 'error' : null}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl componentClass="select"  {...props}>
                {options.map(option=>{
                    return <option key={option.value} value={option.value}>{option.text}</option>;
                })}
            </FormControl>
            {help && <HelpBlock>{help}</HelpBlock>}
            {error && <div className="alert alert-danger">{error}</div>}
        </FormGroup>
    );
}

Input = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className} style={inputStyle}>
        {props.title}
      </FormLabel>
      <FormControl
        isInvalid={props.errors && errorsArr}
        type={props.type}
        id={props.name}
        name={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.handleChange}
      />

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}

TextAreaInput = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className}>{props.title}</FormLabel>
      <FormControl
        isInvalid={props.errors && errorsArr}
        type={props.type}
        as={props.as}
        rows={3}
        id={props.name}
        name={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.handleChange}
      />

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}

export function StrList({items = [], onAdd, onRemove, onSetValue}) {

    return (
        <>
            <div style={{ width: "100%", "float": "left" }}>

                <Button
                    onClick={() => onAdd()}
                    className="pull-left">
                    <Glyphicon glyph="plus"/>

                </Button>
                <span
                    style={{ marginLeft: 6, marginTop: 4 }}
                    className="pull-left"><Message msgId={'cadastrapp.proprietaire.proprietaires.addMoreProprietaire'}/>
                </span>
            </div>
            <div style={{ width: "100%", height: "calc(50vh - 290px)", minHeight: 96, "overflowY": "auto" }}>
                {items.map((v, index) => (
                    <div style={{ width: "100%", "float": "left" }}>
                        <FormControl
                            value={v}
                            className="pull-left"
                            style={{ width: 240, marginTop: 5, marginRight: 5 }}
                            onChange={e => onSetValue(index, e.target.value)}
                        />
                        <Button
                            style={{ marginTop: 5, marginRight: 5 }}
                            className="pull-right"
                            onClick={() => onRemove(index)}
                        >
                            <Glyphicon glyph="trash"/>
                        </Button>
                    </div>
                ))}
            </div>
        </>
    );
}

render() {

    return (
      <div style={{...styles.container}}>
        <Col mdHidden styles={styles.toolbarColumn} md={12} >
          <Row xs={12}>
            <Col xs={2}>
              {this.renderConnectButton()}
            </Col>
            <Col xs={3}>
              <FormControl
                type="text"
                value={this.state.ipAddress}
                placeholder="Enter IP Address"
                onChange={this.handleChange}
                disabled={this.props.isConnected}
              />
            </Col>
            <Col xs={3}>
              <Button
                bsStyle='primary'
                onClick={this.props.onModeSwitch}
                >
                <FontAwesomeIcon icon={faGamepad} style={styles.toolbarIcon} />
              </Button>
            </Col>
          </Row>
        </Col>
      </div>
    );
  }

enterUsername() {
    return (
      <div>
        <Form onSubmit={this.handleLogin}>
          <InputGroup>
            <FormControl
              ref={input => {
                this.usernameInput = input;
              }}
              placeholder="Enter your alias here"
              name="username"
              aria-label="username"
              aria-describedby="text"
              onChange={this.handleUsernameChange}
            />
            <InputGroup.Append>
              <Button>Submit</Button>
            </InputGroup.Append>
          </InputGroup>
        </Form>
      </div>
    );
  }

function InputText(props) {
  return (
    <InputGroup className={props.style}>
      <InputGroup.Prepend>
        <InputGroup.Text id={props.id}>{props.name}</InputGroup.Text>
      </InputGroup.Prepend>
      <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        placeholder={props.placeholder}
      />
    </InputGroup>
  );
}

createNewFileExample = props => {
	return <div>
		<h3 className={'mb-3'}>Files methods examples</h3>
		<h5 className={'mb-0'}>Create new file</h5>
		<code>createNewFile(fileName, fileBlob, parentFolderUri, options)</code>
		<Row>
			<Col md={1}>fileName: </Col>
			<Col md={4} className={'comment'}>{props.state.newFileName ? props.state.newFileName + '.txt' : 'unknown'}</Col>
		</Row>
		<Row>
			<Col md={1}>fileBlob: </Col>
			<Col md={4} className={'comment'}>{<pre
				className={'text-inline'}>{JSON.stringify(props.fileContent, null, 2)}</pre>}</Col>
		</Row>
		<div>
			<label className={'mr-2'}>parentFolderUri:</label><span className={'comment'}>{props.state.folderDetails ?
			Utils.getSelfUri(props.state.folderDetails.links) :
			<Button
				bsstyle={'btn-sm btn-primary mr-2'}
				onClick={props.getFolderDetails}>Get
			</Button>}</span>
		</div>
		<Row className={'mt-3'}>
			<Col md={5}>
				<FormGroup>
					<FormControl
						type={'text'}
						placeholder={'fileName'}
						value={props.state.newFileName}
						onChange={e => props.setState({newFileName: e.target.value})}
					/>
				</FormGroup>
			</Col>
			<Col md={2}>
				<Button
					bsstyle={'btn btn-primary mr-2 btn-loading'}
					onClick={props.createNewFile}
					disabled={!props.state.folderDetails || !props.state.newFileName || props.state.creatingNewFile}
				>
					{props.state.creatingNewFile && <i className={'fas fa-spinner fa-spin'}/>} Create
				</Button>
			</Col>
		</Row>
	</div>
}

editFileExample = props => {
	const file = props.state.editFile
	const content = (file && file.content) || ''
	return <div>
		<h5 className={'mb-0'}>Update file</h5>
		<code>updateFile(fileName, fileBlob, lastModified, overwrite, options)</code>
		<div>If overwrite = <span className={'text-danger'}>false</span> you will be notified if file was edited in the
			meantime
		</div>
		<div>
			<label className={'mr-2'}>file:</label><span className={'comment'}>{file && file.name + '.txt'}</span>
		</div>
		<Row className={'mt-3'}>
			<Col md={5}>
				<FormGroup>
					<FormControl
						as="textarea" rows="3"
						value={content}
						onChange={e => {
							let v = e.target.value
							const editFile = props.state.editFile
							editFile.content = v
							props.setState({editFile})
						}}
					/>
				</FormGroup>
			</Col>
			<Col md={2}>
				<button
					className={'btn btn-primary mr-2 btn-loading'}
					onClick={props.updateFile}
					disabled={!file || !file.name || !file.content}
				>
					{props.state.updatingFile && <i className={'fas fa-spinner fa-spin'}/>} Update
				</button>
			</Col>
		</Row>
		{props.state.editFileError && <div className={'text-danger'}>props.state.editFileError</div>}
	</div>
}

render() {
    // Renders the chat messages
    const messages = this.state.messages;
    const message = messages.map(item => {
        return (
            <Grid>
                {message}
                <Row className="show-grid">
                    <Col xs={12}>
                        <div className="chatmessage-container">
                            <div key={item.id} className="message-box">
                                <p><strong>{item.username}</strong></p>
                                <p>{item.message}</p>
                                </div>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            })
            // Renders the input form where the message to be sent is typed.
            return (
                <Grid>
                    <Row className="show-grid">
                        <Col xs={12}>
                        {message}
                        <div className="chat-container">
                            <form onSubmit={this.sendMessage}>
                                <Col xs={5} xsOffset={3}>
                                    <FormControl
                                        type="text"
                                        value={this.state.value}
                                        placeholder="Enter message here"
                                        onChange={this.handleChange}
                                    />
                                </Col>
                                <Col xs={4}>
                                    <input className="btn btn-primary" value="Send" type="submit" />
                                    </Col>
                                    </form>
                                    <h4 className="text-center">Welcome, {this.state.username}</h4>
                                    <h5 className="text-center">Begin chatting here.</h5>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            }

Home = () => (
  <>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Comfortaa"
    />
    <div style={globalFont}>
      <section style={titleSection}>
        <img src={gourmetLogo} style={headerLogoStyle} alt="Gourmet Inc Logo" />
        <h1 style={headwelcome}>
          Welcome to the Gourmet Inc. Promotions Manager Website
        </h1>
      </section>
      <section style={servicesSection}>
        <Grid style={servicesGrid}>
          <Row style={servicesTitle}>
            <h2 style={servicesGridH2}>Services:</h2>
            <h2 style={servicesGridSub}>What we offer</h2>
          </Row>
          <Row>
            <Col md={4}>
              <img src={cloud} alt="cloud icon" style={cloudIcon} />
              <h4 style={serviceTitle}>Platforms</h4>
              <p style={serviceDescription}>
                We support all social media platforms
              </p>
            </Col>
            <Col md={4}>
              <img src={gear} alt="gear icon" />
              <h4 style={serviceTitle}>Functionality</h4>
              <p style={serviceDescription}>We have many awesome features</p>
            </Col>
            <Col md={4}>
              <img src={heart} alt="heart icon" style={heartIcon} />
              <h4 style={serviceTitle}>Passion</h4>
              <p style={serviceDescription}>
                Made with love by passionate marketers
              </p>
            </Col>
          </Row>
        </Grid>
      </section>
      <section style={pricingDiv}>
        <h1 style={pricingHeader}>Pricing:</h1>
        <h3>We offer the most competitive pricing</h3>
      </section>
      <section style={signUpSection}>
        <Grid style={signUpDiv}>
          <Row>
            <Col style={signUpSectionCol}>
              <h2 style={signUpHeader}>Sign up for a FREE trial</h2>
              <p style={signUpText}>
                The Promotions Manager is launching soon. Leave your email at
                the bottom to get a FREE 60 days trial when we launch
              </p>
              <Form inline>
                <FormControl type="text" placeholder="Enter your email" />
                <div style={btnCtaStyle}>
                  <Button bsStyle="success" style={signUpButtonStyle}>
                    SIGN ME UP
                  </Button>
                </div>
              </Form>
            </Col>
          </Row>
        </Grid>
      </section>
    </div>
  </>
)

SearchBar = () => {
  const [animeName, setAnimeName] = useState("");

  const handleChange = (event) => {
    setAnimeName(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // directing to a new page, that is routed to cards' component
    window.location = `/anime/cards/${animeName}`;
  };

  const onClick = (event) => {
    event.preventDefault();
    window.location = "/";
  };

  return (
    <div className={styles.container}>
      <Navbar className={styles.nav}>
        <span className={styles.span} onClick={onClick}>
          Anime Tracker App
        </span>
        <div className={styles.searchBar}>
          <Form inline onSubmit={handleSubmit}>
            <FormControl
              onChange={handleChange}
              type="text"
              placeholder="Anime"
              className=" mr-sm-2"
            />
            <Button className={styles.button} type="submit">
              Enter
            </Button>
          </Form>
        </div>
      </Navbar>
    </div>
  );
}

ContentUpgradeLayout = ({
    onClick,
    libraries,
    showConfirm,
    onConfirm,
    upgradeComplete,
    onToggleConfirm,
    onUndoUpgrade,
    percentProgress,
    inProgress,
    translations,
    selectedLibraryId,
}) => {
    return (
        <div className="upgradeVersionContainer">
            {(upgradeComplete !== true && inProgress !== true) && (
                <>
                    <FormGroup controlId="formControlsSelect">
                        <FormControl
                            componentClass="select"
                            onChange={onClick}
                            value={selectedLibraryId}
                        >
                            <option value="">{translations.selectVersion}</option>
                            {libraries.map((library, index) => {
                                return (
                                    <option key={index} value={library.id}>{library.version}</option>
                                );
                            })}
                        </FormControl>
                    </FormGroup>
                    <ModalWindow
                        show={showConfirm}
                        onHide={onToggleConfirm}
                        header={
                            <div>
                                {translations.confirmation}
                            </div>
                        }
                        footer={
                            <div>
                                <Button onClick={onConfirm} bsStyle="success">
                                    {translations.yes}
                                </Button>
                                <Button onClick={onToggleConfirm} bsStyle="danger">
                                    {translations.no}
                                </Button>
                            </div>
                        }
                    >
                        {translations.upgradeConfirmation}
                    </ModalWindow>
                </>
            )}
            {(inProgress === true || upgradeComplete === true) && (
                <>
                    <ControlLabel>{translations.progress}</ControlLabel>
                    <ProgressBar
                        now={percentProgress}
                        label={`${percentProgress}%`}
                    />
                </>
            )}
            {upgradeComplete === true && (
                <div className="contentupgrade-complete">
                    <div>{translations.undoTextHTML}</div>
                    <Button
                        bsStyle="danger"
                        onClick={onUndoUpgrade}
                    >
                        {translations.undo}
                    </Button>
                </div>
            )}
        </div>
    );
}

DropDownInput = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className}>{props.title}</FormLabel>

      <FormControl
        isInvalid={props.errors && errorsArr}
        as={props.as}
        id={props.name}
        name={props.name}
        value={props.value}
        onChange={props.handleChange}
        multiple={props.multiple && "multiple"}
      >
        {!props.multiple && (
          <option value="" disabled>
            Select
          </option>
        )}
        {props.options.map((option) => {
          return (
            <option key={option.id} value={option.name}>
              {option.name}
            </option>
          );
        })}
      </FormControl>

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}

AppSearchField = () => {
  const { chain } = useContext(Store);
  const [value, setValue] = useState('');
  const history = useHistory();

  useEffect(() => {
    setValue('');
  }, [chain]);

  const handleSearch = async (event) => {
    event.preventDefault();
    const target = value.trim().toLocaleLowerCase();
    const reg = new RegExp(chain, 'gi');

    if (target.length === 64) {
      const resp = await API.getTransactionDetails(target);
      if (resp.data.hash) {
        history.push(`/${chain.value}/transaction/${target}`, resp.data);
        setValue('');
      }
    } else if (
      reg.test(target) &&
      target.replace(chain.value, '').length === 39
    ) {
      const resp = await API.getAccountDetails(target);

      history.push(`/${chain.value}/account/${target}`, resp.data);
      setValue('');
    } else if (Number(target)) {
      const resp = await API.getBlockDetails(target);

      if (resp.data.hash) {
        history.push(`/${chain.value}/block/${target}`, resp.data);
        setValue('');
      }
    }
  };

  return (
    <SearchFieldStyled>
      <Container>
        <Form onSubmit={handleSearch}>
          <InputGroup className="mt-2 mb-2">
            <Btn type="submit">
              <FontAwesomeIcon icon={['fa', 'search']} />
            </Btn>
            <FormControl
              placeholder="Search by Address, TxHash, Block Height"
              aria-label="Username"
              aria-describedby="basic-addon1"
              // onChange={handleSearch}
              onChange={(e) => setValue(e.target.value)}
              value={value}
            />
            {value && (
              <Btn onClick={() => setValue('')}>
                <FontAwesomeIcon icon={['fa', 'times']} />
              </Btn>
            )}
          </InputGroup>
        </Form>
      </Container>
    </SearchFieldStyled>
  );
}

export default function Address({values, setValue = () => {}}) {
    useEffect(()=> {isEmpty(values) && setValue('dindic', '');}, [values]);
    return (<>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.city'}/></ControlLabel>
            </div>
            <div className="form-col">
                <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.cityExample'}/></div>
            </div>
        </div>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.town'}/></ControlLabel>
            </div>
            <div className="form-col">
                <RoadCombo value={values?.road} disabled={!values?.commune} cgocommune={values?.commune?.cgocommune} onSelect={v => setValue('road', v)}/>
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.townExample'}/></div>
            </div>
        </div>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.street'}/></ControlLabel>
            </div>
            <div className="form-col">
                <FormControl value={values?.dnvoiri ?? ""} style={{ height: 34, width: 100, "float": "left" }} type="text" bsSize="sm" onChange={v => setValue('dnvoiri', v.target.value)}/>
                <div className="pull-left">
                    <DropdownList
                        style={{ width: 100, marginLeft: 5 }}
                        valueField="value"
                        textField="label"
                        value={values?.dindic}
                        onSelect={(v) => {
                            setValue('dindic', v.value);
                        }}
                        data={options}
                    />
                </div>
                <div style={{ "float": "left", marginLeft: 5, marginTop: 5 }} className="text-muted "><Message msgId={'cadastrapp.parcelle.streetExample'}/></div>
            </div>
        </div>
    </>);
}

export default function Lot({ values = {}, setValue = () => {}}) {
    const onDrop = files => {
        setValue('parcelle', undefined); // mutual exclusion
        setValue("file", files[0]);
    };
    const removeFile = (event) => {
        setValue("file", undefined);
        event.stopPropagation();
        event.preventDefault();
    };
    const setParcelle = (parcelle) => {
        setValue("file", undefined); // mutual exclusion
        setValue('parcelle', parcelle);
    };
    const fileName = values.file?.name;
    // const dropMessage = "Drag and drop the CSV file here or click to select";
    return (<>
        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.lot.title'}/></ControlLabel>
            </div>
            <div className="form-col">
                <FormControl componentClassName="textarea"
                    type="text" bsSize="sm" value={values?.parcelle ?? ""} onChange={v => setParcelle(v.target.value)}/>
                <div className="text-muted"><Message msgId={'cadastrapp.parcelle.lot.example'}/></div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel/>
            </div>
            <div className="form-col">
                <div style={{ textAlign: "center" }} className="text-muted">or</div>
            </div>
        </div>

        <div className="item-row">
            <div className="label-col">
                <ControlLabel><Message msgId={'cadastrapp.parcelle.file.title'}/></ControlLabel>
            </div>
            <div className="form-col" style={{position: 'relative'}}>
                <DropZone
                    accept={["text/csv", "text/plain", ".csv"]}
                    style={dropZoneStyle}
                    activeStyle={dropZoneActiveStyle}
                    multiple={false}
                    onDrop={onDrop}>
                    {fileName ? <span><Glyphicon glyph="remove" onClick={removeFile} /> {fileName} </span> : <Message msgId={'cadastrapp.parcelle.file.example'}/>}
                </DropZone>
                <div
                    style={{ width: "100%", "float": "left" }}
                    className="text-muted"><Message msgId={'cadastrapp.parcelle.file.explanation'}/></div>
            </div>
        </div>
    </>);
}

export default function CoownershipSearch({ loading, onSearch = () => { }, onOwnersSearch = () => {} }) {
    const [searchState, setFormState, resetFormState] = useFormState();
    const values = searchState[SEARCH_TYPES.COOWNER];
    const setValue = (k, v) => setFormState(SEARCH_TYPES.COOWNER, k, v);
    return (
        <div className="coownership-search">
            <h3><Message msgId={'cadastrapp.search.copropriete.title'}/></h3>
            <div style={{padding: "10px", height: 242}}>
                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.parcelle.city'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <MunicipalityCombo value={values?.commune} onSelect={v => setValue('commune', v)} />
                        <div className="text-muted"><Message msgId={'cadastrapp.parcelle.cityExample'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.proprietaire.name.title'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <ProprietaireCombo
                            value={values?.proprietaire}
                            disabled={!values?.commune}
                            cgocommune={values?.commune?.cgocommune}
                            onSelect={v => setValue('proprietaire', v)}
                            onChange={v => setValue('proprietaire', v)}
                        />
                        <div className="text-muted"><Message msgId={'cadastrapp.proprietaire.name.example'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.search.copropriete.parcelle.ident'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <FormControl value={values?.parcelle ?? ""} onChange={e => setValue('parcelle', e.target.value)} type="text" bsSize="sm"/>
                        <div className="text-muted"><Message msgId={'cadastrapp.parcelle.ident.example'}/></div>
                    </div>
                </div>

                <div className="item-row">
                    <div className="label-col">
                        <ControlLabel><Message msgId={'cadastrapp.search.copropriete.comptecommunal.ident'}/></ControlLabel>
                    </div>
                    <div className="form-col">
                        <FormControl value={values?.comptecommunal ?? ""} onChange={e => setValue('comptecommunal', e.target.value)} type="text" bsSize="sm"/>
                        <div className="text-muted"><Message msgId={'cadastrapp.search.copropriete.comptecommunal.example'}/></div>
                    </div>
                </div>
            </div>
            <SearchButtons
                loading={loading}
                valid={isSearchValid(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER])}
                onClear={() => resetFormState(SEARCH_TYPES.COOWNER)}
                onSearch={() => {
                    if (isString(searchState[SEARCH_TYPES.COOWNER]?.proprietaire) && !values?.parcelle) {
                        onOwnersSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
                    } else {
                        // plot search
                        onSearch(SEARCH_TYPES.COOWNER, searchState[SEARCH_TYPES.COOWNER]);
                    }
                }}/>
        </div>
    );
}

render() {

        const {tokens: {convertibleTokens, fromPathListWithRate, toPathListWithRate, fromPathLoading, toPathLoading}} = this.props;

        const {selectedFromIdx, selectedToIdx, searchFromToken, searchToToken, fromConvertibleTokens,
        toConvertibleTokens, fromToken, toToken} = this.state;

        const self = this;
        let fromTokenSelector = <span/>;
        let toTokenSelector = <span/>;
        if (convertibleTokens && convertibleTokens.length > 0) {
        fromTokenSelector = <div>
        
        <FormControl type="text" placeHolder="Search" value={searchFromToken} onChange={this.searchFromTokenChanged}/>
         <ListGroup className="token-selector-list">
        {fromConvertibleTokens.map(function(item, idx){
            let itemActive = "";
            if (idx === selectedFromIdx) {
                itemActive = "cell-active";
            }
            let itemName =  item.name.length > 10 ? item.name.substr(0, 10) + "..." :  item.name;
            return (<ListGroupItem key={`from-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.fromTokenChanged.bind(self, idx)}>
            <div>
            <img src={item.imageURI} className="symbol-image"/>
            <div className="item-symbol">{item.symbol}</div>
            </div>
            <div className="">
               {itemName}
            </div>
            </ListGroupItem>)
        })}
        </ListGroup>
        </div>;

         toTokenSelector = <div>
        <FormControl type="text" placeHolder="Search" value={searchToToken} onChange={this.searchToTokenChanged}/>
         <ListGroup className="token-selector-list">{toConvertibleTokens.map(function(item, idx){
            let itemActive = "";
            if (idx === selectedToIdx) {
                itemActive = "cell-active";
            }
            let itemName =  item.name.length > 10 ? item.name.substr(0, 10) + "..." :  item.name;
            return (<ListGroupItem key={`to-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.toTokenChanged.bind(self, idx)}>
            <div>
            <img src={item.imageURI} className="symbol-image"/>
            <div className="item-symbol">{item.symbol}</div>
            </div>
            <div>
               {itemName}
            </div>
            </ListGroupItem>)
        })}</ListGroup>
        </div>
        }

        return (
             <Row className="explore-token-container">
             <Col lg={2} xs={2} className="left-list-group">
               {fromTokenSelector}
             </Col>
             <Col lg={8} xs={8} className="explore-paths-container">
               <ViewPaths
               fromToken={fromToken} toToken={toToken} fromPathLoading={fromPathLoading} toPathLoading={toPathLoading}
               fromPathListWithRate={fromPathListWithRate}
               toPathListWithRate={toPathListWithRate} transferAmountChanged={this.transferAmountChanged}
               submitSwap={this.props.submitSwap} setProviderNotification={this.props.setProviderNotification}/>
             </Col>
             <Col lg={2} xs={2} style={{'paddingLeft': 0}} className="right-list-group">
                {toTokenSelector}
             </Col>
            </Row>
            )
    }

render() {
    const {pool: {currentSelectedPool}} = this.props;
    const {selectedTokenToAdd, selectedTokenToLiquidate, amountTokenToAdd, amountTokenToLiquidate} = this.state;
    const self = this;
    let reservesList = 
    <div>
    <ButtonGroup aria-label="Add Liquidity Token">{
    currentSelectedPool.reserves.map(function(item, idx){
    let btnIsActive = '';
    
    if (item.address === selectedTokenToAdd.address) {
      btnIsActive = 'active-select-btn';
    }

      return (<Button key={`add-liquidity-token-${idx}`} onClick={()=>self.addLiquidityTokenSelected(item)} className={`${btnIsActive}`}>
      {item.symbol}
      </Button>)
    })}
    </ButtonGroup>
    <InputGroup>
     <FormControl type="text" value={amountTokenToAdd}  onChange={this.addLiquidityAmountChanged}/>
      <InputGroup.Append>
        <InputGroup.Text id="btnGroupAddon2">{selectedTokenToAdd.symbol}</InputGroup.Text>
      </InputGroup.Append>
    </InputGroup>
    <Button onClick={this.addPoolLiquidity}>Add</Button>
    </div>;
    
    let removeLiquidityReserveList = 
    <div>
    <ButtonGroup aria-label="Remove liquidity token">{
    currentSelectedPool.reserves.map(function(item, idx){
    let btnIsActive = '';
    if (item.address === selectedTokenToLiquidate.address) {
      btnIsActive = 'active-select-btn';
    }
      return (<Button key={`remove-liquidity-token-${idx}`} onClick={()=>self.removeLiquidityTokenSelected(item)} className={`${btnIsActive}`}>
      {item.symbol}
      </Button>)
    })}
    </ButtonGroup>
    <InputGroup>
        <FormControl type="text" value={amountTokenToLiquidate} onChange={this.removeLiquidityAmountChanged}/>
        <InputGroup.Append>
        <InputGroup.Text id="btnGroupAddon2">{selectedTokenToLiquidate.symbol}</InputGroup.Text>
      </InputGroup.Append>
    </InputGroup>
    <Button onClick={this.removePoolLiquidity}>Remove</Button>
    </div>;
    
    return (
      <div>
      <Col lg={12}>
      <Row>
      <Col lg={6}>
      <div>
        Select Reserve to stake
        {reservesList}
      </div>
      </Col>
      <Col lg={6}>
        Remove Liquidity
         {removeLiquidityReserveList}
      </Col>
      </Row>
      </Col>
      </div>
      )
  }

function SocialModal() {
	return (
		<Social>
			<Container>
				<SocialIcons>
					<Icon label='github'>
						<AiOutlineGithub size={35} />
						<CustomLink href='https://github.com/pranjaljain0' target='_blank'>
							@pranjaljain0
						</CustomLink>
					</Icon>
					<Icon label='linkedin'>
						<AiOutlineLinkedin size={35} />
						<CustomLink
							href='https://www.linkedin.com/in/pranjaljain0/'
							target='_blank'>
							@pranjaljain0
						</CustomLink>
					</Icon>
				</SocialIcons>

				<InputGroup className='mb-3'>
					<FormControl
						placeholder='Full name'
						aria-label='Name'
						aria-describedby='basic-addon1'
					/>
				</InputGroup>

				<InputGroup className='mb-3'>
					<FormControl
						placeholder='Email address'
						aria-label='Email'
						aria-describedby='basic-addon1'
					/>
				</InputGroup>

				<InputGroup>
					<FormControl
						as='textarea'
						aria-label='With textarea'
						placeholder='Write some description'
						style={{
							resize: 'none',
							height: 100,
						}}
					/>
				</InputGroup>

				<ButtonForm>
					<Button variant='outline-secondary' className='float-right'>
						Submit
					</Button>
				</ButtonForm>
			</Container>
		</Social>
	)
}

export function TopShotNav() {
  const [error, setError] = useState(null)
  const [accountAddress, setAccountAddress] = useState("")
  const [seriesSets, setSeriesSets] = useState(null)
  useEffect(() => {
    getTopshotOverview()
      .then((d) => {
        console.log(d)
        setSeriesSets(splitSets(d.sets))
      })
      .catch(setError)
  }, [])
  return (
    <Navbar bg="dark" variant="dark" expand="md" sticky="top">
      <Navbar.Brand href="/">
        {error ? <Red>Topshot Explorer</Red> : "Topshot Explorer"}
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/plays">Plays</Nav.Link>
          {seriesSets && Object.entries(seriesSets).map(
            ([series, sets],i) => {
              return (
                <NavDropdown key={series} title={`s${series} sets`} id="basic-nav-dropdown">
                {sets.map((s) => {
                    return (
                      <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                        {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                      </NavDropdown.Item>
                    )
                  })}
              </NavDropdown>
                  )
            }
          )
          }
          {/* <NavDropdown title="Sets" id="basic-nav-dropdown">
            {topshotOverview &&
              topshotOverview.sets.map((s) => {
                return (
                  <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                    {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                  </NavDropdown.Item>
                )
              })}
          </NavDropdown> */}
        </Nav>
        <Form inline>
          <FormControl
            type="text"
            placeholder="0xAccountID"
            onChange={(event) => {
              setAccountAddress(event.target.value)
            }}
            className="mr-sm-2"
          />
          <Button variant="outline-success" href={"/account/" + accountAddress}>
            Get Account
          </Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  )
}

render() {
    const { roomId } = this.state;

    return (
      <div>
        <h2>Create New Room</h2>
        <Form onSubmit={this.handleSubmit}>
          <InputGroup>
            <FormControl
              readOnly
              name="roomId"
              value={roomId}
              aria-label="roomId"
              aria-describedby="text"
            />
          </InputGroup>
          <br />
          <h6>Add password to keep it exclusive</h6>
          <InputGroup>
            <FormControl
              ref={input => {
                this.roomIdInput = input;
              }}
              placeholder="Optional: Enter room password"
              name="password"
              aria-label="password"
              aria-describedby="password"
              onChange={this.handleDataChange}
            />
          </InputGroup>
          <br />
          <br />
          <h4>Game Settings</h4>
          <br />
          <h6>Max Time per chance </h6>
          <InputGroup>
            <FormControl
              type="number"
              placeholder="Default: 120"
              name="max-timer-limit"
              aria-label="max-timer-limit"
              aria-describedby="max-timer-limit"
              onChange={this.handleDataChange}
            />
            <InputGroup.Append>
              <InputGroup.Text id="time-prefiz">seconds</InputGroup.Text>
            </InputGroup.Append>
          </InputGroup>
          <br />
          <h6>Max Players Per Team</h6>
          <InputGroup>
            <FormControl
              type="number"
              placeholder="Default: 14"
              name="max-players-limit"
              aria-label="max-players-limit"
              aria-describedby="max-players-limit"
              onChange={this.handleDataChange}
            />
            <InputGroup.Append>
              <InputGroup.Text id="players-prefix">players</InputGroup.Text>
            </InputGroup.Append>
          </InputGroup>
          <br />
          <InputGroup>
            <InputGroup.Append>
              <Button variant="light" type="submit">
                Create
              </Button>
            </InputGroup.Append>
          </InputGroup>
        </Form>
      </div>
    );
  }

render() {
    return (
      <div>
        <h2>Enter Room ID</h2>
        <div>
          <Form onSubmit={this.handleSubmit}>
            <InputGroup>
              <FormControl
                ref={input => {
                  this.roomIdInput = input;
                }}
                placeholder="Enter the RoomID here"
                aria-label="roomId"
                name="roomId"
                aria-describedby="text"
                onChange={this.handleDataChange}
              />
            </InputGroup>
            <br />
            Leave blank if no password
            <InputGroup>
              <FormControl
                placeholder="Enter room password"
                name="password"
                aria-label="password"
                aria-describedby="password"
                onChange={this.handleDataChange}
              />
            </InputGroup>
            <br />
            <InputGroup>
              <InputGroup.Append>
                <Button variant="light" type="submit">
                  Join
                </Button>
              </InputGroup.Append>
            </InputGroup>
          </Form>
        </div>
      </div>
    );
  }

Farms = (props) => {
  const [sortValue, setSortValue] = useState(FARM_SORT_OPTIONS.APR);
  const [floaterValue, setFloaterValue] = useState({});
  const [searchValue, setSearchValue] = useState('');
  const [tabChange, setTabChange] = useState(FARM_TAB.ALL);
  const [isSelected, setIsSelected] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [showConfirmTransaction, setShowConfirmTransaction] = useState(false);

  function toggleHidden() {
    setIsOpen(!isOpen);
  }
  function setSelectTitle(e) {
    setSortValue(e.target.value);
    toggleHidden();
  }

  // * Initial Call
  useEffect(() => {
    if (props.activeFarms.length === 0 || props.inactiveFarms.length === 0) {
      const farmsWithoutData = populateFarmsWithoutData();
      props.populateEmptyFarmsData(farmsWithoutData);
    }
  }, []);

  const handleClose = () => {
    setShowConfirmTransaction(false);
  };

  useEffect(() => {
    const fetchData = () => {
      props.getFarmsData(props.isActiveOpen);
      props.getUserStakes(props.userAddress, 'FARMS', props.isActiveOpen);
      props.getHarvestValues(props.userAddress, 'FARMS', props.isActiveOpen);
      props.fetchUserBalances(props.userAddress);
    };

    fetchData();
    const backgroundRefresh = setInterval(() => {
      fetchData();
    }, 60 * 1000);

    return () => clearInterval(backgroundRefresh);
  }, [props.isActiveOpen, props.userAddress, props.rpcNode]);

  const sortFarmsFunc = useCallback(
    (a, b) => {
      if (sortValue === FARM_SORT_OPTIONS.APR) {
        return Number(a.values?.APR) < Number(b.values?.APR) ? 1 : -1;
      }

      if (sortValue === FARM_SORT_OPTIONS.TVL) {
        return Number(a.values?.totalLiquidty) < Number(b.values?.totalLiquidty) ? 1 : -1;
      }

      if (sortValue === FARM_SORT_OPTIONS.REWARDS) {
        const a1 = Number(a.values?.rewardRate * 2880);
        const b1 = Number(b.values?.rewardRate * 2880);
        return a1 < b1 ? 1 : -1;
      }

      return 0;
    },
    [sortValue],
  );

  const filterBySearch = useCallback(
    (farm) => farm.farmData.CARD_TYPE.toLowerCase().includes(searchValue.toLowerCase()),
    [searchValue],
  );

  const filterByTab = useCallback(
    (farm) => {
      if (tabChange === FARM_TAB.CTEZ) {
        return farm.farmData.CARD_TYPE.toLowerCase().includes('ctez');
      }
      if (tabChange === FARM_TAB.NEW) {
        return farm.farmData.bannerType?.includes('info');
      }
      if (tabChange === FARM_TAB.STABLE) {
        return (
          farm.farmData.farmType?.includes('veStableAMM') || farm.farmData.farmType?.includes('xtz')
        );
      }
      if (tabChange === FARM_TAB.YOU) {
        return props.userStakes[farm.farmData.CONTRACT]?.stakedAmount > 0;
      }

      return true;
    },
    [tabChange, props.userStakes],
  );

  const filterByStaked = useCallback(
    (farm) => {
      if (!props.isStakedOnlyOpen) return true;

      return props.userStakes[farm.farmData.CONTRACT]?.stakedAmount > 0;
    },
    [props.isStakedOnlyOpen, props.userStakes],
  );

  const farmsToRender = useMemo(() => {
    const farmsInView = props.isActiveOpen
      ? props.activeFarms.slice()
      : props.inactiveFarms.slice();

    return farmsInView
      .filter(filterBySearch)
      .filter(filterByTab)
      .filter(filterByStaked)
      .sort(sortFarmsFunc);
  }, [
    filterBySearch,
    filterByTab,
    filterByStaked,
    sortFarmsFunc,
    props.activeFarms,
    props.inactiveFarms,
    props.isActiveOpen,
  ]);

  return (
    <>
      <div>
        <div>
          <div className={styles.header}>
            <Tabs
              className={`swap-container-tab ${styles.farmstab}`}
              mountOnEnter={true}
              unmountOnExit={true}
              onSelect={(e) => setTabChange(e)}
            >
              <Tab eventKey={FARM_TAB.ALL} title={FARM_TAB.ALL} />
              <Tab eventKey={FARM_TAB.NEW} title={FARM_TAB.NEW} />
              <Tab
                eventKey={FARM_TAB.STABLE}
                title={
                  <span>
                    <span className="mr-2">{FARM_TAB.STABLE}</span>
                    {tabChange === FARM_TAB.STABLE ? <StableswapImg /> : <StableswapGrey />}
                  </span>
                }
              />
              <Tab eventKey={FARM_TAB.YOU} title={FARM_TAB.YOU} />
            </Tabs>

            <div className={styles.selectForm}>
              <div className={styles.selectgroup}>
                <label htmlFor="button"> Sort by:</label>
                <button
                  id="button"
                  onClick={(ev) => toggleHidden(ev)}
                  className={`button ${styles.sortLabel}
                `}
                >
                  <span id="select-label">{sortValue}</span>
                  <span className={`material-icons ${styles.arrow} `}>keyboard_arrow_down</span>
                </button>

                <div
                  className={clsx(styles.dropdown, isOpen ? styles.show : styles.hidden)}
                  id="dropdown"
                >
                  <label className={` ${styles.sortby} ${styles.sortby} `}>SORT BY:</label>
                  <div className={styles.selectOption}>
                    <label className={styles.selectItem} htmlFor="select-apr">
                      {FARM_SORT_OPTIONS.APR}
                    </label>
                    <input
                      className={`option ${styles.option}`}
                      id="select-apr"
                      type="radio"
                      name="where"
                      value={FARM_SORT_OPTIONS.APR}
                      onClick={(ev) => setSelectTitle(ev)}
                    />
                  </div>
                  <div className={styles.selectOption}>
                    <label className={styles.selectItem} htmlFor="select-tvl">
                      {FARM_SORT_OPTIONS.TVL}
                    </label>
                    <input
                      className={`option ${styles.option}`}
                      id="select-tvl"
                      type="radio"
                      name="where"
                      value={FARM_SORT_OPTIONS.TVL}
                      onClick={(ev) => setSelectTitle(ev)}
                    />
                  </div>
                  <div className={styles.selectOption}>
                    <label className={styles.selectItem} htmlFor="select-rewards">
                      {FARM_SORT_OPTIONS.REWARDS}
                    </label>
                    <input
                      className={`option ${styles.option}`}
                      name="where"
                      id="select-rewards"
                      type="radio"
                      value={FARM_SORT_OPTIONS.REWARDS}
                      onClick={(ev) => setSelectTitle(ev)}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={` mt-4 justify-between  ${styles.header2}`}>
            <div className={styles.leftDiv}>
              <InputGroup className={styles1.searchBar}>
                <InputGroup.Prepend>
                  <InputGroup.Text className="search-icon border-right-0">
                    <BsSearch />
                  </InputGroup.Text>
                </InputGroup.Prepend>
                <FormControl
                  placeholder="Search"
                  className={`shadow-none border-left-0 ${styles1.searchBox}`}
                  value={searchValue}
                  onChange={(ev) => setSearchValue(ev.target.value)}
                />
              </InputGroup>
            </div>
            <div className={styles.selectForm1}>
              <span className={styles.sortButton} onClick={() => setIsSelected(!isSelected)}>
                Sort
                <span className={clsx('material-icons', styles.arrow, isSelected && styles.rotate)}>
                  keyboard_arrow_up
                </span>
              </span>
            </div>
            <div>
              <div className={styles.rightDiv}>
                <div>
                  <Switch
                    value={props.isActiveOpen}
                    onChange={() => props.toggleFarmsType(!props.isActiveOpen)}
                    trueLabel={'Active'}
                    falseLabel={'Inactive'}
                    inverted={true}
                  />
                </div>
              </div>
            </div>
          </div>
          {isSelected && (
            <div className={`justify-between flex ${styles.mobileSort}`}>
              <div
                onClick={() => setSortValue(FARM_SORT_OPTIONS.APR)}
                className={clsx(
                  styles.sortButton,
                  sortValue === FARM_SORT_OPTIONS.APR ? styles.addbg : styles.removebg,
                )}
              >
                {FARM_SORT_OPTIONS.APR}
              </div>
              <div
                onClick={() => setSortValue(FARM_SORT_OPTIONS.TVL)}
                className={clsx(
                  styles.sortButton,
                  sortValue === FARM_SORT_OPTIONS.TVL ? styles.addbg : styles.removebg,
                )}
              >
                {FARM_SORT_OPTIONS.TVL}
              </div>
              <div
                onClick={() => setSortValue(FARM_SORT_OPTIONS.REWARDS)}
                className={clsx(
                  styles.sortButton,
                  sortValue === FARM_SORT_OPTIONS.REWARDS ? styles.addbg : styles.removebg,
                )}
              >
                {FARM_SORT_OPTIONS.REWARDS}
              </div>
            </div>
          )}
          <div className={styles.cardsContainer}>
            {farmsToRender?.map((farm) => {
              return (
                <FarmCard
                  key={`${farm.identifier}${props.isActiveOpen ? ' active' : ''}`}
                  harvestOnFarm={props.harvestOnFarm}
                  stakeOnFarm={props.stakeOnFarm}
                  openFarmsStakeModal={props.openFarmsStakeModal}
                  openFarmsUnstakeModal={props.openFarmsUnstakeModal}
                  connectWallet={props.connectWallet}
                  unstakeOnFarm={props.unstakeOnFarm}
                  isActiveOpen={props.isActiveOpen}
                  farmCardData={farm}
                  userStakes={props.userStakes}
                  harvestValueOnFarms={props.harvestValueOnFarms}
                  userAddress={props.userAddress}
                  currentBlock={props.currentBlock}
                  harvestOperation={props.harvestOperation}
                  theme={props.theme}
                  setShowConfirmTransaction={setShowConfirmTransaction}
                  setFloaterValue={setFloaterValue}
                  setLoader={props.setLoader}
                />
              );
            })}
          </div>
        </div>
      </div>
      <StakeModal
        walletBalances={props.walletBalances}
        isActiveOpen={props.isActiveOpen}
        modalData={props.stakeModal}
        open={props.stakeModal.open}
        onClose={() => props.closeFarmsStakeModal()}
        stakeOnFarm={props.stakeOnFarm}
        stakeOperation={props.stakeOperation}
        setShowConfirmTransaction={setShowConfirmTransaction}
        setFloaterValue={setFloaterValue}
        setLoader={props.setLoader}
      />
      <UnstakeModal
        modalData={props.unstakeModal}
        currentBlock={props.currentBlock}
        open={props.unstakeModal.open}
        onClose={() => {
          props.closeFarmsUnstakeModal();
        }}
        userStakes={props.userStakes}
        isActiveOpen={props.isActiveOpen}
        unstakeOnFarm={props.unstakeOnFarm}
        unstakeOperation={props.unstakeOperation}
        setShowConfirmTransaction={setShowConfirmTransaction}
        setFloaterValue={setFloaterValue}
        setLoader={props.setLoader}
      />
      <ConfirmTransaction
        show={showConfirmTransaction}
        theme={props.theme}
        content={
          floaterValue.type === 'Harvest'
            ? `${floaterValue.type} ${floaterValue.value} ${floaterValue.pair}  `
            : `${floaterValue.type} ${Number(floaterValue.value).toFixed(6)} ${
                floaterValue.pair
              } LP `
        }
        onHide={handleClose}
      />
      <FarmModals
        setLoader={props.setLoader}
        type={floaterValue.type}
        pair={floaterValue.pair}
        value={floaterValue.value}
        theme={props.theme}
        content={
          floaterValue.type === 'Harvest'
            ? `${floaterValue.type} ${floaterValue.value} ${floaterValue.pair}  `
            : `${floaterValue.type} ${Number(floaterValue.value).toFixed(6)} ${
                floaterValue.pair
              } LP `
        }
      />
    </>
  );
}