@visualizevalue/mint-app-base 0.1.74 → 0.1.76

package/app.config.ts

@@ -4,7 +4,7 @@ export default defineAppConfig({
       component: 'P5',
       name: 'P5 Renderer',
       version: 1n,
-      address: '0xe7bbcb8aaa9fd0acb720c24b4c44fad521ba621f',
+      address: '0x32B8Ffa14e7F77c252b6D43BEC5498FCef2b205F',
       description: 'Allows using P5 scripts as the artifact content'
     },
   ],

package/assets/styles/variables/components/alerts.css

@@ -0,0 +1,8 @@
+:root {
+
+  --alert-info-color: var(--color);
+  --alert-info-background-color: transparent;
+  --alert-info-border-color: var(--muted);
+
+}
+

package/assets/styles/variables/components.css

@@ -1,3 +1,4 @@
+@import "./components/alerts.css";
 @import "./components/breadcrumbs.css";
 @import "./components/buttons.css";
 @import "./components/cards.css";

package/components/Alert.client.vue

@@ -0,0 +1,71 @@
+<template>
+  <Transition name="fade">
+    <aside v-if="! dismissed" class="alert" :class="[type]">
+      <button v-if="dismissable" @click="dismiss" class="close">
+        <Icon type="close" />
+      </button>
+      <slot />
+    </aside>
+  </Transition>
+</template>
+
+<script setup>
+import { useLocalStorage } from '@vueuse/core'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+  },
+  dismiss: {
+    type: String,
+  }
+})
+
+const dismissKey = computed(() => `alert:${props.dismiss}`)
+
+const dismissed = useLocalStorage(dismissKey.value, false)
+const dismissable = computed(() => !! props.dismiss)
+
+const dismiss = () => {
+  dismissed.value = true
+}
+</script>
+
+<style scoped>
+.alert {
+  position: relative;
+  display: grid;
+  gap: var(--spacer-sm);
+
+  &.info {
+    border-color: var(--alert-info-border-color) !important;
+    background-color: var(--alert-info-background-color);
+    color: var(--alert-info-color);
+  }
+
+  :deep(> h1) {
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
+  :deep(> h1),
+  :deep(> p) {
+    font-size: var(--font-sm);
+  }
+
+  .close {
+    position: absolute;
+    width: var(--size-5);
+    padding: var(--size-1);
+    top: var(--spacer-sm);
+    right: var(--spacer-sm);
+    background: none;
+
+    &:--highlight {
+      background: none;
+    }
+  }
+}
+</style>
+

package/locales/en.json

@@ -87,12 +87,17 @@
   },
   "create": {
     "title": "Create New",
+    "alert_new": {
+      "title": "Create New Collection",
+      "text": "Note this just creates the collection smart contract. You'll be able to mint individual artifacts within the collection after collection deployment."
+    },
     "note": {
       "start": "Note: This should be a small file, preferably a simple SVG like",
       "link_text": "this one (273 bytes)",
       "end": "Try to make it less than 10kb."
     },
     "preview": {
+      "collection": "Collection",
       "token": "Token",
       "no_description": "No description"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/pages/[id]/create.vue

@@ -9,14 +9,19 @@
       class="inset"
     >
 
+      <Alert dismiss="create-new-collection-info">
+        <h1>{{ $t('create.alert_new.title') }}</h1>
+        <p>{{ $t('create.alert_new.text') }}</p>
+      </Alert>
+
       <article class="preview">
         <div class="visual">
           <Image v-if="image" :src="image" alt="Preview" />
           <ImagePreview v-else />
         </div>
         <h1>
-          <span :class="{ '': !title }">{{ title || $t('create.preview.token') }}</span>
-          <small :class="{ '': !symbol }">{{ symbol || '$T' }}</small>
+          <span :class="{ '': !title }">{{ title || $t('create.preview.collection') }}</span>
+          <small :class="{ '': !symbol }">{{ symbol || '$SYM' }}</small>
         </h1>
         <p :class="{ '': !description }">
           {{ description || $t('create.preview.no_description') }}