@visualizevalue/mint-app-base 0.1.0 → 0.1.2
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/assets/styles/base.css +11 -7
- package/app/assets/styles/forms.css +1 -1
- package/app/assets/styles/prose.css +1 -1
- package/app/assets/styles/variables/borders.css +4 -3
- package/app/assets/styles/variables/colors.css +4 -32
- package/app/assets/styles/variables/effects.css +0 -5
- package/app/assets/styles/web3-modals.css +1 -1
- package/app/components/Breadcrumbs.vue +9 -3
- package/app/components/Collection/OverviewCard.vue +3 -3
- package/app/components/Image.client.vue +3 -3
- package/app/components/ImagePreview.vue +4 -4
- package/app/components/MintTokenBar.vue +1 -0
- package/app/components/TransactionFlow.vue +2 -1
- package/package.json +44 -44
- package/app/components/Page/FrameSM.vue +0 -33
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
html {
|
|
2
|
+
/*
|
|
3
|
+
* Color settings
|
|
4
|
+
*/
|
|
5
|
+
background-color: var(--background);
|
|
6
|
+
color: var(--color);
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
* Font settings
|
|
10
|
+
*/
|
|
2
11
|
font-family: var(--font-family);
|
|
3
12
|
line-height: var(--line-height-base);
|
|
4
13
|
font-weight: var(--font-weight);
|
|
5
14
|
font-size: var(--rem);
|
|
6
15
|
font-style: normal;
|
|
7
16
|
letter-spacing: var(--letter-spacing);
|
|
8
|
-
|
|
9
|
-
background-color: var(--background);
|
|
10
|
-
color: var(--color);
|
|
11
|
-
|
|
12
17
|
text-transform: var(--text-transform);
|
|
13
|
-
|
|
14
18
|
font-synthesis: none;
|
|
15
19
|
text-rendering: optimizeLegibility;
|
|
16
20
|
-webkit-font-smoothing: antialiased;
|
|
@@ -18,8 +22,8 @@
|
|
|
18
22
|
-webkit-text-size-adjust: 100%;
|
|
19
23
|
}
|
|
20
24
|
|
|
21
|
-
html,
|
|
22
25
|
body {
|
|
23
26
|
overflow-x: hidden;
|
|
24
27
|
}
|
|
25
28
|
|
|
29
|
+
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
|
|
3
|
-
--border-color: var(--
|
|
4
|
-
--border-color-light: var(--gray-z-4);
|
|
5
|
-
--border-color-dark: var(--gray-z-1);
|
|
3
|
+
--border-color: var(--color);
|
|
6
4
|
--border-width: 1px;
|
|
5
|
+
|
|
7
6
|
--border: var(--border-width) solid var(--border-color);
|
|
8
7
|
--border-dark: var(--border-width) solid var(--border-color-dark);
|
|
8
|
+
|
|
9
9
|
--border-shadow: 0 0 0 var(--border-width) var(--border-color);
|
|
10
|
+
|
|
10
11
|
--border-radius: 0;
|
|
11
12
|
|
|
12
13
|
}
|
|
@@ -1,48 +1,20 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* GRAYS */
|
|
3
|
-
--white:
|
|
4
|
-
--gray
|
|
5
|
-
--gray-100: rgb(245,245,245);
|
|
6
|
-
--gray-200: rgb(229,229,229);
|
|
7
|
-
--gray-300: rgb(212,212,212);
|
|
8
|
-
--gray-400: rgb(163,163,163);
|
|
9
|
-
--gray-500: rgb(115,115,115);
|
|
10
|
-
--gray-600: rgb(82,82,82);
|
|
11
|
-
--gray-700: rgb(64,64,64);
|
|
12
|
-
--gray-800: rgb(38,38,38);
|
|
13
|
-
--gray-900: rgb(19,19,19);
|
|
14
|
-
--gray-950: rgb(10,10,10);
|
|
3
|
+
--white: white;
|
|
4
|
+
--gray: gray;
|
|
15
5
|
--black: rgb(0, 0, 0);
|
|
16
6
|
|
|
17
7
|
/* COLORS */
|
|
18
|
-
--red: #EF4444;
|
|
19
|
-
--green: #94E337;
|
|
20
8
|
--blue: #3263D0;
|
|
21
|
-
|
|
22
|
-
/* THEME COLORS */
|
|
23
|
-
--muted: var(--gray-z-6);
|
|
24
|
-
--error: var(--red);
|
|
25
|
-
--success: var(--green);
|
|
26
9
|
--primary: var(--blue);
|
|
27
|
-
--secondary: var(--blue);
|
|
28
10
|
|
|
29
11
|
/*
|
|
30
12
|
* Z-COLORS
|
|
31
|
-
* This makes migrating to dark/light modes much easier
|
|
13
|
+
* This makes migrating to dark/light modes much easier.
|
|
32
14
|
* We're not thinking about color per se, but about the viewers perspective.
|
|
33
15
|
*/
|
|
34
16
|
--background: var(--white);
|
|
35
|
-
--
|
|
36
|
-
--gray-z-1: var(--gray-100);
|
|
37
|
-
--gray-z-2: var(--gray-200);
|
|
38
|
-
--gray-z-3: var(--gray-300);
|
|
39
|
-
--gray-z-4: var(--gray-400);
|
|
40
|
-
--gray-z-5: var(--gray-500);
|
|
41
|
-
--gray-z-6: var(--gray-600);
|
|
42
|
-
--gray-z-7: var(--gray-700);
|
|
43
|
-
--gray-z-8: var(--gray-800);
|
|
44
|
-
--gray-z-9: var(--gray-900);
|
|
45
|
-
--gray-z-10: var(--gray-950);
|
|
17
|
+
--muted: var(--gray);
|
|
46
18
|
--color: var(--black);
|
|
47
19
|
}
|
|
48
20
|
|
|
@@ -14,6 +14,12 @@ defineProps({
|
|
|
14
14
|
</script>
|
|
15
15
|
|
|
16
16
|
<style scoped>
|
|
17
|
+
:root {
|
|
18
|
+
--breadcrumb-nav-color: var(--muted);
|
|
19
|
+
--breadcrumb-nav-active-color: var(--muted);
|
|
20
|
+
--breadcrumb-separator-color: var(--muted);
|
|
21
|
+
}
|
|
22
|
+
|
|
17
23
|
.breadcrumb {
|
|
18
24
|
display: flex;
|
|
19
25
|
align-items: center;
|
|
@@ -33,18 +39,18 @@ defineProps({
|
|
|
33
39
|
}
|
|
34
40
|
|
|
35
41
|
> span > a {
|
|
36
|
-
color: var(--
|
|
42
|
+
color: var(--breadcrumb-nav-color);
|
|
37
43
|
transition: all var(--speed);
|
|
38
44
|
|
|
39
45
|
&.router-link-active-exact,
|
|
40
46
|
&:--highlight {
|
|
41
|
-
color: var(--color);
|
|
47
|
+
color: var(--breadcrumb-nav-active-color);
|
|
42
48
|
}
|
|
43
49
|
}
|
|
44
50
|
|
|
45
51
|
> span:not(:last-child):after {
|
|
46
52
|
content: '/';
|
|
47
|
-
color: var(--);
|
|
53
|
+
color: var(--breadcrumb-separator-color);
|
|
48
54
|
margin-left: var(--spacer-sm);
|
|
49
55
|
}
|
|
50
56
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<p v-if="collection.description">{{ shortDescription }}</p>
|
|
12
12
|
</div>
|
|
13
13
|
|
|
14
|
-
<div>
|
|
14
|
+
<div class="details">
|
|
15
15
|
<p>{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }} · Created at Block {{ collection.initBlock }}</p>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
@@ -67,8 +67,8 @@ article.collection-overview-card {
|
|
|
67
67
|
gap: var(--spacer-sm);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
>
|
|
71
|
-
color: var(--);
|
|
70
|
+
> .details {
|
|
71
|
+
color: var(--muted);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
h1 {
|
|
@@ -61,7 +61,7 @@ const imageLoaded = () => {
|
|
|
61
61
|
<style scoped>
|
|
62
62
|
article.image {
|
|
63
63
|
overflow: hidden;
|
|
64
|
-
background-color: var(--
|
|
64
|
+
background-color: var(--background);
|
|
65
65
|
overflow: hidden;
|
|
66
66
|
position: relative;
|
|
67
67
|
height: 0;
|
|
@@ -106,10 +106,10 @@ article.image {
|
|
|
106
106
|
|
|
107
107
|
@keyframes imageLoading {
|
|
108
108
|
from {
|
|
109
|
-
background-color: var(--
|
|
109
|
+
background-color: var(--background);
|
|
110
110
|
}
|
|
111
111
|
to {
|
|
112
|
-
background-color: var(--
|
|
112
|
+
background-color: var(--muted);
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
</style>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
<rect width="64" height="64" fill="var(--
|
|
4
|
-
<path d="M39 23H25C23.8954 23 23 23.8954 23 25V39C23 40.1046 23.8954 41 25 41H39C40.1046 41 41 40.1046 41 39V25C41 23.8954 40.1046 23 39 23Z" stroke="var(--
|
|
5
|
-
<path d="M28.5 30C29.3284 30 30 29.3284 30 28.5C30 27.6716 29.3284 27 28.5 27C27.6716 27 27 27.6716 27 28.5C27 29.3284 27.6716 30 28.5 30Z" stroke="var(--
|
|
6
|
-
<path d="M41 35L36 30L25 41" stroke="var(--
|
|
3
|
+
<rect width="64" height="64" fill="var(--background)"/>
|
|
4
|
+
<path d="M39 23H25C23.8954 23 23 23.8954 23 25V39C23 40.1046 23.8954 41 25 41H39C40.1046 41 41 40.1046 41 39V25C41 23.8954 40.1046 23 39 23Z" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M28.5 30C29.3284 30 30 29.3284 30 28.5C30 27.6716 29.3284 27 28.5 27C27.6716 27 27 27.6716 27 28.5C27 29.3284 27.6716 30 28.5 30Z" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M41 35L36 30L25 41" stroke="var(--muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
7
|
</svg>
|
|
8
8
|
</template>
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
:x-close="false"
|
|
8
8
|
class="transaction-flow"
|
|
9
9
|
>
|
|
10
|
+
<slot name="before" />
|
|
11
|
+
|
|
10
12
|
<div class="text">
|
|
11
|
-
<CheckSpinner class="spinner" />
|
|
12
13
|
<h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
|
|
13
14
|
<p v-if="text.lead[step]">{{ text.lead[step] }}</p>
|
|
14
15
|
<p v-if="error">{{ error }}</p>
|
package/package.json
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
}
|
|
2
|
+
"name": "@visualizevalue/mint-app-base",
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./nuxt.config.ts",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "nuxt build",
|
|
8
|
+
"dev": "nuxt dev --port 1618",
|
|
9
|
+
"generate": "nuxt generate",
|
|
10
|
+
"preview": "nuxt preview",
|
|
11
|
+
"postinstall": "nuxt prepare"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"@csstools/postcss-global-data": "^2.1.1",
|
|
15
|
+
"@pinia-plugin-persistedstate/nuxt": "^1.2.1",
|
|
16
|
+
"@pinia/nuxt": "^0.5.3",
|
|
17
|
+
"@tanstack/vue-query": ">=5.45.0",
|
|
18
|
+
"@visualizevalue/mint-utils": "workspace:@visualizevalue/mint-utils@^0.0.1",
|
|
19
|
+
"@vueuse/components": "^10.11.0",
|
|
20
|
+
"@vueuse/core": "^11.0.3",
|
|
21
|
+
"@vueuse/nuxt": "^11.0.3",
|
|
22
|
+
"@wagmi/vue": "^0.0.40",
|
|
23
|
+
"buffer": "^6.0.3",
|
|
24
|
+
"eventemitter3": "^5.0.1",
|
|
25
|
+
"feather-icons": "^4.29.2",
|
|
26
|
+
"multiformats": "^13.2.2",
|
|
27
|
+
"postcss-custom-media": "^10.0.6",
|
|
28
|
+
"postcss-custom-selectors": "^7.1.10",
|
|
29
|
+
"postcss-nested": "^6.0.1",
|
|
30
|
+
"postcss-preset-env": "^9.5.13",
|
|
31
|
+
"viem": "2.x",
|
|
32
|
+
"vue-feather": "^2.0.0",
|
|
33
|
+
"vue-router": "^4.3.2",
|
|
34
|
+
"vue-virtual-scroller": "^2.0.0-beta.8"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@types/node": "^22.5.4",
|
|
38
|
+
"@vue/devtools-api": "^6.6.3",
|
|
39
|
+
"@wagmi/core": "^2.13.5",
|
|
40
|
+
"eventemitter3": "^5.0.1",
|
|
41
|
+
"nuxt": "latest",
|
|
42
|
+
"typescript": "^5.5.4",
|
|
43
|
+
"vite": "^5.4.3"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<section class="frame-sm">
|
|
3
|
-
<slot />
|
|
4
|
-
</section>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<style scoped>
|
|
8
|
-
.frame-sm {
|
|
9
|
-
width: 100%;
|
|
10
|
-
max-width: var(--dialog-width);
|
|
11
|
-
min-height: 100dvh;
|
|
12
|
-
padding: var(--spacer);
|
|
13
|
-
margin: 0 auto;
|
|
14
|
-
display: flex;
|
|
15
|
-
height: fit-content;
|
|
16
|
-
align-self: center;
|
|
17
|
-
flex-direction: column;
|
|
18
|
-
gap: var(--spacer-lg);
|
|
19
|
-
justify-content: center;
|
|
20
|
-
align-items: center;
|
|
21
|
-
background: var(--gray-z-1);
|
|
22
|
-
|
|
23
|
-
:deep(> div) {
|
|
24
|
-
width: 100%;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media (--sm) {
|
|
28
|
-
min-height: 0;
|
|
29
|
-
margin: 0 auto 10vh;
|
|
30
|
-
border: var(--border);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
</style>
|