@fortawesome/free-solid-svg-icons#faChevronDown JavaScript Examples

Accordion = ({ titles, children }) => {
  const [currentTab, setCurrentTab] = useState(0);
  return (
    <Fragment>
      {children.map((child, ix) => {
        const isCurrent = ix === currentTab;
        return (
          <Fragment key={ix}>
            <div
              className={`bg-${
                isCurrent ? "primary" : "secondary"
              } ps-1 text-white w-100 mt-1`}
              onClick={() => setCurrentTab(ix)}
            >
              <span className="w-1em">
                {isCurrent ? (
                  <FontAwesomeIcon icon={faChevronDown} />
                ) : (
                  <FontAwesomeIcon icon={faChevronRight} />
                )}
              </span>
              {child.props.accordiontitle || titles[ix]}
            </div>
            {isCurrent ? child : null}
          </Fragment>
        );
      })}
    </Fragment>
  );
}

render() {
    return (
      <div className={this.state.class}>
        <button
          title="back to top"
          onClick={() => {
            this.scrollToTop()
          }}
          className={styles.scrollUp}
        >
          <FontAwesomeIcon icon={faChevronUp} size="1x" />
        </button>
        <button
          title="down"
          className={styles.scrollDown}
          onClick={() => {
            this.scrollStepDown()
          }}
        >
          <FontAwesomeIcon icon={faChevronDown} size="1x" />
        </button>
      </div>
    )
  }

Companies = ({companies, showMore,showItems}) => {
  const companyList = companies.length ? (
    companies.slice(0,showItems).map(company => {
      return (
       
        <div className="addComp_collection-item" key={company.id}>
          <div className="addComp_gridComp">
            <img src={Empty} alt="default"/>
          </div>
          <div className="addComp_gridComp">
          <p>Name : {company.name}</p>
          <p>Category : {company.category}</p>
          <a href={company.link}>Link : {company.link}</a>
          </div>
          
          {/* <span onClick={() => {deleteCompany(company.id)}}>{company.content}</span> */}
        </div>
      )
    })
  ) : (
    <p className="center">No companies to show</p>
  );

  return (
    <div className="addComp_bgw1">
      <div className="grid-item">
        <h4 style={{fontWeight:600}}>COMPANIES</h4>
        <div className="addComp_list">
        {companyList}
        <div className="addComp_more addComp_center">
        <button className="addComp_downIcon" onClick={ showMore} > <FontAwesomeIcon icon={faChevronDown} /></button></div>
        </div>
      
      </div>
    
    </div>
  )
}

library.add(
  faBars,
  faTimes,
  faChevronDown,
  faChevronUp,
  faCalendarAlt,
  faTelegramPlane,
  faTwitter,
  faMediumM,
  faRedditAlien,
  faQuestionCircle,
  faCheck,
  faSearch,
);

ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}

render() {
    let Selected;
    switch (this.props.type) {
      case 'paragraph':
        Selected = Paragraph;
        break;
      case 'header':
        Selected = Header;
        break;
      default:
        Selected = Span;
        break;
    }
    return (
      <Selected {...this.props} data-dropdownopen={JSON.stringify(this.state.dropdownOpen)}>
        {this.props.children}
        {this.props.dropdown && <>
          <DropdownIcon icon={this.state.dropdownOpen ? faChevronDown : faChevronRight} size="sm" onClick={this.toogleDropdown} />
          <DropdownContent {...this.props} className="dropdownContent">
            {this.props.dropdown}
          </DropdownContent>
        </>}
      </Selected>
    )
  }

TokenSelect = ({ token, loading, onClick }) => (
    <RootFlex alignItems="center" onClick={onClick}>
        {loading ? (
            <>
                <Box mr="4px">
                    <Spinner size={16} />
                </Box>
                <LabelBox>
                    <FormattedMessage id="token.select.loading" />
                </LabelBox>
            </>
        ) : (
            <>
                {token ? (
                    <>
                        <Box mr="4px" display="flex" alignItems="center">
                            <TokenIcon
                                address={token.address || "ETH"}
                                size={16}
                            />
                        </Box>
                        <LabelBox>{token.symbol}</LabelBox>
                    </>
                ) : (
                    <LabelBox>
                        <FormattedMessage id="token.select.action.select" />
                    </LabelBox>
                )}
                <Box ml="4px" display="flex" alignItems="center">
                    <ChevronIcon icon={faChevronDown} />
                </Box>
            </>
        )}
    </RootFlex>
)

