Frontend Challenge 💪

Develop a decentralized application that serves as a simple price widget for Energiswap.

The dApp should have 2 tabs:

• Home (display tokens)
• Wallet

Flow

Home

When the homepage loads, it should display tokens in a table sorted by price.

Header columns:

• Icon (see the attached archive)
• Ticker Symbol
• Name
• Price in USD (formatted)

Make sure the columns are sortable.

See Energiswap API endpoint that will help you construct the table.

Wallet

When a user clicks on the Wallet tab it should open up the wallet page. If Metamask is disconnected, it should display the Connect wallet button. When Metamask is connected, it will display:

• Cryptocurrency amount
• USD value

Make sure all numbers are formatted, and switching between Metamask accounts works as expected.

EXTRA

Create a toggle button in the right top corner should a user wish to switch between the dark and light themes.

Running the App

The app should run by executing the following commands:

yarn
yarn start

Extra Materials

Some images for orientation (your dapp doesn't have to look exactly the same).

Here are some graphical elements that will help you speed up the development.

Expectations

1. Create a feature branch with your name
2. Open an MR (merge request) which will allow us to communicate
3. The more creative you are, the better

Do your best!