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

render() {
    return (
      <nav className={styles.navbar}>
        <ul className={styles.dropdown}>
          {dropdowns.map(dropdown => {
            return (
              <a
                href={`#${dropdown}-title`}
                onClick={() => {
                  this.boldButton(dropdown)
                }}
                className={classNames(styles.listSet, {
                  [styles.listSetBold]: this.state.bold === dropdown,
                })}
              >
                <div>
                  {this.state.selectedLink && this.state.bold === dropdown ? (
                    <FontAwesomeIcon
                      icon={faArrowRight}
                      className={styles.dropdownArrow}
                    />
                  ) : (
                    ""
                  )}
                  {dropdown}
                </div>
              </a>
            )
          })}
        </ul>
      </nav>
    )
  }

library.add(
  far,
  fas,
  faBookReader,
  faArrowLeft,
  faArrowRight,
  faQuestionCircle,
  faCopy,
  faSignOutAlt,
  faEdit,
  faAngleDown,
  faExternalLinkAlt,
  fab,
  faEthereum,
  faTwitter,
  faDiscord,
  faUnlink,
  faSearch,
  faFortAwesome,
  faExchangeAlt,
  faChartPie,
  faGlobe,
  faDonate,
  faDollarSign,
);

PublicationsList = ({title, items=[], limit, suffle, publications, achievements}) => {
  const suffledItems = suffle ? items.sort(() => Math.random() - 0.5) : items

  return (
    <div className="publications-list-component">
      <Container>
        {!title || (
          <Row>
            <Col>
              <h1 className="title">{title}</h1>
            </Col>
          </Row>
        )}
        {publications ? <Row>
          {suffledItems.map((item, i) => !limit || i < limit ? (
            <PublicationListItem
              key={i}
              {...item}
            />
          ) : null)}
        </Row> : null}
        {achievements ? <Row>
          {suffledItems.map((item, i) => !limit || i<limit ? (
             <AchievementListItem 
               key={i}
               {...item}
             />
          ) : null)}
        </Row> : null}
        <Row>
          <Col className="view-all-btn-container">
            {!limit || <a href='/publications' className="btn-publications">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
          </Col>
        </Row>
      </Container>
    </div>
  )
}

function SamplePrevArrow({ className, style, onClick }) {
    return (
        <button
            type="button"
            className={`${className} right-5 lg:right-0 button button--text button--icon cursor-pointer`}
            style={{
                ...style,
            }}
            onClick={onClick}
        >
            <FontAwesomeIcon icon={faArrowRight} color="#000000" size="sm" />
        </button>
    );
}

function SampleNextArrow({ className, style, onClick }) {
    return (
        <button
            className={`${className} lg:right-5 button button--text button--icon cursor-pointer`}
            style={{
                ...style,
            }}
            type="button"
            onClick={onClick}
        >
            <FontAwesomeIcon icon={faArrowRight} color="#000000" size="sm" />
        </button>
    );
}

render() {
    return (
      <nav className={styles.navbar}>
        <ul className={styles.dropdownContent}>
          {usecases.map(usecase => {
            return (
              <Link
                spy={true}
                smooth={true}
                to={`#${usecase}-title`}
                onClick={() => {
                  this.boldButton(usecase)
                }}
                className={classNames(styles.listSet, {
                  [styles.listSetBold]: this.state.bold === usecase,
                })}
              >
                <div>
                  {this.state.bold === usecase ? (
                    <FontAwesomeIcon
                      icon={faArrowRight}
                      className={styles.selectorArrow}
                    />
                  ) : (
                    ""
                  )}
                  {usecase}
                </div>
              </Link>
            )
          })}
        </ul>
      </nav>
    )
  }

render() {
        let targetCards = [];
        if (this.props.targets) {
            targetCards = this.props.targets.map((target) => this.renderSimpleCard(target));
        }
        return (
            <div className='prompt-control-targeting'>
                {this.renderSimpleCard(this.props.source)}
                {targetCards.length > 0 && <FontAwesomeIcon icon={faArrowRight} />}
                {targetCards}
            </div>
        );
    }

render() {
    const {
      email, folder, oId, pIndex, updatePath, userId, shareFile, moveWithin,
    } = this.props;

    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    return (
      <span className="file-path">
        <span>
          {' '}
          <FontAwesomeIcon icon={faChevronRight} />
          <ContextMenuTrigger id={folder.id + userId.toString() + oId.toString()}>
            <button type="button" className="path-btn" onClick={() => updatePath(userId, oId, pIndex)}>{folder.name}</button>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={folder.id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(folder.webViewLink, 'blank')}>
              <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
              View on Google Drive
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(folder.id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, folder, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (folder.starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item and all its contents will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </span>
      </span>
    );
  }

Carousel = ({data, header}) =>  {

	const [currentImageIndex, setCurrentImageIndex] = useState(0);

	const previousSlide = () => {
		const lastIndex = data.length - 1;
		const shouldResetIndex = currentImageIndex === 0;
		const index =  shouldResetIndex ? lastIndex : currentImageIndex - 1;

		setCurrentImageIndex(index);
	}

	const nextSlide = () => {
		const lastIndex = data.length - 1;
		const shouldResetIndex = currentImageIndex === lastIndex;
		const index =  shouldResetIndex ? 0 : currentImageIndex + 1;

		setCurrentImageIndex(index);
	}

    const ImageSlide = ({ url }) => {
        return (
          <div className="image-slide">
            <div className="slider-image-div">
              <img className="slider-image" src={url.image} alt="slider-logo" />
            </div>
            <div className="slider-title">
              <h4>{url.title}</h4><hr />
            </div>           
            <div className="slider-content">
              <p>{url.content}</p>
            </div>
          </div>
        );
    }

    return (
        <div>
        {header ? <div className="header-component">
            <h2><FontAwesomeIcon className="icon-h2" icon={faSlidersH} /> {header}</h2>
        </div> : null}
        <Container>
            {data ? <div className="carousel">
                <FontAwesomeIcon className="icon icon-left" icon={faArrowLeft} onClick={previousSlide} />
                <ImageSlide url={ data[currentImageIndex] } />
                <FontAwesomeIcon className="icon icon-right" icon={faArrowRight} onClick={nextSlide} />
            </div> : null}
        </Container>
        </div>
    );
}

GitterRoomsList = ({title, groupId, gitterOrganizationName, gitterToken, limit, small}) => {

  const [loading, setLoading] = useState(true)
  const [rooms, setRooms] = useState(null)

  useEffect(() => {
    getRooms()
  }, [])

  const getRooms = () => {
    const fetchUrl = `https://api.gitter.im/v1/groups/${groupId}/rooms?access_token=${gitterToken}`

    setLoading(true)
    fetch(fetchUrl).then((res) => res.json()).then((data) => {
      setRooms(data)
      setLoading(false)
    })
    .catch((err) => {
      throw err
    });
  }

  const renderRoomList = () => (
    rooms.map((item, i) => {
      if (i < limit){
        return (
          <Col md={4} key={item.uri}>
            <GitterRoomItem
              name={item.name}
              avatarUrl={item.avatarUrl}
              roomUrl={`https://gitter.im/${item.url}`}
              userCount={item.userCount}
              visible={item.public}
            />
          </Col>
        )
      }
      return null
    })
  )

  return (
    <div className="gitter-rooms-list-component">
      <Container>
        <Row>
          <Col md={12}>
            {title ? <h1 className={small ? "gitter-rooms-list-title-small" : "gitter-rooms-list-title"}>{title}</h1> : null}
          </Col>
          {loading || !rooms ? <Col md={12}><p>Loading...</p></Col> : renderRoomList()}
        </Row>
        <Row>
        <Col className="view-all-btn-container">
          {loading || !rooms ? null : <a href={`https://gitter.im/${gitterOrganizationName}`} className="gitter-btn" target="_blank" rel="noreferrer">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
        </Col>
      </Row>
      </Container>
    </div>
  )
}

MailingListFeed = ({title, feedUrl, small}) => {

  const [loading, setLoading] = useState(true)
  const [feed, setFeed] = useState(null)

  useEffect(() => {
    getFeed()
  }, [])
  
  const getFeed = () => {
    const feedFetchUrl = `https://api.rss2json.com/v1/api.json?rss_url=${feedUrl}`
    setLoading(true)
    fetch(feedFetchUrl).then((res) => res.json()).then((data) => {
      setFeed(data)
      setLoading(false)
    })
    .catch((err) => { 
      throw err 
    });
  }

  const renderFeedItemList = () => (
    feed && feed.items ? feed.items.map(item => (
      <Col md={12} key={item.guid}>
        <MailingListFeedItem
          image={item.thumbnail}
          author={item.author}
          title={item.title}
          description={item.description}
          publishedDate={item.pubDate}
          slug={item.link}
        />
      </Col>
    )): null
  )

  const width = small ? "50%" : "100%";

  return (
    <div className="mailing-list-feed-component">
      <Container>
        <Row style={{width: width}}>
          <Col md={12}>
            <h1 className={small ? "mailing-list-feed-title-small" : "mailing-list-feed-title"}>{title}</h1>
          </Col>
          {loading || !feed || !feed.items ? <Col md={12}><p>Loading...</p></Col>: renderFeedItemList()}
        </Row>
        <Row>
        <Col className="view-all-btn-container">
          {loading || !feed || !feed.items  ? null : <a href={feed.feed.link} className="btn" target="_blank">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
        </Col>
      </Row>
      </Container>
    </div>
  )
}

ProjectsList = ({title, showSearchBar, searchPlaceHolder, items=[], limit, suffle = false}) => {
  const suffledItems = suffle ? items.sort(() => Math.random() - 0.5) : items

  const [searchItem, setSearchItem] = useState("");
  const [searchResults, setSearchResults] = useState(suffledItems);

  const handleSearch = async (searchItem) => {
    const results = suffledItems.filter(item =>
      item.title.toLowerCase().includes(searchItem)
    );
    setSearchItem(searchItem);
    setSearchResults(results);
  }

  return (
    <div className="project-list-component">
      {!title || (
        <div className="header-component">
          <Row>
            <Col>
              <h2 className="title"><FontAwesomeIcon className="icon" icon={faCode} /> {title}</h2>
            </Col>
          </Row>
        </div>        
      )}
      {showSearchBar ? 
        <div className="projects-search">
            {showSearchBar ? <SearchBar input={searchItem} handleSearch={handleSearch} placeHolder={searchPlaceHolder} />: null}
        </div> 
      : null}
      <Container>      
        <Row>
          {searchResults.map((item, i) => !limit || i < limit ? (
            <ProjectListItem
              key={i}
              {...item}
            />
          ) : null)}
        </Row>
        <Row>
          <Col className="view-all-btn-container">
            {!limit || <a href='/projects' className="btn-projects">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
          </Col>
        </Row>
      </Container>
    </div>
  )
}

Testimonial = ({data, header}) =>  {

	const [currentImageIndex, setCurrentImageIndex] = useState(0);

	const previousSlide = () => {
		const lastIndex = data.length - 1;
		const shouldResetIndex = currentImageIndex === 0;
		const index =  shouldResetIndex ? lastIndex : currentImageIndex - 1;

		setCurrentImageIndex(index);
	}

	const nextSlide = () => {
		const lastIndex = data.length - 1;
		const shouldResetIndex = currentImageIndex === lastIndex;
		const index =  shouldResetIndex ? 0 : currentImageIndex + 1;

		setCurrentImageIndex(index);
	}

    const ImageSlide = ({ url }) => {
        return (
            <div>
              <div className="pn_testimonial_box">
                <p className="test-description text-justify">{url.description}</p>
                <div className="row">
                    <div className="col-md-6 pn_review_profile">
                      <img src={url.image} className="border-radius-12 float-right" alt="client" /> 
                      <span className="test-user">{url.name}</span> 
                    </div>
                    <div className="col-md-6 pn_review_rating d-flex justify-content-end"> 
                      5 &nbsp; 
                      <img className="image-radius aligncenter"
                           src="https://desklib.com/static/src/assets/images/v2/star_rating.svg" 
                           alt="client-stars" /> 
                    </div>
                </div>
              </div>
            </div>
        );
    }

    return (
        <div>
        {header ? <div className="header-component">
            <h2><FontAwesomeIcon className="icon-h2" icon={faComments} /> {header}</h2>
        </div> : null}
        <Container>
            {data ? <div className="carousel">
                <FontAwesomeIcon className="icon icon-left" icon={faArrowLeft} onClick={previousSlide} />
                <ImageSlide url={ data[currentImageIndex] } />
                <FontAwesomeIcon className="icon icon-right" icon={faArrowRight} onClick={nextSlide} />
            </div> : null}
        </Container>
        </div>
    );
}

// export default function File(props) {
  render() {
    const {
      data, email, moveWithin, oId, openFolder, shareFile, userId,
    } = this.props;

    const {
      id, webViewLink, iconLink, name, mimeType, starred,
    } = data;

    const copyFunc = loadAuthParam(email, this.copy);
    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    if (mimeType !== 'application/vnd.google-apps.folder') {
      // if file
      return (
        <div>
          <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
            <a href={webViewLink} target="blank">
              <div className="file-container">
                <div className="file-image-container">
                  <img className="file-img" src={iconLink} alt="File icon" />
                </div>
                <div className="file-name">
                  {name}
                </div>
              </div>
            </a>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
              <FontAwesomeIcon className="faOpen menu-icon" icon={faFolderOpen} />
              Open
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => copyFunc()}>
              <FontAwesomeIcon className="faCopy menu-icon" icon={faCopy} />
              Make a copy
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </div>
      );
    }
    // if folder
    return (
      <div>
        <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
          <div className="folder-container" onClick={() => openFolder(userId, oId, data)}>
            <div className="folder-content-container">
              <img className="folder-img" src={iconLink} alt="File icon" />
              <p className="folder-name">{name}</p>
            </div>
          </div>
        </ContextMenuTrigger>
        <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
          <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
            <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
            View on Google Drive
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
            <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
            Share
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
            <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
            Move to Root
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => renameFunc(userId, id)}>
            <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
            Rename
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => starFunc()}>
            <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
            { (starred) ? 'Remove From Starred' : 'Add to Starred' }
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will become unrecoverable. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
            <FontAwesomeIcon className="menu-icon" icon={faTrash} />
            Delete
          </MenuItem>
        </ContextMenu>
      </div>
    );
  }

render() {
    const onClick = this.props.onClick;
    const { north, south, east, west } = this.props.directions || {};

    const mapButtonClass = this.props.showMapTooltip
      ? "map-button animated"
      : "map-button";
    const pokeButtonClass = this.state.showPokeOptions
      ? "poke-button focused"
      : "poke-button";

    const room = this.props.currentRoom.room;
    const audio = this.props.rooms[room].audio;
    const roomType = this.props.rooms[room].type;
    const events = this.props.events;
    const users = _.flatten(Object.values(this.props.users));

    const handleClickMap = () => this.props.handleOpenModal("map");
    const handleClickEvents = () => this.props.handleOpenModal("events");
    const handleClickEmail = () => this.props.handleOpenModal("email");

    return (
      <div className="navigation-container">
        <div className="column settings-container">
          <div className="map-button-container">
            {this.props.showMapButton && !this.props.hideSettings && (
              <button
                className={mapButtonClass}
                title={Config.tooltips.map}
                disabled={false}
                onClick={handleClickMap}
              >
                <FontAwesomeIcon icon={faMap} />
              </button>
            )}
            {/* {this.props.showMapTooltip &&
                            <div className="map-tooltip">you have unlocked the party map!</div>
                        } */}
          </div>
          <div className="events-button-container">
            {events && events.length > 0 && !this.props.hideSettings && (
              <button
                className="events-button"
                title={Config.tooltips.events}
                onClick={handleClickEvents}
              >
                <FontAwesomeIcon icon={faCalendar} />
              </button>
            )}
          </div>
          <div className="email-button-container">
            {Config.moderation &&
              !_.isEmpty(Config.moderation.moderatorEmails) && (
                <button
                  className="email-button"
                  title={Config.tooltips.moderator}
                  onClick={handleClickEmail}
                >
                  <FontAwesomeIcon icon={faEnvelope} />
                </button>
              )}
          </div>
          {roomType.toUpperCase() === "CHATSTREAM" &&
          this.props.currentRoom.entered &&
          !this.props.hideSettings ? (
            <div className="chat-button-container">
              <button
                className={mapButtonClass}
                title={Config.tooltips.chat}
                disabled={false}
                onClick={() =>
                  this.setState({ hideChat: !this.state.hideChat })
                }
              >
                <FontAwesomeIcon icon={faCommentAlt} />
              </button>
            </div>
          ) : null}
          <div className="poke-button-container">
            {Config.poke &&
              this.props.isPokingUnlocked &&
              !this.props.hideSettings && (
                <button
                  className={pokeButtonClass}
                  title={Config.tooltips.poke}
                  onClick={this.handleClickPokeButton.bind(this)}
                >
                  <FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
                </button>
              )}
            {this.state.showPokeOptions && (
              <PokeOptions
                users={users}
                handlePoke={this.handlePoke.bind(this)}
              />
            )}
          </div>
          <div className="audio-button-container">
            {audio && (
              <AudioPlayer
                src={audio.path}
                autoPlay={audio.autoPlay}
                hide={audio.hideControls}
                onChange={this.handleAudioChanged.bind(this)}
              ></AudioPlayer>
            )}
          </div>
        </div>
        <div className="column">
          <button
            className="west"
            disabled={!west}
            onClick={() => onClick(west)}
          >
            <FontAwesomeIcon icon={faArrowLeft} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[west], "name")}
            </span>
          </button>
        </div>
        <div className="column">
          <button
            className="north"
            disabled={!north}
            onClick={() => onClick(north)}
          >
            <FontAwesomeIcon icon={faArrowUp} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[north], "name")}
            </span>
          </button>
          <button
            className="south"
            disabled={!south}
            onClick={() => onClick(south)}
          >
            <FontAwesomeIcon icon={faArrowDown} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[south], "name")}
            </span>
          </button>
        </div>
        <div className="column">
          <button
            className="east"
            disabled={!east}
            onClick={() => onClick(east)}
          >
            <FontAwesomeIcon icon={faArrowRight} />
            <span className="navigation-room-name">
              {_.get(this.props.rooms[east], "name")}
            </span>
          </button>
        </div>
        <div className="column column-avatar">
          <div className="puck-wrapper">
            <img
              src={
                Config.avatars[this.props.user.avatar.type].images[
                  this.props.user.avatar.color
                ]
              }
            />
          </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 {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>

      )
  }

