feat: mass listing

components/common/listingCart/ListingCartItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="py-2 px-6">
+    <div class="py-2 listing-border" />
+    <div class="is-flex is-justify-content-space-between">
+      <div class="is-flex">
+        <div>
+          <BasicImage
+            :src="avatar"
+            :alt="nft?.name"
+            class="border image is-48x48" />
+        </div>
+
+        <div
+          class="is-flex is-flex-direction-column is-justify-content-space-between ml-4 limit-width">
+          <div
+            class="has-text-weight-bold has-text-color line-height-1 no-wrap is-clipped is-ellipsis">
+            {{ nft.name }}
+          </div>
+          <div class="line-height-1 no-wrap is-clipped is-ellipsis">
+            {{ nft.collection?.name || nft.collection.id }}
+          </div>
+        </div>
+      </div>
+
+      <NeoButton
+        class="has-text-grey pt-4"
+        variant="text"
+        no-shadow
+        icon="trash"
+        icon-pack="far"
+        @click.native="listingCartStore.removeItem(nft.id)" />
+    </div>
+    <div class="is-flex is-justify-content-space-between pt-2">
+      <div class="is-flex is-flex-direction-column">
+        <div class="has-text-grey"><small>Floor</small></div>
+        <span>{{ floor }}</span>
+      </div>
+
+      <div class="is-flex is-align-items-end pt-2">
+        <ListingCartPriceInput
+          v-model="listingCartStore.getItem(nft.id).listPrice"
+          style="height: 100%" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { parseNftAvatar } from '@/utils/nft'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPriceInput.vue'
+import { NeoButton } from '@kodadot1/brick'
+import { ListCartItem, useListingCartStore } from '@/stores/listingCart'
+import { formatBalance } from '@polkadot/util'
+const { decimals, chainSymbol } = useChain()
+
+const listingCartStore = useListingCartStore()
+
+const avatar = ref<string>()
+
+const props = defineProps<{
+  nft: ListCartItem
+}>()
+
+const getAvatar = async () => {
+  if (props.nft) {
+    avatar.value = await parseNftAvatar(props.nft)
+  }
+}
+
+const floor = computed(() =>
+  formatBalance(props.nft.collection.floor, {
+    decimals: decimals.value,
+    withUnit: chainSymbol.value,
+  })
+)
+
+onMounted(() => {
+  getAvatar()
+})
+</script>
+<style scoped lang="scss">
+.listing-border {
+  border-top: 1px solid #ccc;
+}
+.limit-width {
+  max-width: 170px;
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+</style>

components/common/listingCart/ListingCartMini.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition v-if="listingCartStore.count" name="slide">
+    <div class="listing-container">
+      <div class="is-inline-flex is-align-items-center">
+        <div class="k-shadow theme-background-color border py-2">
+          <div class="is-inline-flex is-align-items-center mx-5">
+            <div>
+              <b>{{ listingCartStore.count }}</b> {{ $t('items') }}
+            </div>
+            <div class="bar mx-4" />
+            <NeoButton
+              :disabled="!listingCartStore.count"
+              variant="text"
+              no-shadow
+              @click.native="listingCartStore.clear">
+              {{ $t('sort.clearAll') }}
+            </NeoButton>
+            <div class="bar mx-4" />
+            <NeoButton
+              variant="text"
+              no-shadow
+              @click.native="listingCartStore.addAllToCart">
+              Select All
+            </NeoButton>
+          </div>
+        </div>
+        <NeoButton
+          class="height-100"
+          :variant="'k-accent'"
+          @click.native="preferencesStore.listingCartModalOpen = true">
+          List Items
+        </NeoButton>
+      </div>
+    </div>
+  </transition>
+</template>
+<script setup lang="ts">
+import { NeoButton } from '@kodadot1/brick'
+import { useListingCartStore } from '@/stores/listingCart'
+import { usePreferencesStore } from '@/stores/preferences'
+const listingCartStore = useListingCartStore()
+const preferencesStore = usePreferencesStore()
+</script>
+<style scoped lang="scss">
+.listing-container {
+  position: fixed;
+  right: 80px;
+  bottom: 50px;
+  z-index: 998;
+}
+
+.height-100 {
+  height: 100%;
+}
+</style>

components/common/listingCart/ListingCartModal.vue

@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <Loader v-model="isLoading" :status="status" />
+    <NeoModal
+      v-model="preferencesStore.listingCartModalOpen"
+      :can-cancel="['outside', 'escape']"
+      scroll="clip"
+      class="top"
+      @close="preferencesStore.listingCartModalOpen = false">
+      <div class="modal-width">
+        <header
+          class="py-5 px-6 is-flex is-justify-content-space-between border-bottom">
+          <span class="modal-card-title is-size-6 has-text-weight-bold">
+            List {{ listingCartStore.count }} Items
+          </span>
+
+          <NeoButton
+            variant="text"
+            no-shadow
+            icon="close"
+            @click.native="preferencesStore.listingCartModalOpen = false" />
+        </header>
+        <div class="px-6 pt-4">
+          <div
+            class="rounded border shade-border-color is-flex is-justify-content-start is-flex-grow-1 pl-3">
+            <IdentityItem
+              v-if="isLogIn"
+              :label="$t('confirmPurchase.connectedWith')"
+              hide-identity-popover
+              disable-identity-link
+              :prefix="urlPrefix"
+              :account="accountId"
+              class="identity-name-font-weight-regular"
+              data-cy="item-creator" />
+          </div>
+          <div class="pt-4"><b>Set All To</b></div>
+          <div class="pt-4">
+            Collection Floor Price
+            <span v-if="floorPricePercentAdjustment !== 1" class="has-text-grey"
+              >{{ (floorPricePercentAdjustment * 100 - 100).toFixed(0) }}%</span
+            >
+          </div>
+          <div class="py-2 is-flex is-justify-content-start is-flex-grow-1">
+            <NeoButton
+              class="mr-2"
+              label="-5%"
+              rounded
+              no-shadow
+              @click.native="
+                floorPricePercentAdjustment > 0.05 &&
+                  (floorPricePercentAdjustment -= 0.05)
+                listingCartStore.setFloorPrice(floorPricePercentAdjustment)
+              " />
+            <NeoButton
+              class="mr-2"
+              label="Floor Price"
+              rounded
+              no-shadow
+              @click.native="
+                floorPricePercentAdjustment = 1
+                listingCartStore.setFloorPrice(floorPricePercentAdjustment)
+              " />
+            <NeoButton
+              label="+5%"
+              rounded
+              no-shadow
+              @click.native="
+                floorPricePercentAdjustment += 0.05
+                listingCartStore.setFloorPrice(floorPricePercentAdjustment)
+              " />
+          </div>
+          <div class="pt-3 has-text-grey">-Or-</div>
+          <div class="pt-3">Fixed Price</div>
+          <ListingCartPriceInput
+            v-model="fixedPrice"
+            check
+            class="pt-2"
+            @confirm="setFixedPrice" />
+        </div>
+        <div class="py-2">
+          <ListingCartItem
+            v-for="nft in listingCartStore.itemsInChain"
+            :key="nft.id"
+            :nft="nft" />
+        </div>
+        <div
+          class="is-flex border-top is-justify-content-space-between py-4 px-6">
+          Potential Earnings
+          <div class="is-flex">
+            <span class="ml-2 has-text-grey"
+              >{{ totalNFTsPrice.toFixed(4) }} {{ chainSymbol }}</span
+            >
+            <span class="has-text-weight-bold ml-2"> ${{ priceUSD }} </span>
+          </div>
+        </div>
+
+        <div class="is-flex is-justify-content-space-between pb-5 px-6">
+          <NeoButton
+            :disabled="!!listingCartStore.incompleteListPrices"
+            :label="confirmListingLabel"
+            variant="k-accent"
+            no-shadow
+            class="is-flex is-flex-grow-1 py-5"
+            @click.native="confirm" />
+        </div>
+      </div>
+    </NeoModal>
+  </div>
+</template>
+<script setup lang="ts">
+import { Interaction } from '@kodadot1/minimark/v1'
+import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPriceInput.vue'
+import { prefixToToken } from '@/components/common/shoppingCart/utils'
+import IdentityItem from '@/components/identity/IdentityItem.vue'
+import { NeoButton, NeoModal } from '@kodadot1/brick'
+import { usePreferencesStore } from '@/stores/preferences'
+import { TokenToList } from '@/composables/transaction/types'
+import { useListingCartStore } from '@/stores/listingCart'
+import { calculateBalance } from '@/utils/format/balance'
+import { warningMessage } from '@/utils/notification'
+import { useFiatStore } from '~/stores/fiat'
+import { calculateExactUsdFromToken } from '~/utils/calculation'
+const { isLogIn, accountId } = useAuth()
+const { urlPrefix } = usePrefix()
+const preferencesStore = usePreferencesStore()
+const listingCartStore = useListingCartStore()
+const { transaction, isLoading, status } = useTransaction()
+const { $i18n } = useNuxtApp()
+
+const { chainSymbol } = useChain()
+const fixedPrice = ref()
+const floorPricePercentAdjustment = ref(1)
+function setFixedPrice() {
+  listingCartStore.setFixedPrice(fixedPrice.value)
+  fixedPrice.value = undefined
+}
+const fiatStore = useFiatStore()
+const priceUSD = computed(() =>
+  calculateExactUsdFromToken(
+    totalNFTsPrice.value,
+    Number(fiatStore.getCurrentTokenValue(prefixToToken[urlPrefix.value]))
+  )
+)
+
+const totalNFTsPrice = computed(() =>
+  listingCartStore.itemsInChain.reduce((acc, nft) => {
+    return +(acc + Number(nft.listPrice || 0)).toFixed(4)
+  }, 0)
+)
+
+const confirmListingLabel = computed(() => {
+  switch (listingCartStore.incompleteListPrices) {
+    case 0:
+      return $i18n.t('listingCart.complete')
+    case 1:
+      return $i18n.t('listingCart.missing1')
+    default:
+      return `${listingCartStore.incompleteListPrices} ${$i18n.t(
+        'listingCart.missingMultiple'
+      )}`
+  }
+})
+async function confirm() {
+  const token = [] as TokenToList[]
+  listingCartStore.itemsInChain.forEach((item) => {
+    if (item.listPrice) {
+      token.push({
+        price: String(calculateBalance(item.listPrice)),
+        nftId: item.id,
+      })
+    }
+  })
+  try {
+    await transaction({
+      interaction: Interaction.LIST,
+      urlPrefix: urlPrefix.value,
+      token,
+      successMessage: $i18n.t('transaction.price.success') as string,
+      errorMessage: $i18n.t('transaction.price.error') as string,
+    })
+    listingCartStore.clear()
+    preferencesStore.listingCartModalOpen = false
+  } catch (error) {
+    warningMessage(error)
+  }
+}
+
+watch(
+  () => listingCartStore.count,
+  () => {
+    if (listingCartStore.count === 0) {
+      preferencesStore.listingCartModalOpen = false
+    }
+  }
+)
+</script>
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.top {
+  z-index: 1000;
+}
+
+.shade-border-color {
+  @include ktheme() {
+    border-color: theme('k-shade');
+  }
+}
+
+.rounded {
+  border-radius: 10rem;
+}
+
+.modal-width {
+  width: 25rem;
+  max-width: 30rem;
+}
+
+:deep .identity-name-font-weight-regular {
+  .identity-name {
+    font-weight: unset !important;
+  }
+}
+</style>