kodadot · vikiival · Aug 27, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 18, 2024
@@ -90,9 +90,6 @@ const label = computed(() => {
   if (isCheckingMintRequirements.value) {
     return $i18n.t('checking')
   }
-  if (drop.value.userAccess === false) {
-    return $i18n.t('mint.unlockable.notEligibility')
-  }
 
   if (isMintNotLive.value) {
     return $i18n.t('mint.unlockable.mintingNotLive')
@@ -131,7 +128,6 @@ const enabled = computed(() => {
     || !previewItem.value // no image
     || isCheckingMintRequirements.value // still checking requirements
     || loading.value // still loading
-    || drop.value.userAccess === false // no access due to geofencing
   ) {
     return false
   }

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="nft">
     <div class="flex justify-between">
       <div class="flex">
         <div>
@@ -48,23 +48,30 @@
 <script setup lang="ts">
 import { parseNftAvatar } from '@/utils/nft'
 import type { ListCartItem } from '@/stores/listingCart'
+import type { MakingOfferItem } from '@/components/offer/types'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
 
 const avatar = ref<string>()
 
 const props = defineProps<{
-  nft: ListCartItem
+  nft?: (ListCartItem | MakingOfferItem) & {
+    mediaUrl?: {
+      image: string
+      mimeType: string
+    }
+  }
   discarded?: boolean
 }>()
 
 const getAvatar = async () => {
   if (props.nft) {
-    avatar.value = await parseNftAvatar(props.nft)
+    avatar.value = await parseNftAvatar(props.nft as EntityWithMeta)
   }
 }
 
 onMounted(() => {
-  if (!props.nft.mediaUrl) {
+  if (!props.nft?.mediaUrl) {
     getAvatar()
   }
 })

@@ -56,6 +56,7 @@ import { ModalCloseType } from '@/components/navbar/types'
 
 const emit = defineEmits(['close', 'connect'])
 const props = defineProps<{ preselected?: ChainVM }>()
+const { isWalletModalOpen } = useWallet()
 
 const { urlPrefix, setUrlPrefix } = usePrefix()
 const { redirectAfterChainChange } = useChainRedirect()
@@ -67,16 +68,11 @@ const selectedTab = ref<ChainVM>(props.preselected ?? 'SUB')
 
 const showAccount = computed(() => Boolean(account.value))
 
-const isCurrentPrefixAvailableForVm = (vm: ChainVM) =>
-  getAvailableChainsByVM(vm)
-    .map(({ value }) => value)
-    .includes(urlPrefix.value)
-
 const setAccount = (account: WalletAccount) => {
   walletStore.setWallet(account)
   identityStore.setAuth({ address: account.address })
 
-  if (!isCurrentPrefixAvailableForVm(account.vm)) {
+  if (!isPrefixVmOf(urlPrefix.value, account.vm)) {
     const newChain = DEFAULT_VM_PREFIX[account.vm]
     setUrlPrefix(newChain)
     redirectAfterChainChange(newChain)
@@ -85,7 +81,12 @@ const setAccount = (account: WalletAccount) => {
   emit('connect', account)
 }
 
-onMounted(() => walletStore.setDisconnecting(false))
+onMounted(() => {
+  walletStore.setDisconnecting(false)
+  isWalletModalOpen.value = true
+})
+
+onUnmounted(() => isWalletModalOpen.value = false)
 
 watch([urlPrefix], () => {
   emit('close', ModalCloseType.NAVIGATION)

@@ -112,6 +112,8 @@
 
 <script lang="ts" setup>
 import { NeoIcon, NeoSkeleton } from '@kodadot1/brick'
+import { DEFAULT_VM_PREFIX } from '@kodadot1/static'
+import { chainPropListOf } from '@/utils/config/chain.config'
 import type { WalletAccount } from '@/utils/config/wallets'
 import type { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
 import shouldUpdate from '@/utils/shouldUpdate'
@@ -128,6 +130,7 @@ defineProps<{
 
 const { chainProperties } = useChain()
 const { $consola } = useNuxtApp()
+const { urlPrefix } = usePrefix()
 const hasWalletProviderExtension = ref(false)
 const walletAccounts = ref<WalletAccount[]>([])
 const showAccountList = ref(false)
@@ -166,7 +169,7 @@ const { data: existingProfiles, isLoading: isProfilesLoading } = useProfiles('ac
 const formatAccount = (account: WalletAccount): WalletAccount => {
   return {
     ...account,
-    address: formatAddress(account.address, ss58Format.value),
+    address: formatAddress(account.address, !isPrefixVmOf(urlPrefix.value, 'SUB') ? chainPropListOf(DEFAULT_VM_PREFIX['SUB']).ss58Format : ss58Format.value),
   }
 }
 

@@ -56,7 +56,7 @@
 
       <NeoButton
         :label="autoTeleportLabel"
-        variant="primary"
+        :variant="buttonVariant"
         no-shadow
         :shiny="shiny"
         :disabled="isDisabled"
@@ -96,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoSwitch } from '@kodadot1/brick'
+import { NeoButton, NeoSwitch, type NeoButtonVariant } from '@kodadot1/brick'
 import AutoTeleportWelcomeModal from './AutoTeleportWelcomeModal.vue'
 import type { ActionlessInteraction } from './utils'
 import { getActionDetails } from './utils'
@@ -133,6 +133,7 @@ const props = withDefaults(
     loading?: boolean
     shiny?: boolean
     earlySuccess?: boolean
+    buttonVariant?: NeoButtonVariant
   }>(),
   {
     autoCloseModalDelayModal: undefined,
@@ -146,6 +147,7 @@ const props = withDefaults(
     loading: false,
     shiny: false,
     earlySuccess: true,
+    buttonVariant: 'primary',
   },
 )
 

@@ -76,7 +76,7 @@
 
         <div class="flex justify-between px-6">
           <AutoTeleportActionButton
-            ref="autoteleportButton"
+            ref="autoTeleportButton"
             :actions="actions"
             :disabled="confirmButtonDisabled"
             :fees="{ forceActionAutoFees: true }"
@@ -114,6 +114,7 @@ import AutoTeleportActionButton, {
 } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import { hasOperationsDisabled } from '@/utils/prefix'
+import useAutoTeleportActionButton from '@/composables/autoTeleport/useAutoTeleportActionButton'
 
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
@@ -138,19 +139,17 @@ const { chainSymbol, decimals } = useChain()
 
 const fixedPrice = ref()
 const floorPricePercentAdjustment = ref()
-const autoTeleport = ref(false)
-const autoteleportButton = ref()
+
 const itemCount = ref(listingCartStore.count)
 const items = ref<ListCartItem[]>([])
-const autoTeleportLoaded = ref(false)
 
 const isSuccessModalOpen = computed(
   () => Boolean(items.value.length) && isTransactionSuccessful.value,
 )
 
 const teleportTransitionTxFees = computed(() =>
   format(
-    autoteleportButton.value?.optimalTransition.txFees || 0,
+    autoTeleportButton.value?.optimalTransition.txFees || 0,
     decimals.value,
     chainSymbol.value,
   ),
@@ -167,7 +166,30 @@ watch(floorPricePercentAdjustment, (rate) => {
 })
 
 const fiatStore = useFiatStore()
-const action = ref<Actions>(emptyObject<Actions>())
+
+const getAction = (items: ListCartItem[]): Actions => {
+  const token = items
+    .filter((item): item is ListCartItem & { listPrice: number } =>
+      Boolean(item.listPrice),
+    )
+    .map(item => ({
+      price: String(calculateBalance(item.listPrice, decimals.value)),
+      nftId: item.id,
+    })) as TokenToList[]
+
+  return {
+    interaction: Interaction.LIST,
+    urlPrefix: urlPrefix.value,
+    token,
+    successMessage: $i18n.t('transaction.price.success') as string,
+    errorMessage: $i18n.t('transaction.price.error') as string,
+  }
+}
+
+const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded } = useAutoTeleportActionButton({
+  getActionFn: () => getAction(listingCartStore.itemsInChain),
+})
+
 const actions = computed<AutoTeleportAction[]>(() => [
   {
     action: action.value,
@@ -218,7 +240,7 @@ const confirmButtonDisabled = computed(
   () =>
     hasOperationsDisabled(urlPrefix.value)
     || Boolean(listingCartStore.incompleteListPrices)
-    || !autoteleportButton.value?.isReady,
+    || !autoTeleportButton.value?.isReady,
 )
 
 const confirmListingLabel = computed(() => {
@@ -227,7 +249,7 @@ const confirmListingLabel = computed(() => {
   }
   switch (listingCartStore.incompleteListPrices) {
     case 0:
-      if (!autoteleportButton.value?.isReady) {
+      if (!autoTeleportButton.value?.isReady) {
         return $i18n.t('autoTeleport.checking')
       }
 
@@ -245,25 +267,6 @@ const confirmListingLabel = computed(() => {
   }
 })
 
-const getAction = (items: ListCartItem[]): Actions => {
-  const token = items
-    .filter((item): item is ListCartItem & { listPrice: number } =>
-      Boolean(item.listPrice),
-    )
-    .map(item => ({
-      price: String(calculateBalance(item.listPrice, decimals.value)),
-      nftId: item.id,
-    })) as TokenToList[]
-
-  return {
-    interaction: Interaction.LIST,
-    urlPrefix: urlPrefix.value,
-    token,
-    successMessage: $i18n.t('transaction.price.success') as string,
-    errorMessage: $i18n.t('transaction.price.error') as string,
-  }
-}
-
 const submitListing = () => {
   return transaction(getAction(items.value || []))
 }
@@ -321,21 +324,6 @@ watch(
   },
 )
 
-watch(
-  () => autoteleportButton.value?.isReady,
-  () => {
-    if (autoteleportButton.value?.isReady && !autoTeleportLoaded.value) {
-      autoTeleportLoaded.value = true
-    }
-  },
-)
-
-watchSyncEffect(() => {
-  if (!autoTeleport.value) {
-    action.value = getAction(listingCartStore.itemsInChain)
-  }
-})
-
 const closeListingCartModal = () =>
   (preferencesStore.listingCartModalOpen = false)
 

@@ -1,6 +1,6 @@
 <template>
   <div class="border-t border-k-shade py-5">
-    <ListingCartItemDetails
+    <CartItemDetails
       :nft="nft"
       :discarded="nft.discarded"
     >
@@ -36,14 +36,14 @@
           </div>
         </div>
       </template>
-    </ListingCartItemDetails>
+    </CartItemDetails>
   </div>
 </template>
 
 <script setup lang="ts">
 import { NeoButton } from '@kodadot1/brick'
 import ListingCartPriceInput from '../shared/ListingCartPriceInput.vue'
-import ListingCartItemDetails from '../shared/ListingCartItemDetails.vue'
+import CartItemDetails from '@/components/common/CartItemDetails.vue'
 import type { ListCartItem } from '@/stores/listingCart'
 import { useListingCartStore } from '@/stores/listingCart'
 import formatBalance from '@/utils/format/balance'

@@ -1,6 +1,6 @@
 <template>
   <div class="py-5">
-    <ListingCartItemDetails :nft="item">
+    <CartItemDetails :nft="item">
       <template #right>
         <div class="flex items-end">
           {{ itemPrice }}
@@ -17,7 +17,7 @@
           </div>
         </div>
       </template>
-    </ListingCartItemDetails>
+    </CartItemDetails>
 
     <hr class="my-5">
 
@@ -36,9 +36,9 @@
 </template>
 
 <script setup lang="ts">
-import ListingCartItemDetails from '../shared/ListingCartItemDetails.vue'
 import ListingCartFloorPrice from '../shared/ListingCartFloorPrice.vue'
 import ListingCartPriceInput from '../shared/ListingCartPriceInput.vue'
+import CartItemDetails from '@/components/common/CartItemDetails.vue'
 import { useListingCartStore } from '@/stores/listingCart'
 import formatBalance from '@/utils/format/balance'
 

@@ -6,6 +6,7 @@ import { sum } from '@/utils/math'
 import type { NFT, TokenId } from '@/components/rmrk/service/scheme'
 import { chainPropListOf } from '@/utils/config/chain.config'
 import { nameWithIndex } from '@/utils/nft'
+import type { MakingOfferItem } from '@/components/offer/types'
 
 export const prefixToToken = {
   ksm: 'KSM',
@@ -90,6 +91,22 @@ export const nftToListingCartItem = (
   }
 }
 
+export const nftToOfferItem = (nft: NFT & TokenId): MakingOfferItem => {
+  const { urlPrefix } = usePrefix()
+
+  return {
+    id: nft.id,
+    name: nameWithIndex(nft.name, nft.sn),
+    price: nft.price ?? '0',
+    urlPrefix: urlPrefix.value,
+    collection: nft.collection,
+    metadata: nft.metadata,
+    meta: nft.meta,
+    sn: nft.sn,
+    currentOwner: nft.currentOwner,
+  }
+}
+
 export const shoppingCartItemToListingCartItem = (
   item: ShoppingCartItem,
   floor = '',