Skip to content

Commit 7f8ea86

Browse files
GusevPMGusevPM
authored
Merge pull request #90 from celenium-io/advertising
Advertising
2 parents 0b6b983 + 140c5c4 commit 7f8ea86

10 files changed

Lines changed: 251 additions & 20 deletions

File tree

‎components/ActionBar.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import Button from "@/components/ui/Button.vue"
77
/** Components */
88
import Search from "@/components/modules/navigation/Search.vue"
99
10+
/** Utils */
11+
import { isMobile } from "@/services/utils"
12+
1013
/** Store */
1114
import { useAppStore } from "@/store/app"
1215
const appStore = useAppStore()
@@ -15,7 +18,7 @@ const appStore = useAppStore()
1518
<template>
1619
<Flex wide align="center" justify="between" gap="24" :class="$style.wrapper">
1720
<Flex wide align="center" gap="12">
18-
<Button @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
21+
<Button v-if="isMobile()" @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
1922
<Icon name="menu" size="16" color="primary" />
2023
</Button>
2124

‎components/LeftSidebar.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import Button from "@/components/ui/Button.vue"
44
import { Dropdown, DropdownItem, DropdownTitle, DropdownDivider } from "@/components/ui/Dropdown"
55
66
/** Components */
7+
import AdvBanner from "@/components/shared/AdvBanner.vue"
78
import NavLink from "@/components/modules/navigation/NavLink.vue"
89
910
/** Utils */
1011
import { getNetworkName } from "@/services/utils/general"
1112
import { StatusMap } from "@/services/constants/node"
13+
import { isMobile } from "@/services/utils"
1214
1315
/** Store */
1416
import { useAppStore } from "~/store/app"
@@ -174,7 +176,7 @@ const handleNavigate = (url) => {
174176
</Flex>
175177
</NuxtLink>
176178

177-
<Button @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="mini" :class="$style.close_btn">
179+
<Button v-if="isMobile()" @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="mini" :class="$style.close_btn">
178180
<Icon name="close" size="14" color="primary" />
179181
</Button>
180182
</Flex>
@@ -215,7 +217,7 @@ const handleNavigate = (url) => {
215217
</Flex>
216218
</Flex>
217219

218-
<Flex direction="column" gap="8">
220+
<!-- <Flex direction="column" gap="8">
219221
<Flex align="center" gap="8" style="padding: 0 8px">
220222
<Icon name="stars" size="12" color="tertiary" />
221223
<Text size="12" weight="500" color="tertiary">New things</Text>
@@ -224,7 +226,9 @@ const handleNavigate = (url) => {
224226
<Flex direction="column" gap="2">
225227
<NavLink v-for="link in newLinks" :link="link" @onClose="appStore.showSidebar = false" />
226228
</Flex>
227-
</Flex>
229+
</Flex> -->
230+
231+
<AdvBanner :style="{ width: '100%' }" />
228232
</Flex>
229233

230234
<Flex direction="column" gap="16" style="margin-right: 20px">
@@ -247,15 +251,6 @@ const handleNavigate = (url) => {
247251
<Text v-else size="12" weight="600" color="tertiary">{{ nodeStore.percentage.toFixed(0) }}%</Text>
248252
</Flex>
249253

250-
<!-- <Flex justify="end" :class="$style.ad">
251-
<Flex justify="end" direction="column" gap="8">
252-
<Text size="12" weight="500" color="brand">Introducing Celenium API</Text>
253-
<Text size="12" weight="500" height="140" color="secondary">
254-
Unlock the power of Celestia: Scalable, Secure and Modular.
255-
</Text>
256-
</Flex>
257-
</Flex> -->
258-
259254
<Dropdown position="end" fullWidth>
260255
<Flex align="center" gap="8" justify="between" :class="$style.network_selector">
261256
<Flex align="center" gap="8">

‎components/modals/SendModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ const handleContinue = async () => {
322322
{
323323
denom: "utia",
324324
amount: DecUtils.getTenExponentN(6)
325-
.mul(new Dec(parseFloat(amount.value)))
325+
.mul(new Dec(parseFloat(amount.value.replace(/\s/g, ''))))
326326
.truncate()
327327
.toString(),
328328
},

‎components/modules/namespace/NamespaceOverview.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import BlobsTable from "./tables/BlobsTable.vue"
1111
import MessagesTable from "./tables/MessagesTable.vue"
1212
1313
/** Services */
14-
import { comma, formatBytes, getNamespaceID, midHex, space } from "@/services/utils"
14+
import { comma, formatBytes, getNamespaceID, shortHex, midHex, space } from "@/services/utils"
1515
1616
/** API */
1717
import { fetchNamespaceBlobs, fetchNamespaceMessagesById, fetchNamespaceRollups } from "@/services/api/namespace"
@@ -231,7 +231,7 @@ const handleViewRawMessages = () => {
231231
<Text size="12" weight="600" color="secondary">Base64 ID</Text>
232232
233233
<Flex align="center" gap="10">
234-
<Text size="13" weight="600" color="primary">{{ midHex(namespace.hash) }} </Text>
234+
<Text size="13" weight="600" color="primary">{{ shortHex(namespace.hash) }} </Text>
235235
236236
<CopyButton :text="namespace.hash" />
237237
</Flex>

‎components/modules/rollup/RollupOverview.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const getBlobs = async () => {
7777
id: props.rollup.id,
7878
offset: (page.value - 1) * 10,
7979
limit: 10,
80+
sort_by: 'time',
8081
})
8182
8283
if (data.value?.length) {

‎components/modules/stats/RollupsBubbleChart.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -258,9 +258,6 @@ const buildChart = (chart, data) => {
258258
.attr("y", d => {
259259
let cy = y(d.fee)
260260
if (cy > height - 30) {
261-
console.log('cy', cy);
262-
console.log('height', height);
263-
264261
return height - 30 - z(d.size) - 1
265262
}
266263

‎components/shared/AdvBanner.vue‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<script setup>
2+
/** Services */
3+
import { getAdvByName, getRandomAdv } from "@/services/constants/advertising"
4+
5+
/** Store */
6+
import { useModalsStore } from "~/store/modals"
7+
const modalsStore = useModalsStore()
8+
9+
const props = defineProps({
10+
advName: {
11+
type: String,
12+
required: false,
13+
},
14+
orientation: {
15+
type: String,
16+
default: 'vertical',
17+
},
18+
})
19+
20+
const adv = ref({})
21+
const isDisplayed = ref(true)
22+
23+
const handleClick = () => {
24+
if (adv.value.link) {
25+
window.open(adv.value.link, '_blank')
26+
} else if (adv.value.modal) {
27+
modalsStore.open(adv.value.modal)
28+
}
29+
}
30+
31+
onMounted(() => {
32+
if (props.advName) {
33+
adv.value = getAdvByName(props.advName)
34+
} else {
35+
adv.value = getRandomAdv()
36+
}
37+
})
38+
</script>
39+
40+
<template>
41+
<Flex v-if="adv.name" @click="handleClick()" :class="[$style.wrapper, orientation === 'horizontal' && $style.wrapper_horizontal, !isDisplayed && $style.not_display]">
42+
<Flex v-if="orientation === 'vertical'" direction="column" gap="12" :class="$style.ad_vertical">
43+
<Flex direction="column" gap="8">
44+
<Flex align="center" gap="6">
45+
<Icon v-if="adv.icon" :name="adv.icon" size="14" color="brand" />
46+
<Text size="13" weight="600" color="primary"> {{ adv.header }} </Text>
47+
</Flex>
48+
49+
<Text size="13" weight="600" color="tertiary" height="140"> {{ adv.body }} </Text>
50+
</Flex>
51+
52+
<Flex align="center" justify="between">
53+
<Text size="13" weight="600" color="brand" :class="$style.footer"> {{ adv.footer }} </Text>
54+
55+
<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
56+
</Flex>
57+
</Flex>
58+
<Flex
59+
v-else-if="orientation === 'horizontal'"
60+
align="center"
61+
justify="between"
62+
gap="12"
63+
wide
64+
:class="$style.ad_horizontal"
65+
>
66+
<Flex align="center" gap="12">
67+
<Flex align="center" gap="6">
68+
<Icon v-if="adv.icon" :name="adv.icon" size="14" color="brand" />
69+
<Text size="13" weight="600" color="primary"> {{ adv.header }} </Text>
70+
</Flex>
71+
72+
<Text size="13" weight="600" color="tertiary" height="140"> {{ adv.body }} </Text>
73+
</Flex>
74+
75+
<Flex align="center" gap="8">
76+
<Text size="13" weight="600" color="brand"> {{ adv.footer }} </Text>
77+
78+
<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
79+
</Flex>
80+
</Flex>
81+
</Flex>
82+
</template>
83+
84+
<style module>
85+
.wrapper {
86+
width: 100%;
87+
88+
cursor: pointer;
89+
}
90+
91+
.wrapper_horizontal {
92+
width: 100%;
93+
padding: 8px 24px 0px 24px;
94+
}
95+
96+
.not_display {
97+
display: none;
98+
}
99+
100+
.ad_vertical {
101+
position: relative;
102+
103+
border-radius: 12px;
104+
box-shadow: inset 0 0 0 2px var(--op-10);
105+
106+
padding: 16px;
107+
108+
transition: all 0.2s ease;
109+
110+
&:hover {
111+
background: var(--op-3);
112+
113+
.close_icon {
114+
display: block;
115+
}
116+
}
117+
118+
& .footer {
119+
padding: 2px;
120+
}
121+
& .close_icon {
122+
display: none;
123+
padding: 2px;
124+
125+
border-radius: 12px;
126+
127+
transition: all 0.2s ease;
128+
129+
&:hover {
130+
background: var(--op-10);
131+
transform: scale(1.1);
132+
}
133+
}
134+
}
135+
136+
.ad_horizontal {
137+
position: relative;
138+
width: 100%;
139+
140+
border-radius: 12px;
141+
box-shadow: inset 0 0 0 2px var(--op-10);
142+
143+
padding: 8px 16px;
144+
145+
transition: all 0.2s ease;
146+
147+
&:hover {
148+
background: var(--op-3);
149+
150+
.close_icon {
151+
display: block;
152+
}
153+
}
154+
155+
& .close_icon {
156+
display: none;
157+
padding: 2px;
158+
159+
border-radius: 12px;
160+
161+
transition: all 0.2s ease;
162+
163+
&:hover {
164+
background: var(--op-10);
165+
transform: scale(1.1);
166+
}
167+
}
168+
}
169+
170+
@media (max-width: 500px) {
171+
.wrapper_horizontal {
172+
padding: 12px;
173+
}
174+
}
175+
</style>

‎layouts/default.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1+
<script setup>
2+
/** Components */
3+
import AdvBanner from "@/components/shared/AdvBanner.vue"
4+
5+
</script>
6+
17
<template>
28
<Flex direction="column">
39
<Flex justify="center" :class="$style.wrapper">
410
<LeftSidebar :class="$style.sidebar" />
511

612
<Flex direction="column" align="center" :class="$style.content">
713
<Feed />
14+
<AdvBanner orientation="horizontal" />
815
<ActionBar />
916

1017
<Flex direction="column" align="center" wide :class="$style.container">

‎services/constants/advertising.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const advertisements = [
2+
{
3+
name: 'celenium_api',
4+
modal: 'api',
5+
icon: 'slash',
6+
header: 'Try out Celenium API',
7+
body: 'The power of Celestia: Scalable, Secure and Modular Blockchain.',
8+
footer: 'Get started',
9+
weight: 0.2,
10+
},
11+
{
12+
name: 'celenium_survey',
13+
link: 'https://t.co/4nBFExP2VR',
14+
icon: 'validator',
15+
header: 'Celenium survey',
16+
body: 'Please take 5 minutes and answer a few questions.',
17+
footer: 'Take the survey',
18+
weight: 0.4,
19+
},
20+
{
21+
name: 'lumina',
22+
modal: 'lightNode',
23+
icon: 'lumina',
24+
header: 'Your Own Node',
25+
body: 'Launch a node directly in your browser or on your phone.',
26+
footer: 'Run Light Node',
27+
weight: 0.4,
28+
},
29+
]
30+
31+
export function getRandomAdv() {
32+
const randomNum = Math.random()
33+
34+
let cumWeight = 0
35+
for (let ad of advertisements) {
36+
cumWeight += ad.weight
37+
if (randomNum <= cumWeight) {
38+
return ad
39+
}
40+
}
41+
}
42+
43+
export function getAdvByName(name) {
44+
let adv = {}
45+
advertisements.forEach(el => {
46+
if (el.name === name) {
47+
adv = el
48+
}
49+
})
50+
51+
return adv
52+
}

‎services/constants/stats.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,8 @@ export const STATS_SERIES = [
109109
units: 'utia',
110110
},
111111
],
112-
},]
112+
},
113+
]
113114

114115
// TO DO: Replace forEach with for
115116
export function getSeriesByGroupAndType(group, type) {

0 commit comments

Comments
 (0)