@visualizevalue/mint-app-base 0.0.7 → 0.1.0

package/app/components/TransactionFlow.vue

@@ -10,7 +10,7 @@
     <div class="text">
       <CheckSpinner class="spinner" />
       <h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
-      <p class="muted-light">{{ text.lead[step] }}</p>
+      <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
       <p v-if="error">{{ error }}</p>
     </div>
 
@@ -158,7 +158,7 @@ const initializeRequest = async (request = props.request) => {
   requesting.value = false
   waiting.value = false
 
-  if (props.autoCloseSuccess) {
+  if (props.autoCloseSuccess && step.value === 'complete') {
     await delay(2_000)
     open.value = false
     await delay(300) // Animations...
@@ -189,37 +189,31 @@ defineExpose({
 <style>
 .transaction-flow {
   display: grid;
-  justify-content: center;
   gap: var(--spacer);
 
   .spinner {
     width: var(--size-7);
     height: var(--size-7);
-    margin: calc(-1 * var(--size-4)) auto var(--size-3);
+    margin: calc(-1 * var(--size-4)) 0 var(--size-3);
   }
 
   .text {
+    width: 100%;
     height: min-content;
   }
 
   h1 {
     font-size: var(--font-lg);
     margin-bottom: var(--size-4);
-    text-align: center;
   }
 
   p {
     white-space: pre-wrap;
     width: 100%;
-    text-align: center;
 
     a {
       text-decoration: underline;
     }
   }
-
-  .block-explorer {
-    justify-self: center;
-  }
 }
 </style>

package/app/layouts/default.vue

@@ -5,20 +5,16 @@
     <main>
       <slot />
     </main>
-
-    <Navbar />
-
-    <ToggleDarkMode />
   </div>
 </template>
 
 <script setup>
-// Fetch and update price feed
+// Fetch and update USD price feed
 const priceFeed = usePriceFeedStore()
 onMounted(() => {
   priceFeed.fetchEthUsdPrice()
 
-  setInterval(() => priceFeed.fetchEthUsdPrice(), 60 * 60 * 1000)
+  setInterval(() => priceFeed.fetchEthUsdPrice(), 60 * 60 * 1000) // once per hour
 })
 </script>
 
@@ -26,17 +22,9 @@ onMounted(() => {
 main {
   display: grid;
   gap: var(--spacer);
-  min-height: 100dvh;
 
   &:not(:has(> .frame-sm)) {
     grid-auto-rows: min-content;
   }
-
-  /* Frame space around navbars */
-  padding: var(--navbar-height) 0 var(--navbar-height);
-
-  @media (--md) {
-    padding: var(--navbar-height) 0 0;
-  }
 }
 </style>

package/app/pages/[id]/[collection]/[tokenId]/index.vue

@@ -48,7 +48,7 @@ const breadcrumb = computed(() => {
   return [
     ...path,
     {
-      text: `${ collection.value.name }`,
+      text: `${ collection.value.name || 'Unnamed Collection' }`,
       to: { name: 'id-collection', params: { id: id.value, collection: collection.value.address } }
     },
     {

package/app/pages/[id]/[collection]/index.vue

@@ -29,7 +29,7 @@ const breadcrumb = computed(() => {
   return [
     ...path,
     {
-      text: collection.value.name
+      text: collection.value.name || 'Unnamed Collection'
     }
   ]
 })

package/app/pages/[id]/[collection]/mint.vue

@@ -2,10 +2,10 @@
   <Authenticated>
     <PageFrame :title="breadcrumb" class="inset wide" id="mint-token">
       <article class="preview">
-        <Image v-if="image" :src="image" alt="Preview" class="bordered" />
-        <VisualImagePreview v-else />
-        <h1 :class="{ 'muted-light': !name }">{{ name || 'Token' }}</h1>
-        <p :class="{ 'muted-light': !description }">
+        <Image v-if="image" :src="image" alt="Preview" />
+        <ImagePreview v-else />
+        <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
+        <p :class="{ '': !description }">
           {{ description || 'No description' }}
         </p>
       </article>

package/app/pages/[id]/create.vue

@@ -12,64 +12,64 @@
       <article class="preview">
         <div class="visual">
           <Image v-if="image" :src="image" alt="Preview" />
-          <VisualImagePreview v-else />
+          <ImagePreview v-else />
         </div>
         <h1>
-          <span :class="{ 'muted-light': !title }">{{ title || 'Token' }}</span>
-          <small :class="{ 'muted-light': !symbol }">{{ symbol || '$T' }}</small>
+          <span :class="{ '': !title }">{{ title || 'Token' }}</span>
+          <small :class="{ '': !symbol }">{{ symbol || '$T' }}</small>
         </h1>
-        <p :class="{ 'muted-light': !description }">
+        <p :class="{ '': !description }">
           {{ description || 'No description' }}
         </p>
       </article>
 
-      <form @submit.stop.prevent="deploy" class="card borderless">
-        <div class="card">
-          <div>
-            <FormSelectFile @change="setImage" />
-            <p v-if="! isSmall" class="muted"><small>Note: This should be a small file, prefferably a simple SVG like <a href="/example-contract-icon.svg" target="_blank">this one (273 bytes)</a>. Try to make it less than 10kb.</small></p>
-          </div>
-          <FormGroup>
-            <FormInput v-model="title" placeholder="Title" required class="title" />
-            <FormInput v-model="symbol" placeholder="Symbol" required />
-          </FormGroup>
-          <FormInput v-model="description" placeholder="Description" />
-        </div>
-
-        <Actions class="borderless">
-          <TransactionFlow
-            :request="deployRequest"
-            :text="{
-              title: {
-                chain: 'Switch Chain',
-                requesting: 'Confirm In Wallet',
-                waiting: '2. Transaction Submitted',
-                complete: '3. Success!'
-              },
-              lead: {
-                chain: 'Requesting to switch chain...',
-                requesting: 'Requesting Signature...',
-                waiting: 'Checking Deployment Transaction...',
-                complete: `New Collection Created...`,
-              },
-              action: {
-                confirm: 'Mint',
-                error: 'Retry',
-                complete: 'OK',
-              },
-            }"
-            @complete="deployed"
-            skip-confirmation
-            auto-close-success
-          >
-            <template #start="{ start }">
-              <Button @click="start">
+      <TransactionFlow
+        :request="deployRequest"
+        :text="{
+          title: {
+            chain: 'Switch Chain',
+            requesting: 'Confirm In Wallet',
+            waiting: '2. Transaction Submitted',
+            complete: '3. Success!'
+          },
+          lead: {
+            chain: 'Requesting to switch chain...',
+            requesting: 'Requesting Signature...',
+            waiting: 'Checking Deployment Transaction...',
+            complete: `New Collection Created...`,
+          },
+          action: {
+            confirm: 'Mint',
+            error: 'Retry',
+            complete: 'OK',
+          },
+        }"
+        @complete="deployed"
+        skip-confirmation
+        auto-close-success
+      >
+        <template #start="{ start }">
+          <form @submit.stop.prevent="start" class="card borderless">
+            <div class="card">
+              <div>
+                <FormSelectFile @change="setImage" />
+                <p v-if="! isSmall" class="muted"><small>Note: This should be a small file, prefferably a simple SVG like <a href="/example-contract-icon.svg" target="_blank">this one (273 bytes)</a>. Try to make it less than 10kb.</small></p>
+              </div>
+              <FormGroup>
+                <FormInput v-model="title" placeholder="Title" required class="title" />
+                <FormInput v-model="symbol" placeholder="Symbol" required />
+              </FormGroup>
+              <FormInput v-model="description" placeholder="Description" />
+            </div>
+
+            <Actions class="borderless">
+              <Button type="submit">
                 Deploy
               </Button>
-            </template>
-          </TransactionFlow>
-        </Actions>
-      </form>
+            </Actions>
+          </form>
+        </template>
+      </TransactionFlow>
 
     </PageFrame>
   </Authenticated>

package/app/pages/[id]/index.vue

@@ -7,10 +7,7 @@
         <HeaderSection v-if="isMe && collections.length">
           <h1>Your Collections</h1>
           <Actions>
-            <Button :to="{ name: `id-create`, params: { id } }" class="small">
-              <Icon type="plus" />
-              <span>Collection</span>
-            </Button>
+            <ButtonAddCollection :id="id" />
           </Actions>
         </HeaderSection>
       </template>
@@ -39,5 +36,3 @@ useMetaData({
 })
 </script>
 
-<style scoped>
-</style>

package/app/pages/profile/[address]/index.vue

@@ -5,10 +5,7 @@
     <ProfileHeader :address="address">
       <template v-if="isMe" #before>
         <Actions>
-          <Button :to="`https://app.ens.domains/${address}`" class="small">
-            <Icon type="edit-2" />
-            <span>Edit Profile</span>
-          </Button>
+          <ButtonEditProfile :address="address" />
         </Actions>
       </template>
     </ProfileHeader>

package/app/plugins/2.wagmi.ts

@@ -1,5 +1,5 @@
 import { VueQueryPlugin } from '@tanstack/vue-query'
-import { http, cookieStorage, createConfig, createStorage, WagmiPlugin, fallback } from '@wagmi/vue'
+import { http, cookieStorage, createConfig, createStorage, WagmiPlugin, fallback, type Config } from '@wagmi/vue'
 import { mainnet, sepolia, holesky, localhost } from '@wagmi/vue/chains'
 import { coinbaseWallet, injected, metaMask, walletConnect } from '@wagmi/vue/connectors'
 import type { CustomTransport, Transport } from 'viem'
@@ -16,7 +16,7 @@ export default defineNuxtPlugin(nuxtApp => {
 
   const transports = fallback(transportDefinitions)
 
-  const wagmiConfig = createConfig({
+  const wagmiConfig: Config = createConfig({
     chains: [mainnet, sepolia, holesky, localhost],
     batch: {
       multicall: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {
@@ -29,6 +29,7 @@
   "devDependencies": {
     "@types/node": "^22.5.4",
     "@vue/devtools-api": "^6.6.3",
+    "@wagmi/core": "^2.13.5",
     "eventemitter3": "^5.0.1",
     "nuxt": "latest",
     "typescript": "^5.5.4",

package/app/assets/styles/scroll.css

@@ -1,13 +0,0 @@
-.hide-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.scroll-x {
-  overflow-x: auto !important;
-  -webkit-overflow-scrolling: auto;
-}

package/app/assets/styles/text.css

@@ -1,14 +0,0 @@
-h1.display {
-  font-size: var(--font-display);
-}
-h1.title {
-  font-size: var(--font-title);
-}
-
-.lead {
-  font-size: var(--font-lg);
-}
-
-.centered {
-  text-align: center;
-}

package/app/assets/styles/utils.css

@@ -1,24 +0,0 @@
-.centered {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacer);
-}
-
-.muted {
-  color: var(--muted) !important;
-}
-
-.muted-light {
-  color: var(--muted-light) !important;
-
-  &a, &.button,
-  > a, > .button {
-    transition: color var(--speed);
-
-    :--highlight {
-      color: var(--color) !important;
-    }
-  }
-}

package/app/components/Avatar.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="avatar">
-    <Image v-if="user.pfp" :image="user.pfp" class="bordered round" />
-    <span v-else>{{ user.domain.slice(0, 2) }}</span>
-  </div>
-</template>
-
-<script setup>
-const { user } = defineProps({
-  user: Object,
-})
-</script>
-
-<style scoped>
-.avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 0;
-  padding-bottom: 100%;
-  position: relative;
-  container-type: inline-size;
-  container-name: avatar;
-
-  > * {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-  }
-
-  > span {
-    font-family: var(--font-family-ui);
-    text-transform: var(--text-transform-ui);
-    font-size: var(--font-sm);
-    color: var(--white);
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--font-sm);
-    background: var(--gray-z-2);
-    border-radius: 50%;
-    border: var(--border);
-
-    @container avatar (min-width: 2rem) {
-      font-size: var(--font-base);
-    }
-
-    @container avatar (min-width: 2.75rem) {
-      font-size: var(--font-lg);
-    }
-
-    @container avatar (min-width: 3.5rem) {
-      font-size: var(--font-xl);
-    }
-  }
-}
-</style>

package/app/components/CountDown.vue

@@ -1,153 +0,0 @@
-<template>
-<div v-if="countDownComplete" class="complete countdown">
-  <slot name="complete"></slot>
-</div>
-<div v-else class="countdown">
-  <slot name="header"></slot>
-  <span v-if="timeUntil">{{ countdown }}</span>
-  <span v-else>_d _h _m _s</span>
-  <slot />
-  <slot name="footer" />
-</div>
-</template>
-
-<script>
-export default {
-  emits: ['start', 'complete'],
-
-  props: {
-    adjustSeconds: {
-      type: Number,
-      default: 0,
-    },
-    until: {
-      type: Number,
-      default: 1632552931,
-    },
-    minimal: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data () {
-    return {
-      timeUntil: null,
-      interval: null,
-    }
-  },
-
-  computed: {
-    countDownComplete () {
-      return this.timeUntil <= 0
-    },
-
-    years () {
-      return Math.floor(this.timeUntil / 60 / 60 / 24 / 365)
-    },
-
-    accountedForYears () {
-      return this.years * 60 * 60 * 24 * 365
-    },
-
-    days () {
-      return Math.floor((this.timeUntil - this.accountedForYears) / 60 / 60 / 24)
-    },
-
-    accountedForDays () {
-      return this.days * 60 * 60 * 24
-    },
-
-    hours () {
-      return Math.floor((this.timeUntil - this.accountedForYears - this.accountedForDays) / 60 / 60)
-    },
-
-    accountedForHours () {
-      return this.hours * 60 * 60
-    },
-
-    minutes () {
-      return Math.floor((this.timeUntil - this.accountedForYears - this.accountedForDays - this.accountedForHours) / 60)
-    },
-
-    totalSeconds () {
-      return this.timeUntil / 60
-    },
-
-    seconds () {
-      return this.timeUntil % 60
-    },
-
-    countdown () {
-      const yearsString = this.years + 'y'
-      const daysString = this.days + 'd'
-      const hoursString = this.hours + 'h'
-      const minutesString = this.minutes + 'm'
-      const secondsString = this.seconds + 's'
-
-      return [
-        this.years && yearsString,
-        this.days && daysString,
-        this.hours && hoursString,
-        minutesString,
-        (!this.minimal || this.totalSeconds < 600) && secondsString,
-      ].filter(i => !!i).join(' ')
-    }
-  },
-
-  mounted () {
-    this.update()
-    this.interval = setInterval(() => this.update(), 1000)
-  },
-
-  beforeUnmount () {
-    clearInterval(this.interval)
-  },
-
-  methods: {
-    update () {
-      let start = this.until
-
-      start += this.adjustSeconds
-
-      this.timeUntil = start - nowInSeconds()
-
-      if (this.countDownComplete) {
-        this.$emit('complete')
-        clearInterval(this.interval)
-      }
-    },
-  },
-
-}
-</script>
-
-<style scoped>
-.countdown {
-  text-align: center;
-
-  small,
-  span {
-    display: block;
-  }
-
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  &.inline,
-  &.inline * {
-    display: inline !important;
-    text-align: left !important;
-    font-size: 1em !important;
-  }
-}
-
-.complete {
-  padding: 0;
-}
-</style>

package/app/components/IconLink.vue

@@ -1,29 +0,0 @@
-<template>
-  <NuxtLink :to="to" :title="title">
-    <Icon :type="type" />
-  </NuxtLink>
-</template>
-
-<script setup>
-defineProps({
-  to: String,
-  title: String,
-  type: String,
-})
-</script>
-
-<style scoped>
-a {
-  color: var(--muted);
-  transition: all var(--speed);
-  width: var(--size-5);
-  height: var(--size-5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:--highlight {
-    color: var(--color);
-  }
-}
-</style>