A simple web app to display  ETH to USD price feed using DIA Oracle  
Tags: smartcontracts, web3js, web3
Published: 2022-02-02 08:27:59


**What are oracles?**

Oracles are data feeds that connect blockchains to off-chain, real-world information so that you can query data in your smart contracts. Your smart contracts will be able to execute based upon inputs and outputs from the real world. They typically provide a way for web3 ecosystems to access existing data sources and advanced computations. They are very useful for data analysts, data providers and data users. 


**DIA Oracle**

One of such existing oracle is the DIA oracle. DIA provides a reliable and verifiable bridge between off-chain data from various sources and on-chain smart contracts that can be used to build a variety of financial dApps. There are quite a number of things you can do with DIA. You can develop applications and sources on top of DIA. In this article, I would be creating a simple app that displays ETH/USD price. Presently, DIA allows you do several other pairs such as BTC, DIA, USDC, FTM, SDN, KSM, MOVR which are all USD based.  

**Time to code**
Let's get to code, shall we! I will be using javascript and html for this.

Create/Navigate to your project folder:

```
mkdir pricefeed
cd pricefeed
```

Now create `index.html` and `index.js` files:

```
touch index.html
touch index.js
```

I will be using one of DIA's [deployed contracts](https://docs.diadata.org/documentation/oracle-documentation/deployed-contracts). For this writeup, I would be using the smart contract address deployed on [Binance mainnet](https://bscscan.com/address/0xbafee71d40babc12a3d0b2b8937ee62d3a070835). 

Nagivate to the contract tab on bscscan 

![Contract's screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lt2ft1hi5b9plkbksab.png)

Here is the contract's source code

```
pragma solidity 0.7.4;                                                                                                                                                                                                                      
                                                                                   
contract DIACoinmarketcapOracle {                                                  
    mapping (string => uint256) public values;                                     
    address oracleUpdater;                                                         
                                                                                   
    event OracleUpdate(string key, uint128 value, uint128 timestamp);              
    event UpdaterAddressChange(address newUpdater);                                
                                                                                   
    constructor() {                                                                
        oracleUpdater = msg.sender;                                                
    }                                                                              
                                                                                   
    function setValue(string memory key, uint128 value, uint128 timestamp) public {
        require(msg.sender == oracleUpdater);                                      
        uint256 cValue = (((uint256)(value)) << 128) + timestamp;                  
        values[key] = cValue;                                                      
        emit OracleUpdate(key, value, timestamp);                                  
    }                                                                              
                                                                                   
    function getValue(string memory key) public view returns (uint128, uint128) {
        uint256 cValue = values[key];                                              
        uint128 timestamp = (uint128)(cValue % 2**128);                            
        uint128 value = (uint128)(cValue >> 128);                                  
        return (value, timestamp);                                                 
    }                                                                              
                                                                                   
    function updateOracleUpdaterAddress(address newOracleUpdaterAddress) public {
        require(msg.sender == oracleUpdater);                                      
        oracleUpdater = newOracleUpdaterAddress;                                   
        emit UpdaterAddressChange(newOracleUpdaterAddress);                        
    }                                                                              
}
```

Scroll down to also find the contract's ABI as we would be using it shortly.


![Contract's ABI screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc3tsqc83u2p1zrg20qf.png) 

Now looking at the contract, there is a getValue method, in order to get the response from the method, make a call to the method as shown below. Remember also that we are using the key ‘ETH’

Your code should look like this

```
const currentPriceResponse = await contract.methods.getValue('ETH').call()
```
Copy the ABI as we would also be using it in our code. In the end, your js file would look something close to this

```
async function connect() {
    const priceElem = document.querySelector('#price')
    try {
        priceElem.textContent = 'Updating price...';

        const ABI = [ABI]

        const web3 = new Web3(new Web3.providers.HttpProvider("https://bsc-dataseed.binance.org/"))
        const contract = new web3.eth.Contract(ABI);
        contract.options.address = "0xbAFEe71d40baBC12a3D0B2b8937ee62D3A070835";
        const currentPriceResponse = await contract.methods.getValue('ETH').call()
        console.log(currentPriceResponse[0]);
        if (currentPriceResponse[0]) {
            const formatter = new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
                minimumFractionDigits: 2,
            });
            priceElem.textContent = formatter.format(currentPriceResponse[0] / 100000);
        }

    } catch (e) {
        priceElem.textContent = 'An error occurred while updating the price, please refresh your page.';
    }
}

window.onload = function() {
    connect();
}
```

Let's give some edits to the index.html file. You can write something as simple as a div or a header.

​​ 

```
<h5>
    <span>Current Value: <i id="price"></i></span>
</h5>
```
Run your app and you would see that you are getting ETH/USD prices in real time. That’s pretty much it! A sample is deployed [here](https://objective-goldberg-1a9508.netlify.app/). Feel free to check out the [Source Code](https://github.com/amoweolubusayo/pricefeed).
Thanks for reading! I hope you learnt a thing or two. 

**Glossary**
Off-chain: Off-chain transactions refer to those transactions occurring on a cryptocurrency network that move the value outside of the blockchain. Due to their zero/low cost, off-chain transactions are gaining popularity, especially among large participants. [Read more](https://www.investopedia.com/terms/o/offchain-transactions-cryptocurrency.asp#:~:text=Off%2Dchain%20transactions%20refer%20to,contrasted%20with%20on%2Dchain%20transactions)

On-chain: On-chain transactions refer to cryptocurrency transactions that occur on the blockchain and remain dependent on the state of the blockchain for their validity. On-chain transactions are considered valid only when the blockchain has been updated to reflect the transactions on the public ledger. [Read more](https://www.investopedia.com/terms/c/chain-transactions-cryptocurrency.asp)

Smart contracts: A "smart contract" is simply a program that runs on a blockchain. It's a collection of code (its functions) and data (its state) that resides at a specific address on the blockchain. [Read more](https://ethereum.org/en/developers/docs/smart-contracts/)

ABI : The Contract Application Binary Interface (ABI) is the standard way to interact with contracts in the Ethereum ecosystem, both from outside the blockchain and for contract-to-contract interaction. Data is encoded according to its type, as described in this specification. The encoding is not self describing and thus requires a schema in order to decode. [Read more](https://docs.soliditylang.org/en/v0.8.11/abi-spec.html#:~:text=Contract%20ABI%20Specification-,Basic%20Design,contract%2Dto%2Dcontract%20interaction.&text=This%20specification%20does%20not%20address,known%20only%20at%20run%2Dtime)