@visualizevalue/mint-app-base 0.0.1

package/app/assets/styles/utils.css

@@ -0,0 +1,24 @@
+.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/assets/styles/variables.css

@@ -0,0 +1,195 @@
+:root {
+  /* GRAYS */
+  --white:    rgb(255,255,255);
+  --gray-50:  rgb(250,250,250);
+  --gray-100: rgb(245,245,245);
+  --gray-200: rgb(229,229,229);
+  --gray-300: rgb(212,212,212);
+  --gray-400: rgb(163,163,163);
+  --gray-500: rgb(115,115,115);
+  --gray-600: rgb(82,82,82);
+  --gray-700: rgb(64,64,64);
+  --gray-800: rgb(38,38,38);
+  --gray-900: rgb(19,19,19);
+  --gray-950: rgb(10,10,10);
+  --black:    rgb(0, 0, 0);
+
+  /* SEMI */
+  --white-semi:    rgba(255,255,255, 0.7);
+  --gray-50-semi:  rgba(250,250,250, 0.7);
+  --gray-100-semi: rgba(245,245,245, 0.7);
+  --gray-200-semi: rgba(229,229,229, 0.7);
+  --gray-300-semi: rgba(212,212,212, 0.7);
+  --gray-400-semi: rgba(163,163,163, 0.7);
+  --gray-500-semi: rgba(115,115,115, 0.7);
+  --gray-600-semi: rgba(82,82,82, 0.7);
+  --gray-700-semi: rgba(64,64,64, 0.7);
+  --gray-800-semi: rgba(38,38,38, 0.7);
+  --gray-900-semi: rgba(23,23,23, 0.7);
+  --gray-950-semi: rgba(10,10,10, 0.7);
+  --black-semi:    rgba(0, 0, 0, 0.7);
+
+  /* COLORS */
+  --red: #EF4444;
+  --green: #94E337;
+
+  /* PRESET COLORS */
+  --error: var(--red);
+  --success: var(--green);
+
+  /* SIZES */
+  --100vh: 100dvh;
+  --size-0: 0.125rem;
+  --size-1: 0.25rem;
+  --size-2: 0.5rem;
+  --size-3: 0.75rem;
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-7: 2rem;
+  --size-8: 3rem;
+  --size-9: 4.5rem;
+  --size-10: 6rem;
+
+  --spacer-xs: var(--size-0);
+  --spacer-sm: var(--size-2);
+  --spacer: var(--size-4);
+  --spacer-lg: var(--size-7);
+  --spacer-xl: var(--size-9);
+
+  --border-radius: var(--size-1);
+
+  /* FONTS */
+  --font-family-main: serif;
+  --font-family-prose: var(--font-family-main);
+  --font-family-ui:    var(--font-family-main);
+
+  --font-base: 13px;
+  --font-base: 15px;
+  --font-xs: calc(var(--font-base) * 0.8);
+  --font-sm: calc(var(--font-base) * 0.8);
+  --font-lg: min(calc(var(--font-base) + 1vw * 2), calc(var(--font-base) * 1.25));
+  --font-xl: min(calc(var(--font-lg) + 1vw * 2), calc(var(--font-lg) * 1.25));
+  --font-title: min(calc(var(--size-4) + 1vw * 2), var(--size-7));
+  --font-display: min(calc(var(--size-6) + 1vw * 2), var(--size-8));
+  --font-weight-light: 300;
+  --font-weight: normal;
+  --font-weight-bold: bold;
+  --rem: 16px;
+
+  --letter-spacing-sm: -0.025em;
+  --letter-spacing: 0.025em;
+  --letter-spacing-md: 0.05em;
+  --letter-spacing-lg: 0.1em;
+
+  --line-height-sm: 105%;
+  --line-height:    100%;
+  --line-height-md: 120%;
+  --line-height-lg: 160%;
+
+  --text-transform: none;
+
+  /* ANIMATION */
+  --speed-fast: 0.15s;
+  --speed:      0.3s;
+  --speed-slow: 0.75s;
+
+  /* COMPONENTS */
+  --dialog-width: 27rem;
+  --content-width: 40rem;
+  --content-width-lg: 72rem;
+  --navbar-height: calc(var(--size-8) + var(--size-4));
+  --navbar-width: calc(var(--size-8) + var(--size-4));
+
+  /* BORDERS */
+  --border-color: var(--gray-z-2);
+  --border-color-light: var(--gray-z-4);
+  --border-color-dark: var(--gray-z-1);
+  --border: 1px solid var(--border-color);
+  --border-dark: 1px solid var(--border-color-dark);
+
+  /* SHADOWS */
+  --shadow:
+    0 var(--size-0) var(--size-2) var(--gray-z-1-semi),
+    0 var(--size-2) var(--size-7) calc(-1 * var(--size-5)) var(--gray-z-3-semi);
+
+  --shadow-xl:
+    0 var(--size-3) var(--size-8) var(--gray-z-3-semi),
+    0 var(--size-8) var(--size-6) calc(-1 * var(--size-8)) var(--gray-z-6-semi);
+
+  /* BACKGROUNDS */
+  --blur: blur(var(--size-1));
+}
+
+/* DARK */
+:root {
+  --background: var(--black);
+  --gray-z-0: var(--gray-950);
+  --gray-z-1: var(--gray-900);
+  --gray-z-2: var(--gray-800);
+  --gray-z-3: var(--gray-700);
+  --gray-z-4: var(--gray-600);
+  --gray-z-5: var(--gray-500);
+  --gray-z-6: var(--gray-400);
+  --gray-z-7: var(--gray-300);
+  --gray-z-8: var(--gray-200);
+  --gray-z-9: var(--gray-100);
+  --gray-z-10: var(--gray-50);
+  --color: var(--white);
+  --muted: var(--gray-z-6);
+  --muted-light: var(--gray-z-4);
+
+  --background-0: rgba(0, 0, 0, 0);
+  --background-semi: var(--black-semi);
+  --gray-z-0-semi: var(--gray-950-semi);
+  --gray-z-1-semi: var(--gray-900-semi);
+  --gray-z-2-semi: var(--gray-800-semi);
+  --gray-z-3-semi: var(--gray-700-semi);
+  --gray-z-4-semi: var(--gray-600-semi);
+  --gray-z-5-semi: var(--gray-500-semi);
+  --gray-z-6-semi: var(--gray-400-semi);
+  --gray-z-7-semi: var(--gray-300-semi);
+  --gray-z-8-semi: var(--gray-200-semi);
+  --gray-z-9-semi: var(--gray-100-semi);
+  --gray-z-10-semi: var(--gray-50-semi);
+  --color-semi: var(--white-semi);
+}
+
+/* LIGHT */
+.lightmode {
+  --background: var(--white);
+  --gray-z-0: var(--gray-50);
+  --gray-z-1: var(--gray-100);
+  --gray-z-2: var(--gray-200);
+  --gray-z-3: var(--gray-300);
+  --gray-z-4: var(--gray-400);
+  --gray-z-5: var(--gray-500);
+  --gray-z-6: var(--gray-600);
+  --gray-z-7: var(--gray-700);
+  --gray-z-8: var(--gray-800);
+  --gray-z-9: var(--gray-900);
+  --gray-z-10: var(--gray-950);
+  --color: var(--black);
+
+  --background-0: rgba(255, 255, 255, 0);
+  --background-semi: var(--white-semi);
+  --gray-z-0-semi: var(--gray-50-semi);
+  --gray-z-1-semi: var(--gray-100-semi);
+  --gray-z-2-semi: var(--gray-200-semi);
+  --gray-z-3-semi: var(--gray-300-semi);
+  --gray-z-4-semi: var(--gray-400-semi);
+  --gray-z-5-semi: var(--gray-500-semi);
+  --gray-z-6-semi: var(--gray-600-semi);
+  --gray-z-7-semi: var(--gray-700-semi);
+  --gray-z-8-semi: var(--gray-800-semi);
+  --gray-z-9-semi: var(--gray-900-semi);
+  --gray-z-10-semi: var(--gray-950-semi);
+  --color-semi: var(--black-semi);
+}
+
+/* SCALING */
+@media (--md) {
+  :root {
+    --font-sm: calc(var(--size-3) + var(--size-0));
+  }
+}

