Skip to content

Commit e74dc3b

Browse files
marcel-bitflymarcel-bitfly
committed
--wip-- [skip ci]
1 parent 818918d commit e74dc3b

File tree

160 files changed

+10564
-6745
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

160 files changed

+10564
-6745
lines changed

‎frontend/app.vue‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,17 @@ useHead(
77
htmlAttrs: { lang: locale.value },
88
},
99
)
10-
useWindowSizeProvider()
1110
useBcToastProvider()
12-
13-
const { latestState } = storeToRefs(useLatestStateStore())
14-
const exchangeRates = computed(() => latestState.value?.exchange_rates ?? [])
15-
const exchangeRateLengthOnTestNetworks = 1
16-
if (exchangeRates.value.length === exchangeRateLengthOnTestNetworks) {
17-
const { selectedCurrencyMain } = useCurrency()
18-
selectedCurrencyMain.value = exchangeRates.value[0].code as CurrencyCode
19-
}
2011
</script>
2112

2213
<template>
23-
<div class="min-h-full">
24-
<BcDataWrapper>
25-
<NuxtLoadingIndicator color="var(--primary-color)" />
26-
<NuxtPage />
27-
<DynamicDialog />
28-
<Toast />
29-
</BcDataWrapper>
30-
</div>
14+
<NuxtLoadingIndicator color="var(--primary-color)" />
15+
<NuxtLayout>
16+
<NuxtPage />
17+
</NuxtLayout>
18+
<DynamicDialog />
19+
<Toast />
20+
<BcCookieModal />
3121
</template>
3222

3323
<style lang="scss"></style>

