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

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

Faq = ({ data, header, bgColor, toggleColor, titleColor }) => {
  return (
    <div>
      {header ? (
        <div className="header-component">
          <h3>
            <FontAwesomeIcon className="icon-h2" icon={faQuestionCircle} />{" "}
            {header}
          </h3>
        </div>
      ) : null}
      <Container className="faq-container">
        {data.length >= 1
          ? data.map((faq, index) => (
              <div key={index}>
                <Accordion
                  title={faq.title}
                  content={faq.content}
                  bgColor={bgColor}
                  toggleColor={toggleColor}
                  titleColor={titleColor}
                />
                <hr style={{ borderWidth: "0" }} />
              </div>
            ))
          : null}
      </Container>
    </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,
);

Support = () => {
    return (
        <>
            <ListItemHeader mb={2}>
                <FormattedMessage id="drawer.wallet.connect.list.header.support" />
            </ListItemHeader>
            <UndecoratedLink
                href="https://medium.com/loopring-protocol/loopring-exchange-faq-196d6c40f6cf"
                target="_blank"
                rel="noreferrer noopener"
            >
                <ListItemBox>
                    <ListItemIcon icon={faQuestionCircle} />{" "}
                    <FormattedMessage id="drawer.wallet.connect.list.item.faq" />
                </ListItemBox>
            </UndecoratedLink>
            <UndecoratedLink
                href="https://t.me/loopring_en"
                target="_blank"
                rel="noreferrer noopener"
            >
                <ListItemBox>
                    <ListItemIcon icon={faTelegram} />{" "}
                    <FormattedMessage id="drawer.wallet.connect.list.item.telegram" />
                </ListItemBox>
            </UndecoratedLink>
            <UndecoratedLink
                href="https://discordapp.com/invite/KkYccYp"
                target="_blank"
                rel="noreferrer noopener"
            >
                <ListItemBox>
                    <ListItemIcon icon={faDiscord} />{" "}
                    <FormattedMessage id="drawer.wallet.connect.list.item.discord" />
                </ListItemBox>
            </UndecoratedLink>
            <UndecoratedLink
                href="https://github.com/Loopring/dexwebapp/issues/new"
                target="_blank"
                rel="noreferrer noopener"
            >
                <ListItemBox>
                    <ListItemIcon icon={faQuestionCircle} />{" "}
                    <FormattedMessage id="drawer.wallet.connect.list.item.bug.report" />
                </ListItemBox>
            </UndecoratedLink>
        </>
    );
}

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}