Dropdown = props => {
  const { selectedItems, onChangeSelected } = props;
  const [activeState, setActiveState] = useState(false)
  return (
    <div className={styles.dropdown}>
      <div
        className={styles.dropdown__label}
        onClick={ () => 
          !activeState && window.setTimeout(() => {
            setActiveState(prevActiveState => !prevActiveState)
          }, 10)
        }
        role="button"
        tabIndex="0"
      >
        {props.title} <FontAwesomeIcon className="icon-right" icon={activeState ? faChevronUp : faChevronDown} />

      </div>
      {activeState && (
        <div className={styles.dropdown__menu}>
          <OutsideClickHandler
            onOutsideClick={ () => 
              window.setTimeout(() => {
                setActiveState(prevActiveState => !prevActiveState)
              }, 10)
            }
          >
            <ul className={styles.dropdown__menu_list}>
              {props.options.map((option, index) => {
                let selected = false;
                if (typeof option === 'string') {
                  selected = selectedItems.indexOf(option) !== - 1 ? true : false
                } else {
                  selected = JSON.stringify(selectedItems) === JSON.stringify(option) ? true : false
                }
                
                return (
                  <li
                    // className={styles.dropdown__menu-option}
                    key={`option-${index}`}>
                    <ItemOptions
                      item={option}
                      selected={selected}
                      onChangeSelected={() => onChangeSelected(option)}
                    />
                  </li>
                )
              })}
            </ul>
          </OutsideClickHandler>
        </div>
      )}
    </div>
  )
}

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

