@visualizevalue/mint-app-base 0.1.123 → 0.1.125
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app.config.ts +7 -7
- package/components/Token/MintTimeline.client.vue +56 -6
- package/locales/en.json +4 -1
- package/package.json +1 -1
package/app.config.ts
CHANGED
|
@@ -9,13 +9,13 @@ export default defineAppConfig({
|
|
|
9
9
|
address: '0xe5d2da253c7d4b7609afce15332bb1a1fb461d09',
|
|
10
10
|
description: 'The default renderer',
|
|
11
11
|
},
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
{
|
|
13
|
+
component: 'Markdown',
|
|
14
|
+
name: 'Markdown Renderer',
|
|
15
|
+
version: 1n,
|
|
16
|
+
address: '0x6a517e2432b43b6c7db589059f4e5ef10fd3a90e',
|
|
17
|
+
description: 'Renders markdown content as onchain text artifacts',
|
|
18
|
+
},
|
|
19
19
|
{
|
|
20
20
|
component: 'P5',
|
|
21
21
|
name: 'P5 Renderer',
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<section class="token-mint-timeline">
|
|
3
|
-
<slot :mints="
|
|
4
|
-
<
|
|
3
|
+
<slot :mints="sortedMints" :loading="loading">
|
|
4
|
+
<header class="timeline-header">
|
|
5
|
+
<h1>{{ $t('token.mint_timeline') }}</h1>
|
|
6
|
+
|
|
7
|
+
<menu class="sort-options">
|
|
8
|
+
<button :class="{ active: sortBy === 'recent' }" @click="sortBy = 'recent'">{{ $t('token.sort_recent') }}</button>
|
|
9
|
+
<button :class="{ active: sortBy === 'amount' }" @click="sortBy = 'amount'">{{ $t('token.sort_amount') }}</button>
|
|
10
|
+
</menu>
|
|
11
|
+
</header>
|
|
5
12
|
|
|
6
13
|
<template v-if="currentBlock">
|
|
7
14
|
<TokenMintTimelineVirtualScroller
|
|
8
|
-
:mints="
|
|
15
|
+
:mints="sortedMints"
|
|
9
16
|
:block="currentBlock"
|
|
10
17
|
>
|
|
11
18
|
<template #after>
|
|
@@ -53,6 +60,17 @@ const state = useOnchainStore()
|
|
|
53
60
|
const mints = computed(() => state.tokenMints(token.collection, token.tokenId))
|
|
54
61
|
const backfillComplete = computed(() => token.mintsBackfilledUntilBlock <= token.mintedBlock)
|
|
55
62
|
|
|
63
|
+
const sortBy = ref('recent')
|
|
64
|
+
const sortedMints = computed(() => {
|
|
65
|
+
if (!mints.value) return []
|
|
66
|
+
if (sortBy.value === 'recent') return mints.value
|
|
67
|
+
const sorted = [...mints.value]
|
|
68
|
+
if (sortBy.value === 'amount') {
|
|
69
|
+
sorted.sort((a, b) => (a.amount > b.amount ? -1 : a.amount < b.amount ? 1 : 0))
|
|
70
|
+
}
|
|
71
|
+
return sorted
|
|
72
|
+
})
|
|
73
|
+
|
|
56
74
|
const loading = ref(true)
|
|
57
75
|
const loadMore = ref()
|
|
58
76
|
const loadMoreVisible = useElementVisibility(loadMore)
|
|
@@ -113,12 +131,44 @@ watch(currentBlock, () => {
|
|
|
113
131
|
}
|
|
114
132
|
}
|
|
115
133
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
134
|
+
.timeline-header {
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
justify-content: space-between;
|
|
138
|
+
gap: var(--spacer);
|
|
119
139
|
border-bottom: var(--border);
|
|
120
140
|
padding: 0 0 var(--spacer);
|
|
121
141
|
margin: 0 0 var(--spacer);
|
|
142
|
+
|
|
143
|
+
h1 {
|
|
144
|
+
font-size: var(--font-base);
|
|
145
|
+
margin: 0;
|
|
146
|
+
padding: 0;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.sort-options {
|
|
151
|
+
display: flex;
|
|
152
|
+
gap: var(--spacer-sm);
|
|
153
|
+
padding: 0;
|
|
154
|
+
margin: 0;
|
|
155
|
+
|
|
156
|
+
button {
|
|
157
|
+
font-size: var(--font-sm);
|
|
158
|
+
color: var(--muted);
|
|
159
|
+
background: none;
|
|
160
|
+
border: none;
|
|
161
|
+
padding: 0;
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
|
|
164
|
+
&.active {
|
|
165
|
+
color: var(--color);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&:--highlight {
|
|
169
|
+
color: var(--color);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
122
172
|
}
|
|
123
173
|
|
|
124
174
|
|
package/locales/en.json
CHANGED
|
@@ -86,7 +86,10 @@
|
|
|
86
86
|
"closed_ago": "Closed {time} ago",
|
|
87
87
|
"closed_at_block": "Closed at block {block}",
|
|
88
88
|
"you_own": "You own {ownedBalance} {tokens}",
|
|
89
|
-
"mint_timeline": "
|
|
89
|
+
"mint_timeline": "Mints",
|
|
90
|
+
"sort_recent": "Recent",
|
|
91
|
+
"sort_amount": "Amount",
|
|
92
|
+
|
|
90
93
|
"artist_mint": "Artist Mint",
|
|
91
94
|
"load_more": "Load more",
|
|
92
95
|
"blocks_ago": "just now | one block ago | {blocks} blocks ago",
|