render() {
    const { value, tokenInfo, type } = this.props;

    const {
      ethReserves,
      tokenReserves,
      marketRate,
      execRate,
      liquidityTokenSupply,
      tokenPrice
    } = this.state;

    if (ethReserves && tokenReserves && marketRate)
      return (
        <div style={{ fontSize: '0.85em' }}>
          <Row className="justify-content-left pt-2">
            <Col>Current Pool Size:</Col>
            <Col style={{ whiteSpace: 'nowrap' }}>
              {Humanize.compactInteger(ethReserves, 1)} ETH +{' '}
              {Humanize.compactInteger(tokenReserves, 1)} {tokenInfo.name}
            </Col>
          </Row>
          <Row className="justify-content-left">
            <Col>
              <OverlayTrigger
                overlay={
                  <Tooltip>
                    {this.gettooltipText(tokenInfo.name, type)}
                  </Tooltip>
                }
                placement="right"
              >
                <FontAwesomeIcon icon={faQuestionCircle} />
              </OverlayTrigger>{' '}
              Est. Pool Share:
            </Col>
            <Col
              style={{ color: value ? '#eb9100' : null, whiteSpace: 'noWrap' }}
            >
              {type === 'LLP' ?
                `${(value * 0.34).toFixed(3)} ETH + ${(
                  value *
                  0.33 *
                  execRate
                ).toFixed(3)} ${tokenInfo.name}`
                : `${(value * 0.495).toFixed(3)} ETH + ${(
                  value *
                  0.505 *
                  execRate
                ).toFixed(3)} ${tokenInfo.name}`
              }
            </Col>
          </Row>
          <Row className="justify-content-right">
            <Col>Est. Output:</Col>
            <Col
              style={{ color: value ? '#28a745' : null, whiteSpace: 'noWrap' }}
            >
              {value && execRate > 0
                ? `${this.getLiquidityTokenOutput(
                  type !== 'LLP' ? value : value * 0.66,
                  execRate,
                  tokenReserves,
                  liquidityTokenSupply
                )} ${tokenInfo.name} Pool Token`
                : `0 ${tokenInfo.name} Pool Token`}
            </Col>
          </Row>
          {type !== 'LLP' ? null : (
            <div>
              <Row className="justify-content-right">
                <Col></Col>
                <Col style={{ color: value ? '#28a745' : null, whiteSpace: 'noWrap' }}>+</Col>
              </Row>
              <Row className="justify-content-right">
                <Col></Col>
                <Col style={{ color: value ? '#28a745' : null, whiteSpace: 'noWrap' }}>
                  {
                    this.props.name === '2x LINK LLP' ? (
                      `${((((value * 0.34) * this.props.stats.ethPrice) / tokenPrice || 0) * 2).toFixed(3)} LINK Exposure`
                    ): (
                      `${((value * 0.34) * 2).toFixed(3)} ETH Exposure`
                    )
                  }
                </Col>
              </Row>
            </div>
          )}
          <Row className="justify-content-right">
            <Col>
            <OverlayTrigger
                overlay={
                  <Tooltip>
                    Used to improve our development and educational efforts which further user adoption in DeFi.
                  </Tooltip>
                }
                placement="right"
              >
                <FontAwesomeIcon icon={faQuestionCircle} />
              </OverlayTrigger>{' '}
            Convenience Fee:</Col>
              <Col>
              {this.props.name === '2x LINK LLP' ? '1%' :
              (value && execRate > 0 ? 'FREE' : `-`)}
              </Col>
          </Row>
        </div>
      );
    return (
      <Row className="justify-content-center pt-2">
        <Spinner animation="border">
          <span className="sr-only">Loading...</span>
        </Spinner>
      </Row>
    );
  }

