Skip to content

Commit 601945a

Browse files
xdeqxdeq
authored
Merge pull request #56 from celenium-io/CLS-228-blobstream
CLS-228 Blobstream
2 parents 0eea38e + 3edc2ad commit 601945a

12 files changed

Lines changed: 888 additions & 8 deletions

File tree

‎assets/icons.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,5 +130,8 @@
130130
}
131131
],
132132
"rollup": "m10.558 22.234c-0.16 0.0187-0.3549-0.0895-0.74462-0.3059-1.6664-0.9253-4.695-2.6071-6.4762-3.5967l-0.06317-0.0348c-0.23113-0.1274-0.52173-0.2874-0.74489-0.5296-0.19295-0.2094-0.33897-0.4575-0.4283-0.7279-0.10332-0.3127-0.10211-0.6445-0.10115-0.9083l1.8e-4 -0.0722c0-1.963 0.00254-5.3023 0.0041-7.1685 3.8e-4 -0.44834 5.6e-4 -0.67251 0.09511-0.8034 0.08247-0.11418 0.20931-0.18829 0.34928-0.20408 0.16045-0.01809 0.35621 0.09203 0.74775 0.31227l7.396 4.1603c0.1485 0.0835 0.2227 0.1253 0.2767 0.1844 0.0478 0.0522 0.084 0.114 0.1061 0.1813 0.025 0.0761 0.025 0.1612 0.025 0.3316v8.1752c0 0.4472 0 0.6708-0.094 0.8016-0.0821 0.1141-0.2083 0.1884-0.3479 0.2047zm11.437-13.344c-4e-4 -0.44833-6e-4 -0.67249-0.0951-0.80338-0.0825-0.11419-0.2093-0.1883-0.3493-0.20408-0.1604-0.0181-0.3562 0.09202-0.7477 0.31226l-7.396 4.1603c-0.1485 0.0835-0.2227 0.1253-0.2767 0.1843-0.0478 0.0523-0.084 0.1141-0.1061 0.1814-0.025 0.076-0.025 0.1612-0.025 0.3315v8.1753c0 0.4472 0 0.6708 0.094 0.8016 0.0821 0.1141 0.2083 0.1884 0.3479 0.2047 0.16 0.0187 0.3549-0.0895 0.7446-0.3059 1.6663-0.9253 4.695-2.6071 6.4762-3.5967l0.0631-0.0348c0.2311-0.1273 0.5218-0.2874 0.7449-0.5296 0.193-0.2094 0.339-0.4575 0.4283-0.7279 0.1034-0.3127 0.1021-0.6445 0.1012-0.9083l-2e-4 -0.0722c0-1.963-0.0025-5.3023-0.0041-7.1685zm-6.6793 0.09647-8.9752-4.9862c-0.75973 0.42226-1.4682 0.81608-2.031 1.1289-0.40825 0.22692-0.61237 0.34039-0.68058 0.49034-0.05947 0.13073-0.05985 0.28072-0.00105 0.41175 0.06746 0.1503 0.27118 0.2649 0.67862 0.49408l7.3001 4.1064c0.143 0.0804 0.2146 0.1207 0.2904 0.1365 0.0671 0.0139 0.1364 0.0139 0.2035 0 0.0759-0.0158 0.1474-0.0561 0.2905-0.1365zm-2.9137-7.8015c-0.2658-0.05467-0.54-0.05467-0.8058 0-0.3073 0.06319-0.5819 0.21702-0.8003 0.33931l-0.0595 0.03325c-0.654 0.36336-1.4759 0.82007-2.3369 1.2986l8.9628 4.9794 2.3291-1.3101c0.4074-0.22919 0.6112-0.34378 0.6786-0.49408 0.0588-0.13103 0.0584-0.28102-1e-3 -0.41175-0.0682-0.14996-0.2724-0.26342-0.6806-0.49035-1.6814-0.9346-4.6637-2.5922-6.4266-3.5716l-0.0595-0.03325c-0.2184-0.12229-0.493-0.27612-0.8003-0.33931z",
133-
"rollup-plus": "m 9.81388,21.9281 c 0.38972,0.2164 0.58462,0.3246 0.74462,0.3059 0.1396,-0.0163 0.2658,-0.0906 0.3479,-0.2047 0.094,-0.1308 0.094,-0.3544 0.094,-0.8016 v -8.1752 c 0,-0.1704 0,-0.2555 -0.025,-0.3316 -0.0221,-0.0673 -0.0583,-0.1291 -0.1061,-0.1813 -0.054,-0.0591 -0.1282,-0.1009 -0.2767,-0.1844 L 3.19661,8.19493 C 2.80507,7.97469 2.60931,7.86457 2.44886,7.88266 2.30889,7.89845 2.18205,7.97256 2.09958,8.08674 2.00503,8.21763 2.00485,8.4418 2.00447,8.89014 2.00291,10.7563 2.00037,14.0956 2.00037,16.0586 l -1.8e-4,0.0722 c -9.6e-4,0.2638 -0.00217,0.5956 0.10115,0.9083 0.08933,0.2704 0.23535,0.5185 0.4283,0.7279 0.22316,0.2422 0.51376,0.4022 0.74489,0.5296 l 0.06317,0.0348 c 1.78119,0.9896 4.80982,2.6714 6.47618,3.5967 z M 21.9959,8.89012 C 21.9955,8.44179 21.9953,8.21763 21.9008,8.08674 21.8183,7.97255 21.6915,7.89844 21.5515,7.88266 21.3911,7.86456 21.1953,7.97468 20.8038,8.19492 l -7.396,4.16028 c -0.1485,0.0835 -0.2227,0.1253 -0.2767,0.1843 -0.0478,0.0523 -0.084,0.1141 -0.1061,0.1814 C 13,12.7969 13,12.8821 13,13.0524 v 8.1753 c 0,0.4472 0,0.6708 0.094,0.8016 0.0821,0.1141 0.2083,0.1884 0.3479,0.2047 0.16,0.0187 0.3549,-0.0895 0.7446,-0.3059 0.0912,-0.0506 0.1865,-0.1035 0.2855,-0.1585 0.4993,-0.2773 0.749,-0.4159 0.8176,-0.5277 0.0829,-0.1349 0.0906,-0.1711 0.0696,-0.3281 C 15.3418,20.7839 15.0956,20.4575 14.6033,19.8047 14.2246,19.3025 14,18.6775 14,18 c 0,-1.6569 1.3431,-3 3,-3 0,-1.6569 1.3431,-3 3,-3 0.1346,0 0.267,0.0089 0.3969,0.026 0.7767,0.1027 1.1651,0.154 1.2864,0.1056 0.145,-0.0578 0.1748,-0.084 0.2511,-0.2202 0.0637,-0.114 0.0635,-0.3888 0.0631,-0.9385 -5e-4,-0.7796 -0.0011,-1.50243 -0.0016,-2.08278 z M 6.3414,4.00037 15.3166,8.98659 12.3919,10.6318 c -0.1431,0.0804 -0.2146,0.1207 -0.2905,0.1365 -0.0671,0.0139 -0.1364,0.0139 -0.2035,0 -0.0758,-0.0158 -0.1474,-0.0561 -0.2904,-0.1365 L 4.30741,6.52543 C 3.89997,6.29625 3.69625,6.18165 3.62879,6.03135 3.56999,5.90032 3.57037,5.75033 3.62984,5.6196 3.69805,5.46965 3.90217,5.35618 4.31042,5.12926 Z m 5.2557,-2.81532 c 0.2658,-0.05467 0.54,-0.05467 0.8058,0 0.3073,0.06319 0.5819,0.21702 0.8003,0.33931 l 0.0595,0.03325 c 1.7629,0.9794 4.7452,2.63705 6.4266,3.57165 0.4082,0.22693 0.6124,0.34039 0.6806,0.49035 0.0594,0.13073 0.0598,0.28072 10e-4,0.41175 -0.0674,0.1503 -0.2712,0.26489 -0.6786,0.49408 L 17.3632,7.83555 8.40039,2.85619 10.7373,1.55761 10.7968,1.52436 c 0.2184,-0.12229 0.493,-0.27612 0.8003,-0.33931 z M 21,15 c 0,-0.5523 -0.4477,-1 -1,-1 -0.5523,0 -1,0.4477 -1,1 v 2 h -2 c -0.5523,0 -1,0.4477 -1,1 0,0.5523 0.4477,1 1,1 h 2 v 2 c 0,0.5523 0.4477,1 1,1 0.5523,0 1,-0.4477 1,-1 v -2 h 2 c 0.5523,0 1,-0.4477 1,-1 0,-0.5523 -0.4477,-1 -1,-1 h -2 z"
133+
"rollup-plus": "m 9.81388,21.9281 c 0.38972,0.2164 0.58462,0.3246 0.74462,0.3059 0.1396,-0.0163 0.2658,-0.0906 0.3479,-0.2047 0.094,-0.1308 0.094,-0.3544 0.094,-0.8016 v -8.1752 c 0,-0.1704 0,-0.2555 -0.025,-0.3316 -0.0221,-0.0673 -0.0583,-0.1291 -0.1061,-0.1813 -0.054,-0.0591 -0.1282,-0.1009 -0.2767,-0.1844 L 3.19661,8.19493 C 2.80507,7.97469 2.60931,7.86457 2.44886,7.88266 2.30889,7.89845 2.18205,7.97256 2.09958,8.08674 2.00503,8.21763 2.00485,8.4418 2.00447,8.89014 2.00291,10.7563 2.00037,14.0956 2.00037,16.0586 l -1.8e-4,0.0722 c -9.6e-4,0.2638 -0.00217,0.5956 0.10115,0.9083 0.08933,0.2704 0.23535,0.5185 0.4283,0.7279 0.22316,0.2422 0.51376,0.4022 0.74489,0.5296 l 0.06317,0.0348 c 1.78119,0.9896 4.80982,2.6714 6.47618,3.5967 z M 21.9959,8.89012 C 21.9955,8.44179 21.9953,8.21763 21.9008,8.08674 21.8183,7.97255 21.6915,7.89844 21.5515,7.88266 21.3911,7.86456 21.1953,7.97468 20.8038,8.19492 l -7.396,4.16028 c -0.1485,0.0835 -0.2227,0.1253 -0.2767,0.1843 -0.0478,0.0523 -0.084,0.1141 -0.1061,0.1814 C 13,12.7969 13,12.8821 13,13.0524 v 8.1753 c 0,0.4472 0,0.6708 0.094,0.8016 0.0821,0.1141 0.2083,0.1884 0.3479,0.2047 0.16,0.0187 0.3549,-0.0895 0.7446,-0.3059 0.0912,-0.0506 0.1865,-0.1035 0.2855,-0.1585 0.4993,-0.2773 0.749,-0.4159 0.8176,-0.5277 0.0829,-0.1349 0.0906,-0.1711 0.0696,-0.3281 C 15.3418,20.7839 15.0956,20.4575 14.6033,19.8047 14.2246,19.3025 14,18.6775 14,18 c 0,-1.6569 1.3431,-3 3,-3 0,-1.6569 1.3431,-3 3,-3 0.1346,0 0.267,0.0089 0.3969,0.026 0.7767,0.1027 1.1651,0.154 1.2864,0.1056 0.145,-0.0578 0.1748,-0.084 0.2511,-0.2202 0.0637,-0.114 0.0635,-0.3888 0.0631,-0.9385 -5e-4,-0.7796 -0.0011,-1.50243 -0.0016,-2.08278 z M 6.3414,4.00037 15.3166,8.98659 12.3919,10.6318 c -0.1431,0.0804 -0.2146,0.1207 -0.2905,0.1365 -0.0671,0.0139 -0.1364,0.0139 -0.2035,0 -0.0758,-0.0158 -0.1474,-0.0561 -0.2904,-0.1365 L 4.30741,6.52543 C 3.89997,6.29625 3.69625,6.18165 3.62879,6.03135 3.56999,5.90032 3.57037,5.75033 3.62984,5.6196 3.69805,5.46965 3.90217,5.35618 4.31042,5.12926 Z m 5.2557,-2.81532 c 0.2658,-0.05467 0.54,-0.05467 0.8058,0 0.3073,0.06319 0.5819,0.21702 0.8003,0.33931 l 0.0595,0.03325 c 1.7629,0.9794 4.7452,2.63705 6.4266,3.57165 0.4082,0.22693 0.6124,0.34039 0.6806,0.49035 0.0594,0.13073 0.0598,0.28072 10e-4,0.41175 -0.0674,0.1503 -0.2712,0.26489 -0.6786,0.49408 L 17.3632,7.83555 8.40039,2.85619 10.7373,1.55761 10.7968,1.52436 c 0.2184,-0.12229 0.493,-0.27612 0.8003,-0.33931 z M 21,15 c 0,-0.5523 -0.4477,-1 -1,-1 -0.5523,0 -1,0.4477 -1,1 v 2 h -2 c -0.5523,0 -1,0.4477 -1,1 0,0.5523 0.4477,1 1,1 h 2 v 2 c 0,0.5523 0.4477,1 1,1 0.5523,0 1,-0.4477 1,-1 v -2 h 2 c 0.5523,0 1,-0.4477 1,-1 0,-0.5523 -0.4477,-1 -1,-1 h -2 z",
134+
"ethereum": "",
135+
"arbitrum": "",
136+
"base": "m44 148c-12-5-27-21-33-34-10-24-10-24 44-24 30 0 55-4 55-10 0-5-25-10-55-10-54 0-54 0-43-24 15-35 60-52 97-36 60 24 63 112 5 139-30 13-42 13-70-1z"
134137
}

