@fortawesome/free-solid-svg-icons#faFileContract TypeScript Examples

ToAddrDisp: React.FC<IProps> = ({ txnDetails }) => (
  txnDetails.contractAddr
    ? txnDetails.isContractCreation
      ? <QueryPreservingLink to={`/address/${hexAddrToZilAddr(txnDetails.contractAddr)}`}>
        <FontAwesomeIcon color='darkturquoise' icon={faFileContract} />
        {' '}
        Contract Creation
      </QueryPreservingLink>
      : <QueryPreservingLink to={`/address/${hexAddrToZilAddr(txnDetails.contractAddr)}`}>
        <FontAwesomeIcon color='darkorange' icon={faFileContract} />
        {' '}
        Contract Execution
      </QueryPreservingLink>
    : <QueryPreservingLink to={`/address/${hexAddrToZilAddr(txnDetails.txn.txParams.toAddr)}`}>
      {hexAddrToZilAddr(txnDetails.txn.txParams.toAddr)}
    </QueryPreservingLink>
)

ToAddrDispSimplified: any = ({ toAddr, fromAddr, txType, addr }: any) => {
  const hexAddr = stripHexPrefix(zilAddrToHexAddr(addr));
  
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let type: any;

  if (fromAddr.toLowerCase() === toAddr.toLowerCase()) {
    type = <BothArrow width="20px" height="14px" fill="gray" />;
  } else {
    type =
      fromAddr.toLowerCase() === hexAddr ? (
        <RightArrow width="20px" height="14px" fill="red" />
      ) : (
        <LeftArrow width="20px" height="14px" fill="green" />
      );
  }

  let txTypeIcon: any = undefined;

  if (txType === "contract-creation") {
    txTypeIcon = (
      <FontAwesomeIcon color="darkturquoise" icon={faFileContract} />
    );
  }

  if (txType === "contract-call") {
    txTypeIcon = <FontAwesomeIcon color="darkorange" icon={faFileContract} />;
  }

  return (
    <OverlayTrigger
      placement="top"
      overlay={<Tooltip id={"overlay-to"}>{txType}</Tooltip>}
    >
      <div className="d-flex align-items-center">
        {txTypeIcon ? <div className="mr-2">{txTypeIcon}</div> : null}
        {txType === "contract-creation" ? (
          <div>Contract</div>
        ) : toAddr.toLowerCase() !== hexAddr ? (
          <QueryPreservingLink to={`/address/${hexAddrToZilAddr(toAddr)}`} className="ellipsis mono">
            {hexAddrToZilAddr(toAddr)}
          </QueryPreservingLink>
        ) : (
          <span className="text-muted">{addr}</span>
        )}
      </div>
    </OverlayTrigger>
  );
}

