Merge branch 'daniel/i18n-release'

package.json

@@ -17,8 +17,9 @@
   },
   "main": "src/main.ts",
   "dependencies": {
+    "@formatjs/intl-displaynames": "^3.3.4",
     "@linusborg/vue-simple-portal": "^0.1.4",
-    "@nimiq/hub-api": "^1.2.0",
+    "@nimiq/hub-api": "^1.2.5",
     "@nimiq/iqons": "^1.5.2",
     "@nimiq/network-client": "^0.5.0",
     "@nimiq/style": "^0.8.2",

src/App.vue

@@ -106,7 +106,7 @@ export default defineComponent({
     overflow: hidden; // To prevent horizontal scrollbars during panel sliding
 
     /* Default: >= 1500px */
-    --sidebar-width: 23rem;
+    --sidebar-width: 24rem;
     --account-column-width: 70rem;
     --address-column-width: 150rem;
 

src/components/AccountMenu.vue

@@ -324,10 +324,9 @@ export default defineComponent({
 
 .menu .item {
     align-items: center;
-    line-height: 3.75rem;
+    line-height: 1.2;
     width: 100%;
-    padding: 0.625rem 1.25rem;
-    white-space: nowrap;
+    padding: 1.125rem 1.25rem;
     border-radius: 0.5rem;
     color: var(--text-70);
 
@@ -354,6 +353,7 @@ export default defineComponent({
 
 .menu .item .alert {
     margin-left: auto;
+    flex-shrink: 0;
     font-size: 2.5rem;
     color: var(--nimiq-orange);
 }
@@ -362,6 +362,7 @@ export default defineComponent({
     width: 2.75rem;
     height: 3rem;
     margin: -0.125rem 1rem -0.125rem 0;
+    flex-shrink: 0;
     opacity: 0.6;
 }
 

src/components/MobileActionBar.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="mobile-action-bar flex-row">
         <button class="receive nq-button-s flex-row" @click="$router.push('/receive')" @mousedown.prevent>
-            <ArrowRightSmallIcon />Receive
+            <ArrowRightSmallIcon />{{ $t('Receive') }}
         </button>
         <button class="send nq-button-pill light-blue flex-row"
             @click="$router.push('/send')" @mousedown.prevent
             :disabled="!activeAddressInfo || !activeAddressInfo.balance"
         >
-            <ArrowRightSmallIcon />Send
+            <ArrowRightSmallIcon />{{ $t('Send') }}
         </button>
         <button class="reset scan-qr" @click="$router.push('/scan')">
             <ScanQrCodeIcon/>

src/components/NetworkMap.vue

@@ -30,8 +30,8 @@
                         </h3>
                         <p v-if="peer.locationData.country"
                            :class="{'self': peer.type === 0 /* SELF */, 'connected': peer.connected}">
-                            {{ peer.locationData.city ? `${peer.locationData.city},` : '' }}
-                            {{ peer.locationData.countryFull }}
+                            {{ getPeerCity(peer) ? `${getPeerCity(peer)},` : '' }}
+                            {{ getPeerCountry(peer) }}
                         </p>
                     </div>
                 </template>
@@ -41,11 +41,31 @@
 </template>
 
 <script lang="ts">
+import { shouldPolyfill as shouldPolyFillIntlDisplayNames } from '@formatjs/intl-displaynames/should-polyfill';
 import { defineComponent, onMounted, onUnmounted, ref, computed, watch } from '@vue/composition-api';
 import { Tooltip, HexagonIcon } from '@nimiq/vue-components';
 import { NetworkClient } from '@nimiq/network-client';
 import { getNetworkClient } from '../network';
-import NetworkMap, { NodeHexagon, WIDTH, HEIGHT, SCALING_FACTOR, NodeType } from '../lib/NetworkMap';
+import NetworkMap, { NodeHexagon, WIDTH, HEIGHT, SCALING_FACTOR, Node, NodeType } from '../lib/NetworkMap';
+import { useSettingsStore } from '../stores/Settings';
+
+type IntlDisplayNames = import('@formatjs/intl-displaynames').DisplayNames;
+type IntlDisplayNamesOptions = import('@formatjs/intl-displaynames').DisplayNamesOptions;
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Intl {
+    let DisplayNames: undefined | {
+        new (
+            locales?: string | string[],
+            options?: IntlDisplayNamesOptions,
+        ): IntlDisplayNames,
+
+        readonly polyfilled?: true,
+    };
+}
+
+const intlDisplayNamesReadyPromise = !Intl.DisplayNames?.polyfilled && shouldPolyFillIntlDisplayNames()
+    ? import('@formatjs/intl-displaynames/polyfill')
+    : Promise.resolve();
 
 export default defineComponent({
     setup(props, context) {
@@ -115,6 +135,40 @@ export default defineComponent({
         const ownXCoordinate = computed(() => ownNode.value ? ownNode.value.x : null);
         watch(ownXCoordinate, (x) => x !== null && context.emit('own-x-coordinate', (x / 2) * SCALING_FACTOR));
 
+        const { language } = useSettingsStore();
+        let i18nCountryName: IntlDisplayNames | null = null;
+
+        watch(language, async () => {
+            i18nCountryName = null;
+            // TODO polyfill can be removed in the future and i18nCountryName then changed to a non-async computed prop
+            await intlDisplayNamesReadyPromise;
+            if (Intl.DisplayNames!.polyfilled) {
+                // has to be imported after the polyfill is ready
+                await import(
+                    /* webpackChunkName: "country-names-[request]" */
+                    /* webpackInclude: /\/\w{2}\.js$/ */
+                    `@formatjs/intl-displaynames/locale-data/${language.value}`);
+            }
+            i18nCountryName = new Intl.DisplayNames!(language.value, { type: 'region' });
+        });
+
+        function getPeerCity(peer: Node) {
+            const fallbackCityName = peer.locationData.city;
+            const { i18nCityNames } = peer.locationData;
+            if (!i18nCityNames) return fallbackCityName;
+            // Try to find a translation for current language
+            const availableLanguage = i18nCityNames[language.value]
+                ? language.value
+                : Object.keys(i18nCityNames).find((locale) => locale.startsWith(language.value)); // accept zh-CH for zh
+            return availableLanguage ? i18nCityNames[availableLanguage] : fallbackCityName;
+        }
+
+        function getPeerCountry(peer: Node) {
+            return i18nCountryName && peer.locationData.country
+                ? i18nCountryName.of(peer.locationData.country)
+                : peer.locationData.country;
+        }
+
         return {
             $container,
             $network,
@@ -123,6 +177,8 @@ export default defineComponent({
             scale,
             width,
             height,
+            getPeerCity,
+            getPeerCountry,
         };
     },
     components: {

src/components/TestnetFaucet.vue

@@ -34,13 +34,17 @@ type FaucetInfoResponse = {
 type FaucetTapResponse = {
     success: false,
     msg: string,
-    error: 'VAPTCHA_UNAVAILABLE'
+    error?: 'VAPTCHA_UNAVAILABLE'
         | 'INVALID_CAPTCHA'
         | 'INVALID_ADDRESS'
-        | 'RATE_LIMIT'
         | 'GEOBLOCKED'
         | 'OUT_OF_FUNDS'
         | 'TRANSACTION_FAILED',
+} | {
+    success: false,
+    msg: string,
+    error: 'RATE_LIMIT',
+    wait: number,
 } | {
     success: true,
     msg: string,
@@ -110,12 +114,32 @@ export default defineComponent({
                 }
 
                 loading.value = false;
-
-                if (result.error === 'TRANSACTION_FAILED') {
-                    // Reset button for user to try again
-                    unavailableMsg.value = context.root.$t('Faucet error - please try again');
-                } else {
-                    errorMsg.value = result.msg; // Disables button and shows the error message.
+                errorMsg.value = '';
+                unavailableMsg.value = '';
+
+                switch (result.error) {
+                    case 'RATE_LIMIT':
+                        errorMsg.value = context.root.$t(
+                            'You can receive more free NIM in {waitTime} hours.',
+                            { waitTime: Math.ceil(result.wait / 3600) },
+                        );
+                        break;
+                    case 'GEOBLOCKED':
+                        errorMsg.value = context.root.$t(
+                            'This service is currently not available in your region.',
+                        );
+                        break;
+                    case 'OUT_OF_FUNDS':
+                        errorMsg.value = context.root.$t('There are currently no free NIM available.');
+                        break;
+                    case 'TRANSACTION_FAILED':
+                        // Set unavailableMsg instead of errorMsg to keep button active for user to try again
+                        unavailableMsg.value = context.root.$t('Faucet error - please try again.');
+                        break;
+                    default:
+                        // 'INVALID_CAPTCHA', 'VAPTCHA_UNAVAILABLE', 'INVALID_ADDRESS' or unspecified errors should
+                        // not occur via this frontend, therefore no need to translate them.
+                        errorMsg.value = `${context.root.$t('Request failed')}: ${result.msg}`;
                 }
 
                 return false;
@@ -154,9 +178,12 @@ button {
 
 .unavailable,
 .error {
+    padding: 0 5rem;
     font-weight: 600;
+    text-align: center;
 
     svg {
+        display: inline-block;
         width: 2.5rem;
         height: 2.5rem;
         margin-right: 1rem;

src/components/TransactionList.vue

@@ -603,6 +603,7 @@ export default defineComponent({
     .nq-h1 {
         margin-top: 0;
         margin-bottom: 1.5rem;
+        text-align: center;
     }
 
     span {

src/components/TransactionListItem.vue

@@ -73,6 +73,7 @@ import {
 import { AddressBook } from '@nimiq/utils';
 import { useAddressStore } from '../stores/Address';
 import { useFiatStore } from '../stores/Fiat';
+import { useSettingsStore } from '../stores/Settings';
 import { Transaction, TransactionState, useTransactionsStore } from '../stores/Transactions';
 import { twoDigit } from '../lib/NumberFormatting';
 import { parseData } from '../lib/DataFormatting';
@@ -154,10 +155,12 @@ export default defineComponent({
         });
 
         // Date
+        const { language } = useSettingsStore();
         const date = computed(() => props.transaction.timestamp && new Date(props.transaction.timestamp * 1000));
         const dateDay = computed(() => date.value && twoDigit(date.value.getDate()));
-        const MONTHS = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
-        const dateMonth = computed(() => date.value && MONTHS[date.value.getMonth()]);
+        const monthFormatter = computed(() => new Intl.DateTimeFormat(language.value, { month: 'short' }));
+        const dateMonth = computed(() => date.value && monthFormatter.value
+            && monthFormatter.value.format(date.value as Date));
         const dateTime = computed(() => date.value
             && `${twoDigit(date.value.getHours())}:${twoDigit(date.value.getMinutes())}`);
 
@@ -238,6 +241,7 @@ svg {
         > .month {
             font-size: var(--small-label-size);
             letter-spacing: 0.0667em;
+            text-transform: uppercase;
         }
     }
 

src/components/layouts/AddressOverview.vue

@@ -416,6 +416,7 @@ export default defineComponent({
         font-size: var(--body-size);
         padding: 0.5rem;
         font-weight: 600;
+        word-break: keep-all;
         border-radius: 0.5rem;
         z-index: 1;
         pointer-events: none;

src/components/layouts/Settings.vue

@@ -19,7 +19,7 @@
                             {{ $t('Change your language setting.') }}
                         </p>
                     </div>
-                    <select id="language" name="language" @input="setLanguage($event.target.value)" disabled>
+                    <select id="language" name="language" @input="setLanguage($event.target.value)">
                         <option
                             v-for="lang in Languages" :key="lang.code"
                             :value="lang.code" :selected="language === lang.code"

src/components/layouts/Sidebar.vue

@@ -242,7 +242,7 @@ export default defineComponent({
 }
 
 .trade-actions .nq-button-s {
-    margin: 0.5rem 1rem 1rem;
+    margin: 0.5rem .625rem 1rem;
     background: rgba(255, 255, 255, .1);
 
     &:active,
@@ -252,6 +252,10 @@ export default defineComponent({
     }
 }
 
+button > :first-child {
+    flex-shrink: 0;
+}
+
 .account-menu,
 .settings,
 .network {

src/components/modals/DisclaimerModal.vue

@@ -16,6 +16,10 @@
                 <!-- eslint-disable-next-line max-len -->
                 {{ $t('Nimiq is not responsible for any loss. Nimiq, wallet.nimiq.com, hub.nimiq.com & keyguard.nimiq.com, and some of the underlying libraries are under active development.') }}
             </p>
+            <p class="nq-text">
+                <!-- eslint-disable-next-line max-len -->
+                {{ $t('All translations are for information purposes only. The English text is the controlling version.') }}
+            </p>
         </PageBody>
     </Modal>
 </template>

src/components/modals/MigrationWelcomeModal.vue

@@ -29,12 +29,16 @@
                     {{ $t('Handling multiple addresses is now convenient and easy – with one password and shared login'
                     + ' information.') }}
                 </p>
-                <p class="nq-text">
-                    <strong>{{ $t('Accounts') }}</strong> {{ $t('hold, manage and aggregate addresses.') }}
-                </p>
-                <p class="nq-text">
-                    <strong>{{ $t('Addresses') }}</strong> {{ $t('send and receive transactions.') }}
-                </p>
+                <i18n tag="p" path="{accounts} hold, manage and aggregate addresses." class="nq-text">
+                    <template #accounts>
+                        <strong>{{ $t('Accounts') }}</strong>
+                    </template>
+                </i18n>
+                <i18n tag="p" path="{addresses} send and receive transactions." class="nq-text">
+                    <template #addresses>
+                        <strong>{{ $t('Addresses') }}</strong>
+                    </template>
+                </i18n>
             </div>
             <div class="visual address-ring">
                 <img src="../../assets/slides/account-ring-half.svg" key="account-ring">
@@ -137,6 +141,7 @@ export default defineComponent({
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+        align-items: center;
         overflow: hidden;
     }
 
@@ -168,11 +173,11 @@ export default defineComponent({
     .visual img {
         width: 100%;
         height: 100%;
-        margin-top: -1rem;
     }
 
     .visual.address-ring {
         width: 18rem;
+        height: 100%;
     }
 
     .visual.login-file {
@@ -185,6 +190,7 @@ export default defineComponent({
     .visual.account-menu {
         width: 18rem;
         height: 48rem;
+        align-self: flex-start;
     }
 
     .nq-button {