‎components/TheFooter.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,9 @@ const handleChangeTheme = (target) => {
165165
<NuxtLink to="/addresses" :class="$style.link">
166166
<Text size="12" weight="500" color="tertiary"> Addresses </Text>
167167
</NuxtLink>
168+
<NuxtLink to="/blobstream" :class="$style.link">
169+
<Text size="12" weight="500" color="tertiary"> Blobstream </Text>
170+
</NuxtLink>
168171
<NuxtLink to="/gas" :class="$style.link">
169172
<Text size="12" weight="500" color="tertiary"> Gas Tracker </Text>
170173
</NuxtLink>

‎components/cmd/CommandMenu.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,15 @@ const rawNavigationActions = [
273273
router.push("/addresses")
274274
},
275275
},
276+
{
277+
type: "callback",
278+
icon: "arrow-narrow-right",
279+
title: "Go to Blobstream",
280+
runText: "Open Blobstream",
281+
callback: () => {
282+
router.push("/blobstream")
283+
},
284+
},
276285
{
277286
type: "callback",
278287
icon: "arrow-narrow-right",

‎components/modals/CommitmentModal.vue‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
5+
/** UI */
6+
import Modal from "@/components/ui/Modal.vue"
7+
import Button from "@/components/ui/Button.vue"
8+
import Spinner from "@/components/ui/Spinner.vue"
9+
10+
/** Services */
11+
import { capitilize, comma, shortHex } from "@/services/utils"
12+
13+
/** Store */
14+
import { useCacheStore } from "@/store/cache"
15+
const cacheStore = useCacheStore()
16+
17+
const emit = defineEmits(["onClose"])
18+
const props = defineProps({
19+
show: Boolean,
20+
})
21+
22+
const commitment = ref()
23+
24+
watch(
25+
() => props.show,
26+
() => {
27+
if (props.show) {
28+
commitment.value = cacheStore.current.commitment
29+
}
30+
},
31+
)
32+
33+
</script>
34+
35+
<template>
36+
<Modal :show="show" @onClose="emit('onClose')" width="450" disable-trap>
37+
<Flex direction="column" gap="16">
38+
<Text size="14" weight="600" color="primary">Commitment Info</Text>
39+
40+
<Flex direction="column" align="center" gap="12">
41+
<Flex align="center" justify="between" wide :class="$style.metadata">
42+
<Text size="12" weight="500" color="tertiary">Time:</Text>
43+
44+
<Flex align="center" gap="8" :class="$style.value_wrapper">
45+
<Text size="13" weight="600" color="primary" :class="$style.value">
46+
{{ DateTime.fromISO(commitment.time).setLocale("en").toFormat("LLL, d, yyyy, H:mm:s a") }}
47+
</Text>
48+
</Flex>
49+
</Flex>
50+
51+
<Flex align="center" justify="between" wide :class="$style.metadata">
52+
<Text size="12" weight="500" color="tertiary">Hash:</Text>
53+
54+
<Flex align="center" gap="8" :class="$style.value_wrapper">
55+
<CopyButton :text="commitment.commitment" />
56+
57+
<Text size="13" weight="600" color="primary" :class="$style.value">
58+
{{ shortHex(commitment.commitment) }}
59+
</Text>
60+
</Flex>
61+
</Flex>
62+
63+
<Flex align="center" justify="between" wide :class="$style.metadata">
64+
<Text size="12" weight="500" color="tertiary">Block Range:</Text>
65+
66+
<Flex align="center" gap="8" :class="$style.value_wrapper">
67+
<Text size="13" weight="600" color="primary" :class="$style.value">
68+
{{ comma(commitment.celestia_start_height) }} — {{ comma(commitment.celestia_end_height) }}
69+
</Text>
70+
</Flex>
71+
</Flex>
72+
</Flex>
73+
74+
<div :class="$style.divider" />
75+
76+
<Flex align="center">
77+
<Text size="12" weight="600" color="secondary"> {{ capitilize(commitment.contract.network) }} </Text>
78+
</Flex>
79+
80+
<Flex direction="column" align="center" gap="12">
81+
<Flex align="center" justify="between" wide :class="$style.metadata">
82+
<Text size="12" weight="500" color="tertiary">Block:</Text>
83+
84+
<a :href="`${commitment.contract.l1_explorer}block/${commitment.l1_info.height}`" target="_blank">
85+
<Flex align="center" gap="8" :class="$style.value_wrapper">
86+
<Flex align="center" gap="6">
87+
<Text size="13" weight="600" color="primary" :class="$style.value">
88+
{{ comma(commitment.l1_info.height) }}
89+
</Text>
90+
91+
<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
92+
</Flex>
93+
</Flex>
94+
</a>
95+
</Flex>
96+
97+
<Flex align="center" justify="between" wide :class="$style.metadata">
98+
<Text size="12" weight="500" color="tertiary">Tx:</Text>
99+
100+
<a :href="`${commitment.contract.l1_explorer}tx/0x${commitment.l1_info.tx_hash}`" target="_blank">
101+
<Flex align="center" gap="8" :class="$style.value_wrapper">
102+
<Flex align="center" gap="6">
103+
<CopyButton :text="commitment.l1_info.tx_hash" />
104+
105+
<Text size="13" weight="600" color="primary" :class="$style.value">
106+
{{ shortHex(commitment.l1_info.tx_hash) }}
107+
</Text>
108+
109+
<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
110+
</Flex>
111+
</Flex>
112+
</a>
113+
</Flex>
114+
115+
<Flex align="center" justify="between" wide :class="$style.metadata">
116+
<Text size="12" weight="500" color="tertiary">Contract:</Text>
117+
118+
<a :href="`${commitment.contract.l1_explorer}address/${commitment.contract.hash}`" target="_blank">
119+
<Flex align="center" gap="8" :class="$style.value_wrapper">
120+
<Flex align="center" gap="6">
121+
<CopyButton :text="commitment.contract.hash" />
122+
123+
<Text size="13" weight="600" color="primary" :class="$style.value">
124+
{{ shortHex(commitment.contract.hash) }}
125+
</Text>
126+
127+
<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
128+
</Flex>
129+
</Flex>
130+
</a>
131+
</Flex>
132+
</Flex>
133+
</Flex>
134+
</Modal>
135+
</template>
136+
137+
<style module>
138+
.data {
139+
max-height: 200px;
140+
min-height: 200px;
141+
142+
user-select: text;
143+
border-radius: 6px;
144+
background: rgba(0, 0, 0, 15%);
145+
box-shadow: inset 0 0 0 1px var(--op-10);
146+
overflow-x: hidden;
147+
148+
padding: 16px;
149+
150+
& .field {
151+
min-width: 100%;
152+
width: 0;
153+
max-height: 200px;
154+
155+
display: -webkit-box;
156+
-webkit-box-orient: vertical;
157+
word-wrap: break-word;
158+
159+
text-overflow: ellipsis;
160+
overflow: hidden;
161+
-webkit-line-clamp: 8;
162+
163+
&.full {
164+
overflow: initial;
165+
}
166+
}
167+
}
168+
169+
.value_wrapper {
170+
max-width: 100%;
171+
172+
& a {
173+
text-overflow: ellipsis;
174+
overflow: hidden;
175+
}
176+
}
177+
178+
.value {
179+
text-overflow: ellipsis;
180+
overflow: hidden;
181+
max-width: 100%;
182+
}
183+
184+
.badges {
185+
}
186+
187+
.badge {
188+
border-radius: 6px;
189+
background: var(--op-5);
190+
191+
padding: 8px;
192+
193+
transition: all 0.2s ease;
194+
195+
&.selectable:hover {
196+
cursor: pointer;
197+
background: var(--op-10);
198+
}
199+
}
200+
201+
.buttons {
202+
border-top: 1px solid var(--op-5);
203+
204+
padding-top: 16px;
205+
}
206+
207+
.preview {
208+
& img {
209+
width: 100%;
210+
}
211+
}
212+
213+
.load_btn {
214+
cursor: pointer;
215+
216+
transition: all 0.2s ease;
217+
218+
&:hover {
219+
color: var(--txt-primary);
220+
}
221+
}
222+
223+
.divider {
224+
width: fill-available;
225+
height: 2px;
226+
227+
background: var(--op-5);
228+
229+
margin: 0 -16px;
230+
}
231+
232+
233+
@media (max-width: 550px) {
234+
.metadata {
235+
flex-direction: column;
236+
align-items: flex-start;
237+
gap: 8px;
238+
}
239+
240+
.badges {
241+
flex-direction: column;
242+
}
243+
244+
.badge {
245+
width: 100%;
246+
}
247+
}
248+
249+
@media (max-width: 400px) {
250+
.buttons {
251+
flex-direction: column;
252+
align-items: flex-start;
253+
}
254+
}
255+
</style>

‎components/modals/ModalsManager.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup>
22
import BlobModal from "./BlobModal.vue"
3+
import CommitmentModal from "./CommitmentModal.vue";
34
import ConfirmationModal from "./ConfirmationModal.vue"
45
import RawDataModal from "./RawDataModal.vue"
56
import ConstantsModal from "./ConstantsModal.vue"
@@ -19,6 +20,7 @@ const modalsStore = useModalsStore()
1920

2021
<template>
2122
<BlobModal :show="modalsStore.modals.blob" @onClose="modalsStore.close('blob')" />
23+
<CommitmentModal :show="modalsStore.modals.commitment" @onClose="modalsStore.close('commitment')" />
2224
<ConfirmationModal :show="modalsStore.modals.confirmation" @onClose="modalsStore.close('confirmation')" />
2325
<RawDataModal :show="modalsStore.modals.rawData" @onClose="modalsStore.close('rawData')" />
2426
<ConstantsModal :show="modalsStore.modals.constants" @onClose="modalsStore.close('constants')" />

‎components/ui/Modal.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,8 +201,8 @@ const onKeydown = (e) => {
201201
202202
.close_icon {
203203
position: absolute;
204-
top: 16px;
205-
right: 16px;
204+
top: 12px;
205+
right: 12px;
206206
207207
fill: var(--txt-tertiary);
208208
background: transparent;

0 commit comments

Comments
 (0)