Merge branch 'main' into refactor/neo-switch

components/CookieBanner.vue

@@ -6,7 +6,11 @@
  role="alertdialog"
  class="snackbar is-success is-bottom-left py-2 px-4 mb-3">
  <div>
- <div class="">{{ $t('cookies.notice') }}</div>
+ {{ $t('cookies.notice') }}, see
+ <nuxt-link to="/cookie-notice" target="_blank" class="is-underlined"
+ >Cookie Policy</nuxt-link
+ >
+ for details.
  </div>
  <div class="bar ml-4 mr-4" />
  <div class="action is-success">
@@ -47,6 +51,7 @@ const declineCookies = () => {
 .cookie-banner {
  .snackbar {
  height: 2.188rem;
+ max-width: 720px;
 
  @media screen and (max-width: 768px) {
  height: auto;

components/bsx/Create/GenerativeMint.vue

@@ -1,34 +1,35 @@
 <template>
  <div>
  <Loader v-model="isLoading" :status="status" />
- <b-steps
+ <NeoSteps
  v-model="currentStep"
  :rounded="false"
  mobile-mode="minimalist"
  :has-navigation="false">
- <b-step-item step="1" label="Mint" :clickable="isStepsClickable">
+ <NeoStepItem step="1" label="Mint" :clickable="isStepsClickable">
  <GenerativeMint @select="handlePrediction" @submit="handleBuilder" />
- </b-step-item>
+ </NeoStepItem>
 
- <b-step-item step="2" label="Select" :clickable="isStepsClickable">
+ <NeoStepItem step="2" label="Select" :clickable="isStepsClickable">
  <ImageSelectGrid
  :predicion="predicion"
  :selected="image"
  @select="handleImageSelect" />
- </b-step-item>
+ </NeoStepItem>
 
- <b-step-item
+ <NeoStepItem
  step="3"
  label="Finish"
  :clickable="isStepsClickable"
  :type="{ 'is-success': true }">
  <CongratsView @select="clearAll" />
- </b-step-item>
- </b-steps>
+ </NeoStepItem>
+ </NeoSteps>
  </div>
 </template>
 
 <script setup lang="ts">
+import { NeoStepItem, NeoSteps } from '@kodadot1/brick'
 import { PredictionStatus } from '@/services/replicate'
 import { sendWaifu } from '@/services/waifu'
 import { emptyObject } from '@/utils/empty'

components/carousel/utils/useCarousel.ts

@@ -67,14 +67,17 @@ const useChainEvents = (chain, type) => {
  }
 }
 
+const sortNftByTime = (data) => data.sort((a, b) => b.unixTime - a.unixTime)
+
 const flattenNFT = async (data, chain) => {
  if (!data?.events.length) {
  return []
  }
 
  const events = data.events.map(convertLastEventFlatNft)
  const listOfNfts = await formatNFT(events, chain)
- return setCarouselMetadata(listOfNfts)
+ const listOfNftsWithMetadata = await setCarouselMetadata(listOfNfts)
+ return sortNftByTime(listOfNftsWithMetadata)
 }
 
 export const useCarouselNftEvents = ({ type }: Types) => {
@@ -96,14 +99,14 @@ export const useCarouselNftEvents = ({ type }: Types) => {
  const stmnNfts = await flattenNFT(dataStmn.value, 'stmn')
 
  const data = [
- ...rmrkNfts,
- ...bsxNfts,
- ...snekNfts,
- ...rmrk2Nfts,
  ...stmnNfts,
+ ...rmrk2Nfts,
+ ...snekNfts,
+ ...bsxNfts,
+ ...rmrkNfts,
  ]
 
- nfts.value = data.sort((a, b) => b.unixTime - a.unixTime).slice(0, 30)
+ nfts.value = data.slice(0, 30)
  })
 
  return {

components/gallery/GalleryItemTabsPanel/GalleryItemOffers.vue

@@ -65,7 +65,7 @@
  >Cancel</NeoSecondaryButton
  >
  <NeoSecondaryButton
- v-if="isOwner && isActive(props.row)"
+ v-if="isOwner && isActiveAndNotExpired(props.row)"
  variant="info"
  @click.native="onAcceptOffer(props.row.caller)"
  >Accept</NeoSecondaryButton
@@ -107,8 +107,10 @@ const dprops = defineProps<{
 
 const isOwner = computed(() => checkOwner(dprops.account, accountId.value))
 
-const isActive = (row) =>
- row.status === OfferStatusType.ACTIVE &&
+const isActive = (row) => row.status === OfferStatusType.ACTIVE
+
+const isActiveAndNotExpired = (row) =>
+ isActive(row) &&
  expirationTime(row.expiration) !== 'Expired'
 
 const { accountId } = useAuth()

composables/useApi.ts

@@ -3,12 +3,11 @@ import type { ApiPromise } from '@polkadot/api'
 import { getChainEndpointByPrefix } from '@/utils/chain'
 
 export default function () {
- const { $store } = useNuxtApp()
  const { urlPrefix } = usePrefix()
 
  const apiUrl = computed(() => {
- const endpoint = getChainEndpointByPrefix(urlPrefix.value)
- return endpoint || $store.getters.getSettings['apiUrl']
+ const endpoint: string = getChainEndpointByPrefix(urlPrefix.value) || ''
+ return endpoint
  })
 
  const apiInstance = computed<Promise<ApiPromise>>(() =>

libs/ui/src/components/NeoCarousel/NeoCarousel.story.vue

@@ -0,0 +1,36 @@
+<template>
+ <Story title="NeoCarousel" :layout="{ type: 'grid', width: '600px' }">
+ <Variant title="NeoCarousel">
+ <NeoCarousel>
+ <NeoCarouselItem v-for="(carousel, i) in carousels" :key="i">
+ <section
+ class="ex-slide"
+ :style="{ 'background-color': carousel.color }">
+ <h1>{{ carousel.text }}</h1>
+ </section>
+ </NeoCarouselItem>
+ </NeoCarousel>
+ </Variant>
+ </Story>
+</template>
+
+<script lang="ts" setup>
+import NeoCarousel from './NeoCarousel.vue'
+import NeoCarouselItem from './NeoCarouselItem.vue'
+
+const carousels = [
+ { text: 'Slide 1', color: '#445e00' },
+ { text: 'Slide 2', color: '#006724' },
+ { text: 'Slide 3', color: '#b60000' },
+ { text: 'Slide 4', color: '#f4c300' },
+ { text: 'Slide 5', color: '#005c98' },
+]
+</script>
+
+<style>
+.ex-slide {
+ padding: 9rem 4.5rem;
+ color: #fff;
+ text-align: center;
+}
+</style>

libs/ui/src/components/NeoSteps/NeoStepItem.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { OStepItem } from '@oruga-ui/oruga'
+
+export default {
+ extends: OStepItem,
+}
+</script>

libs/ui/src/components/NeoSteps/NeoSteps.scss

@@ -0,0 +1,50 @@
+@import '../../scss/theme.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/expressions.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/variables.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/animations.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/helpers.scss';
+@import '@oruga-ui/oruga/src/scss/components/steps';
+
+.o-steps {
+ &__marker {
+ @include ktheme() {
+ color: theme('black');
+ }
+ }
+
+ &__title {
+ @include ktheme() {
+ color: theme('k-primary');
+ background-color: transparent;
+ }
+ }
+
+ &__divider {
+ @include ktheme() {
+ background-image: linear-gradient(
+ to left,
+ theme('k-grey') 50%,
+ theme('k-primary') 50%
+ );
+ }
+ }
+
+ &__nav-item-active {
+ .o-steps__marker {
+ @include ktheme() {
+ color: theme('k-primary');
+ background-color: theme('black');
+ border-color: theme('k-primary');
+ }
+ }
+ }
+
+ &__nav-item-previous {
+ .o-steps__marker {
+ @include ktheme() {
+ background-color: theme('k-primary');
+ color: theme('text-color');
+ }
+ }
+ }
+}

libs/ui/src/components/NeoSteps/NeoSteps.story.vue

@@ -0,0 +1,19 @@
+<template>
+ <Story title="NeoSteps" :layout="{ type: 'grid', width: '600px' }">
+ <Variant title="NeoSteps">
+ <NeoSteps v-model="activeStep" :rounded="false" :has-navigation="false">
+ <NeoStepItem clickable label="Account">account</NeoStepItem>
+ <NeoStepItem clickable label="Profile">profile</NeoStepItem>
+ <NeoStepItem clickable label="Social">social</NeoStepItem>
+ </NeoSteps>
+ </Variant>
+ </Story>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import NeoSteps from './NeoSteps.vue'
+import NeoStepItem from './NeoStepItem.vue'
+
+const activeStep = ref(0)
+</script>

libs/ui/src/components/NeoSteps/NeoSteps.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { OSteps } from '@oruga-ui/oruga'
+
+export default {
+ extends: OSteps,
+}
+</script>
+
+<style lang="scss">
+@import './NeoSteps.scss';
+</style>

libs/ui/src/index.ts

@@ -28,6 +28,8 @@ export { default as NeoCarousel } from './components/NeoCarousel/NeoCarousel.vue
 export { default as NeoCarouselItem } from './components/NeoCarousel/NeoCarouselItem.vue'
 
 export { default as NeoSwitch } from './components/NeoSwitch/NeoSwitch.vue'
+export { default as NeoSteps } from './components/NeoSteps/NeoSteps.vue'
+export { default as NeoStepItem } from './components/NeoSteps/NeoStepItem.vue'
 export { default as NeoDatepicker } from './components/NeoDatepicker/NeoDatepicker.vue'
 
 export { default as Neo } from '@oruga-ui/oruga'