@visualizevalue/mint-app-base 0.1.16 → 0.1.17
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/components/Collection/Detail.client.vue +2 -0
- package/app/components/Collection/Intro.vue +37 -35
- package/app/components/Collection/OverviewCard.vue +19 -17
- package/app/components/Token/MintTimeline.client.vue +23 -21
- package/app/components/Token/MintTimelineItem.vue +2 -2
- package/app/components/Token/OverviewCard.vue +41 -30
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<slot :collection="collection">
|
|
2
3
|
<CollectionIntro :collection="collection" />
|
|
3
4
|
|
|
4
5
|
<TokenOverviewCard v-for="token of tokens" :key="token.tokenId" :token="token" />
|
|
@@ -7,6 +8,7 @@
|
|
|
7
8
|
<div v-if="! tokens.length && !loading" >
|
|
8
9
|
<p>No tokens yet</p>
|
|
9
10
|
</div>
|
|
11
|
+
</slot>
|
|
10
12
|
</template>
|
|
11
13
|
|
|
12
14
|
<script setup>
|
|
@@ -1,41 +1,43 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<header class="collection-intro">
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<div>
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
|
|
3
|
+
<slot :collection="collection">
|
|
4
|
+
<figure v-if="collection.image">
|
|
5
|
+
<Image :src="collection.image" :alt="collection.name" />
|
|
6
|
+
</figure>
|
|
7
|
+
<div class="text">
|
|
8
|
+
<div>
|
|
9
|
+
<h1>{{ collection.name || 'Unnamed Collection' }} <small v-if="collection.symbol">({{ collection.symbol }})</small></h1>
|
|
10
|
+
<p v-if="collection.description">
|
|
11
|
+
<ExpandableText :text="collection.description" />
|
|
12
|
+
</p>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div v-if="id">
|
|
16
|
+
<p>
|
|
17
|
+
<span>
|
|
18
|
+
By <NuxtLink :to="{ name: 'id', params: { id } }">{{ store.displayName(id) }}</NuxtLink>
|
|
19
|
+
</span>
|
|
20
|
+
<span>
|
|
21
|
+
{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }}
|
|
22
|
+
</span>
|
|
23
|
+
<span>
|
|
24
|
+
Created at Block {{ collection.initBlock }}
|
|
25
|
+
</span>
|
|
26
|
+
</p>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<menu v-if="ownedByMe">
|
|
30
|
+
<CollectionWithdraw :collection="collection" />
|
|
31
|
+
<Button
|
|
32
|
+
:to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
|
|
33
|
+
id="mint-new"
|
|
34
|
+
>
|
|
35
|
+
<Icon type="add" />
|
|
36
|
+
<span>Mint New</span>
|
|
37
|
+
</Button>
|
|
38
|
+
</menu>
|
|
12
39
|
</div>
|
|
13
|
-
|
|
14
|
-
<div v-if="id">
|
|
15
|
-
<p>
|
|
16
|
-
<span>
|
|
17
|
-
By <NuxtLink :to="{ name: 'id', params: { id } }">{{ store.displayName(id) }}</NuxtLink>
|
|
18
|
-
</span>
|
|
19
|
-
<span>
|
|
20
|
-
{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }}
|
|
21
|
-
</span>
|
|
22
|
-
<span>
|
|
23
|
-
Created at Block {{ collection.initBlock }}
|
|
24
|
-
</span>
|
|
25
|
-
</p>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<menu v-if="ownedByMe">
|
|
29
|
-
<CollectionWithdraw :collection="collection" />
|
|
30
|
-
<Button
|
|
31
|
-
:to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
|
|
32
|
-
id="mint-new"
|
|
33
|
-
>
|
|
34
|
-
<Icon type="add" />
|
|
35
|
-
<span>Mint New</span>
|
|
36
|
-
</Button>
|
|
37
|
-
</menu>
|
|
38
|
-
</div>
|
|
40
|
+
</slot>
|
|
39
41
|
</header>
|
|
40
42
|
</template>
|
|
41
43
|
|
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<article class="collection-overview-card">
|
|
3
|
-
<
|
|
3
|
+
<slot :collection="collection">
|
|
4
|
+
<Image v-if="collection.image" :src="collection.image" :alt="collection.name" />
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
<div class="text">
|
|
7
|
+
<div v-if="collection.name || collection.symbol || collection.description">
|
|
8
|
+
<h1 v-if="collection.name || collection.symbol">
|
|
9
|
+
<span>{{ collection.name }}</span>
|
|
10
|
+
<small v-if="collection.symbol">({{ collection.symbol }})</small>
|
|
11
|
+
</h1>
|
|
12
|
+
<p v-if="collection.description">{{ shortDescription }}</p>
|
|
13
|
+
</div>
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
<div class="details">
|
|
16
|
+
<p>{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }} · Created at Block {{ collection.initBlock }}</p>
|
|
17
|
+
</div>
|
|
16
18
|
</div>
|
|
17
|
-
</div>
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
<CardLink
|
|
21
|
+
:to="{ name: 'id-collection', params: { id: collection.owner, collection: collection.address } }"
|
|
22
|
+
:title="`View ${collection.name}`"
|
|
23
|
+
/>
|
|
24
|
+
</slot>
|
|
23
25
|
</article>
|
|
24
26
|
</template>
|
|
25
27
|
|
|
@@ -31,7 +33,7 @@ const { collection } = defineProps<{
|
|
|
31
33
|
const shortDescription = computed(() => shortString(collection.description, 40, 30))
|
|
32
34
|
</script>
|
|
33
35
|
|
|
34
|
-
<style
|
|
36
|
+
<style>
|
|
35
37
|
article.collection-overview-card {
|
|
36
38
|
display: grid;
|
|
37
39
|
padding: var(--spacer);
|
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<section class="token-mint-timeline">
|
|
3
|
-
<
|
|
3
|
+
<slot :mints="mints" :loading="loading">
|
|
4
|
+
<h1>Mint Timeline</h1>
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
<div v-if="currentBlock" class="token-mint-timeline-items">
|
|
7
|
+
<TokenMintTimelineItem
|
|
8
|
+
v-for="mint of mints"
|
|
9
|
+
:mint="mint"
|
|
10
|
+
:key="mint.tx"
|
|
11
|
+
:block="currentBlock"
|
|
12
|
+
/>
|
|
13
|
+
<TokenMintTimelineItem v-if="! loading || mints.length">
|
|
14
|
+
<Account :address="collection.owner" class="account" />
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
<span class="amount">1<span>×</span></span>
|
|
17
|
+
<span class="price">Artist Mint</span>
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
<span class="time-ago"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - (token.untilBlock - 7200n)" /></span>
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
<span class="links">
|
|
22
|
+
<NuxtLink :to="`${config.public.blockExplorer}/nft/${token.collection}/${token.tokenId}`" target="_blank">
|
|
23
|
+
<Icon type="link" />
|
|
24
|
+
</NuxtLink>
|
|
25
|
+
</span>
|
|
26
|
+
</TokenMintTimelineItem>
|
|
27
|
+
</div>
|
|
27
28
|
|
|
28
|
-
|
|
29
|
+
<Loading v-if="loading || ! currentBlock" txt="Mint History..." />
|
|
30
|
+
</slot>
|
|
29
31
|
</section>
|
|
30
32
|
</template>
|
|
31
33
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="token-mint-timeline-item">
|
|
3
|
-
<slot>
|
|
3
|
+
<slot :mint="mint" :formatted-price="formattedPrice">
|
|
4
4
|
<Account :address="mint.address" class="account" />
|
|
5
5
|
|
|
6
6
|
<span class="amount">{{ mint.amount.toString() }}<span>×</span></span>
|
|
@@ -26,7 +26,7 @@ const props = defineProps({
|
|
|
26
26
|
block: BigInt,
|
|
27
27
|
})
|
|
28
28
|
|
|
29
|
-
const formattedPrice = computed(() => customFormatEther(props.mint.price))
|
|
29
|
+
const formattedPrice = computed(() => props.mint && customFormatEther(props.mint.price))
|
|
30
30
|
</script>
|
|
31
31
|
|
|
32
32
|
<style>
|
|
@@ -13,36 +13,47 @@
|
|
|
13
13
|
}"
|
|
14
14
|
>
|
|
15
15
|
<article class="token-overview-card">
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
16
|
+
<slot
|
|
17
|
+
:token="token"
|
|
18
|
+
:displayPrice="displayPrice"
|
|
19
|
+
:dollarPrice="dollarPrice"
|
|
20
|
+
:mintRequest="mintRequest"
|
|
21
|
+
:minted="minted"
|
|
22
|
+
:mintOpen="mintOpen"
|
|
23
|
+
:blocksRemaining="blocksRemaining"
|
|
24
|
+
:transactionFlowConfig="transactionFlowConfig"
|
|
25
|
+
>
|
|
26
|
+
<div class="content">
|
|
27
|
+
<header>
|
|
28
|
+
<h1>
|
|
29
|
+
<span>{{ token.name }} <span class="token-id">#{{ token.tokenId }}</span></span>
|
|
30
|
+
<span v-if="token.description" class="description">{{ shortString(token.description, 60, 30) }}</span>
|
|
31
|
+
</h1>
|
|
32
|
+
<p v-if="mintOpen" class="closes-in">Closes in {{ blocksRemaining }} {{ pluralize('block', Number(blocksRemaining))}}</p>
|
|
33
|
+
<p v-else class="closed-at">Closed at block {{ token.untilBlock }}</p>
|
|
34
|
+
</header>
|
|
35
|
+
<Image :src="token.artifact" :alt="token.name" />
|
|
36
|
+
<CardLink :to="{
|
|
37
|
+
name: 'id-collection-tokenId',
|
|
38
|
+
params: { id: collection.owner, collection: token.collection, tokenId: `${token.tokenId}` }
|
|
39
|
+
}">View {{ token.name }}</CardLink>
|
|
40
|
+
</div>
|
|
41
|
+
<footer>
|
|
42
|
+
<MintTokenBar
|
|
43
|
+
v-if="mintOpen"
|
|
44
|
+
v-model:mintCount="mintCount"
|
|
45
|
+
v-bind="{
|
|
46
|
+
token,
|
|
47
|
+
displayPrice,
|
|
48
|
+
dollarPrice,
|
|
49
|
+
mintRequest,
|
|
50
|
+
transactionFlowConfig,
|
|
51
|
+
minted,
|
|
52
|
+
}"
|
|
53
|
+
/>
|
|
54
|
+
<p class="muted" v-if="ownedBalance">You own {{ ownedBalance }} "{{ token.name }}" {{ pluralize('token', Number(ownedBalance)) }}</p>
|
|
55
|
+
</footer>
|
|
56
|
+
</slot>
|
|
46
57
|
</article>
|
|
47
58
|
</MintToken>
|
|
48
59
|
</template>
|