Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: settings link for non logged users #512

Merged
merged 7 commits into from
Oct 28, 2024
Merged

feat: settings link for non logged users #512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e0def6a
Add settings to navbar when not logged in
dzbo Oct 28, 2024
eb0e48b
Comments
dzbo Oct 28, 2024
2c9d913
Fix dApp section responsiveness
dzbo Oct 28, 2024
cfa756e
Refactor window.open into navigateTo
dzbo Oct 28, 2024
ee96184
Upgrade web components
dzbo Oct 28, 2024
8b85276
Fix tests
dzbo Oct 28, 2024
f2f0576
Biome fix
dzbo Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 64 additions & 1 deletion components/AppNavbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ const handleMobileSearch = () => {
const handleNavigateSettings = () => {
navigateTo(settingsRoute())
}

const handleNavigateMyUpDashboard = () => {
navigateTo(myUpDappDashboardUrl(), { external: true })
}
</script>

<template>
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -109,6 +137,8 @@ const handleNavigateSettings = () => {
{{ $formatMessage('header_send') }}
</span>
</lukso-button>

<!-- Profile -->
<lukso-button
v-if="isConnected"
variant="text"
Expand All @@ -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"
Expand All @@ -137,6 +194,8 @@ const handleNavigateSettings = () => {
{{ $formatMessage('header_settings') }}
</span>
</lukso-button>

<!-- Disconnect -->
<lukso-button
v-if="isConnected"
variant="text"
Expand All @@ -148,6 +207,8 @@ const handleNavigateSettings = () => {
{{ $formatMessage('header_disconnect') }}
</span>
</lukso-button>

<!-- Connect -->
<lukso-button
v-else
variant="text"
Expand All @@ -161,6 +222,8 @@ const handleNavigateSettings = () => {
</lukso-button>
</div>
</div>

<!-- Mobile Icons -->
<div slot="mobile-icons" class="flex">
<lukso-icon
name="search"
Expand Down
105 changes: 103 additions & 2 deletions components/AppNavbarLanding.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()

Expand All @@ -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>
Expand All @@ -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
Expand All @@ -41,6 +60,8 @@ const handleDisconnect = async () => {
color="purple-51"
></lukso-icon>
</lukso-button>

<!-- Support -->
<lukso-button
variant="text"
is-link
Expand All @@ -53,6 +74,8 @@ const handleDisconnect = async () => {
{{ $formatMessage('footer_need_help_text') }}
</span>
</lukso-button>

<!-- Create Profile -->
<lukso-button
variant="secondary"
is-link
Expand All @@ -70,7 +93,11 @@ const handleDisconnect = async () => {
}}
</span>
</lukso-button>

<!-- Profile dropdown -->
<AppNavbarProfileDropdown v-if="isConnected" />

<!-- Connect -->
<lukso-button
v-else
variant="landing"
Expand All @@ -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"
Expand All @@ -109,6 +152,8 @@ const handleDisconnect = async () => {
color="purple-41"
></lukso-icon>
</lukso-button>

<!-- Support -->
<lukso-button
variant="text"
is-link
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -164,6 +263,8 @@ const handleDisconnect = async () => {
{{ $formatMessage('header_disconnect') }}
</span>
</lukso-button>

<!-- Connect -->
<lukso-button
v-else
variant="text"
Expand Down
9 changes: 8 additions & 1 deletion components/AppNavbarProfileDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const handleOutsideDropdown = (event: Event) => {
}

const handleNavigateMyUpDashboard = () => {
window.open(myUpDappDashboardUrl(), '_self')
navigateTo(myUpDappDashboardUrl(), { external: true })
}

const handleNavigateSettings = () => {
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
7 changes: 6 additions & 1 deletion components/AppNotFound.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
9 changes: 8 additions & 1 deletion components/AssetAssetsDocument.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Loading
Loading