package/app/assets/styles/web3-modals.css

@@ -0,0 +1,26 @@
+wcm-modal {
+  --wcm-z-index: 9999;
+  --wcm-overlay-background-color: var(--gray-z-1-semi);
+  --wcm-overlay-backdrop-filter: var(--blur);
+}
+
+#walletconnect-wrapper {
+  .walletconnect-modal__base,
+  .walletconnect-modal__base * {
+    color: black;
+  }
+}
+
+/* Metamask */
+.select-modal {
+  > div:first-child {
+    opacity: 1 !important;
+    background: linear-gradient(
+      45deg,
+      var(--gray-z-0-semi),
+      var(--gray-z-1-semi),
+      var(--gray-z-2-semi)
+    ) !important;
+    backdrop-filter: var(--blur) !important;
+  }
+}

package/app/components/Account.client.vue

@@ -0,0 +1,20 @@
+<template>
+  <span>
+    {{ display }}
+  </span>
+</template>
+
+<script setup>
+import { useEnsName } from '@wagmi/vue'
+
+const props = defineProps(['address'])
+
+const address = computed(() => props.address?.value || props.address)
+
+const { data: ens } = await useEnsName({
+  address,
+  chainId: 1,
+})
+
+const display = computed(() => ens.value || shortAddress(address.value))
+</script>

