Skip to content

Commit 531d7ee

Browse files
author
Sunlight
committed
fix (BlockOverview): links in table
1 parent 3e5de1c commit 531d7ee

File tree

1 file changed

+90
-73
lines changed

1 file changed

+90
-73
lines changed

‎components/modules/block/BlockOverview.vue

Lines changed: 90 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -304,90 +304,102 @@ const handleViewRawTransactions = () => {
304304
</thead>
305305
306306
<tbody>
307-
<tr v-for="tx in filteredTransactions" @click="router.push(`/tx/${tx.hash}`)">
307+
<tr v-for="tx in filteredTransactions">
308308
<td style="width: 1px">
309-
<Tooltip position="start" delay="500">
310-
<Flex align="center" gap="8">
311-
<Icon
312-
:name="tx.status === 'success' ? 'check-circle' : 'close-circle'"
313-
size="14"
314-
:color="tx.status === 'success' ? 'green' : 'red'"
315-
/>
316-
317-
<Text size="13" weight="600" color="primary" mono>{{
318-
tx.hash.slice(0, 4).toUpperCase()
319-
}}</Text>
320-
321-
<Flex align="center" gap="3">
322-
<div v-for="dot in 3" class="dot" />
323-
</Flex>
309+
<NuxtLink :to="`/tx/${tx.hash}`">
310+
<Tooltip position="start" delay="500">
311+
<Flex align="center" gap="8">
312+
<Icon
313+
:name="tx.status === 'success' ? 'check-circle' : 'close-circle'"
314+
size="14"
315+
:color="tx.status === 'success' ? 'green' : 'red'"
316+
/>
317+
318+
<Text size="13" weight="600" color="primary" mono>{{
319+
tx.hash.slice(0, 4).toUpperCase()
320+
}}</Text>
321+
322+
<Flex align="center" gap="3">
323+
<div v-for="dot in 3" class="dot" />
324+
</Flex>
324325
325-
<Text size="13" weight="600" color="primary" mono>{{
326-
tx.hash.slice(tx.hash.length - 4, tx.hash.length).toUpperCase()
327-
}}</Text>
326+
<Text size="13" weight="600" color="primary" mono>{{
327+
tx.hash.slice(tx.hash.length - 4, tx.hash.length).toUpperCase()
328+
}}</Text>
328329
329-
<CopyButton :text="tx.hash" />
330-
</Flex>
330+
<CopyButton :text="tx.hash" />
331+
</Flex>
331332
332-
<template #content>
333-
<Flex direction="column" gap="6">
334-
<Flex align="center" gap="4">
335-
<Icon
336-
:name="tx.status === 'success' ? 'check-circle' : 'close-circle'"
337-
size="13"
338-
:color="tx.status === 'success' ? 'green' : 'red'"
339-
/>
340-
<Text size="13" weight="600" color="primary">
341-
{{ tx.status === "success" ? "Successful" : "Failed" }} Transaction
333+
<template #content>
334+
<Flex direction="column" gap="6">
335+
<Flex align="center" gap="4">
336+
<Icon
337+
:name="tx.status === 'success' ? 'check-circle' : 'close-circle'"
338+
size="13"
339+
:color="tx.status === 'success' ? 'green' : 'red'"
340+
/>
341+
<Text size="13" weight="600" color="primary">
342+
{{ tx.status === "success" ? "Successful" : "Failed" }} Transaction
343+
</Text>
344+
</Flex>
345+
346+
{{ space(tx.hash).toUpperCase() }}
347+
348+
<Text height="120" color="tertiary" style="max-width: 400px" mono align="left">
349+
{{ tx.error }}
342350
</Text>
343351
</Flex>
344-
345-
{{ space(tx.hash).toUpperCase() }}
346-
347-
<Text height="120" color="tertiary" style="max-width: 400px" mono align="left">
348-
{{ tx.error }}
349-
</Text>
350-
</Flex>
351-
</template>
352-
</Tooltip>
352+
</template>
353+
</Tooltip>
354+
</NuxtLink>
353355
</td>
354356
<td>
355-
<Tooltip position="start" textAlign="left">
356-
<MessageTypeBadge :types="tx.message_types" />
357-
358-
<template #content>
359-
<Flex direction="column" gap="8">
360-
<Text v-for="type in tx.message_types" color="primary">
361-
{{ type.replace("Msg", "") }}
362-
</Text>
363-
</Flex>
364-
</template>
365-
</Tooltip>
357+
<NuxtLink :to="`/tx/${tx.hash}`">
358+
<Flex align="center">
359+
<Tooltip position="start" textAlign="left">
360+
<MessageTypeBadge :types="tx.message_types" />
361+
362+
<template #content>
363+
<Flex direction="column" gap="8">
364+
<Text v-for="type in tx.message_types" color="primary">
365+
{{ type.replace("Msg", "") }}
366+
</Text>
367+
</Flex>
368+
</template>
369+
</Tooltip>
370+
</Flex>
371+
</NuxtLink>
366372
</td>
367373
<td style="width: 1px">
368-
<Tooltip>
369-
<Flex align="center" gap="8">
370-
<GasBar :percent="(tx.gas_used * 100) / tx.gas_wanted" />
374+
<NuxtLink :to="`/tx/${tx.hash}`">
375+
<Tooltip>
376+
<Flex align="center" gap="8">
377+
<GasBar :percent="(tx.gas_used * 100) / tx.gas_wanted" />
371378
372-
<Text v-if="tx.gas_wanted > 0" size="13" weight="600" color="primary">
373-
{{ ((tx.gas_used * 100) / tx.gas_wanted).toFixed(2) }}%
374-
</Text>
375-
</Flex>
379+
<Text v-if="tx.gas_wanted > 0" size="13" weight="600" color="primary">
380+
{{ ((tx.gas_used * 100) / tx.gas_wanted).toFixed(2) }}%
381+
</Text>
382+
</Flex>
376383
377-
<template #content>
378-
<Flex align="center" gap="4">
379-
<Text size="13" weight="600" color="primary">{{ comma(tx.gas_used) }}</Text>
380-
<Text size="13" weight="600" color="tertiary">/</Text>
381-
<Text size="13" weight="600" color="secondary">{{ comma(tx.gas_wanted) }}</Text></Flex
382-
>
383-
</template>
384-
</Tooltip>
384+
<template #content>
385+
<Flex align="center" gap="4">
386+
<Text size="13" weight="600" color="primary">{{ comma(tx.gas_used) }}</Text>
387+
<Text size="13" weight="600" color="tertiary">/</Text>
388+
<Text size="13" weight="600" color="secondary">{{
389+
comma(tx.gas_wanted)
390+
}}</Text></Flex
391+
>
392+
</template>
393+
</Tooltip>
394+
</NuxtLink>
385395
</td>
386396
<td>
387-
<Flex align="center" gap="4">
388-
<Text size="13" weight="600" color="primary"> {{ tia(tx.fee) }} </Text>
389-
<Text size="13" weight="600" color="tertiary">TIA</Text>
390-
</Flex>
397+
<NuxtLink :to="`/tx/${tx.hash}`">
398+
<Flex align="center" gap="4">
399+
<Text size="13" weight="600" color="primary"> {{ tia(tx.fee) }} </Text>
400+
<Text size="13" weight="600" color="tertiary">TIA</Text>
401+
</Flex>
402+
</NuxtLink>
391403
</td>
392404
</tr>
393405
</tbody>
@@ -561,15 +573,20 @@ const handleViewRawTransactions = () => {
561573
562574
& tr td {
563575
padding: 0;
564-
padding-right: 24px;
565-
padding-top: 6px;
566-
padding-bottom: 6px;
567576
568577
white-space: nowrap;
569578
570579
&:first-child {
571580
padding-left: 16px;
572581
}
582+
583+
& > a {
584+
display: flex;
585+
586+
min-height: 40px;
587+
588+
padding-right: 24px;
589+
}
573590
}
574591
}
575592
}

0 commit comments

Comments
 (0)