Skip to content

Commit 2a3f5e4

Browse files
xdeqxdeq
authored
Merge pull request #19 from celenium-io/dev
Dev
2 parents 30d1561 + 268e5be commit 2a3f5e4

Some content is hidden

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

51 files changed

+4464
-390
lines changed

‎.github/workflows/license.yml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ jobs:
1313
runs-on: ubuntu-latest
1414

1515
steps:
16-
- uses: actions/checkout@v2
17-
- run: yarn --frozen-lockfile --production
16+
- uses: actions/checkout@v3
17+
- name: Setup pnpm
18+
uses: pnpm/action-setup@v2
1819
- uses: daynin/[email protected]
1920
with:
2021
exclude-private-packages: true

‎app.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,21 @@ import CommandMenu from "@/components/cmd/CommandMenu.vue"
1010
1111
/** Store */
1212
import { useAppStore } from "@/store/app"
13+
import { useBookmarksStore } from "@/store/bookmarks"
1314
const appStore = useAppStore()
15+
const bookmarksStore = useBookmarksStore()
16+
bookmarksStore.$subscribe((mutation, state) => {
17+
localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
18+
})
1419
1520
onMounted(async () => {
1621
const runtimeConfig = useRuntimeConfig()
1722
amp.init(runtimeConfig.public.AMP)
1823
24+
if (localStorage.bookmarks) {
25+
bookmarksStore.bookmarks = JSON.parse(localStorage.bookmarks)
26+
}
27+
1928
Socket.init()
2029
2130
const data = await fetchHead()

‎assets/icons.json

Lines changed: 12 additions & 2 deletions
Large diffs are not rendered by default.

‎assets/styles/base.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ $grayscale: (
3232

3333
/* General */
3434
--brand: #924dff;
35-
--blue: #0b84fe;
35+
--blue: #076acd;
3636
--red: #eb5757;
3737
--orange: #ff5a17;
3838
--light-orange: #ff8351;
@@ -50,6 +50,9 @@ $grayscale: (
5050
--btn-white-bg: rgba(255, 255, 255, 90%);
5151
--btn-white-bg-hover: rgba(255, 255, 255, 75%);
5252
--btn-white-bg-active: rgba(255, 255, 255, 90%);
53+
--btn-red-bg: rgba(235, 87, 87, 100%);
54+
--btn-red-bg-hover: rgba(235, 87, 87, 75%);
55+
--btn-red-bg-active: rgba(235, 87, 87, 90%);
5356
--btn-secondary-bg: rgba(255, 255, 255, 8%);
5457
--btn-secondary-bg-hover: rgba(255, 255, 255, 10%);
5558
--btn-secondary-bg-active: rgba(255, 255, 255, 7%);

‎components/Feed.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,39 @@
11
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
25
/** Services */
36
import { comma, formatBytes, abbreviate } from "@/services/utils"
47
58
/** UI */
69
import Tooltip from "@/components/ui/Tooltip.vue"
710
11+
/** API */
12+
import { fetchPrice, fetchPriceSeries } from "@/services/api/stats"
13+
814
/** Store */
915
import { useAppStore } from "@/store/app"
1016
const appStore = useAppStore()
1117
1218
const head = computed(() => appStore.head)
19+
20+
const series = ref([])
21+
const price = reactive({
22+
value: 0,
23+
diff: 0,
24+
side: null,
25+
})
26+
27+
onMounted(async () => {
28+
const dataPrice = await fetchPrice()
29+
const dataSeries = await fetchPriceSeries()
30+
price.value = parseFloat(dataPrice.close)
31+
series.value = dataSeries
32+
33+
const prevDayClosePrice = parseFloat(series.value[1].close)
34+
price.diff = (Math.abs(prevDayClosePrice - price.value) / ((prevDayClosePrice + price.value) / 2)) * 100
35+
price.side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
36+
})
1337
</script>
1438

1539
<template>
@@ -86,6 +110,46 @@ const head = computed(() => appStore.head)
86110
<template #content> {{ comma(head.total_fee) }} UTIA </template>
87111
</Tooltip>
88112
</Flex>
113+
114+
<Tooltip position="end">
115+
<Flex align="center" gap="6" :class="$style.stat">
116+
<Icon name="coin" size="12" color="secondary" :class="$style.icon" />
117+
118+
<Flex align="center" gap="4">
119+
<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">TIA:</Text>
120+
121+
<Text v-if="price.value" size="12" weight="600" noWrap :class="$style.value"> ${{ price.value.toFixed(2) }} </Text>
122+
<Skeleton v-else w="36" h="12" />
123+
</Flex>
124+
125+
<Flex v-if="price.diff" align="center" gap="4">
126+
<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
127+
<Icon v-else name="arrow-circle-right-down" size="12" color="red" />
128+
129+
<Text size="12" weight="600" :color="price.side === 'rise' ? 'neutral-green' : 'red'" noWrap>
130+
{{ price.diff.toFixed(2) }}%</Text
131+
>
132+
</Flex>
133+
<Skeleton v-else w="50" h="12" />
134+
</Flex>
135+
136+
<template #content>
137+
<Flex direction="column" gap="6">
138+
<Flex align="center" gap="4">
139+
<Text color="primary">Price diff from the previous day</Text>
140+
</Flex>
141+
142+
<Flex align="center" gap="4">
143+
<Text color="tertiary">{{ DateTime.fromISO(series[1].time).setLocale("en").toFormat("ff") }} -></Text>
144+
<Text color="primary">${{ parseFloat(series[1].close).toFixed(2) }}</Text>
145+
</Flex>
146+
147+
<Flex align="center" gap="4">
148+
<Text size="11" color="tertiary">Binance quotes</Text>
149+
</Flex>
150+
</Flex>
151+
</template>
152+
</Tooltip>
89153
</Flex>
90154
</Flex>
91155
</template>

‎components/Flex.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup>
2+
/** Vendor */
23
import { ref, computed } from "vue"
34
45
const wrapper = ref(null)

‎components/TheFooter.vue

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -64,31 +64,39 @@ const handleChangeTheme = (theme) => {
6464
<Flex align="center" gap="8">
6565
<Icon name="logo" size="14" color="tertiary" />
6666
<Text size="13" weight="500" color="secondary">Celenium</Text>
67-
<Text size="13" weight="500" color="tertiary">- Celestia Explorer, {{ new Date().getFullYear() }}</Text>
68-
</Flex>
69-
70-
<Flex align="center" gap="16">
67+
<Text size="13" weight="500" color="tertiary">-</Text>
68+
<Text size="13" weight="500" color="tertiary">Celestia Explorer</Text>
7169
<a :href="`https://github.com/celenium-io/celenium-interface/releases/tag/v${appConfig.version}`" target="_blank">
7270
<Flex>
73-
<Text size="12" weight="600" color="support">
74-
Version <Text color="tertiary">{{ appConfig.version }}</Text>
75-
</Text>
71+
<Text size="13" weight="500" color="support">v</Text>
72+
<Text size="13" weight="500" color="tertiary">{{ appConfig.version }}</Text>
7673
</Flex>
7774
</a>
7875
</Flex>
7976

80-
<NuxtLink to="https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5">
81-
<Flex align="center" gap="8">
82-
<Text size="12" weight="500" color="support">Donations: </Text>
83-
<Text size="12" weight="500" color="tertiary">celestia</Text>
84-
<Flex align="center" gap="3">
85-
<div v-for="dot in 3" class="dot" />
77+
<Flex align="center" gap="8">
78+
<NuxtLink to="https://www.pklab.io/terms" :class="$style.link">
79+
<Text size="12" weight="500" color="tertiary">Terms of Use</Text>
80+
</NuxtLink>
81+
<NuxtLink to="https://www.pklab.io/privacy" :class="$style.link">
82+
<Text size="12" weight="500" color="tertiary">Privacy Policy</Text>
83+
</NuxtLink>
84+
</Flex>
85+
86+
<Flex align="center" gap="8">
87+
<Text size="12" weight="500" color="support">Donations:</Text>
88+
<a :href="`https://celenium.io/address/celestia15ans77hr2uxefyn6fa2lcsvpngwevuaugth7f5`" target="_blank">
89+
<Flex>
90+
<Text size="12" weight="500" color="tertiary">TIA</Text>
8691
</Flex>
87-
<Text size="12" weight="500" color="tertiary">wevu augt h7f5</Text>
88-
</Flex>
89-
</NuxtLink>
92+
</a>
93+
<a :href="`https://etherscan.io/address/0x9FfB1cb28c55735e77B352eE918b4F0c3595a761`" target="_blank">
94+
<Flex>
95+
<Text size="12" weight="500" color="tertiary">ETH</Text>
96+
</Flex>
97+
</a>
98+
</Flex>
9099
</Flex>
91-
92100
<Flex direction="column" align="end" gap="16">
93101
<Flex align="center" gap="16">
94102
<Dropdown side="top">

‎components/TheHeader.vue

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,22 @@ const showPopup = ref(false)
2525
2626
const head = computed(() => appStore.head)
2727
28+
const featurePreviewMode = ref(false)
29+
const isWalletAvailable = ref(false)
30+
31+
const account = ref("")
32+
33+
const getAccounts = async () => {
34+
const offlineSigner = window.getOfflineSigner("celestia")
35+
const accounts = await offlineSigner.getAccounts()
36+
if (accounts.length) account.value = accounts[0].address
37+
}
38+
39+
onMounted(async () => {
40+
featurePreviewMode.value = localStorage.featurePreview
41+
isWalletAvailable.value = !!window.keplr
42+
})
43+
2844
watch(
2945
() => showPopup.value,
3046
() => {
@@ -64,6 +80,12 @@ const isActive = (link) => {
6480
const handleNavigate = (url) => {
6581
window.location.replace(url)
6682
}
83+
84+
const handleConnect = async () => {
85+
await window.keplr.enable("celestia")
86+
87+
getAccounts()
88+
}
6789
</script>
6890

6991
<template>
@@ -105,7 +127,7 @@ const handleNavigate = (url) => {
105127
</NuxtLink>
106128
</Flex>
107129

108-
<Flex align="center" gap="12">
130+
<Flex align="center" gap="8">
109131
<Dropdown>
110132
<Tooltip v-if="head" position="end">
111133
<Flex align="center" gap="8" :class="[$style.network]">
@@ -117,7 +139,6 @@ const handleNavigate = (url) => {
117139
<Text color="primary"><template v-if="!head.synced">Not</template> Synced </Text>
118140
</template>
119141
</Tooltip>
120-
<Skeleton v-else w="68" h="12" />
121142

122143
<template #popup>
123144
<DropdownTitle>Network</DropdownTitle>
@@ -142,6 +163,16 @@ const handleNavigate = (url) => {
142163
</Flex>
143164
</template>
144165
</Tooltip>
166+
167+
<Button
168+
v-if="featurePreviewMode"
169+
@click="handleConnect"
170+
type="white"
171+
size="small"
172+
:disabled="!isWalletAvailable || account.length"
173+
>
174+
{{ account ? `celestia...${account.slice(-6)}` : "Connect" }}
175+
</Button>
145176
</Flex>
146177
</Flex>
147178

@@ -297,8 +328,8 @@ const handleNavigate = (url) => {
297328
height: 28px;
298329
299330
border-radius: 8px;
300-
background: linear-gradient(var(--op-10), var(--op-3));
301-
box-shadow: inset 0 0 0 1px var(--op-10), 0 2px 8px rgba(0, 0, 0, 8%);
331+
background: var(--op-5);
332+
box-shadow: inset 0 0 0 1px var(--op-5);
302333
303334
padding: 0 12px;
304335

0 commit comments

Comments
 (0)