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

The following examples show how to use @fortawesome/free-solid-svg-icons#faChevronCircleDown. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SwapTokenWidget.js From katanapools with GNU General Public License v2.0
4 votes
render() {
    const {tokenData} = this.props;

    const {showTransaferSelect, selectedTransferToken, selectedReceiveToken, showReceiveSelect,
      transferAmount, receiveAmount, totalFee, pathMeta, transactionFee, widgetError
    } = this.state;

    let transferFromTokenSelect = <span/>;
    let receiveToTokenSelect = <span/>;

    if (showTransaferSelect) {
        transferFromTokenSelect =
        (<div className="token-select-dropdown">
          <TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.transferSelectChanged}/>
        </div>
        )
    }
    if (showReceiveSelect) {
      receiveToTokenSelect = (
        <div className="token-select-dropdown">
          <TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.receiveSelectChanged}/>
        </div>
        )
    }


    if (tokenData.length === 0 ||  selectedTransferToken === undefined ||  selectedReceiveToken === undefined) {
      return (
      <div className="swap-token--loading-container">
      <div className="spinner-icon">
              <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
      </div>
      </div>);
    }

    let pathMetaData = <span/>;
    if (pathMeta && pathMeta.length > 0) {
      pathMetaData = pathMeta.map(function(item, idx){
        let pointerArrow = <span/>;

        if (idx < pathMeta.length - 1) {
          pointerArrow =
          <div className="arrow-right-container">
            <FontAwesomeIcon icon={faArrowRight} />
          </div>
        }
        return (
        <div className="meta-item-cell-container" key={idx}>
          <div className="meta-item-cell">
            <div className="token-label-cell">{item.meta.symbol}</div>
            <div className="token-name-cell">{item.meta.name}</div>
          </div>
          {pointerArrow}
        </div>)
      })
    }
    let errorData = <span/>;
    if (widgetError && widgetError.length > 0) {
      errorData = <div className="error">{widgetError}</div>
    }
    return (
      <div className="swap-token-container">
        <div className="card">
          <div className="text">
          <Row>
          <Col lg={5}>
              <div className="h4 token-transfer-label">Transfer </div>
            <div className="token-label-amount-container">
               <Row>
               <Col lg={4} className="token-label-select-col">
               <div className="token-label-container" onClick={this.openTransferSelectDropdown}>
                 <img src={selectedTransferToken.imageURI} className="token-preview-image"/>
                 <div className="token-preview-text">{selectedTransferToken.symbol}</div>
                 <FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
               </div>
               {transferFromTokenSelect}
               </Col>
               <Col lg={8} className="token-amount-col">
                <Form.Control size="sm" type="number" placeholder="Amount" onChange={this.transferAmountChanged} value={transferAmount}/>
               </Col>
               </Row>
              </div>
            </Col>
          <Col lg={2}>
          <div className="token-transfer-arrow-container">
          <div>
          <FontAwesomeIcon icon={faArrowLeft} className="arrow-container"/>
          </div>
          <div className="bottom-arrow-container arrow-container">
          <FontAwesomeIcon icon={faArrowRight}/>
         </div>
          </div>
          </Col>
          <Col lg={5}>
            <div className="h4 token-transfer-label">Receive</div>
            <div className="token-label-amount-container">
               <Row>
                   <Col lg={4} className="token-label-select-col">
                   <div className="token-label-container" onClick={this.openReceiveSelectDropdown}>
                     <img src={selectedReceiveToken.imageURI} className="token-preview-image"/>
                     <div className="token-preview-text">{selectedReceiveToken.symbol}</div>
                     <FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
                   </div>
                   {receiveToTokenSelect}
                   </Col>
                   <Col lg={8} className="token-amount-col">
                    <Form.Control size="sm" type="text" placeholder="Amount" value={receiveAmount}
                      onChange={this.receiveAmountChanged}/>
                   </Col>
               </Row>
              </div>
           </Col>
           </Row>
           <Row className="swap-action-btn-container">
           <Col lg={8}>
            {errorData}

           </Col>
           <Col lg={3}>
            Total Fees: {transactionFee} {selectedReceiveToken.symbol}
            </Col>
            <Col lg={1}>
            <Button onClick={this.submitSwapTransaction}>Swap</Button>
            </Col>
           </Row>
           <Row>
            <Col lg={12} className="network-path-label">
              Network path :
            </Col>
            <Col lg={12} className="network-path-data">
              {pathMetaData}
            </Col>
           </Row>
          </div>
        </div>
  </div>

      )
  }