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

Loading = () => (
  <div className="container loading">
    <div className="row">
      <div className="col-md-12 text-center pt-4">
        <FontAwesomeIcon size="2x" color="blue" icon={faSpinner} spin />
      </div>
    </div>
  </div>
)

renderConnectButton() {
    let icon = null;
    const buttonStyle = this.props.isConnected ? "danger" : "success";

    if (this.props.isConnecting) {
      icon = (<FontAwesomeIcon icon={faSpinner} spin style={styles.toolbarIcon} />);
    } else if (this.props.isConnected) {
      icon = (<FontAwesomeIcon icon={faStop} style={styles.toolbarIcon} />);
    } else {
      icon = (<FontAwesomeIcon icon={faPlay} style={styles.toolbarIcon} />);
    }

    return (
      <Button
        bsStyle={ buttonStyle }
        onClick={() => this.props.onConnectDisconnect(this.state.ipAddress)}
        >
        {icon}
      </Button>
    );
  }

render() {
        // TODO it feels a bit weird having to reconnect on each render. Will this slow
        // things down?
        if (window.api) {
            window.api.executeCommand('hangup')
            window.api.dispose()
            this.connect()
        }

        return (
            <div className="jitsi-video">
                <div id="jitsi-placeholder">
                    <FontAwesomeIcon icon={faSpinner} spin />
                </div>
                <div id="jitsi-container"></div>
            </div>
        )
    }

Spinners = ({ spinner, animation, variant, size, image, icon }) => {

  return (
    <div className="spinner-component">
        {image ? 
          <div>
            <img src={image} alt="logo" className="preloader img-fluid" />
          </div>
         : null}
        {icon ? 
           <div className="loader">
             <FontAwesomeIcon className="center" icon={faSpinner} />
           </div>
         : null}
        {spinner ? 
           <Spinner className="bootstrap-spinner" animation={animation} variant={variant} size={size} /> 
        : null}
    </div>
  )
}

