From d8f88d1f6c4293a18ee05e9dcd9cd35bad19b556 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 24 Jan 2025 10:26:54 +0100
Subject: [PATCH] chore: replace hardcoded urls with RouteName enum

---
 src/components/AnnouncementBox.vue            |  3 ++-
 src/components/MobileActionBar.vue            | 16 +++++++++-----
 src/components/WalletStatusButton.vue         |  8 ++++++-
 src/components/layouts/AccountOverview.vue    |  9 ++++----
 src/components/layouts/AddressOverview.vue    | 12 +++++++---
 src/components/layouts/Settings.vue           |  4 +++-
 src/components/modals/AccountMenuModal.vue    |  9 +++++---
 src/components/modals/BtcActivationModal.vue  |  3 ++-
 src/components/modals/BtcSendModal.vue        |  4 +++-
 src/components/modals/BtcTransactionModal.vue | 19 ++++++++++++----
 .../modals/PolygonActivationModal.vue         |  7 +++---
 src/components/modals/SendModal.vue           |  4 +++-
 src/components/modals/StablecoinSendModal.vue |  4 +++-
 src/components/modals/TransactionModal.vue    | 22 +++++++++++++++----
 .../modals/UsdcTransactionModal.vue           | 16 +++++++++++---
 src/components/modals/UsdtAddedModal.vue      |  5 ++++-
 .../modals/UsdtTransactionModal.vue           | 17 +++++++++++---
 .../overlays/BuyCryptoBankCheckOverlay.vue    |  4 +++-
 src/components/staking/StakingButton.vue      |  6 +++--
 src/components/staking/StakingPreview.vue     |  4 +++-
 .../staking/StakingSummaryMobile.vue          |  7 ++++--
 src/components/swap/SwapModal.vue             | 11 ++++++++--
 src/components/swap/SwapNotification.vue      |  7 +++---
 src/hub.ts                                    | 14 ++++++------
 src/router.ts                                 |  4 +++-
 25 files changed, 160 insertions(+), 59 deletions(-)

diff --git a/src/components/AnnouncementBox.vue b/src/components/AnnouncementBox.vue
index 97a806459..032902862 100644
--- a/src/components/AnnouncementBox.vue
+++ b/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);
diff --git a/src/components/MobileActionBar.vue b/src/components/MobileActionBar.vue
index 34db4dbe5..1ea89aa60 100644
--- a/src/components/MobileActionBar.vue
+++ b/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: {
diff --git a/src/components/WalletStatusButton.vue b/src/components/WalletStatusButton.vue
index d102dc0c2..8d93ca1fa 100644
--- a/src/components/WalletStatusButton.vue
+++ b/src/components/WalletStatusButton.vue
@@ -1,5 +1,5 @@
 <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>
@@ -7,10 +7,16 @@
 
 <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,
     },
diff --git a/src/components/layouts/AccountOverview.vue b/src/components/layouts/AccountOverview.vue
index 60e88d237..2685fcda3 100644
--- a/src/components/layouts/AccountOverview.vue
+++ b/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,
         };
     },
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index 6433e549e..09d169e16 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/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: {
diff --git a/src/components/layouts/Settings.vue b/src/components/layouts/Settings.vue
index adfef1e59..a490b6d6f 100644
--- a/src/components/layouts/Settings.vue
+++ b/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: {
diff --git a/src/components/modals/AccountMenuModal.vue b/src/components/modals/AccountMenuModal.vue
index 4304a77ae..1071e7622 100644
--- a/src/components/modals/AccountMenuModal.vue
+++ b/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 */ });
             }
         }
 
diff --git a/src/components/modals/BtcActivationModal.vue b/src/components/modals/BtcActivationModal.vue
index 50f7bccd4..2e0b6fdd8 100644
--- a/src/components/modals/BtcActivationModal.vue
+++ b/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 });
                 }
             }
         }