render() {

    const {baseReserveWeight, tokenArrayList, poolType, poolSymbolDefault, detailsVisible} = this.state;
    const { isError, pool: {relayConverterStatus}} = this.props;
    const {poolName, poolSymbol, poolDecimals} = this.state;

    const self = this;
    let isCreationStepPending = false;
    if (relayConverterStatus && relayConverterStatus.type === 'pending') {
      isCreationStepPending = true;
    }
    let relaySelectButton = '';
    let ercSelectButton = '';

    if (poolType === 'relay') {
      relaySelectButton = 'button-active';
      ercSelectButton = '';
    } else {
      ercSelectButton = 'button-active';
    }

    let tokenArrayListDisplay = tokenArrayList.map(function(item, idx){
      return <TokenFormRow key={`token-form-row-${idx}`} address={item.address}
      symbol={item.symbol} name={item.name}
      weight={item.weight ? item.weight : 0} idx={idx}
      weightChanged={self.weightChanged} addressChanged={self.addressChanged} getTokenDetail={self.getTokenNameAndSymbol}
      removeTokenRow={self.removeTokenRow} poolType={poolType}/>;
    });

    let relayTokenRow = <span/>;
    if (poolType === 'relay') {
      relayTokenRow = (
      <Row>
        <Col lg={8}>
        <Form.Group controlId="formBasicEmail">
         <Form.Label>Select network hub token.
           <OverlayTrigger
              placement="top"
              delay={{ show: 250, hide: 400 }}
              overlay={renderNetworkHubTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
            </Form.Label>
          <Form.Control as="select" onChange={this.baseReserveChanged} selected={this.baseReserveSelected}>
            <option>BNT</option>
            <option>USDB</option>
          </Form.Control>
        </Form.Group>
        </Col>
        <Col lg={4} className="no-pad-col">
          <div className="slidecontainer">
          <Row>
            <Col lg={8}>
            Token Reserve Ratio
           <OverlayTrigger
              placement="right"
              delay={{ show: 250, hide: 400 }}
              overlay={reserveRatioTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
            </Col>
            <Col lg={4}>
            <Form.Control type="number" value={baseReserveWeight} onChange={this.baseWeightValueChanged} className="amount-row"/>
            </Col>
            </Row>
            <input type="range" min="0" max="100" value={baseReserveWeight} className="slider"
            id="myRange" onChange={this.baseWeightValueChanged}/>
          </div>
        </Col>
        </Row>
        )
    }

function reserveRatioTooltip(props) {
   return <Tooltip {...props}>
    <div>
    Reserve ratio defines the ratio between the total value of the reserves & the market cap of the pool token.
    </div>
    <div>
    While most pools have a network hub token and a pool token kept in a 50/50 reserve ratio,
    </div>
    <div>
     You can also create pools with an array of reserves in any arbitrary reserve ratio.
    </div>
    <div>
    Provided the sum of all reserves is less than or equal to 100.
    </div>

    </Tooltip>;
}

function renderNameTooltip(props) {
  return <Tooltip {...props} className="wizard-tooltip">
    <div className="wizard-tooltip-text">
    <div>Pool name should be descriptive of the pool reserves to allow for easy searching and indexing.</div>
    <div>For instance, a pool name like Link Bat Smart Relay Token could refer to a pool with LINK, BAT, BNT in a 33/33/33 reserve ratio.</div>
    </div>
    </Tooltip>;
}


function renderSymbolTooltip(props) {
  return <Tooltip {...props} className="wizard-tooltip">
    <div className="wizard-tooltip-text">
    <div>Pool symbol should contain the symbols of pool reserves to allow for easy searching and indexing.</div>
    <div>For instance, a pool symbol like LINKBATBNT could refer to a pool with LINK, BAT, BNT in a 33/33/33 reserve ratio.</div>
    </div>
    </Tooltip>;
}

function renderDecimalTooltip(props) {
  return <Tooltip {...props} className="wizard-tooltip">
    <div className="wizard-tooltip-text">
    <div>Decimal precision of pool token.</div>
    <div>The standard is 18 for most ERC20 tokens.</div>
    <div>If you are unsure of what value to enter leave it at 18.</div>
    </div>
    </Tooltip>;
}

function renderNetworkHubTooltip(props) {
  return <Tooltip {...props}>
    <div>A network hub token is a token which allows interconversion of tokens between pools.</div>
    <div>For instance any token XXX can be converted to token YYY provided pool XXXBNT and YYYBNT exists.</div>
    <div>This is done by following a conversion path as XXX -> XXXBNT -> BNT -> YYYBNT -> YYY</div>
    </Tooltip>;
}
function renderFeeTooltip(props) {
  return <Tooltip {...props}>
    <div>Low fee will encourage more conversions whereas a higher fee will encourage more liquidity to the pool.</div>
    <div>Most pools follow a standard 0.1% conversion fees.</div>
    </Tooltip>;
}

function renderConvertibleTokenTooltip(props) {
  return <Tooltip {...props}>
    <div>Convertible tokens are ERC20 tokens </div>
    <div>which can be converted to other tokens in the pool</div>
    <div>or to other tokens via the intermediary network hub token.</div>
    <div>(provided pool contains at least 1 network hub token)</div>
    </Tooltip>;
}

    let isFormInComplete = true;
    if (poolName.length > 0 && poolSymbol.length > 0) {
      isFormInComplete = false;
    }

    let isSubmitBtnDisabled = isCreationStepPending || isFormInComplete;
    let numTransactions = tokenArrayList.length + 3;
    let transactionDetails = <span/>;
    if (detailsVisible) {
      transactionDetails = (
        <div>
          <div>1 transction for Pool token contract deployment.</div>
          <div>1 transaction for Pool converter deployment.</div>
          <div>1 transaction for setting pool conversion fees.</div>
          <div>{tokenArrayList.length} transactions for adding connectors for each of the ERC20 tokens</div>
        </div>
        )
    }
    return (
        <div className="create-pool-form-container">

        <div className="create-form-container">
          <Container className="add-pool-converter-form">
          <Row className="add-pool-form-header">
          <Col lg={6}>
          <div className="header">
            Pool Reserve Ratio<div className="help-link-text">
            <a href="https://katanapools.com/help/reserveratio" target="_blank">What is reserve ratio</a></div>
          </div>
          </Col>
          <Col lg={6} className="btn-toggle-container no-pad-col">
            <ButtonGroup aria-label="Basic example">
              <Button variant="primary" onClick={()=>this.togglePooltype("relay")} className={`toggle-btn ${relaySelectButton}`}>Require network hub token</Button>
              <Button variant="secondary" onClick={()=>this.togglePooltype("any")} className={`toggle-btn ${ercSelectButton}`}>Any ERC20 token</Button>
            </ButtonGroup>
          </Col>
        </Row>
        </Container>
        <Container className="add-pool-converter-form">
        <Form onSubmit={this.onSubmit}>
        {relayTokenRow}
        <div className="sub-form-header">
            Add convertible tokens
            <OverlayTrigger
              placement="top"
              delay={{ show: 250, hide: 400 }}
              overlay={renderConvertibleTokenTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
        </div>
        {tokenArrayListDisplay}
        <Button onClick={this.addReserveTokenRow} className="row-add-btn">Add another reserve token <FontAwesomeIcon icon={faPlus} /></Button>
          <Row className="add-pool-form-header pool-detail-header">
            <Col lg={6}>
            <div className="header">
              Pool Details
            </div>
            </Col>
          </Row>
        <Row>
          <Col lg={6}>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>
              Pool Name
              <OverlayTrigger
                placement="top"
                delay={{ show: 250, hide: 400 }}
                overlay={renderNameTooltip}>
                <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
              </OverlayTrigger>
            </Form.Label>
            <Form.Control type="text" placeholder="name" onChange={this.formNameChanged} value={poolName}/>
            <Form.Text className="text-muted" >
              Enter the pool name eg. XXX Smart Relay Token
            </Form.Text>
          </Form.Group>
          </Col>
          <Col lg={6}>
          <Form.Group controlId="formBasicPassword">
            <Form.Label>Pool Symbol
                <OverlayTrigger
                placement="top"
                delay={{ show: 250, hide: 400 }}
                overlay={renderSymbolTooltip}>
                <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
              </OverlayTrigger>
              </Form.Label>
            <Form.Control type="text" placeholder="symbol" value={poolSymbol} onChange={this.formSymbolChanged} defaultValue={poolSymbolDefault}/>
            <Form.Text className="text-muted" >
              Enter the pool symbol eg. XXXYYY for pool with XXX and YYY.
            </Form.Text>
          </Form.Group>
          </Col>
        </Row>
        <Row>
        <Col lg={6} xs={12}>
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Pool Decimals
            <OverlayTrigger
              placement="top"
              delay={{ show: 250, hide: 400 }}
              overlay={renderDecimalTooltip}>
              <FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
            </OverlayTrigger>
          </Form.Label>
          <Form.Control type="text" placeholder="decimals" value={poolDecimals} onChange={this.formDecimalsChanged}/>
        </Form.Group>
        </Col>
        </Row>
        <Row>
        <Col lg={4}>
        {isError ?

        <Button className="pool-wizard-submit-btn" type="submit" variant="primary">
          Resume
        </Button>
        :
        <Button variant="primary" disabled={isSubmitBtnDisabled} type="submit" className="pool-wizard-submit-btn">
          Next
        </Button>
        }
        </Col>
        <Col lg={8}>

        </Col>
        </Row>
      </Form>
        </Container>
        </div>
      </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>
      )
  }