@fortawesome/free-regular-svg-icons#faCaretSquareLeft TypeScript Examples

The following examples show how to use @fortawesome/free-regular-svg-icons#faCaretSquareLeft. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: icon.service.ts    From WowUp with GNU General Public License v3.0 5 votes vote down vote up
public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }
Example #2
Source File: DSBlockDetailsPage.tsx    From devex with GNU General Public License v3.0 4 votes vote down vote up
DSBlockDetailsPage: React.FC = () => {

  const { blockNum } = useParams()
  const networkContext = useContext(NetworkContext)
  const { dataService } = networkContext!

  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<DsBlockObj | null>(null)
  const [latestDSBlockNum, setLatestDSBlockNum] = useState<number | null>(null)
  const [minerInfo, setMinerInfo] = useState<MinerInfo | null>(null)
  const [currShardIdx, setCurrShardIdx] = useState<number>(0)
  const [showMore, setShowMore] = useState<boolean>(false)

  // Fetch data
  useEffect(() => {
    setIsLoading(true)
    if (!dataService) return
    
    let latestDSBlockNum: number
    let receivedData: DsBlockObj
    let minerInfo: MinerInfo
    const getData = async () => {
      try {
        if (isNaN(blockNum))
          throw new Error('Not a valid block number')
        receivedData = await dataService.getDSBlockDetails(blockNum)
        latestDSBlockNum = await dataService.getNumDSBlocks()
        try { // wrapped in another try catch because it is optional
          minerInfo = await dataService.getMinerInfo(blockNum)
        } catch (e) { console.log(e) }
        if (receivedData)
          setData(receivedData)
        if (latestDSBlockNum)
          setLatestDSBlockNum(latestDSBlockNum)
        if (minerInfo)
          setMinerInfo(minerInfo)
      } catch (e) {
        console.log(e)
        setError(e)
      } finally {
        setIsLoading(false)
      }
    }

    getData()
    return () => {
      setData(null)
      setLatestDSBlockNum(null)
      setMinerInfo(null)
      setError(null)
      setCurrShardIdx(0)
      setShowMore(false)
    }
  }, [blockNum, dataService])

  return <>
    {isLoading ? <div className='center-spinner'><Spinner animation="border" /></div> : null}
    {error
      ? <NotFoundPage />
      : data && (
        <>
          <div className='dsblock-header'>
            <h3 className='mb-1'>
              <span className='mr-1'>
                <FontAwesomeIcon className='fa-icon' icon={faCubes} />
              </span>
              <span className='ml-2'>
                DS Block
              </span>
              {' '}
              <span className='subtext'>#{data.header.BlockNum}</span>
              <LabelStar type='DS Block' />
            </h3>
            <span>
              <QueryPreservingLink
                className={parseInt(data.header.BlockNum) === 0
                  ? 'disabled mr-3' : 'mr-3'}
                to={`/dsbk/${parseInt(data.header.BlockNum) - 1}`}>
                <FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareLeft} />
              </QueryPreservingLink>
              <QueryPreservingLink
                className={latestDSBlockNum && parseInt(data.header.BlockNum) === latestDSBlockNum - 1 ? 'disabled' : ''}
                to={`/dsbk/${parseInt(data.header.BlockNum) + 1}`}>
                <FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareRight} />
              </QueryPreservingLink>
            </span>
          </div>
          <Card className='dsblock-details-card'>
            <Card.Body>
              <Container>
                <Row>
                  <Col>
                    <div className='dsblock-detail'>
                      <span>Date:</span>
                      <span>
                        {timestampToDisplay(data.header.Timestamp)}
                        {' '}
                        ({timestampToTimeago(data.header.Timestamp)})
                    </span>
                    </div>
                  </Col>
                  <Col>
                    <div className='dsblock-detail'>
                      <span>Difficulty:</span>
                      <span>{data.header.Difficulty}</span>
                    </div>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <div className='dsblock-detail'>
                      <span>DS Difficulty:</span>
                      <span>{data.header.DifficultyDS}</span>
                    </div>
                  </Col>
                  <Col>
                    <div className='dsblock-detail'>
                      <span>Gas Price:</span>
                      <span>{qaToZil(data.header.GasPrice)}</span>
                    </div>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <div className='dsblock-detail'>
                      <span>DS Leader:</span>
                      <span>
                        <QueryPreservingLink to={`/address/${pubKeyToZilAddr(data.header.LeaderPubKey)}`}>
                          {pubKeyToZilAddr(data.header.LeaderPubKey)}
                        </QueryPreservingLink>
                      </span>
                    </div>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <div className='dsblock-detail'>
                      <span>Signature:</span>
                      <span className='dsblock-signature'>{data.signature}</span>
                    </div>
                  </Col>
                </Row>
              </Container>
            </Card.Body>
          </Card>
          {data.header.PoWWinners.length > 0 && (
            <Card className='dsblock-details-card'>
              <Card.Body>
                <Container className='mono'>
                  <h6 className='mb-2'>PoW Winners</h6>
                  {data.header.PoWWinners.map((x, index) => <div key={index}>[{index}]
                    {'  '}
                    <QueryPreservingLink to={`/address/${pubKeyToZilAddr(x)}`}>{pubKeyToZilAddr(x)}</QueryPreservingLink></div>)}
                </Container>
              </Card.Body>
            </Card>
          )}
          {minerInfo &&
            <>
              <Collapse in={showMore}>
                <Row>
                  <Col>
                    <Card className='miner-card'>
                      <Card.Body>
                        <Container className='mono'>
                          <Row className='justify-content-between'>
                            <span>DS Committee</span>
                            <span>Total: <strong>{minerInfo.dscommittee.length}</strong></span>
                          </Row>
                          <Row className='justify-content-center'>
                            {minerInfo.dscommittee.length > 0
                              ? <MinerTable addresses={minerInfo.dscommittee} />
                              : <span className='my-3'>No addresses to show</span>
                            }
                          </Row>
                        </Container>
                      </Card.Body>
                    </Card>
                  </Col>
                  <Col>
                    <Card className='miner-card ml-auto'>
                      <Card.Body>
                        <Container className='mono'>
                          <Row className='justify-content-between'>
                            <Col>
                              <span>Shard {currShardIdx + 1} of {minerInfo.shards.length}</span>
                            </Col>
                            <Col className='text-center shard-toggle'>
                              <span>
                                <FontAwesomeIcon size='2x'
                                  cursor='pointer'
                                  onClick={currShardIdx === 0 ? undefined : () => (setCurrShardIdx(currShardIdx - 1))}
                                  className={currShardIdx === 0 ? 'disabled' : ''} icon={faAngleLeft} />
                                <FontAwesomeIcon size='2x'
                                  cursor='pointer'
                                  onClick={currShardIdx === minerInfo.shards.length - 1 ? undefined : () => (setCurrShardIdx(currShardIdx + 1))}
                                  className={currShardIdx === minerInfo.shards.length - 1 ? 'disabled ml-3' : 'ml-3'} icon={faAngleRight} />
                              </span>
                            </Col>
                            <Col className='text-right'>
                              <span>
                                Total:
                                {' '}
                                <strong>{minerInfo.shards[currShardIdx].nodes.length}</strong>
                              </span>
                            </Col>
                          </Row>
                          <Row className='justify-content-center'>
                            {minerInfo.shards[currShardIdx].nodes.length > 0
                              ? <MinerTable addresses={minerInfo.shards[currShardIdx].nodes} />
                              : <span className='my-3'>No addresses to show</span>
                            }
                          </Row>
                        </Container>
                      </Card.Body>
                    </Card>
                  </Col>
                </Row>
              </Collapse>
            </>
          }
          <Container className='showmore-container' onClick={() => setShowMore(!showMore)}>
            <Row>
              <FontAwesomeIcon icon={showMore ? faAngleUp : faAngleDown} size='2x' className='fa-icon' />
            </Row>
          </Container>
        </>
      )}
  </>
}
Example #3
Source File: TxBlockDetailsPage.tsx    From devex with GNU General Public License v3.0 4 votes vote down vote up
TxBlockDetailsPage: React.FC = () => {

  const { blockNum } = useParams()
  const networkContext = useContext(NetworkContext)
  const { dataService, isIsolatedServer } = networkContext!

  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [isLoadingTrans, setIsLoadingTrans] = useState(false)
  const [txBlockObj, setTxBlockObj] = useState<TxBlockObj | null>(null)
  const [txBlockTxns, setTxBlockTxns] = useState<string[] | null>(null)
  const [latestTxBlockNum, setLatestTxBlockNum] = useState<number | null>(null)
  const [transactionData, setTransactionData] = useState<TransactionDetails[] | null>(null)

  // Fetch data
  useEffect(() => {
    setIsLoading(true)
    if (!dataService || isIsolatedServer === null) return

    let latestTxBlockNum: number
    let txBlockObj: TxBlockObj
    let txBlockTxns: string[]
    const getData = async () => {
      try {
        if (isNaN(blockNum))
          throw new Error('Not a valid block number')
        if (isIsolatedServer) {
          txBlockTxns = await dataService.getISTransactionsForTxBlock(parseInt(blockNum))
          latestTxBlockNum = await dataService.getISBlockNum()
        } else {
          txBlockObj = await dataService.getTxBlockObj(parseInt(blockNum))
          latestTxBlockNum = await dataService.getNumTxBlocks()
          try {
            txBlockTxns = await dataService.getTransactionsForTxBlock(parseInt(blockNum))
          } catch (e) { console.log(e) }
        }
        if (txBlockObj)
          setTxBlockObj(txBlockObj)
        if (txBlockTxns)
          setTxBlockTxns(txBlockTxns)
        if (latestTxBlockNum)
          setLatestTxBlockNum(latestTxBlockNum)
      } catch (e) {
        console.log(e)
        setError(e)
      } finally {
        setIsLoading(false)
      }
    }

    getData()
    return () => {
      setTxBlockObj(null)
      setTxBlockTxns(null)
      setLatestTxBlockNum(null)
      setError(null)
    }
  }, [blockNum, dataService, isIsolatedServer])

  const columns = useMemo(
    () => [{
      id: 'from-col',
      Header: 'From',
      accessor: 'txn.senderAddress',
      Cell: ({ value }: { value: string }) => (
        <QueryPreservingLink to={`/address/${hexAddrToZilAddr(value)}`}>
          {hexAddrToZilAddr(value)}
        </QueryPreservingLink>
      )
    }, {
      id: 'to-col',
      Header: 'To',
      Cell: ({ row }: { row: Row<TransactionDetails> }) => {
        return <ToAddrDisp txnDetails={row.original} />
      }
    }, {
      id: 'hash-col',
      Header: 'Hash',
      Cell: ({ row }: { row: Row<TransactionDetails> }) => {
        console.log(row)
        return <QueryPreservingLink to={`/tx/0x${row.original.hash}`}>
          <div className='text-right mono'>
            {row.original.txn.txParams.receipt && !row.original.txn.txParams.receipt.success
              && <FontAwesomeIcon className='mr-1' icon={faExclamationCircle} color='red' />
            }
            {'0x' + row.original.hash}
          </div>
        </QueryPreservingLink>
      }
    }, {
      id: 'amount-col',
      Header: 'Amount',
      accessor: 'txn.amount',
      Cell: ({ value }: { value: string }) => (
        <OverlayTrigger placement='right'
          overlay={<Tooltip id={'amt-tt'}>{qaToZil(value)}</Tooltip>}>
          <div className='text-right'>{qaToZil(value, 10)}</div>
        </OverlayTrigger>
      )
    }, {
      id: 'fee-col',
      Header: 'Fee',
      accessor: 'txn',
      Cell: ({ value }: { value: Transaction }) => {
        const fee = Number(value.txParams.gasPrice) * value.txParams.receipt!.cumulative_gas
        return <OverlayTrigger placement='top'
          overlay={<Tooltip id={'fee-tt'}>{qaToZil(fee)}</Tooltip>}>
          <div className='text-center'>{qaToZil(fee, 4)}</div>
        </OverlayTrigger>
      }
    }], []
  )
  const fetchData = useCallback(({ pageIndex }) => {

    if (!txBlockTxns || !dataService) return

    let receivedData: TransactionDetails[]
    const getData = async () => {
      try {
        setIsLoadingTrans(true)
        receivedData = await dataService.getTransactionsDetails(txBlockTxns.slice(pageIndex * 10, pageIndex * 10 + 10))
        if (receivedData)
          setTransactionData(receivedData)
      } catch (e) {
        console.log(e)
      } finally {
        setIsLoadingTrans(false)
      }
    }

    getData()
  }, [dataService, txBlockTxns])

  return <>
    {isLoading ? <div className='center-spinner'><Spinner animation="border" /></div> : null}
    {error
      ? <NotFoundPage />
      : <>
        {latestTxBlockNum &&
          <div className={isIsolatedServer ? 'txblock-header mb-3' : 'txblock-header'}>
            <h3 className='mb-1'>
              <span className='mr-1'>
                <FontAwesomeIcon className='fa-icon' icon={faCubes} />
              </span>
              <span className='ml-2'>
                Tx Block
              </span>
              {' '}
              <span className='subtext'>#{blockNum}</span>
              <LabelStar type='Tx Block' />
            </h3>
            <span>
              <QueryPreservingLink
                className={
                  isIsolatedServer
                    ? parseInt(blockNum, 10) === 1 ? 'disabled mr-3' : 'mr-3'
                    : parseInt(blockNum, 10) === 0 ? 'disabled mr-3' : 'mr-3'}
                to={`/txbk/${parseInt(blockNum, 10) - 1}`}>
                <FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareLeft} />
              </QueryPreservingLink>
              <QueryPreservingLink
                className={
                  isIsolatedServer
                    ? parseInt(blockNum, 10) === latestTxBlockNum ? 'disabled' : ''
                    : parseInt(blockNum, 10) === latestTxBlockNum - 1 ? 'disabled' : ''}
                to={`/txbk/${parseInt(blockNum, 10) + 1}`}>
                <FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareRight} />
              </QueryPreservingLink>
            </span>
          </div>
        }
        {txBlockObj && (
          <>
            <div className='subtext'>
              <HashDisp hash={'0x' + txBlockObj.body.BlockHash} />
            </div>
            <Card className='txblock-details-card'>
              <Card.Body>
                <Container>
                  <BRow>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>Date:</span>
                        <span>
                          {timestampToDisplay(txBlockObj.header.Timestamp)}
                          {' '}
                        ({timestampToTimeago(txBlockObj.header.Timestamp)})
                      </span>
                      </div>
                    </BCol>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>Transactions:</span>
                        <span>{txBlockObj.header.NumTxns}</span>
                      </div>
                    </BCol>
                  </BRow>
                  <BRow>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>Gas Limit:</span>
                        <span>{txBlockObj.header.GasLimit}</span>
                      </div>
                    </BCol>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>Gas Used:</span>
                        <span>{txBlockObj.header.GasUsed}</span>
                      </div>
                    </BCol>
                  </BRow>
                  <BRow>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>Txn Fees:</span>
                        <span>{qaToZil(txBlockObj.header.TxnFees)}</span>
                      </div>
                    </BCol>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>Rewards Fees:</span>
                        <span>{qaToZil(txBlockObj.header.Rewards)}</span>
                      </div>
                    </BCol>
                  </BRow>
                  <BRow>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>DS Block:</span>
                        <span><QueryPreservingLink to={`/dsbk/${txBlockObj.header.DSBlockNum}`}>{txBlockObj.header.DSBlockNum}</QueryPreservingLink></span>
                      </div>
                    </BCol>
                    <BCol>
                      <div className='txblock-detail'>
                        <span>DS Leader:</span>
                        <span><QueryPreservingLink to={`/address/${pubKeyToZilAddr(txBlockObj.header.MinerPubKey)}`}>{pubKeyToZilAddr(txBlockObj.header.MinerPubKey)}</QueryPreservingLink></span>
                      </div>
                    </BCol>
                  </BRow>
                </Container>
              </Card.Body>
            </Card>
            {txBlockObj.body.MicroBlockInfos.length > 0 && (
              <Card className='txblock-details-card mono'>
                <Card.Body>
                  <Container>
                    <span>Micro Blocks</span>
                    {txBlockObj.body.MicroBlockInfos
                      .map((x) => (
                        <div key={x.MicroBlockHash}>[{x.MicroBlockShardId}] {x.MicroBlockHash}</div>
                      ))}
                  </Container>
                </Card.Body>
              </Card>
            )}
          </>
        )}
        {txBlockTxns && txBlockTxns.length > 0 && (
          <>
            <h4>Transactions</h4>
            <ViewAllTable
              isLoading={isLoadingTrans}
              fetchData={fetchData}
              pageCount={Math.ceil(txBlockTxns.length / 10)}
              columns={columns}
              data={transactionData ? transactionData : []} />
          </>
        )}
      </>
    }
  </>
}