Crypto-Whale-Tracker

Title Crypto Whale Tracker Live hosting on Heroku

• https://crypto-whale-tracker.netlify.app/

Overview This app is a DeFi DApp based on Smart Contract ERC20 Token standards and Ethereum Blockchain. The user can securely connect to the Ehterscan network and fetch data from a wallet he/she wishes to track for analytical purposes and maintain a saved list of wallets they wish to track on a consistent basis.

Languages: React, Redux, CSS, JS, HTML

• Other: Ethereum, JSON, Postman, Web3, Babelrc, Solidity,

Stretch Goals (Future)

• Analytics result view for ERC20 API call

Code Snippets

The code below shows how the header is displayed based on the type of api call. If the user selects the ERC20 results then the header and the view are displayed accordingly. The ERC20 displays the Symbol Name

  <div className="vertical">
      <div className="card bg-dark text-white">
          <div className="card-header">Blockchain Transactions for wallet address :<span>{<span> {'\u00A0'} {lastAddress}</span> }</span>
            
          {showERC20 ? <HeaderERC20 /> : <Header />}
              
            
          </div>
          {/* begin mapping walletData Blockchain Txns */}
          <div className="card-body d-flex flex-column"> {walletData && walletData.map(walletData => {
              return <>
                  <div className="d-flex flex-row blockchain-txns">
                    <div className="flex-fill p-2 blockchain-txns-hash">{`${walletData.hash}`}</div>
                    {showERC20 ? <div className="flex-fill p-2 blockchain-txns-symbol">{walletData.tokenSymbol && walletData.tokenSymbol}</div> : null}
                    <div className="flex-fill p-2 blockchain-txns-blocknumber">{`${walletData.blockNumber}`}</div>
                    <div className="flex-fill p-2 blockchain-txns-timestamp">{convertedDate(walletData.timeStamp)}</div>
                    <div className="flex-fill p-2 blockchain-txns-from">{`${walletData.from}`}</div>
                    <div className="flex-fill p-2 blockchain-txns-to">{`${walletData.to}`}</div>
                    <div className="flex-fill p-2 blockchain-txns-value">{`${convertedValue(walletData.value)}`}</div>
                  </div>
                </>;
              })}
              {/* end mapping walletData Blockchain Txns */}
          </div>
      </div>
    </div>

The below code shows the conversion for the date and value data received from the blockchain and then returned to the component for rendering.

  export const convertedDate = (date) => {
      date = (date * 1000);
      let convertedDate = new Date (date);
      return convertedDate.toString();
  }

  export const convertedValue = (value) => {
      let convertedValue = (value);
      if(convertedValue === undefined){
          convertedValue = 0;
      }
      else {
          convertedValue = convertedValue / 1000000000000000000;//this is the Wei value for ethereum
      }
      return convertedValue;
  }