# Build Ethereum Address Explorer using QuickNode

Are you creating a blockchain/Web3 application with a feature that interacts with the wallets on the blockchain? For that, do you have to write custom logic to fetch transactions of specific wallet addresses? It is a tiring process, isn't it? Fetch all the blocks; parse all the transactions; filter the wallet address(es).

Good news, [QuickNode](https://www.quicknode.com/) has made this process easy for you! Now, you can fetch all the wallet transactions (and filter them) in a single API call with a simple RPC method — `qn_getTransactionReceiptsByAddress`. Yes, you read that right; one method! 😄

In this guide, we will create a simple Ethereum address explorer to see how the method works. Let's begin!

#### Requirements

* **Python Web3 library**
    
    ```python
    pip3 install web3
    ```
    
* **Streamlit**  
    Streamlit is an open-source framework for building UI-based data apps in Python.
    
    ```python
    pip3 install streamlit
    ```
    
* **QuickNode Endpoint**  
    Register a free account on [QuickNode](https://www.quicknode.com/) and verify your email address. Once verified, create an Ethereum-Mainnet endpoint.
    

> As of Nov 11, 22, this method works with Ethereum-Mainnet and Ethereum-Goerli networks.

### BUIDL

#### Fetch data from QuickNode API

1. **Import components of the** `web3` library
    
    ```python
    from web3 import Web3, HTTPProvider
    ```
    
2. **Create a connection to the endpoint**
    
    ```python
    w3 = Web3(HTTPProvider(YOUR_QUICKNODE_ENDPOINT_URL))
    ```
    
3. Get the wallet address from the user
    
    ```python
    address = input("Wallet address: ")
    ```
    
4. **Call the** `qn_getTransactionReceiptsByAddress` method
    
    ```python
    txs = w3.provider.make_request('qn_getTransactionReceiptsByAddress', [
            {
                "accounts": [address]
            }
        ])
    ```
    
5. **Print the response**
    
    ```python
    print(txs)
    ```
    

Now, save the file, run it:

```python
python3 YOUR_FILE_NAME.py
```

and check the response. Here is what it should look like:

![Screenshot 2022-11-12 at 05.51.11.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1668232331919/JzCdUIBmp.gif align="left")

We got the data. Now, it's time to

#### Make UI

1. **Import the streamlit framework**
    
    ```python
    import streamlit as st
    ```
    
2. **Redefine the address variable**  
    In #3 [above](#heading-fetch-data-from-quicknode-api), we stored the user input (wallet address) in the `address` variable. With streamlit, we will do the same but with the streamlit `text_input` component. So, we will change the `address` variable definition with the following:
    
    ```python
    address = st.text_input("Wallet Address")
    ```
    
3. **Create the submit button**  
    We will use the streamlit `button` component to create the submit button.
    
    ```python
    submit = st.button("Fetch Txs")
    ```
    
4. **Call the** `qn_getTransactionReceiptsByAddress` method  
    This step and the following step will be part of the logical flow — if the `Fetch Txs` (submit) button is pressed. So, we will indent them in an `if` condition:
    
    ```python
    if submit:
    ```
    
5. Now, we are going to use the same call from #4 [above](#heading-fetch-data-from-quicknode-api) (remove from there) and use it here:
    
    ```python
        txs = w3.provider.make_request('qn_getTransactionReceiptsByAddress', [
            {
                "accounts": [address]
            }
        ])
    ```
    
6. **Iterate over the response and print the data**  
    We will receive the data as a JSON object from the QuickNode API. So, we will have to access the `result` key of the object, iterate over the elements and print the data. In the first step, we will create a variable to store the data in a string with Markdown syntax. And in the next step, we will use Streamlit's `markdown` component to print the data to the UI.
    
    ```python
        for r in txs["result"]:
            tx = (
                f'TxHash: **[{r["transactionHash"]}](https://etherscan.io/tx/{r["transactionHash"]})**  \n From: **{r["from"]}**  \n To: **{r["to"]}**')
            st.markdown(tx)
    ```
    

> If you notice, we are appending the transaction hash to the Etherscan URL. It is done to make it a clickable link that would open the transaction on Etherscan.

That's it! Now we can run the script using streamlit: `streamlit run YOUR_FILE_NAME.py`

It will give you a CLI output like this:

> You can now view your Streamlit app in your browser.
> 
> Local URL: http://localhost:8501 Network URL: http://192.168.29.35:8501

Opening the `Local URL` will take you to the running instance of the (Streamlit) app in your browser.

![Screenshot 2022-11-12 at 06.23.02.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668234194168/oP2Uw50w_.png align="left")

🧪 Now, enter the address, click the `Fetch Txs` button, and see the magic happen! ✨

![Screenshot 2022-11-12 at 06.23.31.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1668234288915/UViF7OmbI.gif align="left")

### Conclusion

We witnessed something magical — a logic that took much of your time and resources now takes a single API call. You saw it by creating your own Ethereum address explorer with a few lines of code. What an achievement! QuickNode — Making BUIDLing easy for the developers. 🚀

Lastly, there's more to the `qn_getTransactionReceiptsByAddress` method:

* Filter block range — From/To block
    
* Filter address — From/To address
    
* Sort transactions
    
* Use pagination
    

We only covered a small aspect of this method. For more, you can refer to the [official documentation](https://www.quicknode.com/docs/ethereum/qn_getTransactionReceiptsByAddress).

Until next time... 🫡

### Access

#### Live Demo

> ⚠️ Please check the notice below.

#### Full Code

%[https://gist.github.com/a26nine/200734bfa8fdf245f211a5a9746173e7] 

> ⚠️ As of Dec 1, 2022, the method *qn\_getTransactionReceiptsByAddress has been disabled by QuickNode. So, the above code will break. Once the method is reenabled, the code should work.*