release update

assets/styles/abstracts/_animations.scss

@@ -54,6 +54,14 @@
  opacity: 0;
 }
 
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
 
 @keyframes cardHoverIn {
  0% {

assets/styles/abstracts/_variables.scss

@@ -183,5 +183,6 @@ $spacing-values: (
  "6": 2rem,
  "7": 2.5rem,
  "8": 3rem,
+ "10": 4rem,
  "auto": auto
 ) !default;

assets/styles/components/_search.scss

@@ -308,10 +308,6 @@
  }
 }
 
-.section-search {
- padding: 3rem 0rem !important;
-}
-
 @media screen and (max-width: 1123px) {
  .landing-search {
  justify-content: space-evenly;

assets/styles/global.scss

@@ -357,7 +357,7 @@ a.has-text-grey {
 
 .has-text-k-green {
  @include ktheme() {
- color: theme('k-green');
+ color: theme('k-green') !important;
  }
 }
 .has-text-k-red {
@@ -466,6 +466,14 @@ a.has-text-grey {
 .is-cursor-pointer {
  cursor: pointer !important;
 }
+
+
+.has-text-k-accent {
+ @include ktheme() {
+ color: theme('k-accent') !important;
+ }
+}
+
 //hover
 
 .is-hoverable-item {
@@ -538,3 +546,16 @@ a.has-text-grey {
 .w-half {
  width: 50%;
 }
+
+.has-accent-blur {
+ position: relative;
+ .blur {
+ position: absolute !important;
+ top: 0;
+ left: 0;
+ }
+}
+
+.is-size-3-5 {
+ font-size: 1.6rem;
+}

components/Navbar.vue

@@ -21,7 +21,7 @@
  class="is-hidden-desktop is-flex is-flex-grow-1 is-align-items-center is-justify-content-flex-end"
  @click="closeBurgerMenu">
  <img
- v-if="isMobileNavbarOpen || showSearchOnNavbar"
+ v-if="isMobileNavbarOpen || showSearchOnNavbar || isTinyMobile"
  class="mobile-nav-search-btn mr-2"
  :src="
  isDarkMode
@@ -96,8 +96,13 @@
  </div>
  </nuxt-link>
 
- <MobileExpandableSection v-if="isMobile" :title="$t('explore')">
- <NavbarExploreOptions @closeMobileNavbar="showMobileNavbar" />
+ <MobileExpandableSection
+ v-if="isMobile"
+ v-slot="{ onCloseMobileSubMenu }"
+ :title="$t('explore')">
+ <NavbarExploreOptions
+ @closeMobileNavbar="showMobileNavbar"
+ @closeMobileSubMenu="onCloseMobileSubMenu" />
  </MobileExpandableSection>
  <ExploreDropdown
  v-else
@@ -129,9 +134,12 @@
 
  <MobileExpandableSection
  v-if="isMobile"
+ v-slot="{ onCloseMobileSubMenu }"
  no-padding
  :title="$t('chainSelect', [chainName])">
- <NavbarChainOptions @select="handleMobileChainSelect" />
+ <NavbarChainOptions
+ @select="handleMobileChainSelect"
+ @closeMobileSubMenu="onCloseMobileSubMenu" />
  </MobileExpandableSection>
 
  <ChainSelectDropdown
@@ -153,7 +161,16 @@
 
  <template v-if="isMobile">
  <template v-if="!account">
- <MobileLanguageOption @closeLanguageOption="showMobileNavbar" />
+ <MobileExpandableSection
+ v-slot="{ onCloseMobileSubMenu }"
+ class="mobile-language"
+ :no-padding="true"
+ :title="$t('profileMenu.language')"
+ icon="globe">
+ <MobileLanguageOption
+ @closeLanguageOption="showMobileNavbar"
+ @closeMobileSubMenu="onCloseMobileSubMenu" />
+ </MobileExpandableSection>
  <ColorModeButton class="navbar-item" />
  </template>
  <div
@@ -218,8 +235,10 @@ const openMobileSearchBar = ref(false)
 const fixedTitleNavAppearDistance = ref(85)
 const lastScrollPosition = ref(0)
 const isBurgerMenuOpened = ref(false)
+const { width } = useWindowSize()
 const isMobile = ref(window.innerWidth < 1024)
 const isMobileWithoutTablet = ref(window.innerWidth < 768)
+const isTinyMobile = computed(() => width.value < 480)
 const { urlPrefix } = usePrefix()
 const { isDarkMode } = useTheme()
 const identityStore = useIdentityStore()

components/TheFooter.vue

@@ -88,7 +88,7 @@
  <h2 class="subtitle is-5">
  {{ $t('footer.join') }}
  </h2>
- <ul class="footer-container-socials-list is-flex">
+ <ul class="footer-container-socials-list is-flex mb-6">
  <li
  v-for="item in socials"
  :key="item.url"
@@ -128,16 +128,28 @@
  </a>
  </li>
  </ul>
+
+ <a
+ href="https://stellate.co/?ref=powered-by"
+ target="_blank"
+ rel="nofollow noopener noreferrer">
+ <img
+ :src="`https://stellate.co/${
+ isDarkMode ? 'badge-light' : 'badge'
+ }.svg`"
+ alt="Powered by Stellate, the GraphQL API Management platform" />
+ </a>
  </section>
  </div>
  <img src="/blurred-landing-footer.png" class="left-blurred-image" alt="" />
  </footer>
 </template>
 
 <script lang="ts" setup>
-// import { TranslateResult } from 'vue-i18n/types'
 import { NeoIcon } from '@kodadot1/brick'
 
+const { isDarkMode } = useTheme()
+
 interface Menu {
  name: string
  url: string

components/balance/MultipleBalances.vue

@@ -65,7 +65,7 @@ import { ChainToken, useIdentityStore } from '@/stores/identity'
 
 const identityStore = useIdentityStore()
 
-const { multiBalances } = useMultipleBalance()
+const { multiBalances } = useMultipleBalance(true)
 
 const isBalanceLoading = computed(
  () => identityStore.getStatusMultiBalances === 'loading',

components/base/BaseCollectionForm.vue

@@ -68,8 +68,8 @@ const vDescription = useVModel(props, 'description', emit)
 
 const vFile = useVModel(props, 'file', emit)
 
-const collectionName = ref<typeof BasicInput>()
-const collectionImage = ref<typeof MetadataUpload>()
+const collectionName = ref<InstanceType<typeof BasicInput>>()
+const collectionImage = ref<InstanceType<typeof MetadataUpload>>()
 
 const checkValidity = () => {
  return (

components/base/BaseTokenForm.vue

@@ -120,8 +120,8 @@ const emit = defineEmits([
  'update:secondFile',
 ])
 
-const nftName = ref<typeof BasicInput>()
-const upload = ref<typeof MetadataUpload>()
+const nftName = ref<InstanceType<typeof BasicInput>>()
+const upload = ref<InstanceType<typeof MetadataUpload>>()
 
 const vName = useVModel(props, 'name', emit)
 

components/bsx/Create/RoyaltyForm.vue

@@ -2,18 +2,23 @@
  <div>
  <BasicNumberInput
  v-model="vRoyalty"
+ data-testid="royalty-form-input-percentage"
  :label="$t('mint.royalty.rate')"
  expanded
  :step="0.1"
  :min-step="0.01"
  :min="0"
  :max="99.99" />
 
- <BasicSwitch v-model="isMine" label="mint.royalty.mine" />
+ <BasicSwitch
+ v-model="isMine"
+ label="mint.royalty.mine"
+ data-testid="royalty-form-switch" />
  <AddressInput
  v-show="!isMine"
  v-model="vAddress"
  label="mint.royalty.receiver"
+ data-testid="royalty-form-custom-address"
  :strict="false"
  empty-on-error />
  </div>