🤝 useDapp - Getting Crypto and Token Prices

Framework for rapid Dapp development.

Simple. Robust. Extendable. Testable.

useDapp is a really valuable tool for both junior and experienced developers. It helps backend developer to rely on a tested and agile tool for most frontend features and scenarios. Great benefit for us as developers, is that we can get accurate information for our clients, since useDapp captures any change on the last executed block that could reflect in a change in our DApp. Thus becoming an extraordinary benefit, specially for Defi DApps, where you need the most up to date crypto values.

In this tutorial I am going to show how to capture the value of UNI Token (native token for the UNISWAP platform).

Requirements

In order to perform this tutorial you will need:

GIT to be able to download (clone) our reposittory from Github (GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere)

NodeJS to install and manage all required modules and dependencies in your machine (specifically on the repossitory that will be created when you clone our repo).

GIT

https://git-scm.com/downloads

For Linux distributions use the following

sudo apt-get install git

Configure GIT using the following commands:

git config --global user.name "YOUR-USERNAME"
git config --global user.email "YOUR-EMAIL"

Nodejs

Download and Install the recommended version from: https://nodejs.org/en/

Clonning the repo:

The git clone command will copy the reppository in Github to your machine creating a folder with the same name as the repo. Once completed, move into the new folder:

git clone https://github.com/luigicallero/UseDapp_TokenPrices.git
cd ./UseDapp_TokenPrices

Now execute this command to install all required packages and dependencies of the repo:

npm install

Start application with useDapp

To start the Web Server and instantiate the application execute:

npm start

Open http://localhost:8080 to view it in the browser:

Adding UNI token price to our App:

Go to https://www.coingecko.com/ and click for UNI coin

On the right side of the page under "Info" you will be able to click and copy the contract address where it says "Contract:" (we will use this contract address in next step)

Go to the folder src/pages and look for the file Prices.tsx

Here we update the file with the token information we want to see the price of.

Code added:

const UNISWAP_CONTRACT = '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984'
const uniswapPrice = useCoingeckoTokenPrice(UNISWAP_CONTRACT, 'usd') 

I also updated "prices" file to add the uniswap price to the app with the following code (copy pasted the other coin price and modified as shown here):

            {uniswapPrice && (
              <ContentRow>
                <Label>Uniswap price:</Label> <Label>$ </Label>
                <TextInline>{uniswapPrice}</TextInline>
              </ContentRow>
            )}

Working perfectly!!! and updating every time there is a change in price (since useDapp checks for updates on every new block)

Useful Links on useDapp

Official Documentation:
https://usedapp.readthedocs.io/en/latest

Programming Dapps React js + useDApp with Justyna Broniszewska
https://www.youtube.com/watch?v=DlSj9E6NP5g&t=3125s

useDapp example in Action:
https://example.usedapp.io/prices