@visualizevalue/mint-app-base 0.1.75 → 0.1.77

package/.env.example

@@ -11,25 +11,29 @@ NUXT_PUBLIC_DESCRIPTION=To mint is a human right.
 # =========================
 #       ARTIST SCOPE
 # =========================
-NUXT_PUBLIC_CREATOR_ADDRESS=0xc8f8e2F59Dd95fF67c3d39109ecA2e2A017D4c8a
+NUXT_PUBLIC_CREATOR_ADDRESS=0xc8f8e2f59dd95ff67c3d39109eca2e2a017d4c8a
 
 # =========================
 #         SERVICES
 # =========================
-NUXT_PUBLIC_BLOCK_EXPLORER=https://etherscan.io
 NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
-NUXT_PUBLIC_RPC1=
-NUXT_PUBLIC_RPC2=
-NUXT_PUBLIC_RPC3=
 
 # =========================
-#         ONCHAIN
+#         MAINNET
 # =========================
-
-# # SEPOLIA
-# NUXT_PUBLIC_FACTORY_ADDRESS=0x750C5a6CFD40C9CaA48C31D87AC2a26101Acd517
-# NUXT_PUBLIC_CHAIN_ID=11155111
-
-# # MAINNET
+# NUXT_PUBLIC_BLOCK_EXPLORER=https://etherscan.io
 # NUXT_PUBLIC_FACTORY_ADDRESS=0xd717Fe677072807057B03705227EC3E3b467b670
 # NUXT_PUBLIC_CHAIN_ID=1
+# NUXT_PUBLIC_RPC1=https://eth.llamarpc.com
+# NUXT_PUBLIC_RPC2=https://eth.drpc.org
+# NUXT_PUBLIC_RPC3=https://1rpc.io/eth
+
+# =========================
+#         SEPOLIA
+# =========================
+NUXT_PUBLIC_BLOCK_EXPLORER=https://sepolia.etherscan.io
+NUXT_PUBLIC_FACTORY_ADDRESS=0x750C5a6CFD40C9CaA48C31D87AC2a26101Acd517
+NUXT_PUBLIC_CHAIN_ID=11155111
+NUXT_PUBLIC_RPC1=https://ethereum-sepolia-rpc.publicnode.com
+NUXT_PUBLIC_RPC2=https://sepolia.drpc.org
+NUXT_PUBLIC_RPC3=https://1rpc.io/sepolia

package/app.config.ts

@@ -1,12 +1,25 @@
 export default defineAppConfig({
-  knownRenderers: [
-    {
-      component: 'P5',
-      name: 'P5 Renderer',
-      version: 1n,
-      address: '0x32B8Ffa14e7F77c252b6D43BEC5498FCef2b205F',
-      description: 'Allows using P5 scripts as the artifact content'
-    },
-  ],
+  knownRenderers: {
+    // Mainnet
+    1: [
+      {
+        component: 'P5',
+        name: 'P5 Renderer',
+        version: 1n,
+        address: '0x32B8Ffa14e7F77c252b6D43BEC5498FCef2b205F',
+        description: 'Allows using P5 scripts as the artifact content'
+      },
+    ],
+    // Sepolia
+    11155111: [
+      {
+        component: 'P5',
+        name: 'P5 Renderer (Sepolia)',
+        version: 1n,
+        address: '0xfaDF2fB2F8a15Fc830c176B71D2c905E95f4169e',
+        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/components/Renderer/Overview.client.vue

@@ -42,11 +42,12 @@ const props = defineProps(['collection'])
 
 const appConfig = useAppConfig()
 const store = useOnchainStore()
+const mainChainId = useMainChainId()
 
 const installedRenderers = computed(() => props.collection.renderers)
 
 const availableRenderers = computed(
-  () => appConfig.knownRenderers.filter(r =>
+  () => appConfig.knownRenderers[mainChainId].filter(r =>
     !installedRenderers.value.map(cr => cr.address).includes(r.address)
   )
 )

package/composables/createMint.ts

@@ -43,13 +43,14 @@ export const useCreateMintData = () => {
 // Expose the mint component based on the selected renderer
 export const useCreateMintRendererComponent = (collection: Collection) => {
   const appConfig = useAppConfig()
+  const mainChainId = useMainChainId()
   const rendererAddress: Ref<string | null> = computed(() => {
     if (! collection.renderers?.length) return null
 
     return collection.renderers[renderer.value].address.toLowerCase()
   })
 
-  const component = computed(() => appConfig.knownRenderers
+  const component = computed(() => appConfig.knownRenderers[mainChainId]
     .find((r) =>
       r.address.toLowerCase() === rendererAddress.value
     )?.component || 'Base'

package/index.d.ts

@@ -3,7 +3,11 @@ import { Renderer } from './utils/types'
 declare module 'nuxt/schema' {
   interface AppConfigInput {
     // Known renderers besides the base renderer
-    knownRenderers: Renderer[],
+    knownRenderers: {
+      1: Renderer[],
+      11155111?: Renderer[],
+      17000?: Renderer[],
+    }
   }
 }
 

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/nuxt.config.ts

@@ -16,7 +16,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       blockExplorer: 'https://etherscan.io',
-      chainId: 1337,
+      chainId: 1,
       creatorAddress: '',
       defaultAvatar: '/icons/opepen.svg',
       description: 'To mint is a human right.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "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') }}

package/plugins/2.wagmi.ts

@@ -6,6 +6,7 @@ import type { CustomTransport, Transport } from 'viem'
 
 export default defineNuxtPlugin(nuxtApp => {
   const title = nuxtApp.$config.public.title || 'Mint'
+  const mainChainId = nuxtApp.$config.public.chainId
 
   const connectors: CreateConnectorFn[] = [
     injected(),
@@ -46,7 +47,11 @@ export default defineNuxtPlugin(nuxtApp => {
     }),
     ssr: true,
     transports: {
-      [mainnet.id]: transports,
+      [mainnet.id]: mainChainId == 1
+        // Use configured transports if we're on mainnet
+        ? transports
+        // Default to viem public rpc if not on mainnet
+        : http(),
       [sepolia.id]: transports,
       [holesky.id]: transports,
       [localhost.id]: transports,