package/app/components/Actions.vue

@@ -0,0 +1,25 @@
+<template>
+  <menu>
+    <slot />
+  </menu>
+</template>
+
+<style scoped>
+menu {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  gap: var(--spacer);
+  justify-content: flex-end;
+
+  &:empty {
+    display: none;
+  }
+
+  &.centered {
+    justify-content: center;
+  }
+}
+</style>

package/app/components/AppHeader.vue

@@ -0,0 +1,99 @@
+<template>
+  <header :style="{ borderColor: y > 10 ? 'var(--border-color)' : 'transparent' }">
+    <ClientOnly>
+      <Breadcrumbs :items="breadcrumbs" />
+
+      <MintGasPricePopover />
+
+      <Connect v-if="! isConnected" />
+      <NuxtLink v-else :to="{ name: 'profile-address', params: { address: address?.toLowerCase() } }">
+        <Account :address="address" />
+      </NuxtLink>
+    </ClientOnly>
+  </header>
+</template>
+
+<script setup>
+import { useAccount } from '@wagmi/vue'
+import { useWindowScroll } from '@vueuse/core'
+
+const { isConnected, address } = useAccount()
+const appBreadcumbs = useAppBreadcrumb()
+const title = useAppTitle()
+const id = useArtistId()
+const breadcrumbs = computed(() => {
+  const all = [
+    {
+      to: id.value === address.value?.toLowerCase()
+        ? { name: 'id', params: { id: id.value } }
+        : `/`,
+      text: title.value
+    },
+    ...appBreadcumbs.value,
+  ]
+
+  return all
+})
+
+const { y } = useWindowScroll()
+</script>
+
+<style scoped>
+header {
+  height: var(--navbar-height);
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacer);
+  padding: var(--size-3) var(--size-6);
+
+  @media (--md) {
+    gap: var(--spacer-lg);
+  }
+
+  :deep(> .breadcrumb) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    justify-content: flex-start;
+    white-space: nowrap;
+
+    > *:first-child:last-child {
+      a {
+        color: var(--color);
+      }
+    }
+  }
+
+  :deep(> .gas) {
+    display: none;
+    margin-left: auto;
+    white-space: nowrap;
+    width: min-content;
+
+    @media (--md) {
+      display: block;
+    }
+  }
+
+  :deep(> .button:last-child) {
+    margin-right: calc(-1 * var(--size-3));
+  }
+
+  &:has(+ main > .frame.full) {
+    border-color: var(--border-color) !important;
+  }
+}
+
+/* COLORS */
+header {
+  background: var(--background-semi);
+  backdrop-filter: blur(var(--size-1));
+  border-bottom: var(--border);
+  border-color: transparent;
+}
+</style>

package/app/components/Authenticated.client.vue

@@ -0,0 +1,17 @@
+<template>
+  <slot v-if="isConnected" />
+  <Loading v-else />
+</template>
+
+<script setup>
+import { useAccount } from '@wagmi/vue'
+
+const { isConnected } = useAccount()
+
+const check = () => {
+  if (! isConnected.value) return navigateTo('/', { replace: true })
+}
+
+onMounted(() => check())
+watch(isConnected, () => check())
+</script>