export default function ButtonsContainer() {
    const classes = useStyles();

    const dispatch = useDispatch();

    const code = useSelector(selectCode);
    const emulatorState = useSelector(selectState);

    const loadCode = () => {
        emulator.loadCode(code);
    };

    const stepForwardClick = () => {
        const len = emulatorState.registers.future.length;
        if (len === 0) return;

        dispatch(stepForward());
    };

    const stepBackClick = () => {
        const len = emulatorState.registers.past.length;
        if (len === 0) return;

        dispatch(stepBack());
    };

    const runFromPointClick = () => {
        Object.entries(emulatorState.registers.present)
            .map((o) => {
                const [k, v] = o;
                if (
                    ['H', 'L'].includes(k[1])
                    && ['A', 'B', 'C', 'D'].includes(k[0])
                ) {
                    emulator.cpu.registers.regs[`${k[0]}X`].set(v, k[1]);
                } else {
                    emulator.cpu.registers.regs[k].set(v);
                }
                return o;
            });

        Object.values(emulatorState.memory.present)
            .map((v, i) => {
                emulator.cpu.memory.set(i, v);
                return v;
            });

        try {
            loadCode();
            emulator.cpu.step();
            dispatch(executeStep({
                registers: emulator.getRegisters(),
                memory: emulator.getSerialisableMemory(),
            }));
        } catch (err) {
            dispatch(raiseError({
                name: err.name,
                token: err.token,
                message: err.message,
                position: err.position,
                lineNumber: err.lineNumber,
            }));
        }
    };

    const runAllClick = () => {
        emulator.resetState();
        dispatch(resetRegMemState());

        // eslint-disable-next-line no-constant-condition
        while (true) {
            try {
                loadCode();
                emulator.cpu.step();
                dispatch(executeStep({
                    registers: emulator.getRegisters(),
                    memory: emulator.getSerialisableMemory(),
                }));
            } catch (err) {
                break;
            }
        }
    };

    const pastLength = emulatorState.registers.past.length;
    const backClass = pastLength > 0 ? '' : classes.disabledIcon;

    const futureLength = emulatorState.registers.future.length;
    const forwardClass = futureLength > 0 ? '' : classes.disabledIcon;

    return (
        <div className={classes.buttonsContainer}>
            <div className={classes.buttonWrapper}>
                <button type="button" className={classes.button} onClick={stepBackClick}>
                    <sup className={classes.count}>{pastLength}</sup>
                    <FontAwesomeIcon icon={faArrowLeft} className={backClass} />
                </button>
                <button type="button" className={classes.button} onClick={runFromPointClick}>
                    <FontAwesomeIcon icon={faPlay} className={classes.playIcon} />
                </button>
                <button type="button" className={classes.button} onClick={stepForwardClick}>
                    <FontAwesomeIcon icon={faArrowRight} className={forwardClass} />
                    <sup className={classes.count}>{futureLength}</sup>
                </button>
                <button type="button" className={classes.button} onClick={runAllClick}>
                    <FontAwesomeIcon icon={faForward} />
                </button>
            </div>

        </div>
    );
}

