Cryptocurrency Data

Cryptocurrency Data is a demo web component built with Stencil. It displays the rates and changes in rates for various cryptocoins such as Bitcoin, Ethereum etc.

To see it in action, please visit the demo webpage.

About

This web component is a proof of concept. It retrieves the data from the CoinMarketCap API and has some basic settings, what type of data should be displayed. Moreover, multiple instances of this component communicate and transfer data via events to minimize the number API calls: Only one component performs the API call and submits the retrieved data to all other components.

Usage

1. Put <script async defer src='https://unpkg.com/[email protected]/dist/cryptocurrencydata.js'></script> in the header of your website or app.

2. Use the web component in your website content as follows:

<cryptocurrency-data coin="BTC" show="USD"></cryptocurrency-data>

This results in the following output (price may vary...):

4181.98 USD

• coin (string) is the kind of cryptocoin. It can be any coin in the Top 10 of CoinMarketCap (in terms of market capitalization). Valid values are in the moment: BTC, ETH, XRP, BCH, LTC, DASH, XEM, MIOTA, NEO and XMR.

• If show (string) equals USD or EUR, the component shows the rate of the coin in US-Dollar or Euro, respectively.

• If show equals to 1h, 24h or 7d, the component shows the change of the rate within the last hour, the last 24 hours or the last seven days, respectively.

You can put as many of this web component in an app or on a web page, e.g. to show different types of coin data. See index.html, which displays a good old HTML table containing the rates of five coins in USD and EUR.

Installation for local development

1. Clone this repo:

git clone https://github.com/OnnoGeorg/cryptocurrency-data.git my-app
cd my-app
git remote rm origin

2. Install all dependencies:

npm install

3. Compile and run the web component with Stencil:

npm start

This last command also starts a small web server and opens a browser to display a sample web page containing multiple instances of this web component.

How does it work?

The web component calls the JSON API of CoinMarketCap to retrieve data of the 10 coins with the highest market capitalization (= most popular). This data is stored as an associative array in a @State() property within the web component.

To avoid unnecessary (multiple) calls to the external API, only one (the first visible) web component performs this call. Just before the API call, this first component emits an event to all other web components. This event prevents these other components from performing an API call for their own.

After the data is retrieved from the API, the first component emits a second event containing this data to all other components.