Update @nimiq/utils for new FiatApi and make provider configurable

CoinGecko is becoming increasingly strict with unauthenticated access to their
API without API key. For example, wallet.nimiq.com has already been blocked from
unauthenticated access, thus the Wallet has been switched to CryptoCompare as
fiat api provider, while hub.nimiq.com and keyguard.nimiq.com are not currently
blocked. As the only vue-component that currently makes use of the FiatApi is
PaymentInfoLine which is used only in the Hub, we don't have to switch the
provider to CryptoCompare yet, and because otherwise we should also switch the
provider in PaymentInfoLine in the Keyguard, which is a bit more work, we don't
make the switch yet.

Author: danimoh

.storybook/webpack.config.js

@@ -9,7 +9,7 @@ crypto.createHash = (alg, opts) => {
 
 // Process source files and specified dependencies by babel to be able to use more modern js syntax than supported by
 // our Webpack version. Should be kept in sync with transpileDependencies in vue.config.js
-const transpileDependencies = [];
+const transpileDependencies = ['@nimiq/utils'];
 const babel = {
     loader: require.resolve('babel-loader'),
     // By default, options from babel.config.js are used. If you're encountering issues with some syntax not being

package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@nimiq/iqons": "^1.6.0",
     "@nimiq/style": "^0.8.5",
-    "@nimiq/utils": "^0.9.3",
+    "@nimiq/utils": "^0.11.1",
     "big-integer": "^1.6.44",
     "input-format": "^0.2.8",
     "js-sha3": "^0.8.0",

src/components/AmountWithFee.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
-import { FiatApiSupportedFiatCurrency } from '@nimiq/utils';
+import { FiatCurrency } from '@nimiq/utils';
 import Amount from './Amount.vue';
 import AmountInput from './AmountInput.vue';
 import FiatAmount from './FiatAmount.vue';
@@ -38,7 +38,7 @@ export default class AmountWithFee extends Mixins(I18nMixin) {
     }) private value!: {amount: number, fee: number, isValid: boolean};
     @Prop({type: Number, default: 0}) private availableBalance!: number;
     @Prop(Number) private fiatAmount: number | null;
-    @Prop(String) private fiatCurrency: FiatApiSupportedFiatCurrency | null;
+    @Prop(String) private fiatCurrency: FiatCurrency | null;
 
     private liveAmount: number = this.value.amount;
 

src/components/PaymentInfoLine.vue

@@ -113,7 +113,7 @@
 type BigInteger = import ('big-integer').BigInteger;
 
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
-import { FiatApiSupportedFiatCurrency, FiatApiSupportedCryptoCurrency, getExchangeRates } from '@nimiq/utils';
+import { FiatCurrency, CryptoCurrency, Provider, getExchangeRates } from '@nimiq/utils';
 import Account from './Account.vue';
 import Timer from './Timer.vue';
 import Amount, { amountValidator } from './Amount.vue';
@@ -161,6 +161,11 @@ function fiatAmountInfoValidator(value: any) {
     },
 })
 class PaymentInfoLine extends Mixins(I18nMixin) {
+    private static readonly FIAT_API_PROVIDER = Provider.CoinGecko;
+    private static readonly FIAT_API_PROVIDER_URL = {
+        [Provider.CoinGecko]: 'coingecko.com',
+        [Provider.CryptoCompare]: 'cryptocompare.com',
+    }[PaymentInfoLine.FIAT_API_PROVIDER];
     private static readonly REFERENCE_RATE_UPDATE_INTERVAL = 60000; // every minute
     private static readonly RATE_DEVIATION_THRESHOLD = .1;
 
@@ -262,26 +267,30 @@ class PaymentInfoLine extends Mixins(I18nMixin) {
             || (Math.abs(this.rateDeviation) < PaymentInfoLine.RATE_DEVIATION_THRESHOLD && !this.isBadRate)) {
             return null;
         }
+        const translationVariables = {
+            formattedRateDeviation: this.formattedRateDeviation,
+            provider: PaymentInfoLine.FIAT_API_PROVIDER_URL,
+        };
         if (this.rateDeviation < 0 && this.isBadRate) {
             // False discount
             return this.$t(
                 'Your actual discount is approx. {formattedRateDeviation} compared '
-                + 'to the current market rate (coingecko.com).',
-                { formattedRateDeviation: this.formattedRateDeviation },
+                + 'to the current market rate ({provider}).',
+                translationVariables,
             );
         }
 
         if (this.rateDeviation > 0) {
             return this.$t(
                 'You are paying approx. {formattedRateDeviation} more '
-                + 'than at the current market rate (coingecko.com).',
-                { formattedRateDeviation: this.formattedRateDeviation },
+                + 'than at the current market rate ({provider}).',
+                translationVariables,
             );
         } else {
             return this.$t(
                 'You are paying approx. {formattedRateDeviation} less '
-                + 'than at the current market rate (coingecko.com).',
-                { formattedRateDeviation: this.formattedRateDeviation },
+                + 'than at the current market rate ({provider}).',
+                translationVariables,
             );
         }
 
@@ -291,20 +300,18 @@ class PaymentInfoLine extends Mixins(I18nMixin) {
     @Watch('fiatAmount.currency')
     private async updateReferenceRate() {
         window.clearTimeout(this.referenceRateUpdateTimeout);
-        const cryptoCurrency = this.cryptoAmount.currency.toLowerCase() as FiatApiSupportedCryptoCurrency;
-        const fiatCurrency = this.fiatAmount
-            ? this.fiatAmount.currency.toLowerCase() as FiatApiSupportedFiatCurrency
-            : null;
+        const cryptoCurrency = this.cryptoAmount.currency.toLowerCase() as CryptoCurrency;
+        const fiatCurrency = this.fiatAmount?.currency.toLowerCase() as FiatCurrency | undefined;
         if (!this.fiatAmount
-            || !Object.values(FiatApiSupportedFiatCurrency).includes(fiatCurrency)
-            || !Object.values(FiatApiSupportedCryptoCurrency).includes(cryptoCurrency)
+            || !Object.values(FiatCurrency).includes(fiatCurrency)
+            || !Object.values(CryptoCurrency).includes(cryptoCurrency)
         ) {
             this.referenceRate = null;
             return;
         }
 
         const { [cryptoCurrency]: { [fiatCurrency]: referenceRate }} =
-            await getExchangeRates([cryptoCurrency], [fiatCurrency]);
+            await getExchangeRates([cryptoCurrency], [fiatCurrency], PaymentInfoLine.FIAT_API_PROVIDER);
         this.referenceRate = referenceRate || null;
 
         this.referenceRateUpdateTimeout = window.setTimeout(

src/i18n/en.po

@@ -168,16 +168,16 @@ msgstr ""
 msgid "Vendor crypto markup"
 msgstr ""
 
-#: src/components/PaymentInfoLine.vue:281
-msgid "You are paying approx. {formattedRateDeviation} less than at the current market rate (coingecko.com)."
+#: src/components/PaymentInfoLine.vue:291
+msgid "You are paying approx. {formattedRateDeviation} less than at the current market rate ({provider})."
 msgstr ""
 
-#: src/components/PaymentInfoLine.vue:275
-msgid "You are paying approx. {formattedRateDeviation} more than at the current market rate (coingecko.com)."
+#: src/components/PaymentInfoLine.vue:285
+msgid "You are paying approx. {formattedRateDeviation} more than at the current market rate ({provider})."
 msgstr ""
 
-#: src/components/PaymentInfoLine.vue:267
-msgid "Your actual discount is approx. {formattedRateDeviation} compared to the current market rate (coingecko.com)."
+#: src/components/PaymentInfoLine.vue:277
+msgid "Your actual discount is approx. {formattedRateDeviation} compared to the current market rate ({provider})."
 msgstr ""
 
 #: src/components/QrScanner.vue:16

vue.config.js

@@ -101,5 +101,5 @@ module.exports = {
   // Webpack version is too old to process some modern js syntax in the listed dependencies. Should be kept in sync with
   // transpileDependencies in storybook's webpack.config.js.
   // When changing to Webpack 5, some or all can probably be removed.
-  transpileDependencies: [],
+  transpileDependencies: ['@nimiq/utils'],
 };

yarn.lock

@@ -1264,10 +1264,10 @@
   resolved "https://registry.yarnpkg.com/@nimiq/style/-/style-0.8.5.tgz#36a8bd8f58d55ee3e8ea5b249e51a116638e3b90"
   integrity sha512-il2+hrodQ7iL4ARPwfGmGvrEYgtMHAoQSbcyapxEQEG7vDYj5r+ssuhKB+oYmdRUxA1/HvyGDnWG3XenKvQyIA==
 
-"@nimiq/utils@^0.9.3":
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/@nimiq/utils/-/utils-0.9.3.tgz#db402c8f42bb16dee8e5500c617cff18e1497960"
-  integrity sha512-g/9FpoNcJmU737TRQsNdU5/OGoXnc1UwunJBF/TGw4bx4cQ/pbYO7k0nsZ4RGUFn0jiy9xlxYH+yH1mvSY7+nQ==
+"@nimiq/utils@^0.11.1":
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/@nimiq/utils/-/utils-0.11.1.tgz#fe9c61fdead9b8e25a892a539b2b870cdd9cc51c"
+  integrity sha512-jwRInTkMPzyPsQN3iyf8s82mO/ChnbVtj5IzqXj9EO0PSOPd4Ix2ApIN/3NClfDfWo6HzE6NkSZOgry18p4jow==
   dependencies:
     big-integer "^1.6.44"