MediumFeed = ({title, mediumUrl, small, limit}) => {

  const [loading, setLoading] = useState(true)
  const [feed, setFeed] = useState(null)

  useEffect(() => {
    getFeed()
  }, [])
  
  const getFeed = () => {
    const feedFetchUrl = `https://api.rss2json.com/v1/api.json?rss_url=${mediumUrl}`
    setLoading(true)
    fetch(feedFetchUrl).then((res) => res.json()).then((data) => {
      setFeed(data)
      setLoading(false)
    })
    .catch((err) => { throw err });
  }

  const renderSmallFeedItemList = () => {
    return feed.items.map((item, index) => {
      if (index < limit) {
        return (
          <FeedItemSmall 
            key={item.guid}
            title={item.title}
            publishedDate={item.pubDate}
            image={item.thumbnail}
            author={item.author}
            slug={item.link}
          />
        )
      }
    })
  }

  const renderFeedItemList = () => (
    <Container>
      <Row>
        {feed.items.map((item, index) => {
          if(index < limit) {
            return (
              <Col md={6} key={item.guid}>
                <FeedItem
                  title={item.title}
                  publishedDate={item.pubDate}
                  image={item.thumbnail}
                  author={item.author}
                  slug={item.link}
                />
              </Col>
            )
          }           
        })}
      </Row>
      <Row>
        <Col className="view-all-btn-container">
          {loading || !feed || !feed.items  ? null : 
            <a href={feed.feed.link} className="medium-btn" target="_blank" rel="noreferrer">
              Many More <FontAwesomeIcon icon={faArrowRight}/>
            </a>}
        </Col>
      </Row>
    </Container>
  )

  return (
    <div className="medium-feed-component">
      {!small ? 
           <div className="header-component">
              <h2><FontAwesomeIcon className="icon-h2" icon={faBlog} /> {title}</h2>
            </div> 
              : 
            <p className="medium-feed-title">{title}</p>}

      {loading || !feed ? <span /> : (
        small ? renderSmallFeedItemList() : renderFeedItemList()
      )}
    </div>
  )
}