Skip to content

Commit 8cf2858

Browse files
GusevPMGusevPM
authored
Merge pull request #17 from celenium-io/dusk-11
Dusk 11
2 parents ce6d184 + 6e525ac commit 8cf2858

File tree

13 files changed

+363
-43
lines changed

13 files changed

+363
-43
lines changed

‎components/SearchField.vue‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ const handleSaveToHistory = (target) => {
116116
}
117117
118118
const getResultPath = (result) => {
119+
if (!result) return
120+
119121
switch (result.type) {
120122
case "address":
121123
return `/account/${result.body.hash}`
@@ -133,29 +135,13 @@ const getResultPath = (result) => {
133135
}
134136
}
135137
136-
const getItemLink = (item) => {
137-
switch (item.type) {
138-
case "address":
139-
return `/account/${result.body.hash}`
140-
case "block":
141-
return `/block/${result.body.height}`
142-
case "validator":
143-
return `/validator/${result.body.id}`
144-
case "bridge":
145-
return `/account/${result.body.address}`
146-
147-
default:
148-
return `/${item.type === 'address' ? 'account' : item.type}/${item.body.hash}`
149-
}
150-
}
151-
152138
const onKeydown = (e) => {
153139
if (e.code === "Escape") {
154140
show.value = false
155141
inputEl.value.blur()
156142
}
157143
158-
if (e.code === "Enter") {
144+
if (e.code === "Enter" && results.value.length) {
159145
const target = results.value[0]
160146
router.push(getResultPath(target))
161147

‎components/modules/account/AccountDeposits.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup>
2+
import EmptyHolder from "~/components/shared/EmptyHolder.vue"
3+
import LoadingHolder from "@/components/shared/LoadingHolder.vue"
4+
import DepositsTable from "~/components/tables/DepositsTable.vue"
5+
6+
const props = defineProps({
7+
deposits: {
8+
type: Array,
9+
},
10+
isLoading: {
11+
type: Boolean,
12+
}
13+
})
14+
</script>
15+
16+
<template>
17+
<Flex direction="column" :class="$style.wrapper">
18+
<LoadingHolder v-if="isLoading" title="Loading bridge deposits.." />
19+
20+
<DepositsTable v-if="deposits.length > 0" :isLoading="isLoading" :deposits="deposits" />
21+
22+
<EmptyHolder v-else-if="!isLoading" title=" This account did not receive any deposits" />
23+
</Flex>
24+
</template>
25+
26+
<style module>
27+
.wrapper {
28+
position: relative;
29+
border-radius: 8px;
30+
box-shadow: inset 0 0 0 1px var(--op-5);
31+
background: var(--op-3);
32+
33+
/* padding: 8px 0 8px 0; */
34+
}
35+
</style>

‎components/modules/rollup/RollupDeposits.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup>
2+
import EmptyHolder from "~/components/shared/EmptyHolder.vue"
3+
import LoadingHolder from "@/components/shared/LoadingHolder.vue"
4+
import DepositsTable from "~/components/tables/DepositsTable.vue"
5+
6+
const props = defineProps({
7+
deposits: {
8+
type: Array,
9+
},
10+
isLoading: {
11+
type: Boolean,
12+
}
13+
})
14+
</script>
15+
16+
<template>
17+
<Flex direction="column" :class="$style.wrapper">
18+
<LoadingHolder v-if="isLoading" title="Loading deposits.." />
19+
20+
<DepositsTable v-if="deposits.length > 0" :isLoading="isLoading" :deposits="deposits" />
21+
22+
<EmptyHolder v-else-if="!isLoading" title=" This rollup did not wire any deposits" />
23+
</Flex>
24+
</template>
25+
26+
<style module>
27+
.wrapper {
28+
position: relative;
29+
border-radius: 8px;
30+
box-shadow: inset 0 0 0 1px var(--op-5);
31+
background: var(--op-3);
32+
33+
/* padding: 8px 0 8px 0; */
34+
}
35+
</style>

‎components/tables/AccountsTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const props = defineProps({
6363
<Flex align="center" gap="8">
6464
<Text size="12" weight="500" color="secondary">
6565
<Text color="tertiary">Balance</Text>
66-
{{ `${spaces(account.balances[0]?.value)}${account.balances.length ? account.balances[0]?.currency.toUpperCase() : ''}` }}
66+
{{ `${spaces(account.balances[0]?.value)}${account.balances.length ? ' ' + account.balances[0]?.currency.toUpperCase() : ''}` }}
6767
</Text>
6868

6969
<div :class="$style.dot" />

‎components/tables/ActionsTable.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const handleOpenTx = async (action) => {
6262
</Text>
6363
</Flex>
6464

65-
<Flex v-if="act.type === 'sequence'" gap="4" :class="$style.description">
65+
<Flex v-if="act.type === 'rollup_data_submission'" gap="4" :class="$style.description">
6666
<Text size="13" weight="500" color="secondary">
6767
{{ `Pushed ${getActionDataLength(act)} to` }}
6868
</Text>
@@ -297,7 +297,7 @@ const handleOpenTx = async (action) => {
297297
<Flex align="center" gap="8">
298298
<Text size="12" color="tertiary">Block</Text>
299299

300-
<LinkToEntity :entity="{ title: spaces(act.height), type: 'block', id: act.height }" :class="$style.link" />
300+
<LinkToEntity :entity="{ title: spaces(act.height), type: 'block', id: act.height }" color="secondary" :class="$style.link" />
301301

302302
<div :class="$style.dot" />
303303

‎components/tables/DepositsTable.vue‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
5+
/** UI */
6+
import Tooltip from "@/components/ui/Tooltip.vue"
7+
8+
/** Components */
9+
import LinkToEntity from "@/components/shared/LinkToEntity.vue"
10+
11+
/** Services */
12+
import { capitalize, formatBytes, midHash, spaces } from "@/services/utils"
13+
import { getRollupHashSafeURL } from "~/services/utils/rollups"
14+
15+
/** API */
16+
import { fetchTxByHash } from "~/services/api/tx"
17+
18+
/** Store */
19+
import { useSidebarsStore } from "@/store/sidebars"
20+
const sidebarsStore = useSidebarsStore()
21+
22+
const props = defineProps({
23+
deposits: {
24+
type: Array,
25+
},
26+
})
27+
28+
const handleOpenTx = async (deposit) => {
29+
const { data } = await fetchTxByHash(deposit.tx_hash)
30+
if (data.value) {
31+
sidebarsStore.open("tx", data.value)
32+
}
33+
}
34+
</script>
35+
36+
<template>
37+
<Flex direction="column" :class="$style.wrapper">
38+
<Flex
39+
v-if="deposits"
40+
v-for="d in deposits"
41+
@click="handleOpenTx(d)"
42+
justify="between"
43+
align="center"
44+
:class="[$style.row, isLoading && $style.disabled]"
45+
>
46+
<Flex direction="column" gap="8">
47+
<Flex align="center" gap="6">
48+
<Icon name="role" size="16" color="secondary" />
49+
50+
<Flex v-if="d.bridge" gap="4">
51+
<Text size="13" weight="500" color="primary">
52+
{{ `Wired deposit of ${spaces(d.amount)} ${(d.asset).toUpperCase()} to` }}
53+
</Text>
54+
55+
<LinkToEntity
56+
:entity="{ title: midHash(d.bridge), type: 'account', id: d.bridge }"
57+
color="primary"
58+
size="13"
59+
:class="$style.link"
60+
/>
61+
</Flex>
62+
63+
<Text v-else size="13" weight="500" color="primary">
64+
{{ `Received deposit of ${spaces(d.amount)} ${(d.asset).toUpperCase()}` }}
65+
</Text>
66+
</Flex>
67+
68+
<Flex align="center" gap="8">
69+
<Text size="12" color="tertiary">Block</Text>
70+
71+
<LinkToEntity :entity="{ title: spaces(d.height), type: 'block', id: d.height }" color="secondary" :class="$style.link" />
72+
73+
<div :class="$style.dot" />
74+
75+
<Text size="12" color="tertiary"> {{ DateTime.fromISO(d.time).setLocale("en").toFormat("tt, LLL d, y") }} </Text>
76+
</Flex>
77+
</Flex>
78+
79+
<Tooltip>
80+
<!-- <Flex align="center" gap="4">
81+
<Text size="13" weight="600" color="primary"> {{ spaces(rollup.actions_count) }} </Text>
82+
83+
<Icon name="action" size="13" color="tertiary" />
84+
</Flex>
85+
86+
<template #content>
87+
<Text size="12" color="tertiary">Actions count</Text>
88+
</template> -->
89+
</Tooltip>
90+
</Flex>
91+
</Flex>
92+
</template>
93+
94+
<style module>
95+
.wrapper {
96+
position: relative;
97+
}
98+
99+
.loading {
100+
position: absolute;
101+
top: 50%;
102+
left: 50%;
103+
transform: translateY(-50%) translateX(-50%);
104+
}
105+
106+
.row {
107+
height: 60px;
108+
109+
border-top: 1px solid var(--op-5);
110+
111+
cursor: pointer;
112+
113+
padding: 0 16px;
114+
115+
transition: all 0.2s ease;
116+
117+
&:hover {
118+
background: var(--op-5);
119+
}
120+
121+
&:first-child {
122+
border-top-left-radius: 8px;
123+
border-top-right-radius: 8px;
124+
border-top: none;
125+
}
126+
127+
&:last-child {
128+
border-bottom-left-radius: 8px;
129+
border-bottom-right-radius: 8px;
130+
}
131+
132+
&:active {
133+
background: var(--op-10);
134+
}
135+
136+
&.disabled {
137+
pointer-events: none;
138+
opacity: 0.2;
139+
}
140+
}
141+
142+
.row_general_list {
143+
height: 60px;
144+
145+
border-top: 1px solid var(--op-5);
146+
147+
cursor: pointer;
148+
149+
padding: 0 16px;
150+
151+
transition: all 0.2s ease;
152+
153+
&:hover {
154+
background: var(--op-5);
155+
}
156+
157+
&:last-child {
158+
border-bottom-left-radius: 8px;
159+
border-bottom-right-radius: 8px;
160+
}
161+
162+
&:active {
163+
background: var(--op-10);
164+
}
165+
166+
&.disabled {
167+
pointer-events: none;
168+
opacity: 0.2;
169+
}
170+
}
171+
172+
.dot {
173+
width: 4px;
174+
height: 4px;
175+
176+
border-radius: 50%;
177+
background: var(--op-10);
178+
}
179+
180+
.link {
181+
overflow: hidden;
182+
text-overflow: ellipsis;
183+
white-space: nowrap;
184+
}
185+
</style>

0 commit comments

Comments
 (0)