UI Dev tech exercise

ui-dev-excercise.md

First, some extra info you'll need to make this work:

• Use Metamask for a wallet.
• Use the Rinkeby test network.
• Node >= v10.15.3 should be OK.
• Clone and fork the repo from https://github.com/gnosis/conditional-tokens-explorer
• Copy .env.example to a new .env file.
• yarn and then yarn start should get the dApp up and running.

Tech stack: basic git versioning knowledge, yarn, basic Typescript knowledge, basic React knowledge, styled components.

Tasks:

• Work on a new branch based on develop, name it to your liking.
• Create a new "landing" section / route. This is a new section, and the app should redirect the user there when opened.
• Header and footer should remain unchanged, we'll concentrate on adding new components to the content area (you only need to change what's inside the orange square in https://i.imgur.com/RspMoPY.png).
• Design assets: https://zpl.io/bL6nLMD (please share your email with us and we'll give you access).
• No need for responsive / mobile view, desktop version is enough.
• No need to make the stats graph work, just a vector / bitmap placeholder is enough.
• No dynamic data, not calling APIs, etc. Just the static content is enough. You can use mocked JSON data if you prefer, though (ie: conditions and positions lists).
• Re-using existing components (ie: cards, dropdowns, badges, etc.): yes, please. Take your time to check what's already there and use it if you find it useful. Feel free to create any new components you need, though.
• When it's finished, create a pull request and we'll review the changes.

Extras / nice to have:

• We need to add a search bar to the app, based on Etherscan's search feature but adapted to this app's needs. Please suggest how we could go about this (placement, useful features, etc.). Some mockups or wireframes are a plus (you can work over the original PNG file, that's fine).
• Display a mocked spinner to simulate info loading. Check the other sections for an example of how we're using the spinners.

For any questions or troubleshooting: fernando.greco@altoros.com / gabriel.rodriguez@altoros.com

---

Aclaraciones:

• Este es un proyecto en marcha, real. No vamos a re utilizar tu código, pero es muy útil saber cómo te desenvolvés en un proyecto existente y funcionando.
• Resolver en base a tu disponibilidad, no hay deadline.
• Sin embargo, es importante y se valora mucho el poder estimar los tiempos. Por tal motivo te pido nos avises el tiempo que te va a tomar resolverlo.
• La idea seria que hagas como si estuvieras trabajando en Altoros y hagas todas las consultas que tengas.