diff --git a/src/components/modals/BtcSendModal.vue b/src/components/modals/BtcSendModal.vue
index a2f49e524..b39f7c226 100644
--- a/src/components/modals/BtcSendModal.vue
+++ b/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: {
diff --git a/src/components/modals/BtcTransactionModal.vue b/src/components/modals/BtcTransactionModal.vue
index 267487199..02c846756 100644
--- a/src/components/modals/BtcTransactionModal.vue
+++ b/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: {
diff --git a/src/components/modals/PolygonActivationModal.vue b/src/components/modals/PolygonActivationModal.vue
index 035236c82..375bcc518 100644
--- a/src/components/modals/PolygonActivationModal.vue
+++ b/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 });
                 }
             }
         }
diff --git a/src/components/modals/SendModal.vue b/src/components/modals/SendModal.vue
index 5a7c99c78..912b66ba2 100644
--- a/src/components/modals/SendModal.vue
+++ b/src/components/modals/SendModal.vue
@@ -51,7 +51,7 @@
                         {{ $t('Create a Cashlink') }}
                     </button>
                 </section>
-                <button class="reset scan-qr-button" @click="$router.push('/scan')">
+                <button class="reset scan-qr-button" @click="$router.push({ name: RouteName.Scan })">
                     <ScanQrCodeIcon/>
                 </button>
             </PageBody>
@@ -265,6 +265,7 @@ import {
     InfoCircleSmallIcon,
 } from '@nimiq/vue-components';
 import { parseRequestLink, AddressBook, Utf8Tools, Currency, CurrencyInfo, ValidationUtils } from '@nimiq/utils';
+import { RouteName } from '@/router';
 import Modal, { disableNextModalTransition } from './Modal.vue';
 import ContactShortcuts from '../ContactShortcuts.vue';
 import ContactBook from '../ContactBook.vue';
