README.md

CoinLib Vue Component

Usage

Common Coins

For common coins, simply set the coin property to the short code of the coin (e.g. btc for Bitcoin).

<coin-lib-vue coin="eth"></coin-lib-vue>

Custom Coins

Below is an example for 0x (ZRX) with id 386.

<coin-lib-vue coin="386"></coin-lib-vue>

Dark Theme

Use the is-dark property to use the dark theme.

<coin-lib-vue is-dark coin="bch"></coin-lib-vue>

coin-lib.vue

<template>
  <div :class="{ 'coinlib-vue': true, 'is-dark': isDark }">
    <iframe :src="iframeUrl" sandbox="allow-same-origin allow-scripts"></iframe>
    <span class="powered-by">
            <span>powered by&nbsp;</span>
            <a :href="coinLibUri" target="_blank">CoinLib</a>
        </span>
  </div>
</template>

<script>
  const COMMON_COINS = {
    btc: 859, // Bitcoin
    eth: 145, // Ethereum
    xrp: 619, // Ripple
    bch: 157, // Bitcoin Cash
    aro: 896503 // Arionum
  }

  export default {
    name: 'CoinLib',
    data: function () {
      return {
        coinLibUri: 'https://coinlib.io'
      }
    },
    props: {
      isDark: Boolean,
      coin: String
    },
    computed: {
      iframeUrl () {
        let theme = this.isDark ? 'dark' : 'light'

        return `${this.coinLibUri}/widget?type=single&theme=${theme}&coin_id=${this.coinId}`
      },
      coinId () {
        return (COMMON_COINS[this.coin] !== undefined) ? COMMON_COINS[this.coin] : this.coin
      }
    }
  }
</script>

<style lang="scss" scoped>
  .coinlib-vue {
    font-family: sans-serif;
    width: 220px;
    height: 175px;
    border: 1px solid #ddd;
    border-radius: 10%;

    &.is-dark {
      background: #1d2330;
      color: #fff;
    }

    iframe {
      overflow: hidden;
      border: none;
      border-radius: 10%;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 85%;
    }

    .powered-by {
      float: right;
      margin-right: 5%;
      font-size: 0.6em;
      a {
        color: #4791b4;
        text-decoration: none;
      }
    }
  }
</style>