✨ Creates an FX widget

docs/widgets.md

@@ -206,6 +206,36 @@ Shows real-time tube status of the London Underground. All options are optional.
       - Central
 ```
 
+### Exchange Rates
+
+Display current FX rates in your native currency
+
+<p align="center"><img width="400" src="https://i.ibb.co/M905JHM/exchange-rates.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`apiKey`** | `string` |  Required | API key for [exchangerate-api.com](https://www.exchangerate-api.com/), usually a 24-digit alpha-numeric string. You can sign up for a free account [here](https://app.exchangerate-api.com/sign-up)
+**`inputCurrency`** | `string` | Required | The base currency to show results in. Specified as a 3-letter ISO-4217 code, see [here](https://www.exchangerate-api.com/docs/supported-currencies) for the full list of supported currencies, and their symbols
+**`outputCurrencies`** | `array` |  Required | List or currencies to show results for. Specified as a 3-letter ISO-4217 code, see [here](https://www.exchangerate-api.com/docs/supported-currencies) for the full list of supported currencies, and their symbols
+
+##### Example 
+
+```yaml
+- name: Exchange Rates
+  icon: fas fa-money-bill-wave
+  type: exchange-rates
+  options:
+    apiKey: xxxxxxxxxxxxxxxxxxxxxxxx
+    inputCurrency: GBP
+    outputCurrencies:
+      - USD
+      - JPY
+      - HKD
+      - KPW
+```
+
 ---
 
 ## Dynamic Widgets

src/components/Widgets/ExchangeRates.vue

@@ -0,0 +1,102 @@
+<template>
+<div class="exchange-rate-wrapper">
+  <template v-if="exchangeRates">
+    <p class="exchange-base-currency">Value of 1 {{ inputCurrency }}</p>
+    <div v-for="(exchange, index) in exchangeRates" :key="index" class="exchange-rate-row">
+      <p>{{ exchange.currency }}</p>
+      <p>{{ exchange.value | applySymbol(inputCurrency) }}</p>
+    </div>
+  </template>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ErrorHandler from '@/utils/ErrorHandler';
+import { widgetApiEndpoints } from '@/utils/defaults';
+import { findCurrencySymbol } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      exchangeRates: null,
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    /* The users API key for exchangerate-api.com */
+    apiKey() {
+      return this.options.apiKey;
+    },
+    /* The currency to convert results into */
+    inputCurrency() {
+      return this.options.inputCurrency || 'USD';
+    },
+    /* An array of currencies to display */
+    outputCurrencies() {
+      return this.options.outputCurrencies || [];
+    },
+    endpoint() {
+      return `${widgetApiEndpoints.exchangeRates}${this.apiKey}/latest/${this.inputCurrency}`;
+    },
+  },
+  filters: {
+    /* Appends currency symbol onto price */
+    applySymbol(price, inputCurrency) {
+      return `${findCurrencySymbol(inputCurrency)} ${price}`;
+    },
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then(response => {
+          this.processData(response.data);
+        }).catch(error => {
+          ErrorHandler('Unable to fetch or process exchange rate data', error);
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      const results = [];
+      const rates = data.conversion_rates;
+      Object.keys(rates).forEach((currency) => {
+        if (this.outputCurrencies.includes(currency)) {
+          results.push({ currency, value: rates[currency] });
+        }
+      });
+      this.exchangeRates = results;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.exchange-rate-wrapper {
+  max-width: 300px;
+  margin: 0 auto;
+  p.exchange-base-currency {
+    margin: 0.25rem 0;
+    color: var(--widget-text-color);
+    opacity: var(--dimming-factor);
+  }
+  .exchange-rate-row {
+    display: flex;
+    justify-content: space-between;
+    margin: 0.25rem auto;
+    padding: 0.25rem;
+    p {
+      margin: 0;
+      color: var(--widget-text-color);
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -17,6 +17,7 @@
       <CryptoPriceChart v-else-if="widgetType === 'crypto-price-chart'" :options="widgetOptions" />
       <CryptoWatchList v-else-if="widgetType === 'crypto-watch-list'" :options="widgetOptions" />
       <XkcdComic v-else-if="widgetType === 'xkcd-comic'" :options="widgetOptions" />
+      <ExchangeRates v-else-if="widgetType === 'exchange-rates'" :options="widgetOptions" />
     </Collapsable>
   </div>
 </template>
@@ -29,6 +30,7 @@ import TflStatus from '@/components/Widgets/TflStatus.vue';
 import CryptoPriceChart from '@/components/Widgets/CryptoPriceChart.vue';
 import CryptoWatchList from '@/components/Widgets/CryptoWatchList.vue';
 import XkcdComic from '@/components/Widgets/XkcdComic.vue';
+import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 
 export default {
@@ -42,6 +44,7 @@ export default {
     CryptoPriceChart,
     CryptoWatchList,
     XkcdComic,
+    ExchangeRates,
   },
   props: {
     widget: Object,

src/utils/defaults.js

@@ -211,6 +211,7 @@ module.exports = {
     cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
     cryptoWatchList: 'https://api.coingecko.com/api/v3/coins/markets/',
     xkcdComic: 'https://xkcd.vercel.app/',
+    exchangeRates: 'https://v6.exchangerate-api.com/v6/',
   },
   /* URLs for web search engines */
   searchEngineUrls: {