@visualizevalue/mint-app-base 0.1.33 → 0.1.34
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/assets/styles/prose.css
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
2
|
+
<slot v-bind="{ displayPrice, dollarPrice }">
|
|
3
|
+
<span>
|
|
4
|
+
{{ displayPrice.value }} {{ displayPrice.format }}
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
<span class="usd">(${{ dollarPrice }})</span>
|
|
7
|
+
</span>
|
|
8
|
+
</slot>
|
|
7
9
|
</template>
|
|
8
10
|
|
|
9
11
|
<script setup>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<div class="prose">
|
|
6
6
|
<h1>Mint Pricing</h1>
|
|
7
7
|
<p>Artifacts are priced based on the Ethereum network fees at the time of collecting.</p>
|
|
8
|
-
<p>Network fees (Gas fees) are an essential component of
|
|
8
|
+
<p>Network fees (Gas fees) are an essential component of securing and running decentralized blockchains.</p>
|
|
9
9
|
<p>
|
|
10
10
|
The cost to store and secure the object on the network is mirrored as compensation to the artist,
|
|
11
11
|
creating a direct link between network value and creator reward.
|
|
@@ -38,12 +38,70 @@
|
|
|
38
38
|
</tr>
|
|
39
39
|
</tbody>
|
|
40
40
|
</table>
|
|
41
|
+
<p>
|
|
42
|
+
Mints of more than one don't increase the Ethereum fee, resulting in higher
|
|
43
|
+
artist compensation.
|
|
44
|
+
</p>
|
|
45
|
+
<table>
|
|
46
|
+
<thead>
|
|
47
|
+
<tr>
|
|
48
|
+
<th>Amount</th>
|
|
49
|
+
<th>Ethereum fee</th>
|
|
50
|
+
<th>Artist <abbr title="Artist Compensation">comp.</abbr></th>
|
|
51
|
+
</tr>
|
|
52
|
+
</thead>
|
|
53
|
+
<tbody>
|
|
54
|
+
<tr>
|
|
55
|
+
<td>
|
|
56
|
+
<input
|
|
57
|
+
type="number"
|
|
58
|
+
min="1"
|
|
59
|
+
:value="amount"
|
|
60
|
+
@input="amount = $event.target.value"
|
|
61
|
+
@focus="animate = false"
|
|
62
|
+
:class="{ animate }"
|
|
63
|
+
/>
|
|
64
|
+
</td>
|
|
65
|
+
<td>
|
|
66
|
+
{{ ethPercentage }}%
|
|
67
|
+
<MintGasPrice v-slot="{ dollarPrice }" :mint-count="1">
|
|
68
|
+
<span>(${{ dollarPrice }})</span>
|
|
69
|
+
</MintGasPrice>
|
|
70
|
+
</td>
|
|
71
|
+
<td>
|
|
72
|
+
{{ artistPercentage }}%
|
|
73
|
+
<MintGasPrice v-slot="{ dollarPrice }" :mint-count="amount">
|
|
74
|
+
<span>(${{ dollarPrice }})</span>
|
|
75
|
+
</MintGasPrice>
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
</tbody>
|
|
79
|
+
</table>
|
|
41
80
|
</div>
|
|
42
81
|
</template>
|
|
43
82
|
</Popover>
|
|
44
83
|
</template>
|
|
45
84
|
|
|
46
85
|
<script setup>
|
|
86
|
+
const amount = ref('2')
|
|
87
|
+
const ethPercentage = computed(() => (100 / (parseInt(amount.value) + 1)).toFixed(2))
|
|
88
|
+
const artistPercentage = computed(() => (100 - ethPercentage.value).toFixed(2))
|
|
89
|
+
|
|
90
|
+
const animate = ref(true)
|
|
91
|
+
const runAnimation = async () => {
|
|
92
|
+
await delay(3000)
|
|
93
|
+
if (! animate.value) return
|
|
94
|
+
const amounts = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000]
|
|
95
|
+
const mints = takeRandom(amounts)
|
|
96
|
+
|
|
97
|
+
amount.value = mints
|
|
98
|
+
|
|
99
|
+
runAnimation()
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
onMounted(() => {
|
|
103
|
+
runAnimation()
|
|
104
|
+
})
|
|
47
105
|
</script>
|
|
48
106
|
|
|
49
107
|
<style scoped>
|
|
@@ -58,6 +116,28 @@
|
|
|
58
116
|
white-space: nowrap;
|
|
59
117
|
}
|
|
60
118
|
}
|
|
119
|
+
|
|
120
|
+
&:has(input) {
|
|
121
|
+
padding: 0;
|
|
122
|
+
width: 33%;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
input {
|
|
126
|
+
border-radius: 0;
|
|
127
|
+
border: 0;
|
|
128
|
+
|
|
129
|
+
&.animate:not(:focus) {
|
|
130
|
+
animation: highlight var(--speed-slow) infinite alternate;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
thead {
|
|
136
|
+
th {
|
|
137
|
+
text-align: left;
|
|
138
|
+
white-space: nowrap;
|
|
139
|
+
font-weight: var(--font-weight);
|
|
140
|
+
}
|
|
61
141
|
}
|
|
62
142
|
|
|
63
143
|
:deep(.usd) {
|
|
@@ -65,5 +145,14 @@
|
|
|
65
145
|
margin-left: auto;
|
|
66
146
|
}
|
|
67
147
|
}
|
|
148
|
+
|
|
149
|
+
@keyframes highlight {
|
|
150
|
+
from {
|
|
151
|
+
background: var(--button-background);
|
|
152
|
+
}
|
|
153
|
+
to {
|
|
154
|
+
background: var(--button-background-highlight);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
68
157
|
</style>
|
|
69
158
|
|
package/composables/priceFeed.ts
CHANGED
package/package.json
CHANGED
|
@@ -4,8 +4,6 @@ export default defineEventHandler(({ node, context }) => {
|
|
|
4
4
|
const sub = hostname.split('.')[0]?.toLowerCase() as string
|
|
5
5
|
const main = process.env.NUXT_PUBLIC_DOMAIN?.split('.')[0] || `localhost`
|
|
6
6
|
|
|
7
|
-
console.log('sub, main', sub, main)
|
|
8
|
-
|
|
9
7
|
if (sub !== main) {
|
|
10
8
|
context.subdomain = sub
|
|
11
9
|
}
|
package/utils/arrays.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { chunkArray } from '@visualizevalue/mint-utils'
|
|
1
|
+
export { chunkArray, takeRandom } from '@visualizevalue/mint-utils'
|