ContractDetailsPage: React.FC<IProps> = ({ addr }) => {
  const networkContext = useContext(NetworkContext);
  const { dataService, isIsolatedServer, networkUrl } = networkContext!;

  const addrRef = useRef(addr);
  const [contractData, setContractData] = useState<ContractData | null>(null);
  const [creationTxnHash, setCreationTxnHash] = useState<string | null>(null);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [owner, setOwner] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [transactionsCount, setTransactionsCount] = useState<number>(0);

    const isFungibleToken = (contractData: ContractData) => {
      const symbol = contractData.initParams.find(
        (item) => item.vname === "symbol"
      );
      const name = contractData.initParams.find(
        (item) => item.vname === "name"
      );
      const init_supply = contractData.initParams.find(
        (item) => item.vname === "init_supply"
      );
      const decimals = contractData.initParams.find(
        (item) => item.vname === "decimals"
      );

      if (symbol && name && init_supply && decimals) {
        const holders = Object.keys(contractData.state.balances).length;
        /* const holds = Object.values(contractData.state.balances);

      const init_value = typeof (init_supply.value === "string")
        ? parseFloat(init_supply.value)
        : 0;

      console.log(holds);
      const supply =
        init_value -
        (holds.length
          ? holds.reduce(
              (prev: number, current: any) => prev + parseFloat(current),
              0
            )
          : 0); */

        return {
          symbol,
          name,
          init_supply,
          decimals,
          holders,
        };
      }
      return false;
    };

    const fungibleToken = contractData ? isFungibleToken(contractData) : false;


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

    let contractData: ContractData;
    let creationTxnHash: string;
    let owner: string;
    const getData = async () => {
      try {
        if (isIsolatedServer) {
          contractData = await dataService.getContractData(addrRef.current);
        } else {
          contractData = await dataService.getContractData(addrRef.current);
          creationTxnHash = await dataService.getTxnIdFromContractData(
            contractData
          );
          owner = await dataService.getTransactionOwner(creationTxnHash);
        }
        if (contractData) setContractData(contractData);
        if (creationTxnHash) setCreationTxnHash(creationTxnHash);
        if (owner) setOwner(owner);
      } catch (e) {
        console.log(e);
      } finally {
        setIsLoading(false);
      }
    };
    getData();
  }, [dataService, isIsolatedServer]);

  const generateTabsObj = () => {
    const tabs: {
      tabHeaders: string[];
      tabTitles: string[];
      tabContents: React.ReactNode[];
    } = {
      tabHeaders: [],
      tabTitles: [],
      tabContents: [],
    };

    if (!contractData) return tabs;

    tabs.tabHeaders.push("transactions");
    tabs.tabTitles.push("Transactions");
    tabs.tabContents.push(
      <ContractTransactionsTab
        initParams={contractData.initParams}
        contractAddr={addrRef.current}
        fungibleToken={fungibleToken}
        onTransactionsCount={setTransactionsCount}
      />
    );

    tabs.tabHeaders.push("initParams");
    tabs.tabTitles.push("Init Parameters");
    tabs.tabContents.push(
      <InitParamsTab initParams={contractData.initParams} />
    );

    tabs.tabHeaders.push("State");
    tabs.tabTitles.push("State");
    tabs.tabContents.push(<DefaultTab content={contractData.state} />);

    tabs.tabHeaders.push("code");
    tabs.tabTitles.push("Code");
    tabs.tabContents.push(<CodeTab code={contractData.code} />);

    return tabs;
  };

  return (
    <>
      {isLoading ? (
        <div className="center-spinner">
          <Spinner animation="border" />
        </div>
      ) : null}
      {contractData && (
        <>
          <div className="address-header">
            <h3 className="mb-1">
              <span className="mr-1">
                <FontAwesomeIcon className="fa-icon" icon={faFileContract} />
              </span>
              <span className="ml-2">Contract</span>
              <LabelStar type="Contract" />
            </h3>
            <ViewBlockLink
              network={networkUrl}
              type="address"
              identifier={addrRef.current}
            />
          </div>
          <div className="subtext">
            <AddressDisp isLinked={false} addr={addrRef.current} />
          </div>
          <Card className="address-details-card">
            <Card.Body>
              <Container>
                <Row className="mb-4">
                  <Col>
                    <div className="subtext text-small">Balance</div>
                    <div>{qaToZil(contractData.state["_balance"])}</div>
                  </Col>
                  <Col>
                    <div className="subtext text-small">Transactions</div>
                    <div>{transactionsCount}</div>
                  </Col>
                  {fungibleToken ? (
                    <>
                      <Col>
                        <div className="subtext text-small">Token Info</div>
                        <div>
                          {fungibleToken.name.value} <br />
                          {fungibleToken.symbol.value}
                        </div>
                      </Col>
                      <Col>
                        <div className="subtext text-small">Token Holders</div>
                        <div>{fungibleToken.holders}</div>
                      </Col>
                      <Col>
                        <div className="subtext text-small">
                          Token Transfers
                        </div>
                        <div></div>
                      </Col>
                      <Col>
                        <div className="subtext text-small">Token Supply</div>
                        <div>{fungibleToken.init_supply.value}</div>
                      </Col>
                    </>
                  ) : null}
                </Row>
                {creationTxnHash && (
                  <>
                    <Row className="mb-0">
                      <Col>
                        <div>
                          <span className="mr-2">Contract Creation:</span>
                          <span className="pl-2">
                            <QueryPreservingLink to={`/tx/${creationTxnHash}`}>
                              {creationTxnHash}
                            </QueryPreservingLink>
                          </span>
                        </div>
                      </Col>
                    </Row>
                  </>
                )}
              </Container>
            </Card.Body>
          </Card>
          <InfoTabs tabs={generateTabsObj()} />
        </>
      )}
    </>
  );
}

