beta update

.eslintrc.js

@@ -18,7 +18,6 @@ module.exports = {
   },
   plugins: ['prettier', '@typescript-eslint', 'unicorn'],
   rules: {
-    'prettier/prettier': 'error',
     'no-empty-function': 'warn',
     'no-trailing-spaces': 'error',
     'unicorn/no-for-loop': 'error',
@@ -38,7 +37,7 @@ module.exports = {
     'no-useless-catch': 1,
     'no-var': 'error',
     'linebreak-style': 0,
-    quotes: ['error', 'single'],
+    quotes: ['error', 'single', { avoidEscape: true }],
     semi: ['error', 'never'],
     'max-classes-per-file': ['error', 2],
     'sort-imports': [

.github/workflows/build.yml

@@ -42,4 +42,4 @@ jobs:
         uses: ./.github/actions/pnpm-install
 
       - name: Run Build
-        run: NITRO_PRESET=cloudflare-pages pnpm nuxi build
+        run: NITRO_PRESET=cloudflare_pages pnpm nuxi build

.npmrc

@@ -1,5 +1,4 @@
 shamefully-hoist=true
 engine-strict=true
-auto-install-peers=false
 prefer-symlinked-executables=false
 ignore-workspace-root-check=true

README.md

@@ -58,3 +58,6 @@ You'll find our goals for KodaDot upcoming future!
 - Join our [Telegram KodaDot Ecosystem](https://t.me/kodadot_eco), ~~[Discord](https://discord.gg/u6ymnbz4PR)~~
 - [Pick your T-shirt in KodaDot Swag Shop](https://shop.kodadot.xyz), use voucher `readme100` to get 100% OFF, first 10 redemptions only.
 
+# Fix dependency bump by renovate bot
+
+`git checkout origin/main pnpm-lock.yaml && pnpm install`

assets/styles/components/_connect-wallet.scss

@@ -74,7 +74,7 @@
     .wallet-menu-item {
       width: 100%;
       .button {
-        @apply w-full text-xl px-8 py-2.5 rounded-none border-[none];
+        @apply w-full text-xl px-8 py-2.5 rounded-none border-none transition-none;
         background: unset;
         box-shadow: none !important;
         > span {

assets/styles/global.scss

@@ -26,19 +26,11 @@ main {
 }
 
 body {
-  @include ktheme() {
-    color: theme('text-color');
-  }
+
+  @apply text-text-color;
 
   a {
-    @include ktheme() {
-      color: theme('text-color');
-    }
-    &:hover {
-      @include ktheme() {
-        color: theme('link-hover');
-      }
-    }
+    @apply text-text-color hover:text-link-hover;
   }
 
   strong,
@@ -122,12 +114,6 @@ body {
   padding-right: $fluid-container-padding;
 }
 
-.control-label {
-  @include ktheme() {
-    color: theme('text-color');
-  }
-}
-
 @include mobile {
   .column-padding {
     padding-left: 10px !important;
@@ -205,17 +191,10 @@ hr {
 }
 
 .snackbar {
-  @include ktheme() {
-    border-radius: 0;
-    color: theme('text-color');
-    background: theme('background-color');
-    box-shadow: theme('primary-shadow');
-    border: 1px solid theme('border-color');
+  @apply text-text-color bg-background-color border border-border-color shadow-primary;
 
-    .button {
-      background-color: theme('k-accentlight2') !important;
-      color: theme('text-color') !important;
-    }
+  .button {
+    @apply bg-k-accent-light-2 text-text-color;
   }
 }
 
@@ -227,87 +206,21 @@ hr {
 // global table css
 
 .table {
-  @include ktheme() {
-    background-color: theme('background-color');
-    color: theme('text-color');
+  @apply bg-background-color text-text-color;
 
-    &.is-hoverable tbody tr:not(.is-selected):hover {
-      background-color: theme('background-color');
-    }
+  &.is-hoverable tbody tr:not(.is-selected):hover {
+    @apply bg-background-color;
+  }
 
-    th {
-      color: theme('text-color');
-      background-color: theme('background-color') !important;
-    }
+  th {
+    @apply text-text-color bg-background-color;
   }
 }
 
 .fluid-padding-left {
   padding-left: $fluid-container-padding;
 }
 
-.has-text-k-shade {
-  @include ktheme() {
-    color: theme('k-shade');
-  }
-}
-
-//colors
-
-.has-text-k-green {
-  @include ktheme() {
-    color: theme('k-green') !important;
-  }
-}
-.has-text-k-red {
-  @include ktheme() {
-    color: theme('k-red');
-  }
-}
-
-.has-text-k-orange {
-  @include ktheme() {
-    color: theme('k-orange');
-  }
-}
-
-.has-text-k-blue {
-  @include ktheme() {
-    color: theme('k-blue');
-  }
-  &:hover {
-    @include ktheme() {
-      color: theme('k-blue-hover');
-    }
-  }
-}
-
-.has-text-color {
-  @include ktheme() {
-    color: theme('text-color') !important;
-  }
-}
-
-.has-text-k-primary {
-  @include ktheme() {
-    color: theme('k-primary') !important;
-  }
-}
-
-//hover
-
-.is-hoverable-item {
-  @include ktheme() {
-    &:hover {
-      background-color: theme('k-accentlight2');
-    }
-  }
-}
-
-.no-hover:hover {
-  background-color: unset !important;
-}
-
 //shadow
 
 .k-shadow {
@@ -372,10 +285,6 @@ hr {
   overflow-y: auto;
 }
 
-.has-text-inherit {
-  color: inherit !important;
-}
-
 .min-width-0 {
   min-width: 0;
 }

components/CookieBanner.vue

@@ -21,7 +21,7 @@
             <NeoButton
               variant="text"
               no-shadow
-              class="has-text-weight-bold ml-3"
+              class="font-bold ml-3"
               data-testid="cookie-banner-button-accept"
               @click="acceptCookies">
               {{ $t('cookies.accept') }}

components/balance/MultipleBalances.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-2">
+  <div>
     <div
       v-if="isEmptyBalanceOnAllChains && !isBalanceLoading"
       class="text-xs py-4 flex flex-col items-center">
@@ -67,12 +67,13 @@
 
   <div
     v-if="!isEmptyBalanceOnAllChains && !isBalanceLoading"
-    class="flex items-center justify-between">
-    <a class="text-grey text-xs" @click="openRampModal"
+    class="mt-4 flex items-center justify-end">
+    <a class="text-k-grey text-xs" @click="openRampModal"
       >+ {{ $t('addFunds') }}</a
     >
   </div>
-  <OnRampModal :value="rampActive" @close="rampActive = false" />
+
+  <OnRampModal v-model="rampActive" @close="rampActive = false" />
 </template>
 
 <script setup lang="ts">

components/base/CollectionSelect.vue

@@ -8,7 +8,7 @@
     <NeoField :label="$t('collection')">
       <template #label>
         <div>{{ $t('collection') }}</div>
-        <div class="has-text-weight-light text-xs mb-3">
+        <div class="font-light text-xs mb-3">
           {{ $t('Select collection where do you want mint your token') }}
         </div>
       </template>

components/base/MediaItem.vue

@@ -23,15 +23,15 @@
       v-if="isLewd && isLewdBlurredLayer"
       class="nsfw-blur flex capitalize items-center justify-center flex-col">
       <NeoIcon icon="eye-slash" class="mb-3" />
-      <span class="has-text-weight-bold">
+      <span class="font-bold">
         {{ $t('lewd.explicit') }}
       </span>
       <span class="nsfw-desc text-center">{{ $t('lewd.explicitDesc') }}</span>
     </div>
     <div
       v-if="isInteractive"
       class="bg-k-shade border-k-grey flex items-center justify-center border rounded-full absolute right-3 top-3 image is-24x24">
-      <NeoIcon icon="code" pack="far" class="text-xs has-text-weight-medium" />
+      <NeoIcon icon="code" pack="far" class="text-xs font-medium" />
     </div>
     <NeoButton
       v-if="isLewd"

components/blog/BlogPost.vue

@@ -48,9 +48,14 @@ import { URLS } from '@/utils/constants'
 const route = useRoute()
 const slug = route.params.slug
 
-const { data: post } = await useAsyncData('post', () =>
-  queryContent(`/blog/${slug}`).findOne(),
-)
+const compatiblePostName = (originalName: string) => {
+  // eslint-disable-next-line quotes
+  return originalName.replaceAll("'", '').replaceAll('%27', '').toLowerCase()
+}
+
+const { data: post } = await useAsyncData('post', () => {
+  return queryContent(`/blog/${compatiblePostName(String(slug))}`).findOne()
+})
 
 const openShareUrl = (platform: 'twitter' | 'linkedin') => {
   let shareUrl = ''

components/carousel/CarouselTypeLatestMints.vue

@@ -8,7 +8,7 @@
           <nuxt-link
             :to="urlOf({ id: item.id, url: 'gallery', chain: item.chain })"
             :title="item.name"
-            class="has-text-weight-bold carousel-info-name">
+            class="font-bold carousel-info-name">
             <span class="is-ellipsis">{{ item.name || '--' }}</span>
           </nuxt-link>
 

components/carousel/module/CarouselInfo.vue

@@ -3,7 +3,7 @@
     <div
       :title="item.name"
       :class="[
-        'has-text-weight-bold carousel-info-name',
+        'font-bold carousel-info-name',
         { 'carousel-info-collection': isCollection },
       ]">
       <span class="is-ellipsis">{{ item.name || '--' }}</span>

components/chart/PriceChart.vue

@@ -35,7 +35,7 @@
         </NeoButton>
       </template>
 
-      <NeoDropdownItem class="no-hover px-0 py-0">
+      <NeoDropdownItem class="hover:bg-transparent px-0 py-0">
         <div class="w-full flex justify-between items-center">
           <NeoCheckbox
             v-model="vHideOutliers"
@@ -45,7 +45,7 @@
           </NeoCheckbox>
         </div>
       </NeoDropdownItem>
-      <NeoDropdownItem class="no-hover px-0 py-0">
+      <NeoDropdownItem class="hover:bg-transparent px-0 py-0">
         <div class="w-full flex justify-between items-center">
           <NeoCheckbox
             v-model="vApplySmoothing"
@@ -150,11 +150,13 @@ const vApplySmoothing = useVModel(props, 'applySmoothing', emit)
 const heightStyle = computed(() =>
   props.chartHeight ? `height: ${props.chartHeight}` : '',
 )
-let chart = ref<InstanceType<typeof ChartJS> | null>(null)
+
+const chart = ref<{ chart: InstanceType<typeof ChartJS> } | null>(null)
 
 const onWindowResize = () => {
-  chart.value?.resize()
+  chart.value?.chart.resize()
 }
+
 useEventListener(window, 'resize', onWindowResize)
 
 const lineColor = computed(() => (isDarkMode.value ? '#fff' : '#181717'))

components/collection/CollectionHeader/CollectionBanner.vue

@@ -39,9 +39,7 @@
               <span> {{ $t('migrate.ready.title') }} </span>
             </div>
             <div class="w-4 h-[1px] bg-separator-line-color mx-2" />
-            <nuxt-link
-              class="flex items-center has-text-weight-bold my-2"
-              to="/migrate">
+            <nuxt-link class="flex items-center font-bold my-2" to="/migrate">
               {{ $t('migrate.cta') }}
             </nuxt-link>
           </div>

components/collection/CollectionInfo.vue

@@ -63,7 +63,7 @@
       </div>
       <NeoButton
         v-if="hasSeeAllDescriptionOption"
-        class="no-shadow is-text is-underlined text-left p-0"
+        class="no-shadow is-text underline text-left p-0"
         :label="seeAllDescription ? $t('showLess') : $t('showMore')"
         data-testid="description-show-less-more-button"
         @click="toggleSeeAllDescription" />

components/collection/ConfirmDeleteCollectionModal.vue

@@ -9,16 +9,16 @@
       </div>
       <div>
         <NeoButton
-          class="has-text-weight-bold mr-4"
+          class="font-bold mr-4"
           variant="text"
           no-shadow
           @click="emit('delete')">
-          <span class="has-text-k-red">
+          <span class="text-k-red">
             {{ $i18n.t('massmint.yesDelete') }}
           </span>
         </NeoButton>
         <NeoButton
-          class="has-text-weight-bold"
+          class="font-bold"
           variant="text"
           no-shadow
           :label="$i18n.t('cancel')"