package/app/components/Avatar.vue

@@ -0,0 +1,61 @@
+<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/BlocksTimeAgo.client.vue

@@ -0,0 +1,20 @@
+<template>
+  <span>
+    <template v-if="days">{{ days }}d</template>
+    <template v-else-if="hours">{{ hours }}h</template>
+    <template v-else-if="minutes">{{ minutes }}m</template>
+    <template v-else>&#60;1m</template>
+    <slot> ago</slot>
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  blocks: BigInt,
+})
+
+const seconds = computed(() => blocksToSeconds(props.blocks))
+const minutes = computed(() => Math.floor(seconds.value / 60))
+const hours = computed(() => Math.floor(minutes.value / 60))
+const days = computed(() => Math.floor(hours.value / 24))
+</script>

package/app/components/Breadcrumbs.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="breadcrumb">
+    <span v-for="item in items">
+      <NuxtLink v-if="item.to" :to="item.to">{{ item.text }}</NuxtLink>
+      <template v-else>{{ item.text }}</template>
+    </span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  items: Array,
+})
+</script>
+
+<style scoped>
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacer-sm);
+
+  > span {
+    white-space: nowrap;
+
+    &:has(+ span > a) {
+      display: none;
+
+      @media (--md) {
+        display: inherit;
+      }
+    }
+  }
+
+  > span > a {
+    color: var(--gray-z-5);
+    transition: all var(--speed);
+
+    &.router-link-active-exact,
+    &:--highlight {
+      color: var(--color);
+    }
+  }
+
+  > span:not(:last-child):after {
+    content: '/';
+    color: var(--gray-z-3);
+    margin-left: var(--spacer-sm);
+  }
+}
+</style>

package/app/components/Button.vue

@@ -0,0 +1,98 @@
+<template>
+  <NuxtLink v-if="to" :to="to" class="button" :exact="exact" :target="target"><slot /></NuxtLink>
+  <button v-else class="button"><slot /></button>
+</template>
+
+<script setup>
+defineProps({
+  to: [String,Object],
+  target: {
+    type: String,
+    default: '_self',
+  },
+  exact: Boolean,
+})
+</script>
+
+<style>
+.button {
+  min-width: fit-content;
+  width: fit-content;
+  padding: var(--size-2) var(--size-4);
+  background: var(--background);
+  border: var(--border);
+  position: relative;
+  display: inline-flex;
+  gap: var(--size-2);
+  justify-content: center;
+  align-items: center;
+  letter-spacing: var(--letter-spacing);
+
+  &.non-interactive,
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+  }
+  &[disabled]:not([disabled="false"]) {
+    color: var(--muted);
+  }
+
+  &:--highlight {
+    background: var(--border-color);
+  }
+
+  > span {
+    display: flex;
+    gap: var(--size-2);
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .icon {
+      width: var(--size-4);
+      height: var(--size-4);
+    }
+  }
+
+  &.left {
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  &.block {
+    width: 100%;
+  }
+
+  &.small {
+    padding: calc(var(--size-1) + var(--size-0)) var(--size-3);
+    font-size: var(--font-sm);
+    min-height: 0;
+
+    > span {
+      .icon {
+        width: var(--size-3);
+        height: var(--size-3);
+      }
+    }
+  }
+
+  &.link {
+    display: inline-flex;
+    align-self: baseline;
+    align-items: baseline;
+    gap: var(--size-0);
+    height: inherit;
+    min-height: 0;
+    /* margin: 0 var(--spacer-sm) !important; */
+    margin: 0 !important;
+    padding: 0 var(--size-0) !important;
+    line-height: inherit;
+    border: 0;
+
+    .icon {
+      align-self: center;
+    }
+  }
+}
+</style>

package/app/components/CardLink.vue

@@ -0,0 +1,38 @@
+<template>
+  <NuxtLink :to="to" class="card-link">
+    <span>{{ title }}</span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+withDefaults(defineProps<{
+  to: RouteLocationRaw
+  title?: string
+}>(), {
+  title: 'View',
+})
+</script>
+
+<style scoped>
+a {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0;
+
+  span {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+</style>
+
+<style>
+*:has(> .card-link) {
+  position: relative;
+}
+</style>