Merge pull request #10263 from kodadot/main

beta update

STYLE_GUIDE.md

@@ -17,7 +17,7 @@ With a few exceptions, code and comments should be written in **English** only.
 - **Typescript**, **Javascript** and **GraphQL** files use **camelCase** (`globalVariables.ts`, `getKey.js`, `collectionById.graphql`)
 - **SCSS** files use **kebab-case** (`initial-variables.scss`)
 - **JSON** files use **snake_case** (`all_lang.json`) while **Markdown** files use **SCREAMING_SNAKE_CASE** (`CONTRIBUTING.md`)
-- **Image** files use **kebab-case** (`my-image.webp`) and **.webp** is the preffered image format
+- **Image** files use **kebab-case** (`my-image.webp`) and **.webp** is the preferred image format
 
 ## SFC Conventions
 ### Skeleton

components/CookieBanner.vue

@@ -1,66 +1,103 @@
 <template>
-  <transition name="slide">
-    <div v-if="!hasDisplayedCookieBanner" class="cookie-banner">
-      <div
-        class="notices flex overflow-hidden pointer-events-none fixed p-[2em] inset-0 is-bottom items-center w-full z-[1000]">
-        <div
-          role="alertdialog"
-          class="snackbar is-success is-bottom-left !py-4 md:!py-2 px-4 mb-3 flex-col md:flex-row">
-          <div class="md:flex md:gap-1">
-            {{ $t('cookies.notice') }}, see
-            <nuxt-link to="/cookie-notice" target="_blank" class="is-underlined"
-              >Cookie Policy</nuxt-link
-            >
-            for details.
-          </div>
-          <div
-            class="bg-separator-line-color m-4 md:!my-0 !w-full !h-[1px] md:!w-[1px] md:!h-[13px]" />
-          <div
-            class="flex items-center justify-between md:!my-0 w-full md:w-fit">
-            <NeoButton variant="text" no-shadow @click="declineCookies">
-              {{ $t('cookies.decline') }}
-            </NeoButton>
-            <NeoButton
-              variant="secondary-rounded"
-              no-shadow
-              class="ml-3 h-8"
-              data-testid="cookie-banner-button-accept"
-              @click="acceptCookies">
-              {{ $t('cookies.accept') }}
-            </NeoButton>
-          </div>
-        </div>
-      </div>
-    </div>
-  </transition>
+  <CookieControl class="cookie-banner">
+    <template #bar>
+      <p>
+        {{ $t('cookies.notice') }}
+        <nuxt-link to="/cookie-notice" target="_blank" class="is-underlined"
+          >Cookie Policy</nuxt-link
+        >
+        <span class="invisible md:visible mx-2">|</span>
+      </p>
+    </template>
+  </CookieControl>
 </template>
 
 <script lang="ts" setup>
-import { NeoButton } from '@kodadot1/brick'
-// import { useState } from 'vue-gtag-next'
+const cookieControl = useCookieControl()
+const { grantConsent, revokeConsent } = useGtag()
 