‎frontend/components/BcError.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
description: TranslationKey,
4+
// statusCode: number,
5+
title: TranslationKey,
6+
}>()
7+
const error = useError()
8+
</script>
9+
10+
<template>
11+
<div class="bc-error">
12+
<h1>{{ $t(title) }} ({{ error?.statusCode }})</h1>
13+
<p>{{ $t(description) }}</p>
14+
<slot />
15+
</div>
16+
</template>
17+
18+
<style scoped>
19+
.bc-error {
20+
display: flex;
21+
gap: 1rem;
22+
flex-direction: column;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+
</style>

‎frontend/components/BcLayout.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts"></script>
2+
3+
<template>
4+
<div class="page">
5+
<header>
6+
<slot name="header" />
7+
</header>
8+
<slot name="banner" />
9+
<main class="content">
10+
<slot />
11+
</main>
12+
<footer>
13+
<TheFooter />
14+
</footer>
15+
</div>
16+
</template>
17+
18+
<style lang="scss" scoped>
19+
.page {
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: space-between;
23+
height: 100vh;
24+
}
25+
26+
.content {
27+
max-width: var(--content-width);
28+
margin: var(--padding) auto
29+
}
30+
</style>

frontend/components/bc/header/MainHeader.vue renamed to frontend/components/BcNavigation.vue

Lines changed: 42 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
<script setup lang="ts">
2-
import type { BcHeaderMegaMenu } from '#build/components'
3-
import { useLatestStateStore } from '~/stores/useLatestStateStore'
2+
import type { BcNavigationMenu } from '#build/components'
43
import {
54
mobileHeaderThreshold, smallHeaderThreshold,
65
} from '~/types/header'
76
8-
defineProps<{
9-
isHomePage: boolean,
10-
minimalist: boolean,
11-
}>()
12-
const latestStateStore = useLatestStateStore()
13-
const { latestState } = storeToRefs(latestStateStore)
147
const {
158
getEpochFromSlot,
169
networkInfo,
10+
secondsPerSlot,
1711
} = useNetwork()
12+
13+
const { counter } = useInterval(secondsPerSlot)
14+
15+
// Todo: decide if this is an antipattern or we should rather use watcher with callOnce
16+
useApi('/api/latest-state', {
17+
immediate: true,
18+
watch: [ counter ],
19+
})
1820
const {
19-
doLogout,
20-
isLoggedIn,
21-
} = useUserStore()
21+
data: userData,
22+
} = await useApi('/api/users/me', {
23+
key: 'user',
24+
})
25+
26+
const {
27+
logout,
28+
} = useUser()
29+
2230
const {
2331
displayCurrencyDefault,
2432
exchangeRates,
@@ -32,12 +40,13 @@ const { promoCode } = usePromoCode()
3240
const isSmallScreen = computed(() => width.value < smallHeaderThreshold)
3341
const isMobileScreen = computed(() => width.value < mobileHeaderThreshold)
3442
35-
const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
43+
const config = useRuntimeConfig()
44+
const showInDevelopment = Boolean(config.public.showInDevelopment)
3645
const hideInDevelopmentClass = showInDevelopment
3746
? ''
3847
: 'hide-because-it-is-unfinished' // TODO: once the searchbar is enabled in production, delete this line
3948
40-
const megaMenu = ref<null | typeof BcHeaderMegaMenu>(null)
49+
const megaMenu = ref<null | typeof BcNavigationMenu>(null)
4150
4251
const hasExchangeRates = computed(() => exchangeRates.value.length > 1)
4352
@@ -55,11 +64,8 @@ const currentRate = computed(() => {
5564
})
5665
})
5766
58-
const currentEpoch = computed(() =>
59-
latestState.value?.current_slot !== undefined
60-
? getEpochFromSlot(latestState.value.current_slot)
61-
: undefined,
62-
)
67+
const currentSlot = useCurrentSlot()
68+
const currentEpoch = computed(() => getEpochFromSlot(currentSlot.value))
6369
6470
const toggleMegaMenu = (evt: Event) => {
6571
megaMenu.value?.toggleMegaMenu(evt)
@@ -70,55 +76,45 @@ const isMobileMegaMenuOpen = computed(() => megaMenu.value?.isMobileMenuOpen)
7076
type UserMenuItem = { command: () => Promise<void>, label: string }
7177
const userMenu: UserMenuItem[] = [
7278
{
73-
command: async () => { await navigateTo('/user/settings') },
79+
command: async () => { await navigateTo(`${v1Domain}/user/settings`, { external: true }) },
7480
label: $t('header.settings'),
7581
},
7682
{
77-
command: () => doLogout(),
83+
command: () => logout(),
7884
label: $t('header.logout'),
7985
},
8086
]
8187
const handleUserMenuSelect = async (value: UserMenuItem) => {
8288
await value.command?.()
8389
}
90+
const v1Domain = useV1Domain()
8491
</script>
8592

8693
<template>
8794
<div
88-
v-if="minimalist"
89-
class="minimalist"
90-
>
91-
<div class="top-background" />
92-
<div class="rows">
93-
<BcHeaderLogo layout-adaptability="low" />
94-
</div>
95-
</div>
96-
97-
<div
98-
v-else
9995
class="complete"
10096
:class="hideInDevelopmentClass"
10197
>
10298
<div class="top-background" />
10399
<div class="rows">
104100
<div class="grid-cell blockchain-info">
105-
<span v-if="latestState?.current_slot"><span>{{ $t("header.slot") }}</span>:
101+
<span v-if="currentSlot"><span>{{ $t("header.slot") }}</span>:
106102
<BcLink
107-
:to="`/slot/${latestState.current_slot}`"
103+
:to="`${v1Domain}/slot/${currentSlot}`"
108104
:disabled="!showInDevelopment || null"
109105
>
110-
<BcFormatNumber
106+
<BaseFormatNumber
111107
class="bold"
112-
:value="latestState.current_slot"
108+
:value="currentSlot"
113109
/>
114110
</BcLink>
115111
</span>
116-
<span v-if="currentEpoch !== undefined"><span>{{ $t("header.epoch") }}</span>:
112+
<span v-if="currentEpoch"><span>{{ $t("header.epoch") }}</span>:
117113
<BcLink
118-
:to="`/epoch/${currentEpoch}`"
114+
:to="`${v1Domain}/epoch/${currentEpoch}`"
119115
:disabled="!showInDevelopment || null"
120116
>
121-
<BcFormatNumber
117+
<BaseFormatNumber
122118
class="bold"
123119
:value="currentEpoch"
124120
/>
@@ -148,7 +144,7 @@ const handleUserMenuSelect = async (value: UserMenuItem) => {
148144
:show-currency-icon="!isMobileScreen"
149145
/>
150146
<div
151-
v-if="!isLoggedIn"
147+
v-if="!userData"
152148
class="logged-out"
153149
>
154150
<BcLink
@@ -191,15 +187,15 @@ const handleUserMenuSelect = async (value: UserMenuItem) => {
191187
</div>
192188

193189
<div class="grid-cell explorer-info">
194-
<BcHeaderLogo layout-adaptability="high" />
190+
<BcNavigationLogo layout-adaptability="high" />
195191
<span class="variant">
196192
<span class="mobile">{{ networkInfo.shortName }}</span>
197193
<span class="large-screen">{{ networkInfo.name }}</span>
198194
</span>
199195
</div>
200196

201197
<div class="grid-cell mega-menu">
202-
<BcHeaderMegaMenu ref="megaMenu" />
198+
<BcNavigationMenu ref="megaMenu" />
203199
<div
204200
v-if="isMobileMegaMenuOpen"
205201
class="decoration"
@@ -216,7 +212,11 @@ const handleUserMenuSelect = async (value: UserMenuItem) => {
216212
$mobileHeaderThreshold: 600px;
217213
$smallHeaderThreshold: 1024px;
218214
219-
@mixin common {
215+
.complete {
216+
top: -1px; // needed for some reason to perfectly match Figma
217+
border-bottom: 1px solid var(--container-border-color);
218+
background-color: var(--container-background);
219+
220220
position: relative;
221221
display: flex;
222222
width: 100%;
@@ -230,23 +230,7 @@ $smallHeaderThreshold: 1024px;
230230
.rows {
231231
width: var(--content-width);
232232
}
233-
}
234-
235-
.minimalist {
236-
color: var(--header-top-font-color);
237-
@include common();
238-
@media (max-width: $mobileHeaderThreshold) {
239-
.top-background {
240-
height: 36px;
241-
}
242-
}
243-
}
244233
245-
.complete {
246-
top: -1px; // needed for some reason to perfectly match Figma
247-
border-bottom: 1px solid var(--container-border-color);
248-
background-color: var(--container-background);
249-
@include common();
250234
&.hide-because-it-is-unfinished {
251235
// TODO: once the searchbar is enabled in production, delete this block (because border-bottom is always needed, due to the fact that the lower header is always visible (it contains the search bar when the screeen is narrow, otherwise the logo and mega menu))
252236
@media (max-width: $smallHeaderThreshold) {

‎frontend/components/BcNavigationCompact.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script setup lang="ts">
2+
</script>
3+
4+
<template>
5+
<div
6+
class="minimalist"
7+
>
8+
<div class="top-background" />
9+
<div class="rows">
10+
<BcNavigationLogo layout-adaptability="low" />
11+
</div>
12+
</div>
13+
</template>
14+
15+
<style scoped lang="scss">
16+
$mobileHeaderThreshold: 600px;
17+
18+
.minimalist {
19+
color: var(--header-top-font-color);
20+
position: relative;
21+
display: flex;
22+
width: 100%;
23+
justify-content: center;
24+
.top-background {
25+
position: absolute;
26+
width: 100%;
27+
height: var(--navbar-height);
28+
background-color: var(--dark-blue);
29+
}
30+
.rows {
31+
width: var(--content-width);
32+
}
33+
@media (max-width: $mobileHeaderThreshold) {
34+
.top-background {
35+
height: 36px;
36+
}
37+
}
38+
}
39+
</style>

frontend/components/bc/header/HeaderLogo.vue renamed to frontend/components/BcNavigationLogo.vue

File renamed without changes.

frontend/components/bc/header/BcHeaderMegaMenu.vue renamed to frontend/components/BcNavigationMenu.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const items = computed(() => {
6262
if (isLoggedIn.value) {
6363
list.push({
6464
command: async () => {
65-
await navigateTo('../user/settings')
65+
await navigateTo(`${v1Domain}/user/settings`, { external: true })
6666
},
6767
label: $t('header.settings'),
6868
})

0 commit comments

Comments
 (0)