Crypto Widget with Svelte

Svelte is awesome it even produces a very tiny bundle. Today I bring you a simple crypto widget thanks to a free API without CORS from Gemini.

Check out the demo here https://widget.anoram.com/

Prerequisites:

  1/ Svelte starter template (https://svelte.dev/)
  2/ API https://api.gemini.com/v1/pricefeed

Let's look at the basic structure of the endpoint.

[{
    "pair": "BCHUSD",
    "price": "224.82",
    "percentChange24h": "-0.0048"
}, {
    "pair": "LINKETH",
    "price": "0.0201696",
    "percentChange24h": "0.0149"
}, {
    "pair": "BCHETH",
    "price": "0.9799",
    "percentChange24h": "-0.0169"
}]

Now several people will not know what LINKETH, BCHETH... they are cost of LINK or BCH in Ether, since it is not easy to read in terms of ETH or BTC, so I mapped and took only the pairs with USD.

async function fetchFeed() {
    res = await fetch(feed).then(r => r.json())
        res.map(c => {
            if (c.pair.includes("USD")) {
                let tmp = {};
                tmp["coin"] = c.pair.replace("USD", "")
                tmp["price"] = "$ " + c.price;
                feedList.push(tmp)
            }
        })
    }

This makes a new object that looks like this and its much cleaner and formatted.

[
  {coin: "BTC", price: "$ 9159.77"},
  {coin: "BCH", price: "$ 225"},
  {coin: "LTC", price: "$ 41.68"},
  {coin: "LINK", price: "$ 4.60045"},
  {coin: "BAT", price: "$ 0.2646"},
  {coin: "DAI", price: "$ 1.025"},
  {coin: "OXT", price: "$ 0.1617"},
  {coin: "ZEC", price: "$ 53.52"},
  {coin: "ETH", price: "$ 227.41"}
]

So here is the simple svelte code that populates this response in the UI

{#if res}
    {#await res}
        loading
            {:then data}
                {#each feedList as item}
                <div class="col">
                  <div class="card">
                      <div class="card-text">
                          <p>{item.coin?item.coin:'...'}</p>
                          <p>{item.price?item.price:'...'}</p>
                      </div>
                  </div>
                </div>
                {/each}
    {/await}
{:else}
    loading
{/if}

The end result is a beautiful app that looks like this.

You can take a look at the demo here https://widget.anoram.com/

Here is the link to the repo https://github.com/peopledrivemecrazy/svelte-crypto-price-widget

Enjoy.