Skip to content

Latest commit

 

History

History
40 lines (27 loc) · 1.9 KB

README.md

File metadata and controls

40 lines (27 loc) · 1.9 KB
Raw

Uniswap Explorer

React Web App that displays the 10 largest liquidity pools by totalValueLockedUSD and allows you to connect to the Ethereum Blockchain via MetaMask. It's a work in progress and for now it's mainly a learning-by-doing way for me to better understand React in general and building a front-end app that interfaces with Web3 in specific.

Under the hood it:

  • Uses web3-react to easily connect to Web3 providers.
  • Uses React hooks to fetch and cache data from Contracts and optimize performance using SWR
  • Allows you to generate types for the contract ABIs using TypeChain in the ./contracts folder.
  • Queries the UniswapV3 subgraph using GraphQL.
  • Uses HardHat to compile, deploy and test Solidity smart contracts. It's also used to start a local hardhat node as a fork of the Ethereum mainnet. You do this by executing npx hardhat node.

Many thanks to Jeff Reiner for making available his next-web3-boilerplate project. It contained many valuable examples and was a great help to get off to a running start.

Scripts

In the project directory, you can run:

npm run compile-contract-types

This compiles the contract types for all the smart contract ABIs (JSON files) that are placed in the ./contracts folder.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

When started up it should look something like:

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.