Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/OnnoGabriel/cryptocurrency-data
Web component displaying the rates for various crypto coins in USD and EUR
https://github.com/OnnoGabriel/cryptocurrency-data
Last synced: 5 days ago
JSON representation
Web component displaying the rates for various crypto coins in USD and EUR
- Host: GitHub
- URL: https://github.com/OnnoGabriel/cryptocurrency-data
- Owner: OnnoGabriel
- License: mit
- Archived: true
- Created: 2017-09-30T19:25:40.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-27T14:33:19.000Z (about 6 years ago)
- Last Synced: 2024-10-14T07:58:46.371Z (26 days ago)
- Language: TypeScript
- Size: 88.9 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - Cryptocurrency Data
README
# Cryptocurrency Data
Cryptocurrency Data is a demo web component built with [Stencil](https://stenciljs.com/). 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](https://www.datacodedesign.de/web-component-demo-cryptocurrency-data/).
## About
This web component is a *proof of concept*. It retrieves the data from the [CoinMarketCap](https://coinmarketcap.com) 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 `` in the header of your website or app.
2. Use the web component in your website content as follows:
~~~~ {.html}
~~~~
This results in the following output (price may vary...):
~~~~ {.html}
4181.98 USD
~~~~
* `coin (string)` is the kind of cryptocoin. It can be any coin in the Top 10 of [CoinMarketCap](https://coinmarketcap.com) (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:
~~~~ {.bash}
git clone https://github.com/OnnoGeorg/cryptocurrency-data.git my-app
cd my-app
git remote rm origin
~~~~
2. Install all dependencies:
~~~~ {.bash}
npm install
~~~~
3. Compile and run the web component with Stencil:
~~~~ {.bash}
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](https://coinmarketcap.com/api/) 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.