Merge branch 'main' into neomodalhead-tailwindcss

components/MessageNotify.vue

@@ -59,7 +59,7 @@ const realworldFullPath = computed(() => {
   &--toast {
     z-index: 100;
     position: fixed;
-    border-radius: 0;
+    border-radius: 0 !important;
     top: 100px;
     right: 0;
     margin-left: auto;
@@ -73,7 +73,8 @@ const realworldFullPath = computed(() => {
   }
 
   .message-body {
-    border: none;
+    border-left-width: 0;
+    border-radius: 0;
   }
 
   .congrats-message {

components/carousel/CarouselTypeGenerative.vue

@@ -8,10 +8,11 @@
 </template>
 
 <script lang="ts" setup>
+import { AHK_GENERATIVE_DROPS, AHP_GENERATIVE_DROPS } from '@/utils/drop'
 import { useCarouselGenerativeNftEvents } from './utils/useCarouselEvents'
 
 const { nfts, ids } = await useCarouselGenerativeNftEvents(
-  ['176'],
-  ['38', '40', '46', '49', '50'],
+  AHK_GENERATIVE_DROPS,
+  AHP_GENERATIVE_DROPS,
 )
 </script>

components/collection/drop/modal/DropConfirmModal.vue

@@ -7,17 +7,17 @@
     content-class="modal-width"
     @close="onClose">
     <ModalBody :title="title" @close="onClose">
-      <transition name="fade">
-        <EmailSignup v-if="needsEmail" @confirm="handleEmailSignupConfirm" />
+      <EmailSignup
+        v-if="isEmailSignupStep"
+        @confirm="handleEmailSignupConfirm" />
 
-        <ClaimingDrop v-else-if="claimingDrop" :est="displayDuration" />
+      <ClaimingDrop v-else-if="isClaimingDropStep" :est="displayDuration" />
 
-        <SuccessfulDrop
-          v-else-if="successfulDrop && sanitizedMintedNft"
-          :minted-nft="sanitizedMintedNft"
-          :can-list-nft="canListNft"
-          @list="$emit('list')" />
-      </transition>
+      <SuccessfulDrop
+        v-else-if="isSuccessfulDropStep"
+        :minted-nft="sanitizedMintedNft"
+        :can-list-nft="canListNft"
+        @list="$emit('list')" />
     </ModalBody>
   </NeoModal>
 </template>
@@ -34,6 +34,12 @@ import {
   useCountDown,
 } from '@/components/collection/unlockable/utils/useCountDown'
 
+enum ModalStep {
+  EMAIL = 'email',
+  CLAIMING = 'claiming',
+  SUCCEEDED = 'succeded',
+}
+
 const emit = defineEmits(['confirm', 'completed', 'close', 'list'])
 const props = defineProps<{
   modelValue: boolean
@@ -51,13 +57,10 @@ const { $i18n } = useNuxtApp()
 
 const isModalActive = useVModel(props, 'modelValue')
 
+const modalStep = ref<ModalStep>(ModalStep.EMAIL)
 const email = ref<string>()
 const nftCoverLoaded = ref(false)
-
-const successfulDrop = computed(() => Boolean(sanitizedMintedNft.value))
-const claimingDrop = computed(() =>
-  nftCoverLoaded.value ? false : distance.value > 0,
-)
+const retry = ref(3)
 
 const sanitizedMintedNft = computed<DropMintedNft | undefined>(
   () =>
@@ -67,16 +70,24 @@ const sanitizedMintedNft = computed<DropMintedNft | undefined>(
     },
 )
 
-const needsEmail = computed(
-  () => !email.value && !claimingDrop.value && !successfulDrop.value,
-)
+const isEmailSignupStep = computed(() => modalStep.value === 'email')
+const isClaimingDropStep = computed(() => modalStep.value === 'claiming')
+const isSuccessfulDropStep = computed(() => modalStep.value === 'succeded')
+
+const moveSuccessfulDrop = computed(() => {
+  if (nftCoverLoaded.value) {
+    return true
+  }
+
+  return distance.value <= 0 && sanitizedMintedNft.value && retry.value === 0
+})
 
 const title = computed(() => {
-  if (needsEmail.value) {
+  if (isEmailSignupStep.value) {
     return $i18n.t('drops.finalizeClaimNow')
   }
 
-  if (claimingDrop.value) {
+  if (isClaimingDropStep.value) {
     return $i18n.t('drops.claimingDrop')
   }
 
@@ -106,9 +117,23 @@ watch(
   },
 )
 
-watch(sanitizedMintedNft, async (mintedNft) => {
-  if (mintedNft?.image) {
-    nftCoverLoaded.value = await preloadImage(mintedNft.image)
+watch([sanitizedMintedNft, retry], async ([mintedNft]) => {
+  if (mintedNft?.image && retry.value) {
+    try {
+      nftCoverLoaded.value = await preloadImage(mintedNft.image)
+    } catch (error) {
+      retry.value -= 1
+    }
+  }
+})
+
+watchEffect(() => {
+  if (props.claiming && isEmailSignupStep.value) {
+    modalStep.value = ModalStep.CLAIMING
+  } else if (moveSuccessfulDrop.value && isClaimingDropStep.value) {
+    modalStep.value = ModalStep.SUCCEEDED
+  } else if (!props.modelValue && isSuccessfulDropStep.value) {
+    modalStep.value = ModalStep.EMAIL
   }
 })
 </script>

components/collection/unlockable/UnlockableCollectionInfo.vue

@@ -23,7 +23,6 @@
           rounded
           :tag="NuxtLink"
           :to="`/${urlPrefix}/collection/${collectionId}`"
-          target="_blank"
           icon="arrow-right">
           <span>View Collection</span>
         </NeoButton>

components/collection/unlockable/UnlockableLandingMobileBanner.vue

@@ -9,7 +9,7 @@
         alt="unlockable icon" />
       <span>{{ $t('mint.unlockable.mintLive') }}</span>
     </div>
-    <nuxt-link class="has-text-weight-bold" to="/ahp/drops/wallstreet">
+    <nuxt-link class="has-text-weight-bold" :to="DEFAULT_DROP">
       {{ $t('mint.unlockable.takeMe') }}
     </nuxt-link>
   </div>

components/collection/unlockable/UnlockableLandingTag.vue

@@ -14,7 +14,7 @@
     <div class="separator mx-2" />
     <nuxt-link
       class="is-flex is-align-items-center has-text-weight-bold my-2"
-      to="/ahp/drops/wallstreet">
+      :to="DEFAULT_DROP">
       {{ $t('mint.unlockable.takeMe') }}
     </nuxt-link>
   </div>

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -42,7 +42,7 @@
             :data-testid="`sidebar-language-${lang.value}`"
             :value="lang.value"
             :class="{ 'is-active': $i18n.locale === lang.value }"
-            @click="$i18n.locale = lang.value">
+            @click="setUserLocale(lang.value)">
             <span>{{ lang.flag }} {{ lang.label }}</span>
           </NeoDropdownItem>
         </NeoDropdown>
@@ -63,7 +63,7 @@
 
 <script setup lang="ts">
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
-import { langsFlags } from '@/utils/config/i18n'
+import { langsFlags, setUserLocale } from '@/utils/config/i18n'
 
 const { urlPrefix } = usePrefix()
 const { isBasilisk } = useIsChain(urlPrefix)

components/items/ItemsGrid/ItemsGrid.vue

@@ -8,6 +8,7 @@
       v-if="total !== 0 && (!isLoading || !isFetchingData)"
       :id="scrollContainerId"
       v-slot="slotProps"
+      :mobile-cols="2"
       class="my-5">
       <div
         v-for="(entity, index) in items"
@@ -53,7 +54,8 @@
     <!-- skeleton on first load -->
     <DynamicGrid
       v-if="total === 0 && (isLoading || isFetchingData)"
-      class="my-5">
+      class="my-5"
+      :mobile-cols="2">
       <NeoNftCardSkeleton
         v-for="n in skeletonCount"
         :key="n"

components/navbar/MobileLanguageOption.vue

@@ -13,13 +13,13 @@
 </template>
 
 <script lang="ts" setup>
-import { langsFlags } from '@/utils/config/i18n'
+import { langsFlags, setUserLocale } from '@/utils/config/i18n'
 
 const { $i18n } = useNuxtApp()
 const emit = defineEmits(['closeLanguageOption', 'closeMobileSubMenu'])
 
 const setUserLang = (value: string) => {
-  $i18n.locale.value = value
+  setUserLocale(value)
   emit('closeLanguageOption')
   emit('closeMobileSubMenu')
 }

components/navbar/ProfileDropdown.vue

@@ -59,7 +59,7 @@
         aria-role="listitem"
         :value="lang.value"
         :class="{ 'is-active': $i18n.locale === lang.value }"
-        @click="$i18n.locale = lang.value">
+        @click="setUserLocale(lang.value)">
         <span>{{ lang.flag }} {{ lang.label }}</span>
       </NeoDropdownItem>
     </NeoDropdown>
@@ -70,7 +70,10 @@
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
 import Avatar from '@/components/shared/Avatar.vue'
 import { useIdentityStore } from '@/stores/identity'
-import { langsFlags as langsFlagsList } from '@/utils/config/i18n'
+import {
+  langsFlags as langsFlagsList,
+  setUserLocale,
+} from '@/utils/config/i18n'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
 

components/profile/activityTab/History.vue

@@ -10,7 +10,7 @@
 
     <div v-if="!desktop" class="is-flex is-justify-content-flex-end my-5">
       <Pagination
-        v-model="currentPage"
+        :value="currentPage"
         :total="total"
         :per-page="itemsPerPage"
         :range-before="2"

components/shared/DynamicGrid.vue

@@ -17,6 +17,7 @@ const props = withDefaults(
     }
     gridSize?: 'small' | 'medium' | 'large'
     mobileVariant?: boolean
+    mobileCols?: number
   }>(),
   {
     defaultWidth: () => ({
@@ -25,6 +26,7 @@ const props = withDefaults(
       large: 16 * 20, // 20rem
     }),
     mobileVariant: true,
+    mobileCols: 1,
   },
 )
 
@@ -45,7 +47,7 @@ const updateColumns = () => {
       containerWidth.value / props.defaultWidth[grid.value],
     )
 
-    cols.value = isMobileVariant.value ? 1 : getCols
+    cols.value = isMobileVariant.value ? props.mobileCols : getCols
   }
 }
 

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]),
 )

composables/popularCollections/constants.ts

@@ -54,11 +54,7 @@ export const POPULAR_COLLECTIONS = {
     'u-31848', // Ajuna Network Promo Collection
   ],
   ahp: [
-    '50', // .motherboard
-    '49', // wallstreet
-    '46', // Snowflakes
-    '40', // Swirls
-    '38', // Generativ Art - Pare1d0scope
+    ...AHP_POPULAR_DROP_COLLECTIONS,
     '10', // Kodachain - Berlin Onchain Exhibition
     '11', // Kodachain - Sub0 Opening Party 2023
     '13', // The sub0 2023 Biodiversity Collection

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,
+}