You will need a Glassnode Studio Account and an API Key to fetch necessary data. You can obtain a free key by registering a new account (studio.glassnode.com) and navigating to the Settings/API page to generate it. Once you have it you can learn more how to get data from our docs.

Generate a repository for your solution from the provided template ("Use this template" button on github), and send us a link to your repository.

Simply organize your code in a folder, scripts and READMEs - anything you'd like to provide.

We respect your time and the challenge is designed in such a way as not to take more than 3-4 hours. We just want to get a sense of your thought process and the way you do the work. If there are things you don't have time to implement, feel free to describe the intended approach to implementation in the README.

Create a webapp that allows for a simple data presentation layer of on-chain metrics. It should render an interactive chart (with Price USD and selected On-Chain Metric). Users should be able to hover over the point on the chart and see a tooltip with information like:

• metric name
• metric value
• price value - in US dollars
• date

Necessary endpoints:

• https://api.glassnode.com/v1/metrics/mining/difficulty_latest?a=BTC&i=24h
• https://api.glassnode.com/v1/metrics/mining/hash_rate_mean?a=BTC&i=24h
• https://api.glassnode.com/v1/metrics/market/price_usd_close?a=BTC&i=24h

You would need to provide an apiKey param to fetch data in your app (if you’re logged to studio, you will be able to see the response in your browser)

The app should have three pages:

• /
• /difficulty
• /hash-rate

In order to get information from our API you have to use proxy server which can prevent CORS issue. There are few solutions you can use.

Chrome users: https://chrome.google.com/webstore/search/CORS?hl=en Firefox users: https://addons.mozilla.org/en-US/firefox/search/?q=cors

$ npx local-cors-proxy --proxyUrl https://api.glassnode.com --proxyPartial "/"

or

$ npm install -g local-cors-proxy
$ local-cors-proxy --proxyUrl https://api.glassnode.com --proxyPartial "/"

Visit https://cors-anywhere.herokuapp.com/ for more information.

Default entry point. It needs to contain a basic navigation component (navbar, sidebar or other) which will be displayed on other pages as well. In the place where content is going to be visible there should be a message:

Please select a metric you would like to display

It needs to contain basic navigation (see above) and chart component. Navigating to that page should fetch necessary information from our API and display it to the users. It needs to contain information about the Price (log scale) and Difficulty (lin scale).

It needs to contain basic navigation (see above) and chart component. Navigating to that page should fetch necessary information from our API and display it to the users. It needs to contain information about the Price (log scale) and Hash Rate (lin scale).

• Your solution should be written in React. You may use create-react-app, nextjs or anything else to bootstrap your development.
• For UI you can use any framework of your choice (AntDesign, Tailwind, etc.) or write your own CSS.
• You're free to use any charts library. Think about the best fit for solving the task.
• For state management you may use a state-management library such as Redux or similar, React Context API or React's setState().
• Make sure it works in latest Chrome, Safari or Firefox
• App should be responsive - it should look good on Mobile (>375px width) and Desktop (>1024px width)