TxnDetailsPage: React.FC = () => {
  const { txnHash } = useParams();
  const networkContext = useContext(NetworkContext);
  const { dataService, networkUrl } = networkContext!;

  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<TransactionDetails | null>(null);

  // Fetch data
  useEffect(() => {
    if (!dataService) return;

    let receivedData: TransactionDetails;
    const getData = async () => {
      try {
        setIsLoading(true);
        receivedData = await dataService.getTransactionDetails(txnHash);
        if (receivedData) {
          setData(receivedData);
        }
      } catch (e) {
        console.log(e);
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };

    getData();
    return () => {
      setData(null);
      setError(null);
    };
  }, [dataService, txnHash]);

  return (
    <>
      {isLoading ? (
        <div className="center-spinner">
          <Spinner animation="border" />
        </div>
      ) : null}
      {error ? (
        <NotFoundPage />
      ) : (
        data &&
        data.txn.txParams.receipt && (
          <>
            <div className="transaction-header">
              <h3 className="mb-1">
                <span className="mr-1">
                  {data.txn.txParams.receipt.success === undefined ||
                  data.txn.txParams.receipt.success ? (
                    <FontAwesomeIcon color="green" icon={faExchangeAlt} />
                  ) : (
                    <FontAwesomeIcon color="red" icon={faExclamationCircle} />
                  )}
                </span>
                <span className="ml-2">Transaction</span>
                <LabelStar type="Transaction" />
              </h3>
              <ViewBlockLink
                network={networkUrl}
                type="tx"
                identifier={data.hash}
              />
            </div>
            <div className="subtext">
              <HashDisp hash={"0x" + data.hash} />
            </div>
            <Card className="txn-details-card">
              <Card.Body>
                <Container>
                  <Row>
                    <Col>
                      <div className="txn-detail">
                        <span>From:</span>
                        <span>
                          <QueryPreservingLink
                            to={`/address/${hexAddrToZilAddr(
                              data.txn.senderAddress
                            )}`}
                          >
                            {hexAddrToZilAddr(data.txn.senderAddress)}
                          </QueryPreservingLink>
                        </span>
                      </div>
                    </Col>
                    <Col>
                      <div className="txn-detail">
                        <span>To:</span>
                        <span>
                          {data.contractAddr ? (
                            data.txn.txParams.receipt.success ? (
                              <QueryPreservingLink
                                to={`/address/${hexAddrToZilAddr(
                                  data.contractAddr
                                )}`}
                              >
                                <FontAwesomeIcon
                                  color="darkturquoise"
                                  icon={faFileContract}
                                />{" "}
                                {hexAddrToZilAddr(data.contractAddr)}
                              </QueryPreservingLink>
                            ) : (
                              <QueryPreservingLink
                                to={`/address/${hexAddrToZilAddr(
                                  data.txn.txParams.toAddr
                                )}`}
                              >
                                {hexAddrToZilAddr(data.txn.txParams.toAddr)}
                              </QueryPreservingLink>
                            )
                          ) : (
                            <QueryPreservingLink
                              to={`/address/${hexAddrToZilAddr(
                                data.txn.txParams.toAddr
                              )}`}
                            >
                              {hexAddrToZilAddr(data.txn.txParams.toAddr)}
                            </QueryPreservingLink>
                          )}
                        </span>
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <div className="txn-detail">
                        <span>Amount:</span>
                        <span>
                          {qaToZil(data.txn.txParams.amount.toString())}
                        </span>
                      </div>
                    </Col>
                    <Col>
                      <div className="txn-detail">
                        <span>Nonce:</span>
                        <span>{data.txn.txParams.nonce}</span>
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <div className="txn-detail">
                        <span>Gas Limit:</span>
                        <span>{data.txn.txParams.gasLimit.toString()}</span>
                      </div>
                    </Col>
                    <Col>
                      <div className="txn-detail">
                        <span>Gas Price:</span>
                        <span>
                          {qaToZil(data.txn.txParams.gasPrice.toString())}
                        </span>
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <div className="txn-detail">
                        <span>Transaction Fee:</span>
                        <span>
                          {qaToZil(
                            Number(data.txn.txParams.gasPrice) *
                              data.txn.txParams.receipt!.cumulative_gas
                          )}
                        </span>
                      </div>
                    </Col>
                    <Col>
                      <div className="txn-detail">
                        <span>Transaction Block:</span>
                        <span>
                          <QueryPreservingLink
                            to={`/txbk/${data.txn.txParams.receipt.epoch_num}`}
                          >
                            {data.txn.txParams.receipt.epoch_num}
                          </QueryPreservingLink>
                        </span>
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <div className="txn-detail">
                        <span>Success:</span>
                        <span>{`${data.txn.txParams.receipt.success}`}</span>
                      </div>
                    </Col>
                    {data.txn.txParams.receipt.accepted !== undefined && (
                      <Col>
                        <div className="txn-detail">
                          <span>Accepts $ZIL:</span>
                          <span>{`${data.txn.txParams.receipt.accepted}`}</span>
                        </div>
                      </Col>
                    )}
                  </Row>
                </Container>
              </Card.Body>
            </Card>
            <TransactionFlow hash={txnHash} txn={data.txn} />
            <InfoTabs tabs={generateTabsFromTxnDetails(data)} />
          </>
        )
      )}
    </>
  );
}

HelpView: React.FC = observer(function HelpView() {
    const { navigation } = useStores()
    const navigate = useNavigate()
    const location = useLocation()
    const isBugReportActive = location.pathname.includes(locations.helpBugReport)
    const isTermsAndConditionsActive = location.pathname.includes(locations.helpTermsAndConditions)
    return (
        <ViewContainer>
            <ViewNavBar />
            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <IconPerson color={brandLight} />
                        <Title>Get help</Title>
                        <Small>Help using Mysterium VPN</Small>
                    </SideTop>
                    <SideBot>
                        <SupportChatButton onClick={() => navigation.openChat()}>
                            <FontAwesomeIcon icon={faComments} />
                            Support chat
                        </SupportChatButton>
                        <NavButton active={isBugReportActive} onClick={() => navigate(locations.helpBugReport)}>
                            <FontAwesomeIcon icon={faBug} />
                            Bug report
                        </NavButton>
                        <NavButton
                            active={isTermsAndConditionsActive}
                            onClick={() => navigate(locations.helpTermsAndConditions)}
                        >
                            <FontAwesomeIcon icon={faFileContract} />
                            Terms & Conditions
                        </NavButton>
                        <NavButton active={false} onClick={() => shell.openExternal("https://docs.mysterium.network")}>
                            <FontAwesomeIcon icon={faBook} />
                            Documentation
                        </NavButton>
                        <SocialButtons>
                            <IconButton
                                active={false}
                                onClick={() => {
                                    shell.openExternal("https://discordapp.com/invite/n3vtSwc")
                                }}
                            >
                                <FontAwesomeIcon icon={faDiscord} size="2x" />
                            </IconButton>
                            <IconButton
                                active={false}
                                onClick={() => {
                                    shell.openExternal("https://www.reddit.com/r/MysteriumNetwork/")
                                }}
                            >
                                <FontAwesomeIcon icon={faReddit} size="2x" />
                            </IconButton>
                            <IconButton active={false}>
                                <FontAwesomeIcon
                                    icon={faTwitter}
                                    size="2x"
                                    onClick={() => {
                                        shell.openExternal("https://twitter.com/MysteriumNet")
                                    }}
                                />
                            </IconButton>
                            <IconButton active={false}>
                                <FontAwesomeIcon
                                    icon={faFacebookSquare}
                                    size="2x"
                                    onClick={() => {
                                        shell.openExternal("https://www.facebook.com/MysteriumNet")
                                    }}
                                />
                            </IconButton>
                        </SocialButtons>
                        <Version />
                    </SideBot>
                </ViewSidebar>
                <Content>
                    <Outlet />
                </Content>
            </ViewSplit>
        </ViewContainer>
    )
})