render() {
    return (
      <div style={{ padding: "18px", maxWidth: "500px" }}>
        <h3 className="font-weight-bold">map33.js is a JavaScript library to build 3D maps</h3>
        <p className="my-4">
          Made by Openbloc with three.js
        </p>
        <p className="my-4">
          Subscribe to get the latest news!
        </p>
        <Form
          id="subscribe-form"
          className="mailing-list my-4"
          onSubmit={this.submitForm.bind(this)}
        >
          <InputGroup className="mb-3">
            <EmailInput
              type="email"
              name="email"
              required="required"
              placeholder="Email"
              value={this.state.email}
              onChange={this.emailChanged.bind(this)}
            />
            <InputGroup.Append>
              <SubmitButton id="subscribe-button" type="submit">
                <FontAwesomeIcon
                  icon={this.state.waiting ? faSpinner : faPaperPlane}
                  size="lg"
                  className="mr-2"
                  spin={this.state.waiting}
                />
              </SubmitButton>
            </InputGroup.Append>
          </InputGroup>
          <Alert
            id="subscribe-success"
            variant={"success"}
            className={this.state.result < 300 ? "" : "d-none"}
          >
            <strong>Great!</strong> Check your inbox and click the link to
            confirm your subscription.
          </Alert>
          <Alert
            id="subscribe-error"
            variant={"danger"}
            className={this.state.result >= 500 ? "" : "d-none"}
          >
            <strong>Oops...</strong> An error occurred.
          </Alert>
        </Form>
        <Row>
          <CenteredCol>
            <A href="https://www.openbloc.com" target="_blank">
              Homepage
            </A>
          </CenteredCol>
          <CenteredCol>
            <img src={OpenblocLogo} alt="Openbloc logo"></img>
          </CenteredCol>
          <CenteredCol>
            <A href="https://blog.openbloc.com" target="_blank">
              Blog
            </A>
          </CenteredCol>
        </Row>
      </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,
);

CourseImportListItem = ({
  intl, course, libraryId, importBlocksHandler, ongoingImportState, taskPaginationParams,
}) => {
  const [importState, setImportState] = useState('default');

  useEffect(() => {
    setImportState(ongoingImportState);
  }, [ongoingImportState]);

  const handleImport = () => {
    importBlocksHandler({ params: { libraryId, courseId: course.id, taskPaginationParams } });
  };

  const importButtonProps = {
    state: ongoingImportState || 'default',
    variant: importState === 'error' ? 'danger' : 'primary',
    labels: {
      default: intl.formatMessage(messages['library.course_import.new_import.label']),
      pending: intl.formatMessage(messages['library.course_import.ongoing_import.label']),
      complete: intl.formatMessage(messages['library.course_import.import_scheduled.label']),
      error: intl.formatMessage(messages['library.course_import.import_schedule_failed.label']),
    },
    icons: {
      default: <FontAwesomeIcon icon={faPlus} className="icon-inline" />,
      pending: <FontAwesomeIcon icon={faSpinner} className="icon-inline fa-spin" />,
      complete: <FontAwesomeIcon icon={faCheck} className="icon-inline" />,
      error: <FontAwesomeIcon icon={faSync} className="icon-inline" />,
    },
    disabledStates: ['pending', 'complete'],
    className: 'btn-lg',
    onClick: handleImport,
  };

  return (
    <div className="library-link">
      <Row className="h-100">
        <Col xs={6} md={6} className="my-auto">
          <h3 className="library-title">{course.title}</h3>
        </Col>
        <Col xs={6} md={6} className="my-auto text-center text-md-right">
          <StatefulButton {...importButtonProps} />
        </Col>
      </Row>
      <div className="library-metadata">
        <span className="library-org metadata-item">
          <span className="label">{intl.formatMessage(messages['library.course_import.list_item.organization'])}</span>
          <span className="value">{course.org}</span>
        </span>
        <span className="library-slug metadata-item">
          <span className="label">{intl.formatMessage(messages['library.course_import.list_item.id'])}</span>
          <span className="value">{course.id}</span>
        </span>
      </div>
    </div>
  );
}

render() {
    const { pool: {currentSelectedPool, poolTransactionStatus, currentViewPoolType}, poolData} = this.props;
     let poolSelectionView = poolData;
     
     if (currentViewPoolType === 'all') {
       poolSelectionView = poolData;
     } else if (currentViewPoolType === 'v1') {
       poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '1'));
     } else {
       poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '2'));
     }
    const {selectedPoolIndex, isError, errorMessage} = this.state;
    const self = this;
    let poolDataList = <span/>;
    if (poolSelectionView.length === 0) {
      poolDataList =  <span/>;
    } else {
      poolDataList =
      <span>
        <ListGroupItem>
          Symbol
        </ListGroupItem>
       {
         poolSelectionView.map(function(poolRow, idx){
         let cellActive = '';
         if (idx === selectedPoolIndex) {
           cellActive = 'cell-active';
         }
        return <ListGroupItem onClick={self.setSelectedPool.bind(self, poolRow, idx)} key={'pool-select-'+idx} className={`select-pool-toolbar ${cellActive}`}>
              {poolRow.symbol}
           </ListGroupItem>
         })
       }</span>

    }
    let selectedPool =  (<div className="loading-spinner">
                          <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
                        </div>
                        )
    
    if (isNonEmptyObject(currentSelectedPool)) {
      selectedPool  =  <SelectedPool {...this.props} currentSelectedPool={currentSelectedPool} setErrorMessage={this.setErrorMessage} resetErrorMessage={this.resetErrorMessage}/>
    }

    let transactionStatusMessage = <span/>;
    if (isError) {
      transactionStatusMessage = <Alert  variant={"danger"}>
              {errorMessage}
            </Alert>
    }
    if (poolTransactionStatus.type === 'pending') {
      transactionStatusMessage = <Alert  variant={"info"}>
              <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/> {poolTransactionStatus.message}
            </Alert>
    }
    if (poolTransactionStatus.type === 'error') {
      transactionStatusMessage = <Alert  variant={"danger"}>
              <FontAwesomeIcon icon={faTimes}/> {poolTransactionStatus.message}
            </Alert>      
    }
    return (
      <div>
      {transactionStatusMessage}
      <div className="app-toolbar-container">
        <Row style={{'marginBottom': '40px'}}>
        <Col lg={2}>
        <ListGroup className="select-pool-group">
          {poolDataList}
        </ListGroup>
        </Col>
        <Col lg={10}>
          {selectedPool}
        </Col>
        </Row>
      </div>
      </div>
      )
  }

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);
}

