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

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 make the provider customizable
in PyamentInfoLine, but don't have to switch the default to CryptoCompare 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 as FiatApiProvider, getExchangeRates } from '@nimiq/utils';
 import Account from './Account.vue';
 import Timer from './Timer.vue';
 import Amount, { amountValidator } from './Amount.vue';
@@ -134,6 +134,12 @@ interface FiatAmountInfo {
     currency: string;
 }
 
+// As Record, such that ts will warn us if the url for a provider is missing.
+const FIAT_API_PROVIDER_URLS: Record<FiatApiProvider, string> = {
+    [FiatApiProvider.CoinGecko]: 'coingecko.com',
+    [FiatApiProvider.CryptoCompare]: 'cryptocompare.com',
+};
+
 function cryptoAmountInfoValidator(value: any) {
     return 'amount' in value && 'currency' in value && 'decimals' in value
         && amountValidator(value.amount)
@@ -166,6 +172,12 @@ class PaymentInfoLine extends Mixins(I18nMixin) {
 
     @Prop({type: Object, required: true, validator: cryptoAmountInfoValidator}) public cryptoAmount!: CryptoAmountInfo;
     @Prop({type: Object, validator: fiatAmountInfoValidator}) public fiatAmount?: FiatAmountInfo;
+    @Prop({
+        type: String,
+        validator: (value: any) => Object.values(FiatApiProvider).includes(value),
+        default: FiatApiProvider.CoinGecko,
+    })
+    public fiatApiProvider!: FiatApiProvider;
     // Note that vendorMarkup and networkFee have no effect if fiatAmount is not set, as the tooltip in which they
     // appear is only visible when fiatAmount is set. As the fiatAmount was only introduced in the v2 checkout request
     // in the Hub, the tooltip and vendorMarkup and networkFee are thus never visible for v1 checkout requests. This
@@ -262,26 +274,30 @@ class PaymentInfoLine extends Mixins(I18nMixin) {
             || (Math.abs(this.rateDeviation) < PaymentInfoLine.RATE_DEVIATION_THRESHOLD && !this.isBadRate)) {
             return null;
         }
+        const translationVariables = {
+            formattedRateDeviation: this.formattedRateDeviation,
+            provider: FIAT_API_PROVIDER_URLS[this.fiatApiProvider],
+        };
         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 +307,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], this.fiatApiProvider);
         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:297
+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:291
+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:283
+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"