@@ -938,6 +939,7 @@ export default defineComponent({
             onCloseOverlay,
 
             back,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/StablecoinSendModal.vue b/src/components/modals/StablecoinSendModal.vue
index 5cebe02d3..2914bbef7 100644
--- a/src/components/modals/StablecoinSendModal.vue
+++ b/src/components/modals/StablecoinSendModal.vue
@@ -55,7 +55,7 @@
                 </section>
             </PageBody>
             <PolygonWarningFooter type="sending" level="info"/>
-            <button class="reset scan-qr-button" @click="$router.push('/scan')">
+            <button class="reset scan-qr-button" @click="$router.push({ name: RouteName.Scan })">
                 <ScanQrCodeIcon/>
             </button>
         </div>
@@ -250,6 +250,7 @@ import {
     CircleSpinner,
 } from '@nimiq/vue-components';
 import { computed, defineComponent, onBeforeUnmount, ref, Ref, watch } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import { useConfig } from '../../composables/useConfig';
 import { useWindowSize } from '../../composables/useWindowSize';
 import { sendPolygonTransaction } from '../../hub';
@@ -866,6 +867,7 @@ export default defineComponent({
 
             back,
             config,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/TransactionModal.vue b/src/components/modals/TransactionModal.vue
index 0f3b1e1f3..fdc9ae433 100644
--- a/src/components/modals/TransactionModal.vue
+++ b/src/components/modals/TransactionModal.vue
@@ -247,7 +247,10 @@
                         </svg>
                         <button v-if="swapData.asset === SwapAsset.BTC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/btc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.BtcTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash } },
+                            )"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -262,7 +265,10 @@
                         <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: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -276,7 +282,10 @@
                         </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: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -357,6 +366,7 @@ import { BrowserDetection } from '@nimiq/utils';
 import { RefundSwapRequest, SignedTransaction } from '@nimiq/hub-api';
 import { SwapAsset, getAssets } from '@nimiq/fastspot-api';
 import { SettlementStatus } from '@nimiq/oasis-api';
+import { RouteName } from '@/router';
 import Config from 'config';
 import Amount from '../Amount.vue';
 import FiatConvertedAmount from '../FiatConvertedAmount.vue';
@@ -676,7 +686,10 @@ export default defineComponent({
             if (!tx) return;
             const plainTx = await sendTransaction(tx as SignedTransaction);
             await context.root.$nextTick();
-            context.root.$router.replace(`/transaction/${plainTx.transactionHash}`);
+            context.root.$router.replace({
+                name: RouteName.Transaction,
+                params: { transactionHash: plainTx.transactionHash },
+            });
         }
 
         return {
@@ -709,6 +722,7 @@ export default defineComponent({
             refundHtlc,
             SettlementStatus,
             assetToCurrency,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/UsdcTransactionModal.vue b/src/components/modals/UsdcTransactionModal.vue
index d341d9126..e56b51139 100644
--- a/src/components/modals/UsdcTransactionModal.vue
+++ b/src/components/modals/UsdcTransactionModal.vue
@@ -202,7 +202,10 @@
                         <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: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -216,7 +219,10 @@
                         </button>
                         <button v-if="swapData.asset === SwapAsset.BTC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/btc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.BtcTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -298,6 +304,7 @@ import { useAccountStore } from '@/stores/Account';
 import { useUsdcTransactionsStore, TransactionState } from '@/stores/UsdcTransactions';
 import { useUsdcContactsStore } from '@/stores/UsdcContacts';
 import { usePolygonNetworkStore } from '@/stores/PolygonNetwork';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import BlueLink from '../BlueLink.vue';
 import Modal from './Modal.vue';
@@ -557,7 +564,10 @@ export default defineComponent({
                     relayUrl!,
                 );
                 await context.root.$nextTick();
-                context.root.$router.replace(`/transaction/${plainTx.transactionHash}`);
+                context.root.$router.replace({
+                    name: RouteName.Transaction,
+                    params: { transactionHash: plainTx.transactionHash },
+                });
             } catch (e) {
                 const errorMessage = e instanceof Error ? e.message : String(e);
                 alert(context.root.$t('Refund failed: ') + errorMessage); // eslint-disable-line no-alert
diff --git a/src/components/modals/UsdtAddedModal.vue b/src/components/modals/UsdtAddedModal.vue
index fa48e9b4c..0b38e5b9c 100644
--- a/src/components/modals/UsdtAddedModal.vue
+++ b/src/components/modals/UsdtAddedModal.vue
@@ -13,7 +13,8 @@
             <UsdtIconPadded />
         </PageBody>
         <PageFooter>
-            <button class="nq-button light-blue" @click="$router.push('/stablecoin-selection')" @mousedown.prevent>
+            <button class="nq-button light-blue" @click="$router.push({ name: RouteName.StablecoinSelection })"
+            @mousedown.prevent>
                 {{ $t('Learn more') }}
             </button>
             <a class="nq-link" @click="stickWithUsdc">
@@ -26,6 +27,7 @@
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api';
 import { PageBody, PageHeader, PageFooter } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import Modal from './Modal.vue';
 import { CryptoCurrency } from '../../lib/Constants';
 import { useAccountSettingsStore } from '../../stores/AccountSettings';
@@ -55,6 +57,7 @@ export default defineComponent({
         return {
             modal$,
             stickWithUsdc,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/UsdtTransactionModal.vue b/src/components/modals/UsdtTransactionModal.vue
index 8bfac3f71..e29470033 100644
--- a/src/components/modals/UsdtTransactionModal.vue
+++ b/src/components/modals/UsdtTransactionModal.vue
@@ -183,7 +183,10 @@
                         <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: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -197,7 +200,10 @@
                         </button>
                         <button v-if="swapData.asset === SwapAsset.BTC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/btc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.BtcTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -279,6 +285,7 @@ import { useAccountStore } from '@/stores/Account';
 import { useUsdtTransactionsStore, TransactionState } from '@/stores/UsdtTransactions';
 import { useUsdtContactsStore } from '@/stores/UsdtContacts';
 import { usePolygonNetworkStore } from '@/stores/PolygonNetwork';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import BlueLink from '../BlueLink.vue';
 import Modal from './Modal.vue';
@@ -526,7 +533,10 @@ export default defineComponent({
                     relayUrl!,
                 );
                 await context.root.$nextTick();
-                context.root.$router.replace(`/transaction/${plainTx.transactionHash}`);
+                context.root.$router.replace({
+                    name: RouteName.UsdtTransaction,
+                    params: { transactionHash: plainTx.transactionHash },
+                });
             } catch (e) {
                 const errorMessage = e instanceof Error ? e.message : String(e);
                 alert(context.root.$t('Refund failed: ') + errorMessage); // eslint-disable-line no-alert
@@ -563,6 +573,7 @@ export default defineComponent({
             refundHtlc,
             ticker,
             assetToCurrency,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue b/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue
index 1e4c5af3d..dea7a2abb 100644
--- a/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue
+++ b/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue
@@ -21,7 +21,7 @@
         </PageBody>
         <PageFooter>
             <span>{{ $t('Your bank is not eligible?') }}</span>
-            <button class="nq-button-s" @click="$router.replace('/moonpay')" @mousedown.prevent>
+            <button class="nq-button-s" @click="$router.replace({ name: RouteName.Moonpay })" @mousedown.prevent>
                 {{ $t('Buy with Credit Card') }}
             </button>
         </PageFooter>
@@ -31,6 +31,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from '@vue/composition-api';
 import { PageHeader, PageBody, PageFooter } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import BankCheckInput from '../../BankCheckInput.vue';
 
 export default defineComponent({
@@ -49,6 +50,7 @@ export default defineComponent({
             bankCheckInput$,
             bankName,
             writing,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/staking/StakingButton.vue b/src/components/staking/StakingButton.vue
index cba544c04..9e9a24955 100644
--- a/src/components/staking/StakingButton.vue
+++ b/src/components/staking/StakingButton.vue
@@ -19,7 +19,7 @@
             <template #trigger>
                 <button class="stake"
                     :disabled="!canStake"
-                    @click="$router.push('/staking')"
+                    @click="$router.push({ name: RouteName.Staking })"
                     @mousedown.prevent
                 >
                     <HeroIcon :pulsing="!totalAccountStake && canStake" :disabled="$config.disableNetworkInteraction" />
@@ -35,6 +35,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from '@vue/composition-api';
 import { Tooltip } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import { useAddressStore } from '../../stores/Address';
 import { useStakingStore } from '../../stores/Staking';
 import { useConfig } from '../../composables/useConfig';
@@ -70,7 +71,7 @@ export default defineComponent({
             if (canStake.value) {
                 e.stopPropagation();
                 e.preventDefault();
-                context.root.$router.push('/staking');
+                context.root.$router.push({ name: RouteName.Staking });
             }
         }
 
@@ -122,6 +123,7 @@ export default defineComponent({
             canStake,
             customClickHandler,
             isCTATooltipDisabled,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/staking/StakingPreview.vue b/src/components/staking/StakingPreview.vue
index a5b851e89..f16c634cf 100644
--- a/src/components/staking/StakingPreview.vue
+++ b/src/components/staking/StakingPreview.vue
@@ -1,7 +1,7 @@
 <template>
     <button class="staking-preview nq-button-pill green flex-row"
         :disabled="$config.disableNetworkInteraction"
-        @click="$router.push('/staking')" @mousedown.prevent>
+        @click="$router.push({ name: RouteName.Staking })" @mousedown.prevent>
         <!-- The percentages below should also match in AmountSlider.vue -->
         <OneLeafStakingIcon v-if="currentPercentage < 50"/>
         <TwoLeafStakingIcon v-else-if="currentPercentage < 75"/>
@@ -22,6 +22,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import { useStakingStore } from '../../stores/Staking';
 import OneLeafStakingIcon from '../icons/Staking/OneLeafStakingIcon.vue';
@@ -50,6 +51,7 @@ export default defineComponent({
             stake,
             currentPercentage,
             restakingRewards,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/staking/StakingSummaryMobile.vue b/src/components/staking/StakingSummaryMobile.vue
index 68a4700fb..45934a1f7 100644
--- a/src/components/staking/StakingSummaryMobile.vue
+++ b/src/components/staking/StakingSummaryMobile.vue
@@ -4,7 +4,7 @@
         <span class="staking-projection-text">
             {{ $t('Earn NIM every month by staking your NIM') }}
         </span>
-        <button @click="$router.push('/staking')" class="nq-button-s inverse staking-action">
+        <button @click="$router.push({ name: RouteName.Staking })" class="nq-button-s inverse staking-action">
             {{ $t('Stake now') }}
         </button>
     </div>
@@ -12,11 +12,14 @@
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import StakingButton from './StakingButton.vue';
 
 export default defineComponent({
     setup() {
-        return {};
+        return {
+            RouteName,
+        };
     },
     components: {
         StakingButton,
diff --git a/src/components/swap/SwapModal.vue b/src/components/swap/SwapModal.vue
index c009e2592..30a391799 100644
--- a/src/components/swap/SwapModal.vue
+++ b/src/components/swap/SwapModal.vue
@@ -296,6 +296,7 @@ import type { BigNumber } from 'ethers';
 import type { RelayRequest } from '@opengsn/common/dist/EIP712/RelayRequest';
 import type { ForwardRequest } from '@opengsn/common/dist/EIP712/ForwardRequest';
 import { CurrencyInfo } from '@nimiq/utils';
+import { RouteName } from '@/router';
 
 import Modal from '../modals/Modal.vue';
 import Amount from '../Amount.vue';
@@ -2193,7 +2194,10 @@ export default defineComponent({
                 rightAsset.value = leftAsset.value;
             }
             leftAsset.value = asset;
-            context.root.$router.replace(`/swap/${leftAsset.value}-${rightAsset.value}`);
+            context.root.$router.replace({
+                name: RouteName.Swap,
+                params: { pair: `${leftAsset.value}-${rightAsset.value}` },
+            });
         }
 
         function setRightAsset(asset: SupportedSwapAsset) {
@@ -2201,7 +2205,10 @@ export default defineComponent({
                 leftAsset.value = rightAsset.value;
             }
             rightAsset.value = asset;
-            context.root.$router.replace(`/swap/${leftAsset.value}-${rightAsset.value}`);
+            context.root.$router.replace({
+                name: RouteName.Swap,
+                params: { pair: `${leftAsset.value}-${rightAsset.value}` },
+            });
         }
 
         const swapIsNotSupported = computed(() => activeAccountInfo.value?.type === AccountType.LEDGER
diff --git a/src/components/swap/SwapNotification.vue b/src/components/swap/SwapNotification.vue
index 60990a07c..380f39a71 100644
--- a/src/components/swap/SwapNotification.vue
+++ b/src/components/swap/SwapNotification.vue
@@ -66,6 +66,7 @@ import {
 import { SwapHandler, Swap as GenericSwap, SwapAsset, Client, Transaction } from '@nimiq/libswap';
 import type { ForwardRequest } from '@opengsn/common/dist/EIP712/ForwardRequest';
 import { Event as PolygonEvent, EventType as PolygonEventType } from '@nimiq/libswap/dist/src/Erc20AssetAdapter';
+import { RouteName } from '@/router';
 import MaximizeIcon from '../icons/MaximizeIcon.vue';
 import { useSwapsStore, SwapState, ActiveSwap, SwapEurData, SwapErrorAction } from '../../stores/Swaps';
 import { useNetworkStore } from '../../stores/Network';
@@ -946,11 +947,11 @@ export default defineComponent({
             const toAsset = activeSwap.value.to.asset as SwapAsset;
 
             if (cryptoCurrencies.includes(fromAsset) && cryptoCurrencies.includes(toAsset)) {
-                context.root.$router.push('/swap');
+                context.root.$router.push({ name: RouteName.Swap });
             } else if (fiatCurrencies.includes(fromAsset)) {
-                context.root.$router.push('/buy-crypto');
+                context.root.$router.push({ name: RouteName.BuyCrypto });
             } else if (fiatCurrencies.includes(toAsset)) {
-                context.root.$router.push('/sell-crypto');
+                context.root.$router.push({ name: RouteName.SellCrypto });
             } else {
                 throw new Error('Unhandled swap type, cannot open correct swap modal');
             }
diff --git a/src/hub.ts b/src/hub.ts
index ad6f3937a..33f9495c8 100644
--- a/src/hub.ts
+++ b/src/hub.ts
@@ -30,7 +30,7 @@ import { sendTransaction as sendTx } from './network';
 import { sendTransaction as sendBtcTx } from './electrum';
 import { createTransactionRequest, sendTransaction as sendPolygonTx } from './ethers';
 import { isProxyData, ProxyTransactionDirection } from './lib/ProxyDetection';
-import router from './router';
+import router, { RouteName } from './router';
 import { useSettingsStore } from './stores/Settings';
 import { useFiatStore } from './stores/Fiat';
 import { useKycStore } from './stores/Kyc';
@@ -135,7 +135,7 @@ hubApi.on(HubApi.RequestType.ONBOARD, async (accounts) => {
             // Signup of a Keyguard account
             if (!welcomeModalAlreadyShown && config.enableBitcoin && config.polygon.enabled) {
                 // Show regular first-time welcome flow which talks about Bitcoin and USDC.
-                router.push('/welcome');
+                router.push({ name: RouteName.Welcome });
             }
             break;
         case HubApi.RequestType.LOGIN:
@@ -146,7 +146,7 @@ hubApi.on(HubApi.RequestType.ONBOARD, async (accounts) => {
                 // Ledger logins where Bitcoin is not automatically activated as it requires the Bitcoin app; for
                 // Keyguard accounts it's automatically activated on login), offer to activate it. After activation, the
                 // Bitcoin activation modal leads into the Welcome modal if not shown yet.
-                router.push('/btc-activation');
+                router.push({ name: RouteName.BtcActivation });
             }
             // We currently don't need to handle the case that USDC is not activated yet after logins, because for
             // Legacy and Ledger accounts it's currently not supported yet, and for Keyguard accounts it's automatically
@@ -162,7 +162,7 @@ hubApi.on(HubApi.RequestType.ONBOARD, async (accounts) => {
 });
 
 hubApi.on(HubApi.RequestType.MIGRATE, () => {
-    router.onReady(() => router.push('/migration-welcome'));
+    router.onReady(() => router.push({ name: RouteName.MigrationWelcome }));
 });
 
 hubApi.on(HubApi.RequestType.SIGN_TRANSACTION, async (tx) => {
@@ -398,7 +398,7 @@ export async function syncFromHub() {
         && config.polygon.enabled
     ) {
         // Prompt for USDC activation, which then leads into the new welcome modal if not shown yet.
-        router.push('/usdc-activation');
+        router.push({ name: RouteName.UsdcActivation });
     } else {
         // Check if the WelcomeStakingModal should be shown
         const welcomeStakingModalAlreadyShown = window.localStorage.getItem(
@@ -407,7 +407,7 @@ export async function syncFromHub() {
 
         if (!welcomeStakingModalAlreadyShown) {
             // Show WelcomeStakingModal if not shown before
-            router.push('/welcome-staking');
+            router.push({ name: RouteName.WelcomeStaking });
         }
     }
 }
@@ -442,7 +442,7 @@ export async function onboard(asRedirect = false) {
         && !activeAccountInfo.value.btcAddresses?.external.length
         && config.enableBitcoin
     ) {
-        router.push('/btc-activation');
+        router.push({ name: RouteName.BtcActivation });
     }
     return true;
 }
diff --git a/src/router.ts b/src/router.ts
index 975cfe0ae..d4d8609fc 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -99,6 +99,7 @@ export enum Columns {
 
 export enum RouteName {
     Root = 'root',
+    Transactions = 'transactions',
     RootAccounts = 'root-accounts',
     Send = 'send',
     SendNim = 'send-nim',
@@ -146,6 +147,7 @@ export enum RouteName {
 
 const routes: RouteConfig[] = [{
     path: '/',
+    name: RouteName.Root,
     components: {
         groundfloor: Groundfloor,
     },
@@ -155,7 +157,7 @@ const routes: RouteConfig[] = [{
             accountOverview: AccountOverview,
             addressOverview: AddressOverview,
         },
-        name: RouteName.Root,
+        name: RouteName.Transactions,
         alias: '/transactions',
         meta: { column: Columns.DYNAMIC },
         children: [{