Merge pull request #11163 from roiLeo/feature/init/swapLanding

✨ swap page landing

Author: vikiival

assets/svg/swap/arrow-down.svg

@@ -18,4 +18,5 @@ export type CollectionEntityMinimal = {
   name: string
   currentOwner: string
   type: string
+  ownerCount?: number
 }

assets/svg/swap/arrow-up.svg

@@ -4,9 +4,10 @@
       <template #trigger="{ active }">
         <NeoButton
           class="chain-dropdown-text"
+          :variant
           :label="
             isMobile || !showNetworkLabel
-              ? selected?.text
+              ? label || selected?.text
               : `Network: ${selected?.text}`
           "
           :icon="active ? 'chevron-up' : 'chevron-down'"
@@ -27,28 +28,32 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
+import { NeoButton, NeoDropdown, NeoDropdownItem, type NeoButtonVariant } from '@kodadot1/brick'
 import { type Prefix } from '@kodadot1/static'
 
 const props = withDefaults(
   defineProps<{
     showNetworkLabel: boolean
     position?: 'bottom-auto'
     redirect?: boolean
-    exclude: Prefix[]
+    exclude?: Prefix[]
+    variant?: NeoButtonVariant
+    label?: string
+    filterByVm?: boolean
   }>(),
   {
     showNetworkLabel: true,
     position: undefined,
     redirect: true,
     mobileModal: false,
     exclude: () => [],
+    filterByVm: false,
   },
 )
 
 const route = useReactiveRoute()
 const { setUrlPrefix, urlPrefix } = usePrefix()
-const { availableChains: allChains } = useChain()
+const { availableChains: allChains, availableChainsByVm: allChainInVm } = useChain()
 const { redirectAfterChainChange } = useChainRedirect()
 const { isMobile } = useViewport()
 
@@ -58,11 +63,10 @@ const selected = computed(() =>
   allChains.value.find(chain => chain.value === prefix.value),
 )
 
-const availableChains = computed(() =>
-  allChains.value.filter(
-    chain => !props.exclude.includes(chain.value as Prefix),
-  ),
-)
+const availableChains = computed(() => {
+  return (props.filterByVm ? allChainInVm.value : allChains.value)
+    .filter(chain => !props.exclude.includes(chain.value as Prefix))
+})
 
 function onSwitchChain(chain) {
   setUrlPrefix(chain)

assets/svg/swap/arrows.svg

@@ -6,12 +6,13 @@
     >
       <input
         v-model="model"
+        :disabled="disabled"
         type="number"
         step="0.01"
         min="0.001"
         pattern="[0-9]+([\.,][0-9]+)?"
         class="indent-2.5 border-none outline-none w-20 bg-background-color text-text-color"
-        :placeholder="$t('price')"
+        :placeholder="placeholder || $t('price')"
       >
       <div class="px-3 flex items-center">
         {{ chainSymbol }}
@@ -35,6 +36,8 @@ const props = defineProps<{
   modelValue?: number | string
   check?: boolean
   fullWidth?: boolean
+  disabled?: boolean
+  placeholder?: string
 }>()
 const emit = defineEmits(['confirm', 'update:modelValue'])
 

components/collection/utils/types.ts

@@ -13,7 +13,9 @@
     :class="{
       'in-cart-border':
         shoppingCartStore.isItemInCart(nft.id)
-        || listingCartStore.isItemInCart(nft.id),
+        || listingCartStore.isItemInCart(nft.id)
+        || isAtomicSwapItemSelected
+      ,
     }"
     :show-action-on-hover="!showActionSection"
     :link="NuxtLink"
@@ -26,7 +28,7 @@
       #action
     >
       <div
-        v-if="!isOwner && Number(nft?.price)"
+        v-if="!isOwner && Number(nft?.price) && !showAtomicSwapAction"
         class="flex"
       >
         <NeoButton
@@ -56,15 +58,15 @@
         </NeoButton>
       </div>
       <div
-        v-else-if="isOwner && !hideListing"
+        v-else-if="showSelect"
         class="flex"
       >
         <NeoButton
-          :label="listLabel"
+          :label="selectLabel"
           data-testid="item-buy"
           no-shadow
           class="flex-grow"
-          @click.prevent="onClickListingCart"
+          @click.prevent="onSelect"
         />
       </div>
     </template>
@@ -80,6 +82,7 @@
 // PLEASE FIX bind-key href => to
 import { resolveComponent } from 'vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import useAtomicSwapAction from './useAtomicSwapAction'
 import type { NftCardVariant } from '@/components/shared/nftCard/types'
 import type { NFTWithMetadata } from '@/composables/useNft'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
@@ -111,6 +114,12 @@ const props = defineProps<{
   skeletonVariant: string
 }>()
 