Header = () => {
  return (
    <div className="header">
      <div className="header__row">
        {/* Left Side Buttons */}
        <div className="header__column">
          <button className="header__newButton">
            <FontAwesomeIcon icon={faPlusSquare} className="icon" />
            New
          </button>
          <button className="header__button">Import</button>
          <button className="header__button">Runner</button>
          <button className="header__button">
            <FontAwesomeIcon icon={faFileImport} className="icon" />
          </button>
        </div>
        {/* Center Content */}
        <div className="header__column">
          <div className="header__titleWrapper">
            <FontAwesomeIcon icon={faThLarge} id="header__titleIcon" />
            <span className="header__titleText">My workspace</span>
            <FontAwesomeIcon
              icon={faChevronDown}
              className="header_titleDropDownIcon"
            />
            <button className="header__button" id="header__inviteButton">
              <FontAwesomeIcon icon={faUserPlus} className="icon" />
              Invite
            </button>
          </div>
        </div>
        {/* Right Side Content */}
        <div className="header__column">
          <div className="header__iconWrapper">
            <FontAwesomeIcon
              icon={faSyncAlt}
              className="header__iconButton active"
            />
            <FontAwesomeIcon
              icon={faSatelliteDish}
              className="header__iconButton"
            />
            <FontAwesomeIcon icon={faWrench} className="header__iconButton" />
            <FontAwesomeIcon icon={faBell} className="header__iconButton" />
            <FontAwesomeIcon icon={faHeart} className="header__iconButton" />
            <FontAwesomeIcon
              icon={faMicrochip}
              className="header__iconButton"
            />
            <button className="header__button" id="header__upgradeButton">
              Upgrade
              <FontAwesomeIcon icon={faChevronDown} style={{ marginLeft: 5 }} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

TopicLinks = ({topics, activeTopic, activeDoc}) => {

  const [expanded, setExpanded] = useState(activeTopic)
  const [hoverType, setHoverType] = useState('')
  const [currentHover, setCurrentHover] = useState('')

  const onTopicMouseEnter = (topic) => {
    setCurrentHover(topic)
    setHoverType('topic')
  }

  const onDocMouseEnter = (doc) => {
    setCurrentHover(doc)
    setHoverType('doc')
  }

  const onMouseLeave = () => {
    setCurrentHover('')
    setHoverType('')
  }

  useEffect(() => console.log('render'))

  return (
    <div>
      {Object.keys(topics).map((topic, index) => (
        <div key={index} className='px-2'>
          <div 
            className={`d-flex w-100 rounded p-1 ${currentHover === topic && hoverType === 'topic'? 'bg-light' : ''} ${activeTopic === topic? 'text-primary' : ''}`} 
            style={{ cursor: 'pointer' }} 
            onClick={() => setExpanded(topic === expanded? '': topic)}
            onMouseEnter={() => onTopicMouseEnter(topic)}
            onMouseLeave={onMouseLeave} >
            <div className='mr-auto'>{topic}</div>
            <div><FontAwesomeIcon icon={topic === expanded? faChevronUp : faChevronDown} /></div>
          </div>
          <div className={`pl-2 ${topic !== expanded? 'd-none' : ''}`} >
            {topics[topic].map(({title, id}, index) => (
              <Link key={index} href='/docs/[id]' as={`/docs/${id}`}>
                <a className='text-decoration-none'>
                  <div
                    className={`rounded p-1 ${currentHover === title && hoverType === 'doc'? 'bg-light' : ''} ${activeDoc === title? 'text-primary' : 'text-dark'}`}
                    onMouseEnter={() => onDocMouseEnter(title)}
                    onMouseLeave={onMouseLeave} >
                    {title}
                  </div>
                </a>
              </Link>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

render() {
        let {fromToken, toToken, pathList} = this.props;
        const {showMain, transferAmount} = this.state;
        const self = this;

        if (pathList.length === 0) {
            return <span/>;
        }

        if (showMain) {
         let viewAllPaths = <span/>;
         
         if (pathList.length > 2) {
             viewAllPaths = <div className="view-toggle-container" onClick={this.toggleHidePath}>{pathList.length - 2} more paths. View All <FontAwesomeIcon icon={faChevronDown}/></div>;
         }

         return  (<div>
            <div className="h6 conversion-path-header">
            <Row>
            <Col lg={8} xs={6}>
            Conversion paths  from {fromToken.symbol} to {toToken.symbol}
            </Col>
            <Col lg={4} xs={6} className="path-label-container">
               <InputGroup className="mb-3">
                <Form.Control type="text" placeholder="Amount" className="swap-amount-input"
                value={transferAmount} onChange={this.tranferAmountChanged}/>
                <InputGroup.Append>
                  <InputGroup.Text id="basic-addon2">{fromToken.symbol}</InputGroup.Text>
                </InputGroup.Append>
              </InputGroup>
            </Col>
            </Row>
            </div>
            {
          
            
            pathList.slice(0, 2).map(function(item, idx){
                let isBestPath = "";
                if (idx === 0) {
                    isBestPath = "best-path";
                }

                return (<ListGroupItem key={`frompath-${idx}`} className={`path-row ${isBestPath}`}>
                <Row>
                <Col lg={10} className="token-path-display">
                {item.path.map(function(cell, idx){

                
                let pointerArrow = <span/>;
                if (idx < item.path.length - 1) {
                      pointerArrow =
                      <div className="arrow-right-container">
                        <FontAwesomeIcon icon={faArrowRight} />
                      </div>
                }
                return <div className="meta-item-cell-container" key={cell.meta.symbol + "idx"}>
                      <div className="meta-item-cell">
                        <div className="token-label-cell">{cell.meta.symbol}</div>
                        <div className="token-name-cell">{cell.meta.name}</div>
                      </div>
                      {pointerArrow}
                    </div>
                })}
                <div className="path-conversion-price">{transferAmount} {item.path[0].meta.symbol} = {item.price} {item.path[item.path.length - 1].meta.symbol}</div>
                </Col>
                <Col lg={2}>

                <Button className="path-swap-btn" onClick={self.submitSwap.bind(self, idx)}>Swap</Button>
                </Col>
                </Row>
                </ListGroupItem>)
            })}
            {viewAllPaths}
            </div>)
        }
        return (
            <div>
            <div className="h6 conversion-path-header">
            <Row>
            <Col lg={8} xs={6}>
            Conversion paths  from {fromToken.symbol} to {toToken.symbol}
            </Col>
            <Col lg={4} xs={6} className="path-label-container">
               <InputGroup className="mb-3">
                <Form.Control type="text" placeholder="Amount" className="swap-amount-input"
                value={transferAmount} onChange={this.tranferAmountChanged}/>
                <InputGroup.Append>
                  <InputGroup.Text id="basic-addon2">{fromToken.symbol}</InputGroup.Text>
                </InputGroup.Append>
              </InputGroup>
            </Col>
            </Row>
            </div>
            {
            pathList.map(function(item, idx){
                let isBestPath = "";
                if (idx === 0) {
                    isBestPath = "best-path";
                }
                return (<ListGroupItem key={`frompath-${idx}`} className={`path-row ${isBestPath}`}>
                <Row>
                <Col lg={10} className="token-path-display">
                {item.path.map(function(cell, idx){
                let pointerArrow = <span/>;
                if (idx < item.path.length - 1) {
                      pointerArrow =
                      <div className="arrow-right-container">
                        <FontAwesomeIcon icon={faArrowRight} />
                      </div>
                }
                return <div className="meta-item-cell-container" key={cell.meta.symbol + {idx}+"idx"}>
                      <div className="meta-item-cell">
                        <div className="token-label-cell">{cell.meta.symbol}</div>
                        <div className="token-name-cell">{cell.meta.name}</div>
                      </div>
                      {pointerArrow}
                    </div>
                })}
                <div className="path-conversion-price">{transferAmount} {item.path[0].meta.symbol} = {item.price} {item.path[item.path.length - 1].meta.symbol}</div>
                </Col>
                <Col lg={2}>
                <Button className="path-swap-btn" onClick={self.submitSwap.bind(self, idx)}>Swap</Button>
                </Col>
                </Row>
                </ListGroupItem>)
            })}
            <div className="view-toggle-container" onClick={this.toggleShowPath}>View less. <FontAwesomeIcon icon={faChevronUp}/>.</div>
            </div>

            )
    }

render() {
        const {pool: {createPool, relayConverterStatus}} = this.props;
        const {setConversionFeeVisible, setFundingDisplayVisible, conversionFee, reserves} = this.state;
        const converterAddress = relayConverterStatus.message.events["1"].address;
        const smartTokenAddress = relayConverterStatus.message.events.SmartTokenAdded.returnValues._smartToken; 

        let reserveDetails = <span/>;
        if (createPool && reserves.length > 0) {
          reserveDetails = createPool.reserves.map(function(item, idx){
            return <Col lg={4} xs={4}>
             <div className="cell-label">{item.data.symbol}</div>
             <div className="cell-data"><AddressDisplay address={item.data.address}/></div>
            </Col>
          })
        }
        
        let conversionFeeDisplay = <span/>;
        if (setConversionFeeVisible) {
          conversionFeeDisplay = (
            <Row className="set-pool-container">
              <Col lg={10} xs={10}> 
             <Form.Control type="text" placeHolder="Set pool conversion fees, maximum 3%"
             value={conversionFee} onChange={this.conversionFeeUpdated}/>
             </Col>
             <Col lg={2} xs={2}>
             <Button onClick={this.updateConversionFee}>Update</Button>
             </Col>
            </Row>
            )
        }
        
        let fundingDisplay = <span/>;
        const self = this;
        if (setFundingDisplayVisible && reserves.length > 0) {
          fundingDisplay = (
            <Row className="set-pool-container">
              {createPool.reserves.map(function(item, idx) {
                return <Col lg={12} xs={12}>
                <TokenAmountRow item={item.data} idx={idx} updateTokenAmount={self.updateTokenAmount}/>
                </Col>
              })}
             <Col lg={2} xs={2}>
             <Button onClick={this.updatePoolFunding}>Update</Button>
             </Col>
            </Row>            
            )
        }
        let transactionStatus = <span/>;
        
        return (
        <div className="create-pool-form-container app-toolbar-container">
        {transactionStatus}
        <Container>
              <div className="header">
                Congratulations !! Your pool has been deployed successfully.
              </div>
              <div>
              <Row className="sub-header">
                <Col lg={12} xs={12}>
                  Pool Details
                </Col>
              </Row>
              <Row>
                <Col lg={6}>
                  <div className="cell-label">
                  Pool Token Address
                  </div>
                  <div className="cell-data">
                  {smartTokenAddress}
                  </div>
                </Col>
                <Col lg={6}>
                  <div className="cell-label">
                  Pool Converter Address
                  </div>
                  <div className="cell-data">
                  {converterAddress}
                  </div>
                </Col>
              </Row>
              <Row>
                <Col lg={4} xs={4}>
                  <div className="cell-label">
                  Name
                  </div>
                  <div className="cell-data">
                  {createPool.name}
                  </div>
                </Col>
                <Col lg={4} xs={4}>
                <div className="cell-label">
                  Symbol
                    </div>
                 <div className="cell-data">  
                  {createPool.symbol}
                  </div>
                </Col>
                <Col lg={4} xs={4}>
                <div className="cell-label">
                  Supply
                      </div>
                      <div className="cell-data">      
                  {createPool.supply}
                   </div>
                </Col>
              </Row>
              <Row className="sub-header">
                <Col lg={12} xs={12}>
                  Pool Reserves
                </Col>
              </Row>              
              <Row>
                  {reserveDetails}
              </Row>
              
              <Row>
                <Col lg={12} className="sub-header">
                  Next steps
                </Col>
                <Col lg={12} className="app-next-step-col">
                  <div onClick={this.toggleExpandSetConversionFee}>
                    Set Pool conversion fees <FontAwesomeIcon icon={faChevronDown} />
                  </div>
                  {conversionFeeDisplay}
                </Col>
                <Col lg={12} className="app-next-step-col">
                  <div onClick={this.toggleExpandSetFunding}>
                  Add initial pool liquidity <FontAwesomeIcon icon={faChevronDown}/>
                  </div>
                  {fundingDisplay}
                </Col>
                <Col lg={12} className="app-next-step-col">
                  <div onClick={this.gotoPoolPage}>
                  View your pool <FontAwesomeIcon icon={faChevronRight} onClick={this.openPoolTab}/>
                  </div>
                </Col>
              </Row>
              </div>
              </Container>
            </div>
            )
    }

render() {
    const {pool: {currentSelectedPool, currentSelectedPoolError}} = this.props;

    const {reservesNeeded, reservesAdded, fundAllReservesActive, fundOneReserveActive, singleTokenFundConversionPaths,
      withdrawAllReservesActive, withdrawOneReserveActive, singleTokenWithdrawReserveSelection, singleTokenFundReserveSelection,
      singleTokenWithdrawConversionPaths, calculatingFunding, calculatingWithdraw, submitFundingEnabled, fundingCalculateInit, withdrawCalculateInit,
      calculatingAllInputFunding, calculatingAllInputWithdraw,
      
      fundReserveSelection, withdrawSelection
    } = this.state;
    
    const self = this;
    
    let isPurchaseBtnDisabled = false;

    
    let isFundingLoading = <span/>;
    let isWithdrawLoading = <span/>;
    if (calculatingFunding && !fundingCalculateInit) {
      isFundingLoading = <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>;
    }
    
    if (calculatingWithdraw && !withdrawCalculateInit) {
      isWithdrawLoading = <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>;
    }

    let isWithdrawBtnDisabled = false;
    
    if (calculatingFunding) {
     // isPurchaseBtnDisabled = true;
    }

    if (calculatingWithdraw) {
      isWithdrawBtnDisabled = true;
    }
    
    let reserveRatio = '';

    reserveRatio = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ?currentSelectedPool.reserves.map(function(item){
      if (item) {
      return parseInt(item.reserveRatio) / 10000;
      } else {
        return null;
      }
    }).filter(Boolean).join("/") : '';


    if (currentSelectedPoolError) {
      return (<div>
      <div>Could not fetch pool details.</div>
      <div>Currently only pool contracts which expose reserveTokenCount() and reserveTokens() methods are supported.</div>
      </div>)
    }
    const { fundAmount, liquidateAmount } = this.state;

    let minTotalSupply = currentSelectedPool.totalSupply ? 
                          parseFloat(fromDecimals(currentSelectedPool.totalSupply, currentSelectedPool.decimals)).toFixed(4) : "";
    let reserveTokenList = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ? currentSelectedPool.reserves.map(function(item, idx){
      return <div key={`token-${idx}`}>
        <div className="holdings-label">{item.name}</div>
        <div className="holdings-data">&nbsp;{parseFloat(fromDecimals(item.reserveBalance, item.decimals)).toFixed(4)}</div>
      </div>
    }) : <span/>;

    let userHoldingsList = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ? currentSelectedPool.reserves.map(function(item, idx){
      let userBalanceItem = parseFloat(item.userBalance);
      let userBalanceDisplay = "-";
      if (!isNaN(userBalanceItem)) {
        userBalanceDisplay = userBalanceItem.toFixed(4);
      }
      return (<div key={`token-${idx}`}>
        <div className="holdings-label">{item.name}</div>
        <div className="holdings-data">&nbsp;{userBalanceDisplay}</div>
      </div>)
    }) : <span/>;

    let poolHoldings = "";
    if (currentSelectedPool.senderBalance ) {
      poolHoldings = parseFloat(fromDecimals(currentSelectedPool.senderBalance, currentSelectedPool.decimals)).toFixed(4) + " " + currentSelectedPool.symbol;
    }
    let liquidateInfo = <span/>;
    if (liquidateAmount && liquidateAmount > 0 && reservesAdded && reservesAdded.length > 0) {
      liquidateInfo = (
        <div>
          <div>You will receive</div>
            {reservesAdded.map(function(item, idx){
              return <div key={`reserve-added-${idx}`}>{item.addedDisplay} {item.symbol}</div>
            })}
        </div>
        )
    }
    let fundInfo = <span/>;

    if (fundAmount && fundAmount > 0 && reservesNeeded && reservesNeeded.length > 0) {
      fundInfo = (
        <div>
            <div>You will needs to stake</div>
            {reservesNeeded.map(function(item, idx){
              return <div key={`reserve-needed-${idx}`}>{item.neededDisplay} {item.symbol}</div>
            })}
        </div>
        )
    }
    let conversionFee = "";
    if (currentSelectedPool && currentSelectedPool.conversionFee) {
       conversionFee = currentSelectedPool.conversionFee + "%";
    }

    let poolLiquidateAction = <span/>;
    let poolFundAction = <span/>;
    let tokenAllowances = <span/>;
    
    let tokenAllowanceRowVisible = "row-hidden";
    if (this.state.approvalDisplay) {
      tokenAllowanceRowVisible = "row-visible"; 
    }
    
    if (currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0){
      
      if (withdrawAllReservesActive === 'reserve-active') {
      poolLiquidateAction = (
        <div>
          <div className="select-reserve-container">
            <Form.Control type="number" placeholder="Enter amount to liquidate" onChange={this.onLiquidateInputChanged}/>
            <Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateAllInputWithdraw}>Calculate</Button>            
          </div>
          <div className="action-info-col">
          {liquidateInfo}
          <Button onClick={this.submitSellPoolToken}  className="pool-action-btn">Sell</Button>
          </div>
        </div>
        )
      } else if (withdrawOneReserveActive === 'reserve-active') {
          let reserveOptions = currentSelectedPool.reserves.map(function(item, key){
            return <Dropdown.Item eventKey={item.symbol} key={`${item.symbol}-${key}`}>{item.symbol}</Dropdown.Item>
          });
          let withdrawActiveAmount = <span/>;
          if (singleTokenWithdrawConversionPaths && singleTokenWithdrawConversionPaths.length > 0) {
            let totalReserveAmount  = 0;
            singleTokenWithdrawConversionPaths.forEach(function(item){
              totalReserveAmount += parseFloat(item.quantity);
            });
            totalReserveAmount = totalReserveAmount.toFixed(4);
            withdrawActiveAmount = <div>{isWithdrawLoading} You will receive {totalReserveAmount} {singleTokenWithdrawReserveSelection.symbol}</div>
          }
        poolLiquidateAction = (
            <div>
            <div className="select-reserve-container">
              <div>
              <label>
                Reserve token in which to withdraw
              </label>
              <DropdownButton id="dropdown-basic-button" title={singleTokenWithdrawReserveSelection.symbol} onSelect={this.withdrawSingleBaseChanged}>
                {reserveOptions}
              </DropdownButton>
              </div>
              <div>
                 <label>Amount of pool tokens to withdraw</label>
                 <div>
                  <Form.Control type="number" placeholder="Pool tokens to withdraw" onChange={this.onSingleReserveLiquidateFundChanged}/>
                  <Button className="calculate-btn" onClick={this.calculateSingleInputWithdraw}>Calculate</Button>
                </div>
              </div>
            </div>
                <div className="action-info-col">
                {withdrawActiveAmount}
                <Button onClick={this.submitSellPoolTokenWithSingleReserve} disabled={isWithdrawBtnDisabled} className="pool-action-btn">Withdraw</Button>
                </div>
            </div>
            )
      }

      if (fundAllReservesActive === 'reserve-active' && fundReserveSelection.length > 0) {
          poolFundAction = (
            <div className="select-reserve-container">
                <div>
                  {
                    fundReserveSelection.map(function(item, idx){
                      return <Form.Control type="number" placeholder={`Enter amount of ${item.symbol} to fund`} value={item.value}
                      onChange={self.fundInputAmountChange.bind(self, idx)}/>
                    })
                  }
                  <div> 
                  <Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateAllInputFund}>Calculate</Button>
                  </div>
                </div>
                
                <div className="action-info-col">
                {fundInfo}
                <Button onClick={this.submitBuyPoolToken} className="pool-action-btn">Purchase</Button>
                </div>
            </div>
            )
        } else if (fundOneReserveActive === 'reserve-active') {
          let reserveOptions = currentSelectedPool.reserves.map(function(item, key){
            return <Dropdown.Item eventKey={item.symbol} key={`${item.symbol}-${key}`} >{item.symbol}</Dropdown.Item>
          });
          let fundActiveAmount = <span/>;
          if (singleTokenFundConversionPaths) {
            let totalReserveAmount  = 0;
            singleTokenFundConversionPaths.forEach(function(item){
              totalReserveAmount += parseFloat(item.quantity);
            });
            totalReserveAmount = totalReserveAmount.toFixed(4);
            fundActiveAmount = <div>{isFundingLoading} You will need to stake {totalReserveAmount} {singleTokenFundReserveSelection.symbol}</div>
          }

          poolFundAction = (
            <div>
            <div className="select-reserve-container">
            <div>
              <label>
                Reserve token with which to fund.
              </label>
              <DropdownButton id="dropdown-basic-button" title={singleTokenFundReserveSelection.symbol} onSelect={this.fundSingleBaseChanged}>
                {reserveOptions}
              </DropdownButton>
            </div>
            <div>
              <label>Amount of {singleTokenFundReserveSelection.symbol} to fund</label>
              <div>
                <Form.Control type="number" placeholder={`Enter amount of ${singleTokenFundReserveSelection.symbol} to fund`} onChange={this.onSingleReserveFundInputChanged} className="single-reserve-amount-text"/>
                <Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateSingleInputFund}>Calculate</Button>
              </div>
            </div>
            </div>
                <div className="action-info-col">
                {fundActiveAmount}
                <Button onClick={this.submitBuyPoolTokenWithSingleReserve} className="pool-action-btn">Purchase</Button>
                </div>
            </div>
            )
        }
        
    let tokenAllowanceReserves = currentSelectedPool.reserves.map(function(item, idx){
      return <div key={`allowance-${idx}`} className="selected-pool-balance">
      {item.symbol} {item.userAllowance ? parseFloat(item.userAllowance).toFixed(5) : '-'}
      </div>
    });
    
    let tokenSwapAllowanceReserves = currentSelectedPool.reserves.map(function(item, idx){
      return <div key={`allowance-${idx}`} className="selected-pool-balance">
      {item.symbol} {item.swapAllowance ? parseFloat(item.swapAllowance).toFixed(5) : '-'}
      </div>
    });
    
    tokenAllowances = 
    <div className={`${tokenAllowanceRowVisible}`}>
    <div className="approval-type-label">
     Approvals for pool converter contract.
    </div>
    <Row className={`token-allowances-display-row`}>
    <Col lg={8}>
      {tokenAllowanceReserves}
      </Col>
      <Col lg={4}>
      <Button onClick={()=>this.showApprovalDialog("pool")}>Approve reserves </Button>
      <Button onClick={()=>this.showRevokeDialog("pool")} className="revoke-approval-btn">Revoke approval </Button>
      </Col>
    </Row>
    <div className="approval-type-label">
     Approvals for Bancor Network contract.
    </div>
    <Row className="single-token-description">
     <Col lg={12}>
       If you using single token funding, it is also recommended that you approve BancorNetwork contract for swaps.
     </Col>
     </Row>
    <Row>
      <Col lg={8}>
      {tokenSwapAllowanceReserves}
      </Col>
      <Col lg={4}>
      <Button onClick={()=>this.showApprovalDialog("swap")}>Approve reserves </Button>
      <Button onClick={()=>this.showRevokeDialog("swap")} className="revoke-approval-btn">Revoke approval </Button>
      </Col>
    </Row>
    </div>
    }
    
    function allowanceToolTip(props) {
       return <Tooltip {...props}>
        <div>Token allowances refer to amount you have approved the converter contract to spend.</div>
        <div>Set allowances for BancorConverter for faster pool funding and liquidation and save on Gas costs</div>
        </Tooltip>;
    }
    
    let currentPoolTransactions = <span/>;

    if (currentSelectedPool.poolVersion === '1') {
      currentPoolTransactions = (
          <div>
          <Col lg={6}>
            <div className="allowance-label">Fund Pool Holdings</div>
            {poolFundAction}
          </Col>
          <Col lg={6}>
            <div className="allowance-label">Liquitate Pool Holdings</div>
            {poolLiquidateAction}
          </Col>
          </div>
        )
    } else {
      currentPoolTransactions = (
        <div>
          <SelectedV2PoolContainer pool={this.props.pool}/>
        </div>
        )
    }

    return (
      <div>
        <Row className="select-pool-row-1">
          <Col lg={1} className="pool-logo-container">
            <img src={currentSelectedPool.imageURI} className="selected-pool-image" alt="pool-token-img"/>
          </Col>
          <Col lg={2}>
            <div className="cell-label">{currentSelectedPool.symbol}</div>
            <div className="cell-data">{currentSelectedPool.name}</div>
          </Col>
          <Col lg={2}>
           <div className="cell-label">Address</div>
           <div className="cell-data"><AddressDisplay address={currentSelectedPool.address}/></div>
          </Col>
          <Col lg={2}>
            <div className="cell-label">Pool Supply</div>
            <div className="cell-data">{minTotalSupply}</div>
          </Col>
          <Col lg={3}>
            <div>
              <div className="cell-label">Reserves</div>
              <div className="cell-data">{reserveTokenList}</div>
            </div>
          </Col>
          <Col lg={2}>
            <div className="cell-label">Reserve Ratio</div>
            <div className="cell-data">{reserveRatio}</div>
          </Col>
        </Row>
        <Row className="selected-pool-meta-row">
          <Col lg={3}>
            <div className="cell-label">Conversion fee generated</div>
            <div className="cell-data">{conversionFee}</div>
          </Col>
          <Col lg={3}>
            <div className="cell-label">Your pool token holdings</div>
            <div className="cell-data">{poolHoldings}</div>
          </Col>
          <Col lg={4}>
            <div className="cell-label">Your reserve token holdings</div>
            <div className="cell-data">{userHoldingsList}</div>
          </Col>
        </Row>
        
       <div className="pool-action-container pool-allowance-container">

        <Row>
         <Col lg={12}>
          <div className="pool-approval-container">
           <div className="allowance-label">
           Your pool allowances 
           <OverlayTrigger
              placement="right"
              delay={{ show: 250, hide: 400 }}
              overlay={allowanceToolTip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
           </div>
           <FontAwesomeIcon icon={faChevronDown} className="show-approval-toggle" onClick={this.toggleApprovalDisplay}/>
           {tokenAllowances}
           </div>
         </Col>
        </Row>
        
        <Row className="selected-pool-buy-sell-row">
          <Col lg={12}>
          {currentPoolTransactions}
          </Col>
        </Row>
        
        </div>  
      </div>
      )
  }