Add Ethereum price chart #3
Description
Current behavior
The current implementation only shows the current conversion rate of EUR/ETH (Euro, Ethereum).
Desired behavior
We want to show a price-chart (or at least some curve) to give our customers some more context about the current price-level.
There are two or three ways, we would recommend you to solve the problem. If you have other recommendations, let us know. We are open for suggestions. Thus, you just need to resolve ONE of the following proposed solutions.
Solution 1: Add responsive modal & show price chart
- Add a fully-responsive modal which is opened when clicking on the current price rate (see image above, red arrow).
- Add generalized modal component (to allow other modals with different content to be created). This blog post might be helpful: https://codeburst.io/a-quick-intro-to-reacts-props-children-cb3d2fce4891
- Add price chart (create new component)
-
As we use TailwindCSS, we would recommend you to use this prebuilt-component, to save you some time: https://tailwindcomponents.com/component/stock-chart-with-alpinejs-and-chartsjs
-
The price chart doesn't need to be updated in real-time. Just load data once on page-load and save data into the components-state. Maybe this api-documentation is helpful (if you now a better api, which is completely free, then feel free to use that): https://min-api.cryptocompare.com/
- Ensure that the modal and its contents are fully responsive (modal should be easily usable on mobile).
Solution 2: Replace the current price-box
-
The current price-rate box already takes a lot of space. This allows us to replace the component with e.g. following component: https://tailwindcomponents.com/component/dashboard-statistic-widgets (if you know a better component, or want to build such a component yourself feel free to do so [but please use TailwindCSS]).
-
The price chart in the background should show the price development of the last week (if not possible other timeframes are fine, too). The price chart doesn't need to be updated in real-time. Just load data once on page-load and save data into the components-state. Maybe this api-documentation is helpful (if you now a better api, which is completely free, then feel free to use that): https://min-api.cryptocompare.com/
If you need support, let us know!