This readme provides an overview of the functionalities added to the Matrix Labs Dexscreener website. The website is designed to allow users to explore decentralized exchange (DEX) information using data from the Dexscreener API.
Desktop View
Pair Address Result
Mobile View
The website leverages the Dexscreener API endpoints to fetch data related to DEX tokens. Specifically, the following endpoints are utilized:
https://api.dexscreener.com/latest/dex/tokens/:tokenAddresseshttps://api.dexscreener.com/latest/dex/search/?q=:q
The UI interface of the website adheres closely to the design instructions provided in the Figma design reference. The design is implemented using ReactJS for the frontend and Chakra-UI for styling.
The search bar on the website allows users to input pair/token addresses. The website then fetches and displays data for the corresponding pairs using asynchronous calls to the Dexscreener API.
Upon searching for a token address, the website retrieves data for up to 10 pairs from the Dexscreener API. The displayed data follows the pattern outlined in the Figma design. The pairs are ordered in descending order of price in USD.
The Matrix Labs Dexscreener website is built using the following tech stack:
- ReactJS: Frontend framework for building user interfaces.
- Chakra-UI : Chakra UI is a popular open-source design system and component library for building user interfaces (UIs) in React applications.
The website is deployed using Vercel, ensuring accessibility and ease of use for users.
- Visit the deployed website link.
- Use the search bar to enter a pair/token address.
- View the displayed results for the token pair, including relevant data.