From ab76915c005e07c2e62f7df2b415ac8d3ca1c5a7 Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Mon, 28 Oct 2024 14:39:28 +0100
Subject: [PATCH] feat: settings link for non logged users (#512)

---
 components/AppNavbar.vue                      |  65 ++++++++++-
 components/AppNavbarLanding.vue               | 105 +++++++++++++++++-
 components/AppNavbarProfileDropdown.vue       |   9 +-
 components/AppNotFound.vue                    |   7 +-
 components/AssetAssetsDocument.vue            |   9 +-
 components/AssetAssetsOther.vue               |   9 +-
 components/AssetImage.vue                     |  10 +-
 components/BuyLyxCard.vue                     |   7 +-
 components/DappShowcase.vue                   |  18 ++-
 components/ModalTemplateConnectWallet.vue     |   5 +-
 components/NftAssetView.vue                   |   9 +-
 components/ProfileCardShareUniversalPage.vue  |   7 +-
 components/ProfileCardShareUniversalSwaps.vue |   7 +-
 components/TokenAssetView.vue                 |   7 +-
 components/TokenListCardLyx.vue               |   5 +-
 .../ProfileCardShareUniversalPage.spec.ts     |  18 ++-
 .../ProfileCardShareUniversalSwaps.spec.ts    |  18 ++-
 .../useBrowserExtensionProvider.ts            |   7 +-
 domains/graph/components/NftListCardGraph.vue |  10 +-
 .../graph/components/TokenListCardGraph.vue   |   7 +-
 domains/grid/components/GridWidget.vue        |   7 +-
 domains/rpc/components/NftListCardRpc.vue     |  10 +-
 domains/rpc/components/TokenListCardRpc.vue   |   7 +-
 package.json                                  |   2 +-
 pages/[profileAddress]/lyx-details.vue        |   5 +-
 pages/contract/[...slug].vue                  |   7 +-
 pages/index.vue                               |   2 +-
 yarn.lock                                     |  10 +-
 28 files changed, 334 insertions(+), 55 deletions(-)

diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 4a0d275d..ee99a495 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -45,6 +45,10 @@ const handleMobileSearch = () => {
 const handleNavigateSettings = () => {
   navigateTo(settingsRoute())
 }
+
+const handleNavigateMyUpDashboard = () => {
+  navigateTo(myUpDappDashboardUrl(), { external: true })
+}
 </script>
 
 <template>
@@ -57,8 +61,12 @@ const handleNavigateSettings = () => {
     mobile-breakpoint="lg"
     @on-brand-click="handleNavigateLanding"
   >
-    <div class="flex items-center justify-end" slot="desktop-menu">
+    <!-- Desktop Menu -->
+    <div class="flex items-center justify-end pr-4" slot="desktop-menu">
+      <!-- Send assets -->
       <AppNavbarSendButton v-if="isConnected" />
+
+      <!-- Profile -->
       <lukso-button
         v-if="isConnected"
         variant="text"
@@ -76,7 +84,11 @@ const handleNavigateSettings = () => {
           {{ $formatMessage('header_my_profile') }}
         </span>
       </lukso-button>
+
+      <!-- Profile dropdown -->
       <AppNavbarProfileDropdown v-if="isConnected" />
+
+      <!-- Connect -->
       <lukso-button
         v-else
         variant="secondary"
@@ -89,9 +101,25 @@ const handleNavigateSettings = () => {
           {{ $formatMessage('header_connect') }}
         </span>
       </lukso-button>
+
+      <!-- Settings -->
+      <div
+        v-if="!isConnected"
+        class="ml-4 h-6 w-[1px] border-l border-purple-82 pl-4"
+      >
+        <lukso-icon
+          name="settings"
+          color="purple-41"
+          class="cursor-pointer opacity-70 transition hover:rotate-45 hover:opacity-100"
+          @click="handleNavigateSettings"
+        ></lukso-icon>
+      </div>
     </div>
+
+    <!-- Mobile Menu -->
     <div slot="mobile-menu">
       <div className="flex flex-col items-center justify-center h-screen pb-32">
+        <!-- Send assets -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -109,6 +137,8 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_send') }}
           </span>
         </lukso-button>
+
+        <!-- Profile -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -126,6 +156,33 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_my_profile') }}
           </span>
         </lukso-button>
+
+        <!-- Dashboard (my.up.cloud) -->
+        <lukso-button
+          v-if="isConnected"
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateMyUpDashboard"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_relayer_dashboard') }}
+          </span>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 group-hover:hidden"
+            color="purple-63"
+          ></lukso-icon>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 hidden group-hover:inline-block"
+            color="purple-41"
+          ></lukso-icon>
+        </lukso-button>
+
+        <!-- Settings -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -137,6 +194,8 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_settings') }}
           </span>
         </lukso-button>
+
+        <!-- Disconnect -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -148,6 +207,8 @@ const handleNavigateSettings = () => {
             {{ $formatMessage('header_disconnect') }}
           </span>
         </lukso-button>
+
+        <!-- Connect -->
         <lukso-button
           v-else
           variant="text"
@@ -161,6 +222,8 @@ const handleNavigateSettings = () => {
         </lukso-button>
       </div>
     </div>
+
+    <!-- Mobile Icons -->
     <div slot="mobile-icons" class="flex">
       <lukso-icon
         name="search"
diff --git a/components/AppNavbarLanding.vue b/components/AppNavbarLanding.vue
index 293f7df7..33e1ebc3 100644
--- a/components/AppNavbarLanding.vue
+++ b/components/AppNavbarLanding.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const { isTestnet, isConnected } = storeToRefs(useAppStore())
+const { isTestnet, isConnected, connectedProfileAddress } =
+  storeToRefs(useAppStore())
 const { disconnect } = useBaseProvider()
 const { showModal } = useModal()
 
@@ -13,6 +14,18 @@ const handleConnect = async () => {
 const handleDisconnect = async () => {
   disconnect()
 }
+
+const handleNavigateSettings = () => {
+  navigateTo(settingsRoute())
+}
+
+const handleNavigateProfile = async () => {
+  navigateTo(profileRoute(connectedProfileAddress.value))
+}
+
+const handleNavigateMyUpDashboard = () => {
+  navigateTo(myUpDappDashboardUrl(), { external: true })
+}
 </script>
 
 <template>
@@ -21,8 +34,14 @@ const handleDisconnect = async () => {
     logo-url="/images/logo-ue.svg"
     is-transparent
     has-menu
+    mobile-breakpoint="lg"
   >
-    <div class="flex w-full items-center justify-end gap-4" slot="desktop-menu">
+    <!-- Desktop Menu -->
+    <div
+      class="flex w-full items-center justify-end gap-4 pr-4"
+      slot="desktop-menu"
+    >
+      <!-- L14 Profiles -->
       <lukso-button
         variant="text"
         is-link
@@ -41,6 +60,8 @@ const handleDisconnect = async () => {
           color="purple-51"
         ></lukso-icon>
       </lukso-button>
+
+      <!-- Support -->
       <lukso-button
         variant="text"
         is-link
@@ -53,6 +74,8 @@ const handleDisconnect = async () => {
           {{ $formatMessage('footer_need_help_text') }}
         </span>
       </lukso-button>
+
+      <!-- Create Profile -->
       <lukso-button
         variant="secondary"
         is-link
@@ -70,7 +93,11 @@ const handleDisconnect = async () => {
           }}
         </span>
       </lukso-button>
+
+      <!-- Profile dropdown -->
       <AppNavbarProfileDropdown v-if="isConnected" />
+
+      <!-- Connect -->
       <lukso-button
         v-else
         variant="landing"
@@ -80,9 +107,25 @@ const handleDisconnect = async () => {
       >
         {{ $formatMessage('header_connect') }}
       </lukso-button>
+
+      <!-- Settings -->
+      <div
+        v-if="!isConnected"
+        class="h-6 w-[1px] border-l border-purple-82 pl-4"
+      >
+        <lukso-icon
+          name="settings"
+          color="purple-41"
+          class="cursor-pointer opacity-70 transition hover:rotate-45 hover:opacity-100"
+          @click="handleNavigateSettings"
+        ></lukso-icon>
+      </div>
     </div>
+
+    <!-- Mobile Menu -->
     <div slot="mobile-menu">
       <div className="flex flex-col items-center justify-center h-screen pb-32">
+        <!-- L14 Profiles -->
         <lukso-button
           variant="text"
           custom-class="no-underline"
@@ -109,6 +152,8 @@ const handleDisconnect = async () => {
             color="purple-41"
           ></lukso-icon>
         </lukso-button>
+
+        <!-- Support -->
         <lukso-button
           variant="text"
           is-link
@@ -123,6 +168,8 @@ const handleDisconnect = async () => {
             {{ $formatMessage('footer_need_help_text') }}
           </span>
         </lukso-button>
+
+        <!-- Create Profile -->
         <lukso-button
           variant="text"
           custom-class="no-underline"
@@ -153,6 +200,58 @@ const handleDisconnect = async () => {
             color="purple-41"
           ></lukso-icon>
         </lukso-button>
+
+        <!-- Profile -->
+        <lukso-button
+          v-if="isConnected"
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateProfile"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_my_profile') }}
+          </span>
+        </lukso-button>
+
+        <!-- Dashboard (my.up.cloud) -->
+        <lukso-button
+          v-if="isConnected"
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateMyUpDashboard"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_relayer_dashboard') }}
+          </span>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 group-hover:hidden"
+            color="purple-63"
+          ></lukso-icon>
+          <lukso-icon
+            name="link-3"
+            size="small"
+            class="ml-2 hidden group-hover:inline-block"
+            color="purple-41"
+          ></lukso-icon>
+        </lukso-button>
+
+        <!-- Settings -->
+        <lukso-button
+          variant="text"
+          custom-class="text-12 nav-apax-12-medium-uppercase"
+          class="group"
+          @click="handleNavigateSettings"
+        >
+          <span class="text-purple-63 transition group-hover:text-purple-41">
+            {{ $formatMessage('header_settings') }}
+          </span>
+        </lukso-button>
+
+        <!-- Disconnect -->
         <lukso-button
           v-if="isConnected"
           variant="text"
@@ -164,6 +263,8 @@ const handleDisconnect = async () => {
             {{ $formatMessage('header_disconnect') }}
           </span>
         </lukso-button>
+
+        <!-- Connect -->
         <lukso-button
           v-else
           variant="text"
diff --git a/components/AppNavbarProfileDropdown.vue b/components/AppNavbarProfileDropdown.vue
index 7a9d254f..f8ed7787 100644
--- a/components/AppNavbarProfileDropdown.vue
+++ b/components/AppNavbarProfileDropdown.vue
@@ -26,7 +26,7 @@ const handleOutsideDropdown = (event: Event) => {
 }
 
 const handleNavigateMyUpDashboard = () => {
-  window.open(myUpDappDashboardUrl(), '_self')
+  navigateTo(myUpDappDashboardUrl(), { external: true })
 }
 
 const handleNavigateSettings = () => {
@@ -60,6 +60,7 @@ onUnmounted(() => {
       class="absolute right-0 z-[1000] mt-4 animate-fade-in select-none rounded-12 bg-neutral-100 shadow-pink-drop-shadow animation-duration-150 before:absolute before:right-0 before:top-0 before:-mt-1 before:mr-4 before:size-3 before:rotate-45 before:bg-neutral-100"
       :class="isDropdownOpen ? 'block' : 'hidden'"
     >
+      <!-- Profile -->
       <lukso-button
         v-if="activePage('index')"
         variant="text"
@@ -71,6 +72,8 @@ onUnmounted(() => {
           {{ $formatMessage('header_my_profile') }}
         </span>
       </lukso-button>
+
+      <!-- Dashboard (my.up.cloud) -->
       <lukso-button
         variant="text"
         custom-class="text-12 nav-apax-12-medium-uppercase"
@@ -81,6 +84,8 @@ onUnmounted(() => {
           {{ $formatMessage('header_relayer_dashboard') }}
         </span>
       </lukso-button>
+
+      <!-- Settings -->
       <lukso-button
         variant="text"
         custom-class="text-12 nav-apax-12-medium-uppercase"
@@ -91,6 +96,8 @@ onUnmounted(() => {
           {{ $formatMessage('header_settings') }}
         </span>
       </lukso-button>
+
+      <!-- Disconnect -->
       <lukso-button
         variant="text"
         custom-class="text-12 nav-apax-12-medium-uppercase"
diff --git a/components/AppNotFound.vue b/components/AppNotFound.vue
index bb786807..dedd982c 100644
--- a/components/AppNotFound.vue
+++ b/components/AppNotFound.vue
@@ -6,7 +6,12 @@ const handleVisitHomepage = () => {
 }
 
 const handleGetHelp = () => {
-  window.open(formatMessage('not_found_get_help_url'), '_blank')
+  navigateTo(formatMessage('not_found_get_help_url'), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/AssetAssetsDocument.vue b/components/AssetAssetsDocument.vue
index 5a42f476..d84f69ce 100644
--- a/components/AssetAssetsDocument.vue
+++ b/components/AssetAssetsDocument.vue
@@ -6,7 +6,14 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleClick = () => {
-  props?.asset && 'url' in props.asset && window.open(props.asset.url, '_blank')
+  if (props.asset && 'url' in props.asset) {
+    navigateTo(props.asset.url, {
+      external: true,
+      open: {
+        target: '_blank',
+      },
+    })
+  }
 }
 </script>
 
diff --git a/components/AssetAssetsOther.vue b/components/AssetAssetsOther.vue
index 17412747..8d3ba398 100644
--- a/components/AssetAssetsOther.vue
+++ b/components/AssetAssetsOther.vue
@@ -6,7 +6,14 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleClick = () => {
-  'url' in props.asset && window.open(props.asset.url, '_blank')
+  if (props.asset && 'url' in props.asset) {
+    navigateTo(props.asset.url, {
+      external: true,
+      open: {
+        target: '_blank',
+      },
+    })
+  }
 }
 </script>
 
diff --git a/components/AssetImage.vue b/components/AssetImage.vue
index 7c81dc55..eafbe5c4 100644
--- a/components/AssetImage.vue
+++ b/components/AssetImage.vue
@@ -38,10 +38,12 @@ const handleLoad = () => {
 
 const handleOpenVerificationDocs = (event: Event) => {
   event.stopPropagation()
-  window.open(
-    'https://docs.lukso.tech/learn/assets#generate-the-json-file',
-    '_blank'
-  )
+  navigateTo('https://docs.lukso.tech/learn/assets#generate-the-json-file', {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const isVerificationInvalid = computed(
diff --git a/components/BuyLyxCard.vue b/components/BuyLyxCard.vue
index 3aa42542..cd8e8961 100644
--- a/components/BuyLyxCard.vue
+++ b/components/BuyLyxCard.vue
@@ -8,7 +8,12 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleBuyLyx = () => {
-  window.open(props.buyUrl, '_blank')
+  navigateTo(props.buyUrl, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/DappShowcase.vue b/components/DappShowcase.vue
index 1a7047b4..7688749b 100644
--- a/components/DappShowcase.vue
+++ b/components/DappShowcase.vue
@@ -4,7 +4,12 @@ import { Navigation, Pagination } from 'swiper/modules'
 const SHOWCASE_ITEM_COUNT = 8
 
 const handleCardClick = (url: string) => {
-  window.open(url, '_blank')
+  navigateTo(url, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
@@ -35,9 +40,12 @@ const handleCardClick = (url: string) => {
         clickableClass: 'swiper-pagination-clickable',
       }"
       :breakpoints="{
-        1300: {
+        1400: {
           slidesPerView: 5,
         },
+        1300: {
+          slidesPerView: 4,
+        },
         1024: {
           slidesPerView: 3,
         },
@@ -45,7 +53,7 @@ const handleCardClick = (url: string) => {
           slidesPerView: 2,
         },
       }"
-      class="w-[calc(100vw-48px)] lg:w-full"
+      class="w-[calc(100vw-48px)] max-w-[1200px] xl:w-full"
     >
       <SwiperSlide
         v-for="index in SHOWCASE_ITEM_COUNT"
@@ -78,12 +86,12 @@ const handleCardClick = (url: string) => {
     <lukso-icon
       name="arrow-left-lg"
       id="prev"
-      class="absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:left-[-60px]"
+      class="absolute left-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] xl:left-[-60px]"
     ></lukso-icon>
     <lukso-icon
       name="arrow-right-lg"
       id="next"
-      class="absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] lg:right-[-60px]"
+      class="absolute right-[20px] top-[calc(50%-45px)] z-10 cursor-pointer select-none rounded-8 border border-neutral-90 bg-neutral-100 p-2 transition hover:scale-[1.05] hover:border-neutral-80 active:scale-[0.99] xl:right-[-60px]"
     ></lukso-icon>
   </div>
 </template>
diff --git a/components/ModalTemplateConnectWallet.vue b/components/ModalTemplateConnectWallet.vue
index 10f9ec6e..c1bf81a5 100644
--- a/components/ModalTemplateConnectWallet.vue
+++ b/components/ModalTemplateConnectWallet.vue
@@ -15,7 +15,10 @@ const handleConnectBrowser = async () => {
 
   // extension not installed then link to store
   if (!isUniversalProfileExtension) {
-    return window.open(extensionStore.value.url, '_blank')
+    return navigateTo(extensionStore.value.url, {
+      external: true,
+      open: { target: '_blank' },
+    })
   }
 
   await connectBrowserExtension()
diff --git a/components/NftAssetView.vue b/components/NftAssetView.vue
index 544b1abb..aacefdc2 100644
--- a/components/NftAssetView.vue
+++ b/components/NftAssetView.vue
@@ -60,9 +60,14 @@ const handleViewCollection = () => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(
+  navigateTo(
     universalPageAssetUrl(asset.value?.address, asset.value?.tokenId),
-    '_blank'
+    {
+      external: true,
+      open: {
+        target: '_blank',
+      },
+    }
   )
 }
 </script>
diff --git a/components/ProfileCardShareUniversalPage.vue b/components/ProfileCardShareUniversalPage.vue
index 753b5a48..bdffaef1 100644
--- a/components/ProfileCardShareUniversalPage.vue
+++ b/components/ProfileCardShareUniversalPage.vue
@@ -6,7 +6,12 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleOpen = () => {
-  window.open(universalPageProfileUrl(props.profile?.address), '_blank')
+  navigateTo(universalPageProfileUrl(props.profile?.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/ProfileCardShareUniversalSwaps.vue b/components/ProfileCardShareUniversalSwaps.vue
index 3d91ce47..2ca1585e 100644
--- a/components/ProfileCardShareUniversalSwaps.vue
+++ b/components/ProfileCardShareUniversalSwaps.vue
@@ -6,7 +6,12 @@ type Props = {
 const props = defineProps<Props>()
 
 const handleOpen = () => {
-  window.open(universalSwapsProfileUrl(props.profile?.address), '_blank')
+  navigateTo(universalSwapsProfileUrl(props.profile?.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/TokenAssetView.vue b/components/TokenAssetView.vue
index 22e78d95..37ba5441 100644
--- a/components/TokenAssetView.vue
+++ b/components/TokenAssetView.vue
@@ -46,7 +46,12 @@ const handlePreviewImage = () => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(universalSwapsAssetUrl(asset.value?.address), '_blank')
+  navigateTo(universalSwapsAssetUrl(asset.value?.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 </script>
 
diff --git a/components/TokenListCardLyx.vue b/components/TokenListCardLyx.vue
index 8f481e6a..63e0368e 100644
--- a/components/TokenListCardLyx.vue
+++ b/components/TokenListCardLyx.vue
@@ -22,7 +22,10 @@ const handleShowLyxDetails = () => {
 const handleBuyLyx = (event: Event) => {
   event.stopPropagation()
   if (isTestnet.value) {
-    window.open(TESTNET_FAUCET_URL, '_blank')
+    navigateTo(TESTNET_FAUCET_URL, {
+      external: true,
+      open: { target: '_blank' },
+    })
   } else {
     try {
       assertAddress(viewedProfile?.value?.address, 'profile')
diff --git a/components/__tests__/ProfileCardShareUniversalPage.spec.ts b/components/__tests__/ProfileCardShareUniversalPage.spec.ts
index a89c54bd..f3b62a24 100644
--- a/components/__tests__/ProfileCardShareUniversalPage.spec.ts
+++ b/components/__tests__/ProfileCardShareUniversalPage.spec.ts
@@ -1,8 +1,13 @@
-import { renderSuspended } from '@nuxt/test-utils/runtime'
+import { mockNuxtImport, renderSuspended } from '@nuxt/test-utils/runtime'
 import { describe, expect, it, vi } from 'vitest'
 
 import ProfileCardShareUniversalPage from '@/components/ProfileCardShareUniversalPage.vue'
 
+const navigateToMock = vi.hoisted(() => vi.fn())
+mockNuxtImport('navigateTo', () => {
+  return navigateToMock
+})
+
 describe('ProfileCardShareUniversalPage', () => {
   const profile: Profile = {
     address: '0x1234567890abcdef1234567890abcdef12345678',
@@ -21,13 +26,16 @@ describe('ProfileCardShareUniversalPage', () => {
       props: { profile },
     })
 
-    const windowOpenSpy = vi.spyOn(window, 'open')
-
     ;(await component.findByRole('img')).click()
 
-    expect(windowOpenSpy).toHaveBeenCalledWith(
+    expect(navigateToMock).toHaveBeenCalledWith(
       'https://universal.page/profiles/lukso/0x1234567890abcdef1234567890abcdef12345678',
-      '_blank'
+      {
+        external: true,
+        open: {
+          target: '_blank',
+        },
+      }
     )
   })
 })
diff --git a/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts b/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts
index 638beb99..367d9930 100644
--- a/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts
+++ b/components/__tests__/ProfileCardShareUniversalSwaps.spec.ts
@@ -1,8 +1,13 @@
-import { renderSuspended } from '@nuxt/test-utils/runtime'
+import { mockNuxtImport, renderSuspended } from '@nuxt/test-utils/runtime'
 import { describe, expect, it, vi } from 'vitest'
 
 import ProfileCardShareUniversalSwaps from '@/components/ProfileCardShareUniversalSwaps.vue'
 
+const navigateToMock = vi.hoisted(() => vi.fn())
+mockNuxtImport('navigateTo', () => {
+  return navigateToMock
+})
+
 describe('ProfileCardShareUniversalSwaps', () => {
   const profile: Profile = {
     address: '0x1234567890abcdef1234567890abcdef12345678',
@@ -21,13 +26,16 @@ describe('ProfileCardShareUniversalSwaps', () => {
       props: { profile },
     })
 
-    const windowOpenSpy = vi.spyOn(window, 'open')
-
     ;(await component.findByRole('img')).click()
 
-    expect(windowOpenSpy).toHaveBeenCalledWith(
+    expect(navigateToMock).toHaveBeenCalledWith(
       'https://universalswaps.io/social/0x1234567890abcdef1234567890abcdef12345678',
-      '_blank'
+      {
+        external: true,
+        open: {
+          target: '_blank',
+        },
+      }
     )
   })
 })
diff --git a/composables/web3-provider/useBrowserExtensionProvider.ts b/composables/web3-provider/useBrowserExtensionProvider.ts
index e1f1b484..1edb3171 100644
--- a/composables/web3-provider/useBrowserExtensionProvider.ts
+++ b/composables/web3-provider/useBrowserExtensionProvider.ts
@@ -5,7 +5,12 @@ import type { ProviderAPI } from '@/types/provider'
 const openStoreLink = () => {
   const storeLink = browserInfo().storeLink
 
-  window.open(storeLink, '_blank')
+  navigateTo(storeLink, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const connect = async () => {
diff --git a/domains/graph/components/NftListCardGraph.vue b/domains/graph/components/NftListCardGraph.vue
index 8ada0d35..04927e7b 100644
--- a/domains/graph/components/NftListCardGraph.vue
+++ b/domains/graph/components/NftListCardGraph.vue
@@ -69,10 +69,12 @@ const handleBuySellAsset = (event: Event) => {
     return navigateTo(collectionRoute(props.asset.address))
   }
 
-  window.open(
-    universalPageAssetUrl(props.asset.address, props.asset.tokenId),
-    '_blank'
-  )
+  navigateTo(universalPageAssetUrl(props.asset.address, props.asset.tokenId), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const assetTokenId = computed(() => {
diff --git a/domains/graph/components/TokenListCardGraph.vue b/domains/graph/components/TokenListCardGraph.vue
index 73767e8b..c6d05609 100644
--- a/domains/graph/components/TokenListCardGraph.vue
+++ b/domains/graph/components/TokenListCardGraph.vue
@@ -30,7 +30,12 @@ const handleSendAsset = (event: Event) => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(universalSwapsAssetUrl(props.asset.address), '_blank')
+  navigateTo(universalSwapsAssetUrl(props.asset.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const isLoadedAsset = computed(() => asset.value && !asset.value.isLoading)
diff --git a/domains/grid/components/GridWidget.vue b/domains/grid/components/GridWidget.vue
index bc42f854..5c8ecbc7 100644
--- a/domains/grid/components/GridWidget.vue
+++ b/domains/grid/components/GridWidget.vue
@@ -112,7 +112,12 @@ const handleMove = () => {
 }
 
 const handleOpenInTab = () => {
-  window.open(src.value, '_blank')
+  navigateTo(src.value, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const handleClone = async () => {
diff --git a/domains/rpc/components/NftListCardRpc.vue b/domains/rpc/components/NftListCardRpc.vue
index 99f5614c..c154233d 100644
--- a/domains/rpc/components/NftListCardRpc.vue
+++ b/domains/rpc/components/NftListCardRpc.vue
@@ -60,10 +60,12 @@ const handleSendAsset = (event: Event) => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(
-    universalPageAssetUrl(props.asset.address, props.asset.tokenId),
-    '_blank'
-  )
+  navigateTo(universalPageAssetUrl(props.asset.address, props.asset.tokenId), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const assetTokenId = computed(() => {
diff --git a/domains/rpc/components/TokenListCardRpc.vue b/domains/rpc/components/TokenListCardRpc.vue
index 6dfcbe04..627081f9 100644
--- a/domains/rpc/components/TokenListCardRpc.vue
+++ b/domains/rpc/components/TokenListCardRpc.vue
@@ -31,7 +31,12 @@ const handleSendAsset = (event: Event) => {
 
 const handleBuySellAsset = (event: Event) => {
   event.stopPropagation()
-  window.open(universalSwapsAssetUrl(props.asset.address), '_blank')
+  navigateTo(universalSwapsAssetUrl(props.asset.address), {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
 }
 
 const isLoadedToken = computed(() => token.value && !token.value.isLoading)
diff --git a/package.json b/package.json
index 5a1b1551..f8176d82 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@formatjs/intl": "^2.9.9",
     "@google/model-viewer": "^3.4.0",
     "@lukso/lsp-smart-contracts": "0.15.0-rc.5",
-    "@lukso/web-components": "1.94.1",
+    "@lukso/web-components": "1.94.2",
     "@nuxt/test-utils": "^3.13.1",
     "@nuxtjs/algolia": "^1.10.2",
     "@nuxtjs/device": "^3.1.1",
diff --git a/pages/[profileAddress]/lyx-details.vue b/pages/[profileAddress]/lyx-details.vue
index bcc7fd4a..33a5010e 100644
--- a/pages/[profileAddress]/lyx-details.vue
+++ b/pages/[profileAddress]/lyx-details.vue
@@ -26,7 +26,10 @@ const handleSendLyx = () => {
 
 const handleBuyLyx = () => {
   if (isTestnet.value) {
-    window.open(TESTNET_FAUCET_URL, '_blank')
+    navigateTo(TESTNET_FAUCET_URL, {
+      external: true,
+      open: { target: '_blank' },
+    })
   } else {
     try {
       assertAddress(viewedProfile.value?.address, 'profile')
diff --git a/pages/contract/[...slug].vue b/pages/contract/[...slug].vue
index b0004726..47a66e76 100644
--- a/pages/contract/[...slug].vue
+++ b/pages/contract/[...slug].vue
@@ -19,7 +19,12 @@ watch(
     }
     // anything that is not LSP7/8 we open in explorer
     if (!isAsset(asset)) {
-      return window.open(explorerContractUrl(asset.address), '_blank')
+      return navigateTo(explorerContractUrl(asset.address), {
+        external: true,
+        open: {
+          target: '_blank',
+        },
+      })
     }
 
     navigateTo(assetRoute(asset.address, asset.tokenId))
diff --git a/pages/index.vue b/pages/index.vue
index 10939760..aae5da61 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,7 +8,7 @@ const { isTestnet } = storeToRefs(useAppStore())
 
 <template>
   <AppPageLoader>
-    <div class="mx-auto flex max-w-[1200px] flex-col items-center lg:px-4">
+    <div class="mx-auto flex max-w-[1200px] flex-col items-center">
       <AppTestnetWarning v-if="isTestnet" class="-mb-6" />
       <h1 class="flex flex-col justify-center pt-16 text-center">
         <div class="heading-apax-48-regular">
diff --git a/yarn.lock b/yarn.lock
index 29e69893..76464797 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4723,9 +4723,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lukso/web-components@npm:1.94.1":
-  version: 1.94.1
-  resolution: "@lukso/web-components@npm:1.94.1"
+"@lukso/web-components@npm:1.94.2":
+  version: 1.94.2
+  resolution: "@lukso/web-components@npm:1.94.2"
   dependencies:
     clsx: "npm:^2.0.0"
     ethereum-blockies-base64: "npm:^1.0.2"
@@ -4733,7 +4733,7 @@ __metadata:
     tailwind-variants: "npm:^0.2.1"
     tippy.js: "npm:^6.3.7"
     web3-utils: "npm:^4.3.1"
-  checksum: 137b1e2a87f884f6669fa9012cab91d3abedee3d3cd6254fcdf280b767b0d453a77ac01550781fb3a32bccccfa5e3e46737714271ef91e95db16f3605b734205
+  checksum: 2404024a5e29b0ef80d102c048c119ea03bf5641574b6ddc35c590154f6157c4824c8edbf05ffbfeb8755a93e2d8b7e6f30dc000104c80659787a34212a00230
   languageName: node
   linkType: hard
 
@@ -24238,7 +24238,7 @@ __metadata:
     "@formatjs/intl": "npm:^2.9.9"
     "@google/model-viewer": "npm:^3.4.0"
     "@lukso/lsp-smart-contracts": "npm:0.15.0-rc.5"
-    "@lukso/web-components": "npm:1.94.1"
+    "@lukso/web-components": "npm:1.94.2"
     "@nuxt/test-utils": "npm:^3.13.1"
     "@nuxtjs/algolia": "npm:^1.10.2"
     "@nuxtjs/device": "npm:^3.1.1"