+const {
+  onAtomicSwapSelect,
+  showAtomicSwapAction,
+  isItemSelected: isAtomicSwapItemSelected,
+} = useAtomicSwapAction(props.nft)
+
 const showActionSection = computed(() => {
   return !isLogIn.value && shoppingCartStore.getItemToBuy?.id === props.nft.id
 })
@@ -125,8 +134,6 @@ const buyLabel = computed(function () {
   )
 })
 
-const listLabel = computed(() => listingCartStore.isItemInCart(props.nft.id) ? $i18n.t('remove') : $i18n.t('select'))
-
 const isOwner = computed(() => isCurrentOwner(props.nft?.currentOwner))
 
 const openCompletePurcahseModal = () => {
@@ -155,8 +162,29 @@ const onClickShoppingCart = () => {
     shoppingCartStore.setItem(nftToShoppingCartItem(props.nft))
   }
 }
-const onClickListingCart = () => {
-  listNftByNftWithMetadata(props.nft, { toggle: true })
+
+const onClickListingCart = () => listNftByNftWithMetadata(props.nft, { toggle: true })
+
+const selectLabel = computed(() => {
+  const selected = showAtomicSwapAction.value ? isAtomicSwapItemSelected.value : listingCartStore.isItemInCart(props.nft.id)
+  return selected ? $i18n.t('remove') : $i18n.t('select')
+})
+
+const showSelect = computed(() => {
+  if (showAtomicSwapAction.value) {
+    return true
+  }
+
+  return isOwner.value && !props.hideListing
+})
+
+const onSelect = () => {
+  if (showAtomicSwapAction.value) {
+    onAtomicSwapSelect()
+  }
+  else {
+    onClickListingCart()
+  }
 }
 </script>
 

components/common/ChainDropdown.vue

@@ -0,0 +1,42 @@
+import type { NFTWithMetadata } from '@/composables/useNft'
+import { SwapStep } from '@/components/swap/types'
+
+export default (nft: NFTWithMetadata) => {
+  const route = useRoute()
+  const swapStore = useAtomicSwapStore()
+  const { swap, step, stepItems } = storeToRefs(swapStore)
+
+  const routeName = computed(() => route.name?.toString() as string)
+
+  const showAtomicSwapAction = computed(() => ATOMIC_SWAP_PAGES.includes(routeName.value))
+
+  const isItemSelected = computed(() => {
+    return step.value === SwapStep.REVIEW
+      ? false
+      : [...swap.value.desired, ...swap.value.offered].flat().some(item => item.id === nft.id)
+  })
+
+  const onAtomicSwapSelect = () => {
+    if (isItemSelected.value) {
+      swapStore.removeStepItem(nft.id)
+    }
+    else {
+      swapStore.updateStepItems([
+        ...stepItems.value,
+        {
+          id: nft.id,
+          collectionId: nft.collection.id,
+          sn: nft.sn,
+          name: nft.name,
+          meta: nft.meta,
+        },
+      ])
+    }
+  }
+
+  return {
+    onAtomicSwapSelect,
+    showAtomicSwapAction,
+    isItemSelected,
+  }
+}

components/common/listingCart/shared/ListingCartPriceInput.vue

@@ -25,6 +25,7 @@ const EXCLUDED_TOKEN_USE_PAGES = [
   'prefix-collection-id',
   'prefix-drops-id',
   'prefix-u-id',
+  ...ATOMIC_SWAP_PAGES,
 ]
 
 export function useFetchSearch({

components/items/ItemsGrid/ItemsGridImage.vue

@@ -1,5 +1,4 @@
 import nftById from '@/queries/subsquid/general/nftById.graphql'
-import listCount from '@/queries/subsquid/general/countOfTokenNftsToList.graphql'
 import nftListWithSearch from '@/queries/subsquid/ahk/nftListWithSearch.graphql'
 import type { TokenId } from '@/types'
 
@@ -120,19 +119,15 @@ export const getTokensNfts = async (
 }
 
 export const checkIfAnythingToList = async (entities: TokenEntity[]) => {
-  const { client, urlPrefix } = usePrefix()
   const { accountId } = useAuth()
-  const { data } = await useAsyncQuery<{ count: { totalCount: number } }>({
-    query: listCount,
-    variables: {
-      token: entities.map(({ id }) => id),
-      owner: accountId.value,
-      denyList: getDenyList(urlPrefix.value),
-    },
-    clientId: client.value,
+
+  const count = await getNftCount({
+    token: { id_in: entities.map(n => n.id) },
+    currentOwner_eq: accountId.value,
+    price_eq: 0,
   })
 
-  return data.value.count.totalCount > 0
+  return count > 0
 }
 
 export function useNftActions(entity: TokenEntity) {