@visualizevalue/mint-app-base 0.1.66 → 0.1.67

package/components/MintToken.client.vue

@@ -9,6 +9,7 @@
       currentBlock,
       blocksRemaining,
       secondsRemaining,
+      countDownStr,
       until,
       transactionFlowConfig: {
         title: {
@@ -54,9 +55,11 @@ const priceFeed = usePriceFeedStore()
 
 const { data: currentBlock } = useBlockNumber({ chainId: config.public.chainId })
 const blocksRemaining = computed(() => props.token.mintedBlock + 7200n - (currentBlock.value || 0n))
-const mintOpen = computed(() => currentBlock.value && blocksRemaining.value > 0n)
-const secondsRemaining = computed(() => props.token.closeAt - BigInt(nowInSeconds()))
+const now = useNow()
 const until = computed(() => props.token.closeAt)
+const secondsRemaining = computed(() => until.value - BigInt(now.value))
+const mintOpen = computed(() => secondsRemaining.value > 0)
+const { str: countDownStr } = useCountDown(secondsRemaining)
 
 const mintCount = computed(() => props.mintCount)
 const { price, displayPrice } = useMintPrice(mintCount)

package/components/Token/Detail.client.vue

@@ -24,7 +24,7 @@
         minted,
         mintOpen,
         currentBlock,
-        blocksRemaining,
+        countDownStr,
         transactionFlowConfig
       }"
     >
@@ -54,13 +54,12 @@
         </div>
 
         <div class="mint-status">
-          <p v-if="mintOpen">{{ $t('token.blocks_remaining', { blocksRemaining }) }}</p>
+          <p v-if="mintOpen">{{ $t('token.closes_in', { time: countDownStr }) }}</p>
           <p v-else-if="currentBlock">
-            {{ $t('token.closed_at_block')}}  
-            {{ token.mintedBlock + BLOCKS_PER_DAY }}
+            {{ $t('token.closed_ago', { time: countDownStr })}}
           </p>
           <p v-if="ownedBalance">
-            {{ $t('token.you_own', { ownedBalance }) }} 
+            {{ $t('token.you_own', { ownedBalance }) }}
             {{ $t('tokens', Number(ownedBalance)) }}
           </p>
         </div>

package/components/Token/OverviewCard.vue

@@ -9,6 +9,8 @@
       minted,
       mintOpen,
       blocksRemaining,
+      secondsRemaining,
+      countDownStr,
       transactionFlowConfig
     }"
   >
@@ -20,6 +22,8 @@
         :mintRequest="mintRequest"
         :minted="minted"
         :mintOpen="mintOpen"
+        :secondsRemaining="secondsRemaining"
+        :countDownStr="countDownStr"
         :blocksRemaining="blocksRemaining"
         :transactionFlowConfig="transactionFlowConfig"
       >
@@ -29,10 +33,7 @@
               <span>{{ token.name }} <span class="token-id">#{{ token.tokenId }}</span></span>
               <span v-if="token.description" class="description">{{ shortString(token.description, 60, 30) }}</span>
             </h1>
-            <p v-if="mintOpen" class="closes-in">
-              {{ $t('token.closes_in') }} {{ blocksRemaining }} {{ $t('blocks', Number(blocksRemaining)) }}
-            </p>
-            <p v-else class="closed-at">{{ $t('token.closed_at_block') }} {{ token.mintedBlock + BLOCKS_PER_DAY }}</p>
+            <p v-if="mintOpen" class="closes-in">{{ $t('token.closes_in', { time: countDownStr }) }}</p>
           </header>
           <Embed v-if="token.animationUrl" :src="token.animationUrl" />
           <Image v-else-if="token.image" :src="token.image" :alt="token.name" />
@@ -65,6 +66,8 @@
 </template>
 
 <script setup lang="ts">
+import CountDownUntil from '../CountDownUntil.vue';
+
 const { token } = defineProps<{
   token: Token
 }>()

package/locales/en.json

@@ -71,9 +71,8 @@
   },
   "token": {
     "by": "By",
-    "closes_in": "Closes in",
-    "blocks_remaining": "{blocksRemaining} blocks remaining",
-    "closed_at_block": "Closed at block",
+    "closes_in": "Closes in {time}",
+    "closed_ago": "Closed {time} ago",
     "you_own": "You own {ownedBalance} {tokens}",
     "mint_timeline": "Mint Timeline",
     "artist_mint": "Artist Mint",

package/package.json

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

package/utils/time.ts

@@ -19,3 +19,24 @@ export const useNow = () => {
 
   return now
 }
+
+export const useCountDown = (s: Ref<Number|BigInt>) => {
+  const duration = computed(() => Math.abs(parseInt(`${s.value}`)))
+
+  const seconds = computed(() => duration.value % 60)
+  const minutes = computed(() => Math.floor(duration.value / 60) % 60)
+  const hours   = computed(() => Math.floor(duration.value / 60 / 60))
+
+  const str = computed(() => [
+    hours.value   ? `${hours.value}h`   : null,
+    minutes.value ? `${minutes.value}m` : null,
+    seconds.value ? `${seconds.value}s` : null,
+  ].filter(s => !!s).join(' '))
+
+  return {
+    seconds,
+    minutes,
+    hours,
+    str,
+  }
+}