export default function MovieSidebar(props) {
  let refLi = useRef([]);
  let refSidebarContent = useRef(null);
  let sidebarTimeline = useRef();

  const { toggle, movie, ip_address } = props;

  const ratings_api = API_ENDPOINTS.ocena;
  // const [ratings, setRating] = useState({});
  const [ipRating, setIpRating] = useState(0);
  const [play, setPlay] = useState(false);
  const [referralID, setReferralID] = useState(null);
  // eslint-disable-next-line
  const [error, setError] = useState(false);
  const [episodeLink, setEpisodeLink] = useState([]);
  const [description, setDescription] = useState();
  const [fullDescription, setFullDescription] = useState();

  const [readMore, setReadMore] = useState(false);
  const [loadingReferralID, setLoadingReferralID] = useState(false);

  const handlePlayRequest = (e) => {
    e.preventDefault();
    setPlay(true);
  };

  const rateMovie = (value) => {
    axios
      .post(ratings_api + "/rate", {
        referral_id: movie.referral_id,
        ip_address: ip_address,
        score: value,
      })
      .then((res) => {
        if (res.data !== null) {
          setIpRating(res.data.score);
        }
      })
      .catch((err) => {
        if (err) {
          setError({
            error: true,
          });
        }
      });
  };

  const getShareID = (action) => {
    axios
      .post(ratings_api + "/referral", {
        ip_address: ip_address,
        referral_id: movie.referral_id,
      })
      .then((res) => {
        const { data } = res;
        if (action) {
          setLoadingReferralID(false);
        }
        setReferralID(data, () => {
          if (action) {
            shareMovie();
          }
        });
      })
      .catch(() => {
        setLoadingReferralID(false);
      });
  };

  const truncate = () => {
    if (fullDescription) {
      if (fullDescription.length > 350) {
        setDescription(fullDescription);
        setReadMore(false);
      }
    }
  };

  const addDownload = () => {
    axios
      .post(ratings_api + "/download", {
        ip_address: ip_address,
        referral_id: movie.referral_id,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  };

  const shareMovie = () => {
    if (referralID) {
      props.shareMovie({
        ...movie,
        referralID: referralID,
      });
    } else {
      setLoadingReferralID(true);
      getShareID("share");
    }
  };

  useEffect(() => {
    const getShareID = (action) => {
      axios
        .post(ratings_api + "/referral", {
          ip_address: ip_address,
          referral_id: movie.referral_id,
        })
        .then((res) => {
          const { data } = res;
          if (action) {
            setLoadingReferralID(false);
          }
          setReferralID(data, action ? shareMovie() : null);
        })
        .catch(() => {
          setLoadingReferralID(false);
          setReferralID(movie.referral_id, action ? shareMovie() : null);
        });
    };
    getShareID();
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (movie.is_series && movie.s_download_link) {
      const episodeLinkArray = [];
      const SDownloadLink = movie.s_download_link;
      for (const [downloadTxt, downloadLink] of Object.entries(SDownloadLink)) {
        const downloadTxtStrip = downloadTxt
          .replace("[AnimeOut]", "")
          .replace("[Erai-raws]", "");
        episodeLinkArray.push(
          <div
            key={`${movie.Index}${downloadLink}`}
            className="sidebar-footer-download"
          >
            <p>{downloadTxtStrip}</p>
            <a
              href={sanitizeUrl(downloadLink)}
              target="_blank"
              rel="noopener noreferrer"
              className="gbtn gbtn-primary align-items-center"
            >
              <span className="mr-1">
                <DownloadIcon />
              </span>
              download
            </a>
          </div>
        );
      }

      setEpisodeLink([...episodeLinkArray]);
    }

    if (movie.description) {
      if (movie.description.length > 350) {
        const truncatedText = movie.description
          .substring(0, 350)
          .replace(/\w+$/, "");
        setDescription(truncatedText);
        setFullDescription(movie.description);
        setReadMore(true);
      } else {
        setDescription(movie.description);
        setReadMore(false);
      }
    }
  }, [movie]);

  useEffect(() => {
    if (toggle === false) {
      gsap.to(refLi, {
        duration: 0.4,
        scaleX: 0,
        transformOrigin: "right",
        stagger: 0.1,
      });
    } else {
      sidebarTimeline.current = gsap.timeline();
      sidebarTimeline.current.to(refLi.current, {
        duration: 0.4,
        scaleX: 1,
        transformOrigin: "right",
        stagger: 0.2,
      });
      sidebarTimeline.current.to(refSidebarContent, {
        duration: 0.1,
        opacity: 1,
      });
    }
  }, [toggle]);

  return (
    <MovieSidebarPortal>
      <Style.MovieOverlayStyle className={toggle ? "isOnOverlay" : ""} />{" "}
      <Style.MovieSidebarStyle>
        <div className="moviesidenav">
          <ul className="transition">
            <li ref={(el) => (refLi.current[0] = el)}> </li>{" "}
            <li ref={(el) => (refLi.current[1] = el)}> </li>{" "}
            <li ref={(el) => (refLi.current[2] = el)}> </li>{" "}
            <li ref={(el) => (refLi.current[3] = el)}> </li>{" "}
            <li ref={(el) => (refLi.current[4] = el)}> </li>{" "}
          </ul>

          <div
            className="sidebar-content"
            ref={(el) => {
              refSidebarContent = el;
            }}
          >
            <button onClick={toggle} className={"cancel-btn"}>
              <FontAwesomeIcon icon={faTimes} />
            </button>
            <div className="siderbar-header mt-4">
              <h3> {movie.name} </h3>
              <Rating
                value={ipRating}
                max={5}
                onChange={(value) => rateMovie(value)}
              />
            </div>

            {movie.is_series ? (
              <img
                src={
                  movie.cover_photo_link === ""
                    ? "https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png"
                    : movie.cover_photo_link
                }
                alt={movie.name}
                className="sidebar-image-cover mt-4"
              />
            ) : play ? (
              <div>
                {greekFromEnglish(movie.engine) === "Server5" ? (
                  <div className="player-error-alert">
                    <p className="player-error-message">
                      Streaming from alpha is problematic, suggest{" "}
                      <a
                        className="gophie-link"
                        href={movie.DownloadLink}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        downloading
                      </a>{" "}
                      instead
                    </p>
                  </div>
                ) : null}
                {isIOS ? (
                  <div className="player-error-alert">
                    <p className="player-error-message">
                      {" "}
                      iOS 10+ users might have to disable{" "}
                      <i>
                        <em>Low Power Mode</em>
                      </i>{" "}
                      to stream
                    </p>
                  </div>
                ) : null}
                <div className="player-wrapper">
                  <ReactPlayer
                    url={movie.download_link}
                    className="react-player"
                    playing
                    playsinline
                    pip
                    controls
                    width="100%"
                    height="90%"
                  />
                </div>
              </div>
            ) : (
              <div className="position-relative">
                <img
                  src={
                    movie.cover_photo_link === ""
                      ? "https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png"
                      : movie.cover_photo_link
                  }
                  alt={movie.name}
                  className="sidebar-image-cover mt-4"
                />
                <a
                  id="stop-video"
                  className="video-play-button"
                  href="/"
                  onClick={handlePlayRequest}
                >
                  <span></span>
                </a>
              </div>
            )}

            {/* sidebar movie description */}
            <div className="sidebar-description mt-4">
              {movie.description === "" || movie.description === null ? (
                "Seems like the description for this movie is missing"
              ) : (
                <p>
                  {description}
                  <span
                    className={readMore === true ? "" : "hidden"}
                    onClick={truncate}
                    onKeyDown={truncate}
                    role="button"
                    tabIndex={0}
                  >
                    ... Read more
                  </span>
                </p>
              )}
            </div>

            <div className="sidebar-footer mt-4">
              {/* if AnimeOut or  kdramahood engine add the download link */}
              {!movie.is_series ? (
                <div>
                  <a
                    href={movie.download_link}
                    onClick={addDownload}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="gbtn gbtn-secondary mr-3"
                  >
                    <span className="mr-1">
                      <DownloadIcon />
                    </span>
                    download
                  </a>
                  <button className="sidebar-share-btn" onClick={shareMovie}>
                    {loadingReferralID ? (
                      <FontAwesomeIcon icon={faSpinner} />
                    ) : (
                      <ShareIcon />
                    )}
                  </button>
                </div>
              ) : (
                <>
                  <div className="sidebar-footer-header d-flex justify-content-between align-items-center">
                    <p>Episodes</p>
                    <button className="sidebar-share-btn" onClick={shareMovie}>
                      {loadingReferralID ? (
                        <FontAwesomeIcon icon={faSpinner} />
                      ) : (
                        <ShareIcon />
                      )}
                    </button>
                  </div>

                  {episodeLink}
                </>
              )}
            </div>
          </div>
        </div>
      </Style.MovieSidebarStyle>{" "}
    </MovieSidebarPortal>
  );
}

render() {
        const {fromPathListWithRate, toPathListWithRate, fromToken, toToken, fromPathLoading, toPathLoading, setProviderNotification} = this.props;

        let fromPathListItems = <span/>;
        let toPathListItems = <span/>;
        if (isNonEmptyArray(fromPathListWithRate)) {
            const sortedPathList = fromPathListWithRate.sort((a, b)=>(b.price - a.price));
            fromPathListItems = <ConversionPathList fromToken={fromToken} toToken={toToken}
            pathList={sortedPathList} type={"from"} transferAmountChanged={this.props.transferAmountChanged}
            submitSwap={this.props.submitSwap} setProviderNotification={setProviderNotification}/>
        }

        if (isNonEmptyArray(toPathListWithRate)) {
            const sortedPathList = toPathListWithRate.sort((a, b)=>(b.price - a.price));
            toPathListItems = <ConversionPathList fromToken={toToken} toToken={fromToken} pathList={sortedPathList}
            type={"to"} transferAmountChanged={this.props.transferAmountChanged} submitSwap={this.props.submitSwap}
            setProviderNotification={setProviderNotification}/>
        }

        let tokenPairDescription = <span/>;

        if (isEmptyObject(fromToken) && isEmptyObject(toToken)) {
          tokenPairDescription = (
              <div className="swap-token-loading-container">
              <div className="spinner-icon">
                      <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
              </div>
              </div>
          )
        }
        if (isNonEmptyObject(fromToken) && isNonEmptyObject(toToken)) {
            let fromTokenDescription = <span/>;
            let toTokenDescription = <span/>;

            if (fromToken.meta && fromToken.meta.description) {
                fromTokenDescription = <div>{fromToken.meta.description}</div>
            }
            if (toToken.meta && toToken.meta.description) {
                toTokenDescription = <div>{toToken.meta.description}</div>
            }
            tokenPairDescription = (
                <Row className="token-info-row">
                <Col lg={6} className="token-info-block">
                <Row className="token-info-row">
                <Col lg={6} className="token-info-col">
                    <div className="cell-data">
                        {fromToken.name}
                    </div>
                    <div className="cell-label">
                        Name
                    </div>
                </Col>
                <Col lg={6} className="token-info-col">
                    <div className="cell-data">
                        {fromToken.symbol}
                    </div>
                    <div className="cell-label">
                        Symbol
                    </div>
                </Col>
                <Col lg={6} className="token-info-col">
                    <div className="cell-data">
                        <AddressDisplay address={fromToken.address}/>
                    </div>
                    <div className="cell-label">
                        Address
                    </div>
                </Col>
                <Col lg={12} className="token-info-col">
                    <div className="cell-data">
                        {fromTokenDescription}
                    </div>
                </Col>
                </Row>

              </Col>
              <Col lg={6} className="token-info-block">
                <Row className="token-info-row">
                    <Col lg={6} className="token-info-col">
                        <div className="cell-data">
                            {toToken.name}
                        </div>
                        <div className="cell-label">
                            Name
                        </div>
                    </Col>
                    <Col lg={6} className="token-info-col">
                        <div className="cell-data">
                            {toToken.symbol}
                        </div>
                        <div className="cell-label">
                            Symbol
                        </div>
                    </Col>
                    <Col lg={6} className="token-info-col">
                    <div className="cell-data">
                        <AddressDisplay address={toToken.address}/>
                    </div>
                    <div className="cell-label">
                        Address
                    </div>
                    </Col>
                    <Col lg={6} className="token-info-col">

                    </Col>
                    <Col lg={12} className="token-info-col">
                        <div className="cell-data">
                            {toTokenDescription}
                        </div>
                    </Col>
                </Row>
              </Col>
                </Row>
                )
        }
        let fromPathLoadingDiv = <span/>;
        let toPathLoadingDiv = <span/>;
        if (fromPathLoading) {
            fromPathLoadingDiv = <div className="path-loading-container">
                          <div className="spinner-icon">
                      <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
              </div>
              <div>Fetching paths from {fromToken.symbol} -> {toToken.symbol}</div>
            </div>
        }
        if (toPathLoading) {
            toPathLoadingDiv = <div className="path-loading-container">
                          <div className="spinner-icon">
                      <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
              </div>
                            <div>Fetching paths from {toToken.symbol} -> {fromToken.symbol}</div>
              </div>
        }

        return (
            <div className="view-paths-container">
            <div>
                {tokenPairDescription}
            </div>
            <div className="from-path-container">
                {fromPathLoadingDiv}
                {fromPathListItems}
            </div>
            <div className="to-path-container">
                {toPathLoadingDiv}
                {toPathListItems}
            </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>
      )
  }

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>

      )
  }