Merge branch 'main' into neopagination-tailwindcss

components/collection/CollectionInfo.vue

@@ -12,6 +12,13 @@
           <IdentityIndex ref="identity" :address="address" show-clipboard />
         </nuxt-link>
       </div>
+      <div v-if="recipient" class="is-flex mb-2">
+        <div class="mr-2 is-capitalized">{{ $t('royalty') }}</div>
+        <nuxt-link :to="`/${urlPrefix}/u/${recipient}`" class="has-text-link">
+          <IdentityIndex ref="identity" :address="recipient" show-clipboard />
+        </nuxt-link>
+        &nbsp;({{ royalty }}%)
+      </div>
       <div class="overflow-wrap">
         <Markdown
           :source="visibleDescription"
@@ -83,6 +90,8 @@ const chain = computed(
       ?.text,
 )
 const address = computed(() => collectionInfo.value?.currentOwner)
+const recipient = computed(() => collectionInfo.value?.recipient)
+const royalty = computed(() => collectionInfo.value?.royalty)
 const seeAllDescription = ref(false)
 const DESCRIPTION_MAX_LENGTH = 210
 

components/collection/utils/useCollectionDetails.ts

@@ -117,9 +117,13 @@ export function useCollectionSoldData({ address, collectionId }) {
 }
 
 export const useCollectionMinimal = ({ collectionId }) => {
+  const { urlPrefix } = usePrefix()
+  const { isAssetHub } = useIsChain(urlPrefix)
   const collection = ref()
   const { data } = useGraphql({
-    queryName: 'collectionByIdMinimal',
+    queryName: isAssetHub.value
+      ? 'collectionByIdMinimalWithRoyalty'
+      : 'collectionByIdMinimal',
     variables: {
       id: collectionId,
     },

components/gallery/GalleryItemTabsPanel/GalleryItemActivityTable.vue

@@ -25,7 +25,7 @@
         <p v-if="Number(props.row.meta)">
           {{ formatPrice(props.row.meta)[0] }}
           <span class="has-text-grey">
-            (${{ formatPrice(props.row.meta)[1] }})</span
+            ${{ formatPrice(props.row.meta)[1] }}</span
           >
         </p>
       </NeoTableColumn>

components/teleport/Teleport.vue

@@ -96,6 +96,21 @@
       >
     </div>
 
+    <a
+      v-if="insufficientExistentialDeposit"
+      v-safe-href="
+        `https://support.polkadot.network/support/solutions/articles/65000168651-what-is-the-existential-deposit`
+      "
+      target="_blank"
+      class="has-text-danger">
+      {{
+        $t('teleport.insufficientExistentialDeposit', [
+          targetExistentialDepositAmount,
+          currency,
+        ])
+      }}
+    </a>
+
     <NeoButton
       :label="teleportLabel"
       size="large"
@@ -146,6 +161,7 @@ import { NeoButton, NeoField } from '@kodadot1/brick'
 import { blockExplorerOf } from '@/utils/config/chain.config'
 import { simpleDivision } from '@/utils/balance'
 import { useFiatStore } from '@/stores/fiat'
+import { existentialDeposit } from '@kodadot1/static'
 
 const {
   chainBalances,
@@ -176,6 +192,12 @@ const nativeAmount = computed(() =>
   Math.floor(amount.value * Math.pow(10, currentTokenDecimals.value)),
 )
 
+const targetExistentialDepositAmount = computed(() =>
+  Number(
+    targetExistentialDeposit.value / Math.pow(10, targetTokenDecimals.value),
+  ),
+)
+
 const amountToTeleport = computed(() =>
   Math.max(nativeAmount.value - teleportFee.value, 0),
 )
@@ -186,6 +208,18 @@ const recieveAmount = computed(() =>
   formatBalance(amountToTeleport.value, currentTokenDecimals.value, false),
 )
 
+const targetExistentialDeposit = computed(
+  () => existentialDeposit[chainToPrefixMap[toChain.value]],
+)
+
+const insufficientExistentialDeposit = computed(() => {
+  return Boolean(
+    targetExistentialDeposit.value &&
+      amountToTeleport.value &&
+      targetExistentialDeposit.value > amountToTeleport.value,
+  )
+})
+
 const teleportLabel = computed(() => {
   if (insufficientBalance.value) {
     return $i18n.t('teleport.insufficientBalance', [currency])
@@ -289,6 +323,8 @@ const currentTokenDecimals = computed(() =>
   getChainTokenDecimals(fromChain.value),
 )
 
+const targetTokenDecimals = computed(() => getChainTokenDecimals(toChain.value))
+
 const toChainLabel = computed(() =>
   getChainName(chainToPrefixMap[toChain.value]),
 )

libs/static/src/chains.ts

@@ -86,3 +86,12 @@ export const chainList = (): Option[] => {
     value: prefix,
   }))
 }
+
+export const existentialDeposit: Record<Prefix, number> = {
+  ksm: 333333333,
+  rmrk: 333333333,
+  ahk: 33333333,
+  dot: 10000000000,
+  ahp: 1000000000,
+  bsx: 1000000000000,
+}

libs/ui/src/components/MediaItem/type/ImageMedia.vue

@@ -11,11 +11,7 @@
       :image-component-props="imageComponentProps"
       :src="src"
       :alt="alt"
-      class="block rounded-none"
-      :class="{
-        'object-cover absolute inset-0 w-full h-full':
-          !original && !isFullscreen,
-      }"
+      :class="className"
       data-testid="type-image"
       @error.once="() => onError('error-1')" />
     <!-- if fail, try to load original url -->
@@ -24,15 +20,15 @@
       v-if="status === 'error-1'"
       :src="src"
       :alt="alt"
-      class="is-block image-media__image no-border-radius"
+      :class="className"
       data-testid="type-image"
       @error.once="() => onError('error-2')" />
     <!-- else, load placeholder -->
     <img
       v-if="status === 'error-2'"
       :src="placeholder"
       :alt="alt"
-      class="is-block image-media__image no-border-radius"
+      :class="className"
       data-testid="type-image" />
   </figure>
 </template>
@@ -73,6 +69,12 @@ type Status = 'ok' | 'error-1' | 'error-2'
 const status = ref<Status>('ok')
 const isGif = computed(() => props.mimeType === 'image/gif')
 
+const className = computed(() =>
+  !props.original && !props.isFullscreen
+    ? 'object-cover absolute inset-0 w-full h-full'
+    : 'block rounded-none',
+)
+
 const toOriginalContentUrl = (baseurl: string) => {
   const url = new URL(baseurl)
   url.searchParams.append('original', 'true')

libs/ui/src/components/NeoNotification/NeoNotification.vue

@@ -8,41 +8,31 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../scss/_theme.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_animations.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_helpers.scss';
 @import '@oruga-ui/oruga-next/src/scss/components/_notification.scss';
 
 .o-notices {
-  top: 4.5rem;
+  @apply top-[4.5rem];
 
   .o-notification {
-    padding: 1rem 2rem;
+    @apply py-4 px-8;
 
     &--component {
-      padding: 0 !important;
-      background-color: unset;
+      @apply p-0 #{!important};
+      @apply bg-[unset];
     }
   }
 }
 
 .is-neo-toast {
-  font-size: 12px;
-  border-radius: 0;
-  padding: 0.5rem 1rem !important;
+  @apply text-xs rounded-none bg-background-color border-default border-border-color shadow-primary text-text-color;
+  @apply py-2 px-4 #{!important};
 
-  @include ktheme() {
-    background-color: theme('background-color');
-    border: 1px solid theme('border-color');
-    box-shadow: theme('primary-shadow');
-    color: theme('text-color');
-    -webkit-box-shadow: theme('primary-shadow');
-
-    &:hover {
-      background-color: theme('k-accentlight');
-    }
+  &:hover {
+    @apply bg-k-accent-light;
   }
 }
 </style>

libs/ui/src/components/NeoTabs/NeoTabs.scss

@@ -1,4 +1,3 @@
-@import '../../scss/_theme.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_animations.scss';
@@ -9,105 +8,82 @@ $tabs-font-size: 1rem;
 @import '@oruga-ui/oruga-next/src/scss/components/_tabs.scss';
 
 .neo-tabs--toggle {
-  @include ktheme() {
-    background: theme('background-color');
-    box-shadow: theme('primary-shadow');
-  }
+  @apply bg-background-color shadow-primary;
 
   .o-tabs__content {
-    padding: 0;
+    @apply p-0;
   }
 }
 
 .o-tabs {
   &__nav {
-    overflow: auto;
-    white-space: nowrap;
+    @apply overflow-auto whitespace-nowrap;
 
     &--toggle {
-      padding-bottom: 0;
+      @apply pb-0;
 
       & + .o-tabs__content {
-        @include ktheme() {
-          border: 1px solid theme('border-color');
-          border-top: 0;
-        }
+        @apply border-default border-border-color border-t-0;
       }
     }
 
     &-item {
       &-default {
-        @include ktheme() {
-          color: theme('text-color');
-          margin-bottom: 1.5rem;
-          border-bottom-color: theme('k-shade');
+        @apply text-text-color mb-6 border-b-k-shade;
 
-          &--active {
-            font-weight: 700;
-          }
+        &--active {
+          @apply font-bold;
+        }
 
-          &:hover:not(.o-tabs__nav-item-default--active) {
-            background-color: unset;
+        &:hover:not(.o-tabs__nav-item-default--active) {
+          @apply bg-[unset];
 
-            .o-tabs__nav-item-text,
-            span,
-            div {
-              color: theme('link-hover');
-            }
+          .o-tabs__nav-item-text,
+          span,
+          div {
+            @apply text-link-hover;
           }
         }
       }
 
       &-toggle {
-        @include ktheme() {
-          border: 1px solid theme('border-color');
-          color: theme('text-color');
-          border-right: 0;
-
-          &--active {
-            background-color: theme('background-color-inverse');
-            color: theme('text-color-inverse');
-          }
+        @apply border-default border-border-color border-r-0 text-text-color;
 
-          &--disabled {
-            cursor: auto;
-            opacity: unset;
-            color: rgba($color: theme('text-color'), $alpha: 0.5) !important;
+        &--active {
+          @apply bg-background-color-inverse text-text-color-inverse;
+        }
 
-            .o-tip {
-              pointer-events: all;
-            }
+        &--disabled {
+          @apply cursor-auto opacity-unset text-text-color/50;
+          @apply text-text-color/50 #{!important};
 
-            &:hover {
-              background-color: inherit !important;
-            }
+          .o-tip {
+            @apply pointer-events-auto;
           }
 
-          &:hover:not(.o-tabs__nav-item-toggle--active) {
-            background-color: theme('k-accentlight2');
-            border-color: theme('border-color');
+          &:hover {
+            @apply bg-inherit #{!important};
           }
         }
+
+        &:hover:not(.o-tabs__nav-item-toggle--active) {
+          @apply bg-k-accent-light-2 border-border-color;
+        }
       }
 
       &-wrapper:last-child {
         button.o-tabs__nav-item-toggle {
-          @include ktheme() {
-            border-right: 1px solid theme('border-color');
-          }
+          @apply border-r border-border-color;
         }
       }
     }
   }
 
   .o-tab-item__content {
-    height: 100%;
+    @apply h-full;
   }
 
-  &__content {
-    &--fixed {
-      height: 20rem;
-      overflow-y: auto;
-    }
+  &__content--fixed {
+    @apply h-[20rem] overflow-y-auto;
   }
 }