Update @nimiq/utils and @nimiq/vue-components for new FiatApi; and ma…

…ke FiatApi provider configurable

The updated FiatApi supports CryptoCompare as an alternative API provider and
supports bridged exchange rates for currencies not directly supported by the
providers.

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. I.e. in the Hub, we don't have to switch yet. If we switch the Hub's
FiatApi provider in PaymentInfoLine, we should also switch it in the Keyguard's
PaymentInfoLine, which is a bit more work though. For this reason, we keep the
Hub and Keyguard on CoinGecko for now, but remove the CoinGecko proxy / custom
API URL, as this one has been shut down.

package.json

@@ -30,7 +30,7 @@
         "@nimiq/oasis-api": "^1.1.1",
         "@nimiq/rpc": "^0.4.1",
         "@nimiq/style": "^0.8.2",
-        "@nimiq/utils": "^0.5.2",
+        "@nimiq/utils": "^0.11.1",
         "@nimiq/vue-components": "https://github.com/nimiq/vue-components#build/hub",
         "@opengsn/common": "^2.2.5",
         "@sentry/vue": "^6.0.0",

src/components/CheckoutCard.vue

@@ -6,12 +6,14 @@ import { Static } from '../lib/StaticStore';
 import StatusScreen from './StatusScreen.vue';
 import CheckoutServerApi, { GetStateResponse } from '../lib/CheckoutServerApi';
 import { PaymentInfoLine } from '@nimiq/vue-components';
-import { ERROR_REQUEST_TIMED_OUT, HISTORY_KEY_SELECTED_CURRENCY } from '../lib/Constants';
+import { ERROR_REQUEST_TIMED_OUT, HISTORY_KEY_SELECTED_CURRENCY, FIAT_API_PROVIDER } from '../lib/Constants';
 import { PaymentState } from '../../client/PublicRequestTypes';
 
 export default class CheckoutCard<
     Parsed extends AvailableParsedPaymentOptions,
 > extends Vue {
+    private static readonly FIAT_API_PROVIDER = FIAT_API_PROVIDER; // used in templates of child classes
+
     protected optionTimeout: number = -1;
 
     @Prop(Object) protected paymentOptions!: Parsed;

src/components/CheckoutCardEthereum.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { createEthereumRequestLink } from '@nimiq/utils';
+import { Currency, createEthereumRequestLink } from '@nimiq/utils';
 import { ParsedEtherDirectPaymentOptions } from '../lib/paymentOptions/EtherPaymentOptions';
 import CheckoutCardExternal from './CheckoutCardExternal.vue';
 import { FormattableNumber } from '@nimiq/utils';
@@ -13,7 +13,7 @@ export default class CheckoutCardEthereum
         const paymentOptions = this.paymentOptions;
         const protocolSpecific = paymentOptions.protocolSpecific;
         if (!protocolSpecific.recipient) return '#';
-        return createEthereumRequestLink(protocolSpecific.recipient, {
+        return createEthereumRequestLink(protocolSpecific.recipient, Currency.ETH, {
             amount: paymentOptions.amount,
             gasLimit: protocolSpecific.gasLimit,
             gasPrice: protocolSpecific.gasPrice,

src/components/CheckoutCardExternal.vue

@@ -38,6 +38,7 @@
                             amount: request.fiatAmount,
                             currency: request.fiatCurrency,
                         } : null"
+                        :fiatApiProvider="constructor.FIAT_API_PROVIDER"
                         :vendorMarkup="paymentOptions.vendorMarkup"
                         :networkFee="paymentOptions.fee"
                         :address="typeof paymentOptions.protocolSpecific.recipient === 'object'

src/components/CheckoutCardNimiq.vue

@@ -36,6 +36,7 @@
                     amount: request.fiatAmount,
                     currency: request.fiatCurrency,
                 } : null"
+                :fiatApiProvider="constructor.FIAT_API_PROVIDER"
                 :vendorMarkup="paymentOptions.vendorMarkup"
                 :networkFee="paymentOptions.fee"
                 :address="paymentOptions.protocolSpecific.recipient

src/components/CheckoutManualPaymentDetails.vue

@@ -12,6 +12,7 @@
                 amount: request.fiatAmount,
                 currency: request.fiatCurrency,
             } : null"
+            :fiatApiProvider="constructor.FIAT_API_PROVIDER"
             :vendorMarkup="paymentOptions.vendorMarkup"
             :networkFee="paymentOptions.fee"
             :address="typeof paymentOptions.protocolSpecific.recipient === 'object'
@@ -52,6 +53,7 @@ import {
     PaymentInfoLine,
 } from '@nimiq/vue-components';
 import { State as RpcState } from '@nimiq/rpc';
+import { FIAT_API_PROVIDER } from '../lib/Constants';
 import { Static } from '../lib/StaticStore';
 import { AvailableParsedPaymentOptions, ParsedCheckoutRequest } from '../lib/RequestTypes';
 import CheckoutServerApi from '../lib/CheckoutServerApi';
@@ -66,6 +68,8 @@ import CheckoutServerApi from '../lib/CheckoutServerApi';
 class CheckoutManualPaymentDetails<
     Parsed extends AvailableParsedPaymentOptions,
 > extends Vue {
+    private static readonly FIAT_API_PROVIDER = FIAT_API_PROVIDER;
+
     @Prop({
         type: Array,
         required: true,