Skip to content

Latest commit

 

History

History
99 lines (70 loc) · 3.39 KB

README.md

File metadata and controls

99 lines (70 loc) · 3.39 KB
Raw

DAPP Example

This project is an exercise about creating an erc-20 decentralized defi application using :

  • React/Redux
  • Bootstrap / sass
  • Web3
  • Etherscan API
  • Alchemy SDK
  • Coingecko API (This api is used to display prices in it's free version. Rate limit applies so you may see a lot of errors if you have many tokens in your wallet.)

Installation

  • run npm install
  • copy .env.example to a new .env file
  • set API key for etherscan api in .env
  • set API key for alchemy sdk in .env

Run npm start

Application accessible on : http://localhost:5000

App structure

  • src
    • components : shared components directory
    • containers : represent the pages (entry points) of the application
    • contexts : React context providers directory
      • ThemeContext.ts : Dark/Light mode global management
    • store : Redux implementation
      • hooks.ts : Redux application hooks utilities
      • store.ts : Redux store initialization
      • thunk.ts : implements async requests and processings and initialization of sdks
      • walletSlice.ts : define the reducer for our application
    • types : types definition directory

Features

Summary

The application is intended to be used with Metamask wallet. The search form on the home screen is for testing with different addresses.

  • Detect if Metamask is installed
  • "Install Metamask" redirect to Metamask's website
  • "Connect wallet" requests accounts on Metamask extension
  • Toggle network change from application header
  • Listening for network changes from Metamask
  • Listening for account changes from Metamask
  • Display list of ethereum transactions with total ethereum balance
  • Display list of tokens in wallet with total value in usd
  • Display list of NFTs by collection
  • Refresh data button
  • "Load more" results management on ethereum page
  • Disconnection
  • Dark mode / Light mode
  • Toast error management

Screens

Search by address or connect metamask wallet

Metamask not installed Metamask present
Home page no metamask Home page with metamask

Ethereum

Ethereum page

Tokens

Tokens page

NFTs

NFT page

Dark mode

Light mode Dark mode
Ethereum page Ethereum page

Errors

Error

Local Proxy

src/setupProxy.js was setup to avoid getting CORS errors on coingecko apis requests and retrieve the error message correctly. A basic condition has been put in place in thunk but this should be globally configured for future developments/deployments to manage api urls correctly.

TODO improvements

  • Handle unsupported networks on network change
  • Display additional info for NFT
  • Connect components to store with connect() utility from redux and mapStateToProps
  • Better management of configuration depending environment
  • Better management of api urls
  • split thunk into dedicated feature