feat: settings link for non logged users (#512)

lukso-network · Oct 28, 2024 · ab76915 · ab76915
1 parent 785ff77
commit ab76915
Show file tree

Hide file tree

Showing 28 changed files with 334 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>