-// const { isEnabled } = useState()
-const hasDisplayedCookieBanner = ref(
-  localStorage.getItem('cookies_enabled') !== null || false,
+const cookieConsentGiven = computed(() =>
+  cookieControl.cookiesEnabledIds.value?.includes('ga'),
 )
-const acceptCookies = () => {
-  // if (isEnabled) {
-  //   isEnabled.value = true
-  // }
-  localStorage.setItem('cookies_enabled', '1')
-  hasDisplayedCookieBanner.value = true
-}
-const declineCookies = () => {
-  localStorage.setItem('cookies_enabled', '0')
-  hasDisplayedCookieBanner.value = true
-}
+
+watch(
+  () => cookieControl.cookiesEnabledIds.value,
+  () => {
+    if (!cookieConsentGiven.value) {
+      window.location.reload()
+    }
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  if (cookieConsentGiven.value || cookieConsentGiven.value === undefined) {
+    grantConsent()
+  } else {
+    revokeConsent()
+  }
+})
 </script>
 
 <style lang="scss">
-.cookie-banner {
-  .snackbar {
-    align-self: flex-start;
-    max-width: 720px;
+/* Custom Cookie #Bar */
+.cookieControl__BarContainer {
+  @apply fixed p-4 mx-auto max-w-3xl self-start left-6 bottom-5 text-text-color bg-background-color border border-border-color shadow-primary;
+}
+.cookieControl__BarContainer p {
+  @apply text-text-color text-base;
+}
+.cookieControl__BarButtons button {
+  @apply text-sm bg-inherit text-text-color px-2 py-1;
+}
+
+/* Custom Cookie #Modal */
+.cookieControl__ModalContent {
+  @apply text-text-color bg-background-color border border-border-color shadow-primary items-center overflow-y-clip;
+}
+.cookieControl__ModalContent :not(button) {
+  @apply text-text-color;
+}
+button.cookieControl__ModalClose {
+  @apply invisible absolute top-3 right-0 h-0 w-0;
+}
+button.cookieControl__ModalClose:after {
+  @apply absolute top-1 right-5 text-xs text-text-color font-medium bg-background-color hover:bg-gray-100 hover:text-gray-800 rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-none visible;
+  content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-x-lg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M2.146%202.854a.5.5%200%201%201%20.708-.708L8%207.293l5.146-5.147a.5.5%200%200%201%20.708.708L8.707%208l5.147%205.146a.5.5%200%200%201-.708.708L8%208.707l-5.146%205.147a.5.5%200%200%201-.708-.708L7.293%208z%22%2F%3E%0A%3C%2Fsvg%3E');
+}
+.cookieControl__ModalButtons {
+  @apply grid grid-cols-3 gap-4 mt-4 shrink-0 w-full;
+}
+.cookieControl__ModalButtons button {
+  @apply text-sm bg-inherit text-text-color px-1 py-2;
+}
+.cookieControl__ModalContent .cookieControl__ModalInputWrapper input + button {
+  @apply bg-gray-400;
+}
+.cookieControl__ModalContent input:checked + button::before {
+  @apply bg-text-color;
+}
+.cookieControl__ModalContent
+  .cookieControl__ModalInputWrapper
+  input:checked
+  + button {
+  @apply border border-solid border-border-color bg-background-color;
+}
+.cookieControl__ModalContent
+  .cookieControl__ModalInputWrapper
+  input:disabled
+  + button {
+  @apply bg-gray-300;
+}
+@media screen and (max-width: 768px) {
+  .cookieControl__BarButtons button + button {
+    margin: 0;
+  }
+  .cookieControl__BarButtons {
+    flex-direction: row-reverse;
+  }
+  .cookieControl__BarContainer {
+    right: 1.5rem;
   }
 }
 </style>

components/collection/drop/MintButton.vue

@@ -69,7 +69,7 @@ const mintForLabel = computed(() =>
   $i18n.t('drops.mintForPaid', [
     `${formatAmountWithRound(drop.value?.price ? Number(drop.value?.price) * amountToMint.value : '', decimals.value)} ${
       chainSymbol.value
-    } ${priceUsd.value ? '/ ' + (priceUsd.value * amountToMint.value).toFixed(1) + ' ' + $i18n.t('general.usd') : ''}`,
+    } ${priceUsd.value ? '/ ' + (priceUsd.value * amountToMint.value).toFixed(2) + ' ' + $i18n.t('general.usd') : ''}`,
   ]),
 )
 

components/collection/drop/modal/DropConfirmModal.vue

@@ -99,15 +99,17 @@ const resentInitialConfirmationEmail = ref(false)
 
 const mintedNFT = computed<MintedNFT | undefined>(() =>
   claimedNft.value
-    ? {
+    ? ({
         ...claimedNft.value,
+        index: Number(claimedNft.value.sn),
         image: sanitizeIpfsUrl(claimedNft.value.image),
+        mimeType: 'text/html',
         collection: {
           id: claimedNft.value.collection,
           name: claimedNft.value.collectionName,
           max: claimedNft.value.max,
         },
-      }
+      } as MintedNFT)
     : undefined,
 )
 

components/collection/drop/modal/paid/MintOverview.vue

@@ -26,7 +26,7 @@
               :src="
                 toMintNft.imageDataPayload
                   ? toMintNft.imageDataPayload.image
-                  : sanitizeIpfsUrl(toMintNft.image)
+                  : sanitizeIpfsUrl(toMintNft.animationUrl)
               "
               :alt="toMintNft.name"
               :mime-type="!toMintNft.imageDataPayload ? 'text/html' : undefined"

components/collection/drop/modal/shared/SuccessfulDrop.vue

@@ -8,14 +8,14 @@
         single: $t('drops.youSuccessfullyClaimedNft', [1]),
         multiple: $t('drops.amountMintedSuccessfully', [items.length]),
       }"
-      :items="items"
-      media-mime-type="text/html" />
+      :items="items" />
   </SuccessfulModalBody>
 </template>
 
 <script setup lang="ts">
 import type { ItemMedia } from '@/components/common/successfulModal/SuccessfulItemsMedia.vue'
 import { MintedNFT, MintingSession } from '../../types'
+import { ShareProp } from '@/components/common/successfulModal/SuccessfulModalBody.vue'
 
 const emit = defineEmits(['list'])
 const props = defineProps<{
@@ -27,6 +27,7 @@ const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
+const { getCollectionFrameUrl } = useSocialShare()
 
 const cantList = computed(() => !props.canListNfts)
 const txHash = computed(() => props.mintingSession.txHash ?? '')
@@ -42,6 +43,7 @@ const items = computed<ItemMedia[]>(() =>
     image: item.image,
     collection: item.collection.id,
     collectionName: item.collection.name,
+    mimeType: item.mimeType,
   })),
 )
 
@@ -54,16 +56,27 @@ const userProfilePath = computed(
 )
 
 const sharingTxt = computed(() =>
-  $i18n.t('sharing.dropNft', [
-    mintedNft.value?.id,
-    mintedNft.value?.collection.max,
-  ]),
+  singleMint.value
+    ? $i18n.t('sharing.dropNft', [`#${mintedNft.value?.index}`])
+    : $i18n.t('sharing.dropNfts', [
+        props.mintingSession.items.map((item) => `#${item.index}`).join(', '),
+      ]),
 )
 
-const share = computed(() => ({
+const share = computed<ShareProp>(() => ({
   text: sharingTxt.value,
   url: nftFullUrl.value,
   withCopy: singleMint.value,
+  social: {
+    farcaster: {
+      embeds: [
+        getCollectionFrameUrl(
+          urlPrefix.value,
+          mintedNft.value?.collection.id as string,
+        ),
+      ],
+    },
+  },
 }))
 
 const actionButtons = computed(() => ({

components/collection/drop/types.ts

@@ -34,7 +34,9 @@ export type MintedNFT = {
   chain: string
   name: string
   image: string
+  index: number
   collection: { id: string; name: string; max: number }
+  mimeType?: string
 }
 
 export type MintingSession = {

components/common/autoTeleport/AutoTeleportPopover.vue

@@ -3,7 +3,7 @@
     <NeoIcon icon="fa-info-circle" pack="fa-regular" class="ml-2 text-k-grey" />
 
     <template #content>
-      <div class="w-[16rem] bg-background-color text-xs border p-4">
+      <div class="w-[16rem] bg-background-color text-sm border p-4">
         <div class="flex text-base mb-3">
           <NeoIcon icon="fa-info-circle" pack="fa-regular" class="mr-2" />
 
@@ -49,7 +49,7 @@
         <div class="flex justify-start mt-5">
           <a
             href="https://hello.kodadot.xyz/tutorial/teleport/auto-teleport"
-            class="text-k-blue hover:text-k-blue-hover text-xs"
+            class="text-k-blue hover:text-k-blue-hover text-sm"
             target="_blank"
             rel="nofollow noopener noreferrer"
             >{{ $t('helper.learnMore') }}</a

components/common/listingCart/ListingCartMini.vue

@@ -2,7 +2,7 @@
   <transition name="slide">
     <div v-if="listingCartStore.count" class="listing-container">
       <div class="inline-flex items-center">
-        <div class="k-shadow bg-background-color border py-4 px-6">
+        <div class="k-shadow bg-background-color border flex items-center h-13 px-6">
           <div class="inline-flex items-center">
             <div>
               <b>{{ listingCartStore.count }}</b>
@@ -28,8 +28,9 @@
           </div>
         </div>
         <NeoButton
-          class="h-full border-l-0 py-4 px-7"
+          class="border-l-0 px-7"
           :variant="'k-accent'"
+          size="large"
           @click="preferencesStore.listingCartModalOpen = true">
           {{ $t('listingCart.listItem', listingCartStore.count) }}
         </NeoButton>

components/common/listingCart/SuccessfulListingBody.vue

@@ -28,10 +28,11 @@ const { accountId } = useAuth()
 const mediaItems = computed<ItemMedia[]>(() =>
   props.items.map((item) => ({
     id: item.id,
-    image: item.meta?.image as string,
+    image: (item.mediaUrl?.image || item.meta?.image) as string,
     name: item.name,
     collection: item.collection.id,
     collectionName: item.collection.name,
+    mimeType: item.mediaUrl?.mimeType,
     price: item.listPrice
       ? String(item.listPrice * Math.pow(10, decimals.value))
       : undefined,

components/common/listingCart/shared/ListingCartItemDetails.vue

@@ -4,12 +4,12 @@
       <div class="flex">
         <div>
           <BaseMediaItem
-            v-if="nft.animationUrl"
+            v-if="nft.mediaUrl"
             class="border border-k-shade image is-48x48"
             :class="{ 'opacity-50': discarded }"
             :alt="nft?.name"
-            :animation-src="sanitizeIpfsUrl(nft.animationUrl.url)"
-            :mime-type="nft.animationUrl.mimeType"
+            :src="sanitizeIpfsUrl(nft.mediaUrl.image)"
+            :mime-type="nft.mediaUrl.mimeType"
             preview
             is-detail />
           <!-- keeping BasicImage since its has a skeleton laoder -->
@@ -60,7 +60,7 @@ const getAvatar = async () => {
 }
 
 onMounted(() => {
-  if (!props.nft.animationUrl) {
+  if (!props.nft.mediaUrl) {
     getAvatar()
   }
 })

components/common/shoppingCart/utils.ts

@@ -1,5 +1,5 @@
 import { calculateExactUsdFromToken } from '@/utils/calculation'
-import { ListCartItem, ListCartItemAnimationUrl } from '@/stores/listingCart'
+import { ListCartItem, ListCartItemMediaUrl } from '@/stores/listingCart'
 import { ShoppingCartItem } from './types'
 import { useFiatStore } from '@/stores/fiat'
 import { sum } from '@/utils/math'
@@ -68,7 +68,7 @@ export const nftToShoppingCartItem = (nft: NFT): ShoppingCartItem => {
 export const nftToListingCartItem = (
   nft: NFT & TokenId,
   floor = '',
-  animationUrl?: ListCartItemAnimationUrl,
+  mediaUrl?: ListCartItemMediaUrl,
 ): ListCartItem => {
   const { urlPrefix } = usePrefix()
 
@@ -86,7 +86,7 @@ export const nftToListingCartItem = (
     meta: nft.meta,
     token: nft.token,
     sn: nft.sn,
-    animationUrl: animationUrl,
+    mediaUrl: mediaUrl,
   }
 }