chore: replace hardcoded urls with RouteName enum

src/components/AnnouncementBox.vue

@@ -11,6 +11,7 @@
 import { defineComponent, ref } from '@vue/composition-api';
 import { ArrowRightSmallIcon } from '@nimiq/vue-components';
 import { LocaleMessage } from 'vue-i18n';
+import { RouteName } from '@/router';
 import BlueLink from './BlueLink.vue';
 import CrossCloseButton from './CrossCloseButton.vue';
 
@@ -27,7 +28,7 @@ export default defineComponent({
         // text = () => context.root.$t('Buy NIM & BTC with OASIS!');
         text = () => ''; // Disables AnnouncementBox
         cta = () => context.root.$t('Try it now');
-        action = () => context.root.$router.push('buy');
+        action = () => context.root.$router.push({ name: RouteName.Buy });
         storageKey = 'buy-with-oasis-1';
 
         const wasDismissed = ref(window.localStorage.getItem(STORAGE_KEY) === storageKey);

src/components/MobileActionBar.vue

@@ -9,7 +9,7 @@
         >
             <ArrowRightSmallIcon />{{ $t('Send') }}
         </button>
-        <button class="reset scan-qr" @click="$router.push('/scan')">
+        <button class="reset scan-qr" @click="$router.push({ name: RouteName.Scan })">
             <ScanQrCodeIcon/>
         </button>
     </div>
@@ -19,6 +19,7 @@
 import { defineComponent, computed } from '@vue/composition-api';
 import { ArrowRightSmallIcon, ScanQrCodeIcon } from '@nimiq/vue-components';
 import { useConfig } from '@/composables/useConfig';
+import { RouteName } from '@/router';
 import { AddressType, useAddressStore } from '../stores/Address';
 import { useAccountStore } from '../stores/Account';
 import { CryptoCurrency } from '../lib/Constants';
@@ -58,9 +59,11 @@ export default defineComponent({
                 && (hasMultipleReceivableAddresses.value || hasBitcoinAddresses.value)
             ) {
                 // redirect to the address selector
-                context.root.$router.push('/receive');
+                context.root.$router.push({ name: RouteName.Receive });
             } else {
-                context.root.$router.push(nimOrBtcOrStable('/receive/nim', '/receive/btc', '/receive/usdc'));
+                context.root.$router.push({
+                    name: nimOrBtcOrStable(RouteName.ReceiveNim, RouteName.ReceiveBtc, RouteName.ReceiveUsdc),
+                });
             }
         }
 
@@ -73,9 +76,11 @@ export default defineComponent({
                 && (hasMultipleSendableAddresses.value || hasBitcoinAddresses.value)
             ) {
                 // redirect to the address selector
-                context.root.$router.push('/send');
+                context.root.$router.push({ name: RouteName.Send });
             } else {
-                context.root.$router.push(nimOrBtcOrStable('/send/nim', '/send/btc', '/send/usdc'));
+                context.root.$router.push({
+                    name: nimOrBtcOrStable(RouteName.SendNim, RouteName.SendBtc, RouteName.SendUsdc),
+                });
             }
         }
 
@@ -98,6 +103,7 @@ export default defineComponent({
             receive,
             send,
             sendDisabled,
+            RouteName,
         };
     },
     components: {

src/components/WalletStatusButton.vue

@@ -1,16 +1,22 @@
 <template>
-    <button @click="$router.push('/wallet-status')" class="wallet-status-button nq-button-pill">
+    <button @click="$router.push({ name: RouteName.WalletStatus })" class="wallet-status-button nq-button-pill">
         <CircledQuestionMark />
         <span>{{ $t('Help') }}</span>
     </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import CircledQuestionMark from './icons/CircledQuestionMark.vue';
 
 export default defineComponent({
     props: {},
+    setup() {
+        return {
+            RouteName,
+        };
+    },
     components: {
         CircledQuestionMark,
     },

src/components/layouts/AccountOverview.vue

@@ -33,7 +33,7 @@
                 <MenuIcon/>
                 <AttentionDot v-if="updateAvailable"/>
             </button>
-            <button class="reset consensus" @click="$router.push('/network').catch(() => {})">
+            <button class="reset consensus" @click="$router.push({ name: RouteName.Network }).catch(() => {})">
                 <ConsensusIcon/>
             </button>
         </div>
@@ -150,7 +150,7 @@
                         </div>
                         <button v-else
                             class="nq-button-pill light-blue"
-                            @click.stop="$router.push('/btc-activation')" @mousedown.prevent
+                            @click.stop="$router.push({ name: RouteName.BtcActivation })" @mousedown.prevent
                         >{{ $t('Activate') }}</button>
                     </div>
                 </button>
@@ -264,7 +264,7 @@
                         </div>
                         <button v-else
                             class="nq-button-pill light-blue"
-                            @click.stop="$router.push('/usdc-activation')" @mousedown.prevent
+                            @click.stop="$router.push({ name: RouteName.UsdcActivation })" @mousedown.prevent
                         >{{ $t('Activate') }}</button>
                     </div>
                 </button>
@@ -332,6 +332,7 @@
 import { defineComponent, computed, ref, watch, onMounted, onUnmounted, onActivated } from '@vue/composition-api';
 import { SwapAsset } from '@nimiq/fastspot-api';
 import { ArrowRightSmallIcon, AlertTriangleIcon, CircleSpinner, Tooltip } from '@nimiq/vue-components';
+import router, { RouteName } from '@/router';
 import AccountBalance from '../AccountBalance.vue';
 import AddressList from '../AddressList.vue';
 import BitcoinIcon from '../icons/BitcoinIcon.vue';
@@ -364,7 +365,6 @@ import LinkedDoubleArrowIcon from '../icons/LinkedDoubleArrowIcon.vue';
 import AddressListBackgroundSvg from '../AddressListBackgroundSvg.vue';
 import { useAddressStore } from '../../stores/Address';
 import { useConfig } from '../../composables/useConfig';
-import router from '../../router';
 import { useAccountSettingsStore } from '../../stores/AccountSettings';
 // import { useStakingStore } from '../../stores/Staking';
 // import AccountStake from '../staking/AccountStake.vue';
@@ -604,6 +604,7 @@ export default defineComponent({
             nimAccountBgCutouts,
             onSwapButtonPointerDown,
             isMobile,
+            RouteName,
             // totalAccountStake,
         };
     },

src/components/layouts/AddressOverview.vue

@@ -35,7 +35,7 @@
                             </button>
                             <button v-if="activeCurrency === CryptoCurrency.NIM"
                                 class="reset flex-row"
-                                @mousedown="$router.push('/staking')"
+                                @mousedown="$router.push({ name: RouteName.Staking })"
                             >
                                 <TwoLeafStakingIcon/>{{ $t('Staking') }}
                             </button>
@@ -47,7 +47,9 @@
                             </button>
                             <button
                                 class="reset flex-row"
-                                @pointerdown="$router.push('/export-history/address')"
+                                @pointerdown="$router.push({
+                                    name: RouteName.ExportHistory, params: { type: address } }
+                                )"
                             >
                                 <BoxedArrowUpIcon />{{ $t('Export History') }}
                             </button>
@@ -93,7 +95,9 @@
                             </button>
                             <button
                                 class="reset flex-row"
-                                @pointerdown="$router.push('/export-history/address')"
+                                @pointerdown="$router.push(
+                                    { name: RouteName.ExportHistory, params: { type: 'address'}}
+                                )"
                             >
                                 <BoxedArrowUpIcon />{{ $t('Export History') }}
                             </button>
@@ -310,6 +314,7 @@ import { BigNumber } from 'ethers';
 import { SignPolygonTransactionRequest } from '@nimiq/hub-api';
 import { RelayRequest } from '@opengsn/common/dist/EIP712/RelayRequest';
 import { ForwardRequest } from '@opengsn/common/dist/EIP712/ForwardRequest';
+import { RouteName } from '@/router';
 
 import BitcoinIcon from '../icons/BitcoinIcon.vue';
 import UsdcIcon from '../icons/UsdcIcon.vue';
@@ -634,6 +639,7 @@ export default defineComponent({
             windowWidth,
             showStakingButton,
             isMobile,
+            RouteName,
         };
     },
     components: {

src/components/layouts/Settings.vue

@@ -5,7 +5,7 @@
                 <MenuIcon/>
             </button>
 
-            <CrossCloseButton @click="$router.push('/').catch(() => {})"/>
+            <CrossCloseButton @click="$router.push({ name: RouteName.Root }).catch(() => {})"/>
         </div>
 
         <div class="column left-column flex-column">
@@ -293,6 +293,7 @@
 import { defineComponent, ref } from '@vue/composition-api';
 import { CircleSpinner } from '@nimiq/vue-components';
 import { ValidationUtils } from '@nimiq/utils';
+import { RouteName } from '@/router';
 
 import MenuIcon from '../icons/MenuIcon.vue';
 import CrossCloseButton from '../CrossCloseButton.vue';
@@ -453,6 +454,7 @@ export default defineComponent({
             disconnectKyc,
             copyrightYear,
             VERSION: process.env.VERSION,
+            RouteName,
         };
     },
     components: {

src/components/modals/AccountMenuModal.vue

@@ -25,7 +25,9 @@
 
             <button
                 class="item reset flex-row"
-                @mousedown="$router.push('/export-history/account')"
+                @mousedown="$router.push({
+                    name: RouteName.ExportHistory, params: { type: 'account' },
+                })"
             >
                 <BoxedArrowUpIcon />{{ $t('Export History') }}
             </button>
@@ -55,6 +57,7 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import { AlertTriangleIcon } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 
 import AccountMenuItem from '../AccountMenuItem.vue';
 import Modal from './Modal.vue';
@@ -86,9 +89,9 @@ export default defineComponent({
             selectAccount(id);
 
             if (isMobile.value) {
-                context.root.$router.replace('/');
+                context.root.$router.replace({ name: RouteName.Root });
             } else {
-                context.root.$router.push('/').catch(() => { /* ignore */ });
+                context.root.$router.push({ name: RouteName.Root }).catch(() => { /* ignore */ });
             }
         }
 

src/components/modals/BtcActivationModal.vue

@@ -34,6 +34,7 @@
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api';
 import { PageBody } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import Modal from './Modal.vue';
 import BitcoinIcon from '../icons/BitcoinIcon.vue';
 import { activateBitcoin } from '../../hub';
@@ -84,7 +85,7 @@ export default defineComponent({
 
                 if (shouldOpenWelcomeModal) {
                     // Open welcome modal with additional BTC and USDC info if not shown yet.
-                    await context.root.$router.push('/welcome');
+                    await context.root.$router.push({ name: RouteName.Welcome });
                 }
             }
         }

src/components/modals/BtcSendModal.vue

@@ -23,7 +23,7 @@
                             @input="resetRecipient"
                             @address="onAddressEntered"
                             @domain-address="onDomainEntered"
-                            @scan="$router.push('/scan')"
+                            @scan="$router.push({ name: RouteName.Scan })"
                             ref="addressInput$"/>
                     </template>
                 </DoubleInput>
@@ -143,6 +143,7 @@ import {
     InfoCircleSmallIcon,
 } from '@nimiq/vue-components';
 import { parseRequestLink, Currency, CurrencyInfo } from '@nimiq/utils';
+import { RouteName } from '@/router';
 import Modal, { disableNextModalTransition } from './Modal.vue';
 import BtcAddressInput from '../BtcAddressInput.vue';
 import BtcLabelInput from '../BtcLabelInput.vue';
@@ -601,6 +602,7 @@ export default defineComponent({
             onCloseOverlay,
 
             back,
+            RouteName,
         };
     },
     components: {

src/components/modals/BtcTransactionModal.vue

@@ -238,7 +238,9 @@
                         <button v-if="swapData.asset === SwapAsset.NIM && swapTransaction
                             && (!usesNimSwapProxy || swapTransaction.relatedTransactionHash)"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace(
+                                { name: RouteName.Transaction, params: { hash: swapTransaction.transactionHash } })
+                            "
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -253,7 +255,9 @@
                         <button v-if="(swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)
                             && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/usdc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace(
+                                { name: RouteName.UsdcTransaction, params: { hash: swapTransaction.transactionHash } }
+                            )"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -267,7 +271,9 @@
                         </button>
                         <button v-if="swapData.asset === SwapAsset.USDT_MATIC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/usdt-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace(
+                                { name: RouteName.UsdtTransaction, params: { hash: swapTransaction.transactionHash } }
+                            )"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -340,6 +346,7 @@ import { TransactionState } from '@nimiq/electrum-client';
 import { RefundSwapRequest, SignedBtcTransaction } from '@nimiq/hub-api';
 import { SwapAsset, getAssets } from '@nimiq/fastspot-api';
 import { SettlementStatus } from '@nimiq/oasis-api';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import FiatConvertedAmount from '../FiatConvertedAmount.vue';
 import Modal from './Modal.vue';
@@ -564,7 +571,10 @@ export default defineComponent({
             if (!tx) return;
             const plainTx = await sendTransaction(tx as SignedBtcTransaction);
             await context.root.$nextTick();
-            context.root.$router.replace(`/btc-transaction/${plainTx.transactionHash}`);
+            context.root.$router.replace({
+                name: RouteName.BtcTransaction,
+                params: { transactionHash: plainTx.transactionHash },
+            });
         }
 
         return {
@@ -602,6 +612,7 @@ export default defineComponent({
             refundHtlc,
             SettlementStatus,
             assetToCurrency,
+            RouteName,
         };
     },
     components: {

src/components/modals/PolygonActivationModal.vue

@@ -52,6 +52,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from '@vue/composition-api';
 import { PageBody } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import Modal from './Modal.vue';
 import { activatePolygon } from '../../hub';
 import {
@@ -99,7 +100,7 @@ export default defineComponent({
             if (!hasPolygonAddresses.value) return;
             await close(true);
             if (!props.redirect) {
-                context.root.$router.push('/stablecoin-selection');
+                context.root.$router.push({ name: RouteName.StablecoinSelection });
             }
         }
 
@@ -120,10 +121,10 @@ export default defineComponent({
 
                 if (shouldOpenWelcomeStakingModal.value) {
                     // Open welcome staking modal if not shown yet
-                    await context.root.$router.push('/welcome-staking');
+                    await context.root.$router.push({ name: RouteName.WelcomeStaking });
                 } else if (shouldOpenWelcomeModal.value) {
                     // Open welcome modal with additional BTC and USDC info if not shown yet
-                    await context.root.$router.push('/welcome');
+                    await context.root.$router.push({ name: RouteName.Welcome });
                 }
             }
         }