From 0c66f2c287a13722d6aa97452031af1116d698dd Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Thu, 31 Aug 2023 23:51:07 +0800
Subject: [PATCH 01/51] feat: listing cart

---
 components/items/ItemsGrid/ItemsGridImage.vue | 21 ++++++
 stores/listingCart.ts                         | 71 +++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 stores/listingCart.ts

diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index daaa845a66..8c5c39aad9 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -30,6 +30,17 @@
           <img :src="cartIcon" class="image is-16x16" />
         </NeoButton>
       </div>
+      <div v-else-if="isOwner" class="is-flex">
+        <NeoButton
+          :label="`List For Sale ${
+            listingCartStore.isItemInCart(nft.id) ? '✔' : ''
+          }`"
+          data-cy="item-buy"
+          no-shadow
+          class="is-flex-grow-1 btn-height"
+          @click.native.prevent="onClickListingCart">
+        </NeoButton>
+      </div>
     </template>
   </NeoNftCard>
 </template>
@@ -39,6 +50,7 @@ import { NeoButton, NeoNftCard } from '@kodadot1/brick'
 import type { NftCardVariant } from '@kodadot1/brick'
 import type { NFTWithMetadata } from '@/composables/useNft'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
+import { useListingCartStore } from '@/stores/listingCart'
 import { usePreferencesStore } from '@/stores/preferences'
 import { nftToShoppingCardItem } from '@/components/common/shoppingCart/utils'
 import { isOwner as checkOwner } from '@/utils/account'
@@ -49,6 +61,7 @@ const { accountId, isLogIn } = useAuth()
 const { doAfterLogin } = useDoAfterlogin(getCurrentInstance())
 const { unlockableIcon } = useUnlockableIcon()
 const shoppingCartStore = useShoppingCartStore()
+const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
 const { $i18n } = useNuxtApp()
 
@@ -105,6 +118,14 @@ const onClickShoppingCart = () => {
     shoppingCartStore.setItem(nftToShoppingCardItem(props.nft))
   }
 }
+
+const onClickListingCart = () => {
+  if (listingCartStore.isItemInCart(props.nft.id)) {
+    listingCartStore.removeItem(props.nft.id)
+  } else {
+    listingCartStore.setItem(nftToShoppingCardItem(props.nft))
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
new file mode 100644
index 0000000000..073107643b
--- /dev/null
+++ b/stores/listingCart.ts
@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia'
+import { ShoppingCartItem } from '@/components/common/shoppingCart/types'
+
+type ID = string
+
+interface State {
+  items: ShoppingCartItem[]
+}
+
+const localStorage = useLocalStorage<ShoppingCartItem[]>('listingCart', [])
+const items = () => localStorage.value
+
+export const useListingCartStore = defineStore('listingCart', {
+  state: (): State => ({
+    items: items(),
+  }),
+  getters: {
+    getItems: () => items(),
+    getItemsByPrefix: () => (prefix: string) =>
+      items().filter((item) => item.urlPrefix === prefix),
+    getItem: () => (id: ID) => items().find((item) => item.id === id),
+    isItemInCart: () => (id: ID) =>
+      items().find((item) => item.id === id) !== undefined,
+  },
+
+  actions: {
+    setItem(payload: ShoppingCartItem) {
+      const existInItemIndex = this.items.findIndex(
+        (item) => item.id === payload.id
+      )
+      if (existInItemIndex === -1) {
+        this.items.push(payload)
+        localStorage.value = this.items
+      } else {
+        this.items[existInItemIndex] = payload
+        localStorage.value = this.items
+      }
+    },
+    updateItem(payload: ShoppingCartItem) {
+      const existInItemIndex = items().findIndex(
+        (item) => item.id === payload.id
+      )
+      if (existInItemIndex === -1) {
+        return
+      } else {
+        this.items[existInItemIndex] = {
+          ...this.items[existInItemIndex],
+          ...payload,
+        }
+        localStorage.value = this.items
+      }
+    },
+    removeItem(id: ID) {
+      const existInItemIndex = this.items.findIndex((item) => item.id === id)
+      if (existInItemIndex === -1) {
+        return
+      } else {
+        this.items.splice(existInItemIndex, 1)
+        localStorage.value = this.items
+      }
+    },
+    clear() {
+      localStorage.value = []
+      this.items = []
+    },
+    setItems(payload: ShoppingCartItem[]) {
+      this.items = payload
+      localStorage.value = this.items
+    },
+  },
+})

From 562d444e16a88b153029395994b45726d898f59d Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 00:08:17 +0800
Subject: [PATCH 02/51] refactor: listing cart store

---
 stores/listingCart.ts | 43 ++++++++++++++++++++-----------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 073107643b..e1c6aa02a9 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -8,26 +8,29 @@ interface State {
 }
 
 const localStorage = useLocalStorage<ShoppingCartItem[]>('listingCart', [])
-const items = () => localStorage.value
-
 export const useListingCartStore = defineStore('listingCart', {
   state: (): State => ({
-    items: items(),
+    items: localStorage.value,
   }),
   getters: {
-    getItems: () => items(),
-    getItemsByPrefix: () => (prefix: string) =>
-      items().filter((item) => item.urlPrefix === prefix),
-    getItem: () => (id: ID) => items().find((item) => item.id === id),
-    isItemInCart: () => (id: ID) =>
-      items().find((item) => item.id === id) !== undefined,
+    getItems: () => this.items,
   },
 
   actions: {
+    getItemsByPrefix(prefix: string) {
+      this.items.filter((item) => item.urlPrefix === prefix)
+    },
+    getItem(id: ID) {
+      return this.items.find((item) => item.id === id)
+    },
+    isItemInCart(id: ID) {
+      return this.existInItemIndex(id) !== -1
+    },
+    existInItemIndex(id: string) {
+      return this.items.findIndex((item) => item.id === id)
+    },
     setItem(payload: ShoppingCartItem) {
-      const existInItemIndex = this.items.findIndex(
-        (item) => item.id === payload.id
-      )
+      const existInItemIndex = this.existInItemIndex(payload.id)
       if (existInItemIndex === -1) {
         this.items.push(payload)
         localStorage.value = this.items
@@ -37,12 +40,8 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     updateItem(payload: ShoppingCartItem) {
-      const existInItemIndex = items().findIndex(
-        (item) => item.id === payload.id
-      )
-      if (existInItemIndex === -1) {
-        return
-      } else {
+      const existInItemIndex = this.existInItemIndex(payload.id)
+      if (existInItemIndex !== -1) {
         this.items[existInItemIndex] = {
           ...this.items[existInItemIndex],
           ...payload,
@@ -51,17 +50,15 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     removeItem(id: ID) {
-      const existInItemIndex = this.items.findIndex((item) => item.id === id)
-      if (existInItemIndex === -1) {
-        return
-      } else {
+      const existInItemIndex = this.existInItemIndex(id)
+      if (existInItemIndex !== -1) {
         this.items.splice(existInItemIndex, 1)
         localStorage.value = this.items
       }
     },
     clear() {
-      localStorage.value = []
       this.items = []
+      localStorage.value = []
     },
     setItems(payload: ShoppingCartItem[]) {
       this.items = payload

From 3fc89930478dff67e7363cd7652870dd3d0d706c Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 00:17:57 +0800
Subject: [PATCH 03/51] fix: state was not passed in listing cart store
 getItems

---
 stores/listingCart.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index e1c6aa02a9..d69d8197a5 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -13,9 +13,8 @@ export const useListingCartStore = defineStore('listingCart', {
     items: localStorage.value,
   }),
   getters: {
-    getItems: () => this.items,
+    getItems: (state) => state.items,
   },
-
   actions: {
     getItemsByPrefix(prefix: string) {
       this.items.filter((item) => item.urlPrefix === prefix)

From ca7d51c293c1b654f48ed1138f2a6f544f1e19df Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 00:23:13 +0800
Subject: [PATCH 04/51] feat: added border when in listing cart

---
 components/items/ItemsGrid/ItemsGridImage.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 8c5c39aad9..279e3c0efe 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -6,7 +6,11 @@
     :prefix="urlPrefix"
     :show-price="Number(nft?.price) > 0"
     :variant="variant"
-    :class="{ 'in-cart-border': shoppingCartStore.isItemInCart(nft.id) }"
+    :class="{
+      'in-cart-border':
+        shoppingCartStore.isItemInCart(nft.id) ||
+        listingCartStore.isItemInCart(nft.id),
+    }"
     :unloackable-icon="unlockableIcon"
     :show-action-on-hover="!showActionSection"
     link="nuxt-link"
@@ -33,7 +37,7 @@
       <div v-else-if="isOwner" class="is-flex">
         <NeoButton
           :label="`List For Sale ${
-            listingCartStore.isItemInCart(nft.id) ? '✔' : ''
+            listingCartStore.isItemInCart(nft.id) ? '✓' : ''
           }`"
           data-cy="item-buy"
           no-shadow

From 9d904d94722000117290505ccc6c26b64f158bec Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 00:46:56 +0800
Subject: [PATCH 05/51] feat: added different list labels depending on price

---
 components/items/ItemsGrid/ItemsGridImage.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 279e3c0efe..c7fdfe7070 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -36,9 +36,7 @@
       </div>
       <div v-else-if="isOwner" class="is-flex">
         <NeoButton
-          :label="`List For Sale ${
-            listingCartStore.isItemInCart(nft.id) ? '✓' : ''
-          }`"
+          :label="listLabel"
           data-cy="item-buy"
           no-shadow
           class="is-flex-grow-1 btn-height"
@@ -88,6 +86,13 @@ const buyLabel = computed(function () {
   )
 })
 
+const listLabel = computed(() => {
+  const label = Boolean(Number(props.nft.price))
+    ? 'Change Price'
+    : 'List For Sale'
+  return label + (listingCartStore.isItemInCart(props.nft.id) ? ' ✓' : '')
+})
+
 const { cartIcon } = useShoppingCartIcon(props.nft.id)
 
 const { nft } = useNft(props.nft)
@@ -124,6 +129,7 @@ const onClickShoppingCart = () => {
 }
 
 const onClickListingCart = () => {
+  console.log(listLabel)
   if (listingCartStore.isItemInCart(props.nft.id)) {
     listingCartStore.removeItem(props.nft.id)
   } else {

From 9778b8268534a41ebaf78401b9bf3adac04dcc88 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 02:26:07 +0800
Subject: [PATCH 06/51] feat: listingCartMini

---
 .../common/listingCart/ListingCartMini.vue    | 54 +++++++++++++++++++
 components/items/ItemsGrid/ItemsGrid.vue      |  2 +-
 components/items/ItemsGrid/ItemsGridImage.vue |  1 -
 stores/listingCart.ts                         |  2 +-
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 components/common/listingCart/ListingCartMini.vue

diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
new file mode 100644
index 0000000000..2df13854d5
--- /dev/null
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -0,0 +1,54 @@
+<template>
+  <transition 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> items
+            </div>
+            <div class="bar mx-4" />
+            <NeoButton
+              :disabled="!listingCartStore.count"
+              variant="text"
+              no-shadow
+              @click.native="listingCartStore.clear">
+              Clear All
+            </NeoButton>
+            <div class="bar mx-4" />
+            <NeoButton variant="text" no-shadow @click.native="test">
+              Select All
+            </NeoButton>
+          </div>
+        </div>
+        <NeoButton
+          class="height-100"
+          :variant="'k-accent'"
+          @click.native="test">
+          List Items
+        </NeoButton>
+      </div>
+    </div>
+  </transition>
+</template>
+<script setup lang="ts">
+import { NeoButton } from '@kodadot1/brick'
+import { useListingCartStore } from '@/stores/listingCart'
+const listingCartStore = useListingCartStore()
+
+function test() {
+  console.log('test')
+}
+</script>
+<style scoped lang="scss">
+.listing-container {
+  position: fixed;
+  right: 80px;
+  bottom: 50px;
+  z-index: 998;
+}
+
+.height-100 {
+  height: 100%;
+}
+</style>
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 02709f6305..6abd13ed63 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -36,9 +36,9 @@
           (slotProps.isMobileVariant || slotProps.grid === 'small') && 'minimal'
         " />
     </DynamicGrid>
-
     <EmptyResult v-else />
     <ScrollTopButton />
+    <ListingCartMini />
   </div>
 </template>
 
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index c7fdfe7070..db9a51109a 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -129,7 +129,6 @@ const onClickShoppingCart = () => {
 }
 
 const onClickListingCart = () => {
-  console.log(listLabel)
   if (listingCartStore.isItemInCart(props.nft.id)) {
     listingCartStore.removeItem(props.nft.id)
   } else {
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index d69d8197a5..60cfc50c04 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -13,7 +13,7 @@ export const useListingCartStore = defineStore('listingCart', {
     items: localStorage.value,
   }),
   getters: {
-    getItems: (state) => state.items,
+    count: (state) => state.items.length,
   },
   actions: {
     getItemsByPrefix(prefix: string) {

From 7f5bb9409479eb39dd3fcc6fc2826a5c58911940 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 13:34:04 +0800
Subject: [PATCH 07/51] feat: listingCartModal

---
 .../common/listingCart/ListingCartMini.vue    |  10 +-
 .../common/listingCart/ListingCartModal.vue   | 149 ++++++++++++++++++
 components/items/ItemsGrid/ItemsGrid.vue      |   1 +
 stores/preferences.ts                         |   2 +
 4 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 components/common/listingCart/ListingCartModal.vue

diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 2df13854d5..6275bec736 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -16,7 +16,7 @@
               Clear All
             </NeoButton>
             <div class="bar mx-4" />
-            <NeoButton variant="text" no-shadow @click.native="test">
+            <NeoButton variant="text" no-shadow @click.native="list">
               Select All
             </NeoButton>
           </div>
@@ -24,7 +24,7 @@
         <NeoButton
           class="height-100"
           :variant="'k-accent'"
-          @click.native="test">
+          @click.native="list">
           List Items
         </NeoButton>
       </div>
@@ -34,10 +34,12 @@
 <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()
 
-function test() {
-  console.log('test')
+function list() {
+  preferencesStore.listingCartModalOpen = true
 }
 </script>
 <style scoped lang="scss">
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
new file mode 100644
index 0000000000..95fa4429be
--- /dev/null
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -0,0 +1,149 @@
+<template>
+  <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>
+      <div class="py-2">
+        <ConfirmPurchaseItemRow
+          v-for="nft in listingCartStore.items"
+          :key="nft.id"
+          :nft="nft"
+          class="py-2 px-6" />
+      </div>
+      <div
+        class="is-flex border-top is-justify-content-space-between py-4 px-6">
+        Potential Earnings
+        <div class="is-flex">
+          <CommonTokenMoney :value="totalNFTsPrice" class="has-text-grey" />
+          <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
+          :label="confirmListingLabel"
+          variant="k-accent"
+          no-shadow
+          class="is-flex is-flex-grow-1 btn-height"
+          @click.native="confirm" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+<script setup lang="ts">
+import ConfirmPurchaseItemRow from '~/components/common/confirmPurchaseModal/ConfirmPurchaseItemRow.vue'
+import { totalPriceUsd } from '~/components/common/shoppingCart/utils'
+import IdentityItem from '~/components/identity/IdentityItem.vue'
+import CommonTokenMoney from '~/components/shared/CommonTokenMoney.vue'
+import { TokenToBuy } from '~/composables/transaction/types'
+import { NeoButton, NeoModal } from '~/libs/ui'
+import { usePreferencesStore } from '@/stores/preferences'
+import { useListingCartStore } from '~/stores/listingCart'
+import { sum } from '~/utils/math'
+import { warningMessage } from '~/utils/notification'
+import { ShoppingActions } from '~/utils/shoppingActions'
+const { isLogIn, accountId } = useAuth()
+const { urlPrefix } = usePrefix()
+const preferencesStore = usePreferencesStore()
+const listingCartStore = useListingCartStore()
+const { transaction } = useTransaction()
+const { $i18n } = useNuxtApp()
+
+const confirm = () => {
+  console.log('confirm')
+}
+
+const priceUSD = computed(() => {
+  const { nfts, royalties } = totalPriceUsd(listingCartStore.items)
+  return (nfts + royalties).toFixed(2)
+})
+
+const totalNFTsPrice = computed(() =>
+  sum(listingCartStore.items.map((nft) => Number(nft.price)))
+)
+
+const handleBuy = async (nfts: TokenToBuy | TokenToBuy[]) => {
+  try {
+    await transaction({
+      interaction: ShoppingActions.BUY,
+      nfts,
+      urlPrefix: urlPrefix.value,
+      successMessage: $i18n.t('mint.successNewNfts'),
+      errorMessage: $i18n.t('transaction.buy.error'),
+    })
+  } catch (error) {
+    warningMessage(error)
+  }
+}
+const confirmListingLabel = computed(() => 'Complete Listing')
+// const onConfirm = () => {
+//   if (preferencesStore.getCompletePurchaseModal.mode === 'shopping-cart') {
+//     handleBuy(listingCartStore.items.map(ShoppingCartItemToTokenToBuy))
+//   } else {
+//     handleBuy(
+//       ShoppingCartItemToTokenToBuy(
+//         shoppingCartStore.getItemToBuy as ShoppingCartItem
+//       )
+//     )
+//     shoppingCartStore.removeItemToBuy()
+//   }
+// }
+</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;
+}
+.btn-height {
+  height: 3.5rem;
+}
+
+:deep .identity-name-font-weight-regular {
+  .identity-name {
+    font-weight: unset !important;
+  }
+}
+</style>
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 6abd13ed63..530e40fac3 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -39,6 +39,7 @@
     <EmptyResult v-else />
     <ScrollTopButton />
     <ListingCartMini />
+    <ListingCartModal />
   </div>
 </template>
 
diff --git a/stores/preferences.ts b/stores/preferences.ts
index 8c7838700c..bf4817758c 100644
--- a/stores/preferences.ts
+++ b/stores/preferences.ts
@@ -10,6 +10,7 @@ interface State {
   mobileFilterCollapseOpen: boolean
   notificationBoxCollapseOpen: boolean
   shoppingCartCollapseOpen: boolean
+  listingCartModalOpen: boolean
   completePurchaseModal: completePurchaseModalState
   triggerBuySuccess: boolean
   layoutClass: string
@@ -40,6 +41,7 @@ export const usePreferencesStore = defineStore('preferences', {
     sidebarFilterCollapseOpen: true,
     mobileFilterCollapseOpen: false,
     notificationBoxCollapseOpen: false,
+    listingCartModalOpen: false,
     shoppingCartCollapseOpen: false,
     completePurchaseModal: {
       isOpen: false,

From fe103bc723b1bf3fc2631cde417536e7d58d49c3 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 21:48:52 +0800
Subject: [PATCH 08/51] feat(listingCartModal): finalized ui

---
 .../common/listingCart/ListingCartItem.vue    | 83 +++++++++++++++++++
 .../common/listingCart/ListingCartModal.vue   | 35 ++++++--
 .../listingCart/ListingCartPriceInput.vue     | 38 +++++++++
 components/items/ItemsGrid/ItemsGrid.vue      |  2 -
 pages/_prefix/u/_id.vue                       |  6 +-
 5 files changed, 156 insertions(+), 8 deletions(-)
 create mode 100644 components/common/listingCart/ListingCartItem.vue
 create mode 100644 components/common/listingCart/ListingCartPriceInput.vue

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
new file mode 100644
index 0000000000..6f62a2042c
--- /dev/null
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -0,0 +1,83 @@
+<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 ellipsis">
+            {{ nft.name }}
+          </div>
+          <div class="line-height-1 no-wrap is-clipped ellipsis">
+            {{ nft.collection?.name || nft.collection.id }}
+          </div>
+        </div>
+      </div>
+
+      <div class="is-flex is-align-items-end no-wrap line-height-1">
+        <CommonTokenMoney :value="nft.price" />
+      </div>
+    </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>
+        <CommonTokenMoney :value="nft.price" />
+      </div>
+
+      <div class="is-flex is-align-items-end pt-2">
+        <ListingCartPriceInput 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 { ShoppingCartItem } from '../shoppingCart/types'
+import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
+
+const avatar = ref<string>()
+
+const props = defineProps<{
+  nft: ShoppingCartItem
+}>()
+
+const getAvatar = async () => {
+  if (props.nft) {
+    avatar.value = await parseNftAvatar(props.nft)
+  }
+}
+
+onMounted(() => {
+  getAvatar()
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.listing-border {
+  border-top: 1px solid #ccc;
+}
+.limit-width {
+  max-width: 170px;
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+</style>
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 95fa4429be..31770cb548 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -31,13 +31,26 @@
             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</div>
+        <div class="py-2 is-flex is-justify-content-start is-flex-grow-1">
+          <div class="rounded border shade-border-color px-3 mr-2 pointer">
+            -5%
+          </div>
+          <div class="rounded border shade-border-color px-3 mr-2 pointer">
+            Floor Price
+          </div>
+          <div class="rounded border shade-border-color px-3 pointer">+5%</div>
+        </div>
+        <div class="pt-3 has-text-grey">-Or-</div>
+        <div class="pt-3">Fixed Price</div>
+        <ListingCartPriceInput check class="pt-2" />
       </div>
       <div class="py-2">
-        <ConfirmPurchaseItemRow
+        <ListingCartItem
           v-for="nft in listingCartStore.items"
           :key="nft.id"
-          :nft="nft"
-          class="py-2 px-6" />
+          :nft="nft" />
       </div>
       <div
         class="is-flex border-top is-justify-content-space-between py-4 px-6">
@@ -60,12 +73,12 @@
   </NeoModal>
 </template>
 <script setup lang="ts">
-import ConfirmPurchaseItemRow from '~/components/common/confirmPurchaseModal/ConfirmPurchaseItemRow.vue'
+import ListingCartPriceInput from '~/components/common/listingCart/ListingCartPriceInput.vue'
 import { totalPriceUsd } from '~/components/common/shoppingCart/utils'
 import IdentityItem from '~/components/identity/IdentityItem.vue'
 import CommonTokenMoney from '~/components/shared/CommonTokenMoney.vue'
 import { TokenToBuy } from '~/composables/transaction/types'
-import { NeoButton, NeoModal } from '~/libs/ui'
+import { NeoButton, NeoModal } from '@/libs/ui'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useListingCartStore } from '~/stores/listingCart'
 import { sum } from '~/utils/math'
@@ -121,6 +134,14 @@ const confirmListingLabel = computed(() => 'Complete Listing')
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
 
+.check-btn {
+  height: 3rem;
+}
+
+.height-100 {
+  height: 100%;
+}
+
 .top {
   z-index: 1000;
 }
@@ -146,4 +167,8 @@ const confirmListingLabel = computed(() => 'Complete Listing')
     font-weight: unset !important;
   }
 }
+
+.pointer {
+  cursor: pointer;
+}
 </style>
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
new file mode 100644
index 0000000000..a60599fae3
--- /dev/null
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="is-flex">
+    <input type="text" class="price-input" placeholder="Price" />
+    <div
+      class="border-top border-right border-bottom shade-border-color px-5 is-flex is-align-items-center">
+      KSM
+    </div>
+    <NeoButton
+      v-if="check"
+      no-shadow
+      class="check-btn ml-2 shade-border-color"
+      icon="check" />
+  </div>
+</template>
+<script setup lang="ts">
+import { NeoButton } from '@/libs/ui'
+defineProps<{ check?: boolean }>()
+</script>
+
+<style lang="scss">
+.price-input {
+  border: 1px solid #ccc;
+  border-right: none;
+  outline: none;
+  width: 6em;
+}
+
+@import '@/styles/abstracts/variables';
+
+.check-btn {
+  height: 3rem;
+}
+.shade-border-color {
+  @include ktheme() {
+    border-color: theme('k-shade');
+  }
+}
+</style>
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 530e40fac3..43c1c4b0f6 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -38,8 +38,6 @@
     </DynamicGrid>
     <EmptyResult v-else />
     <ScrollTopButton />
-    <ListingCartMini />
-    <ListingCartModal />
   </div>
 </template>
 
diff --git a/pages/_prefix/u/_id.vue b/pages/_prefix/u/_id.vue
index 564a25d16d..9155078068 100644
--- a/pages/_prefix/u/_id.vue
+++ b/pages/_prefix/u/_id.vue
@@ -1,5 +1,9 @@
 <template>
-  <ProfileDetail />
+  <div>
+    <ProfileDetail />
+    <ListingCartMini />
+    <ListingCartModal />
+  </div>
 </template>
 
 <script lang="ts">

From 8456e44cd13b85745d30f7a80c50bd36293628f5 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 22:23:30 +0800
Subject: [PATCH 09/51] style: changed sizes to fit figma better

---
 components/common/listingCart/ListingCartModal.vue | 10 +++-------
 .../common/listingCart/ListingCartPriceInput.vue   | 14 +++++++-------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 31770cb548..bb76deffa5 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -34,13 +34,9 @@
         <div class="pt-4"><b>Set All To</b></div>
         <div class="pt-4">Collection Floor Price</div>
         <div class="py-2 is-flex is-justify-content-start is-flex-grow-1">
-          <div class="rounded border shade-border-color px-3 mr-2 pointer">
-            -5%
-          </div>
-          <div class="rounded border shade-border-color px-3 mr-2 pointer">
-            Floor Price
-          </div>
-          <div class="rounded border shade-border-color px-3 pointer">+5%</div>
+          <NeoButton class="mr-2" label="-5%" rounded no-shadow />
+          <NeoButton class="mr-2" label="Floor Price" rounded no-shadow />
+          <NeoButton label="+5%" rounded no-shadow />
         </div>
         <div class="pt-3 has-text-grey">-Or-</div>
         <div class="pt-3">Fixed Price</div>
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index a60599fae3..83c0db129a 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="is-flex">
-    <input type="text" class="price-input" placeholder="Price" />
+    <input type="text" class="price-input height-40" placeholder="Price" />
     <div
       class="border-top border-right border-bottom shade-border-color px-5 is-flex is-align-items-center">
       KSM
@@ -8,7 +8,7 @@
     <NeoButton
       v-if="check"
       no-shadow
-      class="check-btn ml-2 shade-border-color"
+      class="check-btn ml-2 shade-border-color height-40"
       icon="check" />
   </div>
 </template>
@@ -17,19 +17,19 @@ import { NeoButton } from '@/libs/ui'
 defineProps<{ check?: boolean }>()
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .price-input {
   border: 1px solid #ccc;
   border-right: none;
   outline: none;
-  width: 6em;
+  width: 5em;
 }
 
+.height-40 {
+  height: 40px;
+}
 @import '@/styles/abstracts/variables';
 
-.check-btn {
-  height: 3rem;
-}
 .shade-border-color {
   @include ktheme() {
     border-color: theme('k-shade');

From 07b81cc3cc00e619c2a91726224806fe3d0562cc Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 22:40:14 +0800
Subject: [PATCH 10/51] feat: added trashcan in listingCartModal

---
 components/common/listingCart/ListingCartItem.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index 6f62a2042c..caeee75c00 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -22,9 +22,14 @@
         </div>
       </div>
 
-      <div class="is-flex is-align-items-end no-wrap line-height-1">
-        <CommonTokenMoney :value="nft.price" />
-      </div>
+      <NeoButton
+        class="has-text-grey pt-5"
+        variant="text"
+        size="medium"
+        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">
@@ -43,8 +48,11 @@
 import { parseNftAvatar } from '@/utils/nft'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
 import ListingCartPriceInput from '~/components/common/listingCart/ListingCartPriceInput.vue'
+import { NeoButton } from '~/libs/ui'
+import { useListingCartStore } from '~/stores/listingCart'
 import { ShoppingCartItem } from '../shoppingCart/types'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
+const listingCartStore = useListingCartStore()
 
 const avatar = ref<string>()
 

From 166d9031fb0e423b16319ab907047da5843a48c6 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 23:23:28 +0800
Subject: [PATCH 11/51] feat: returned and used floor from nftListWithSearch
 instead of using useCollectionDetails composable

---
 components/common/listingCart/ListingCartItem.vue  | 2 +-
 components/rmrk/service/scheme.ts                  | 1 +
 queries/subsquid/general/nftListWithSearch.graphql | 1 +
 queries/subsquid/ksm/nftListWithSearch.graphql     | 1 +
 queries/subsquid/rmrk/nftListWithSearch.graphql    | 3 ++-
 5 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index caeee75c00..2d7cdf46d7 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -34,7 +34,7 @@
     <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>
-        <CommonTokenMoney :value="nft.price" />
+        <CommonTokenMoney :value="nft.collection.floor" />
       </div>
 
       <div class="is-flex is-align-items-end pt-2">
diff --git a/components/rmrk/service/scheme.ts b/components/rmrk/service/scheme.ts
index bf6f65cd7c..575be2f23d 100644
--- a/components/rmrk/service/scheme.ts
+++ b/components/rmrk/service/scheme.ts
@@ -188,6 +188,7 @@ export interface NFT extends ItemResources {
 export type EntityWithId = {
   id: string
   name: string
+  floor: string
 }
 
 interface BaseInteraction {
diff --git a/queries/subsquid/general/nftListWithSearch.graphql b/queries/subsquid/general/nftListWithSearch.graphql
index eb247a3619..7bf375a3b1 100644
--- a/queries/subsquid/general/nftListWithSearch.graphql
+++ b/queries/subsquid/general/nftListWithSearch.graphql
@@ -27,6 +27,7 @@ query nftListWithSearch(
     collection {
       id
       name
+      floor
     }
     meta {
       ...baseMeta
diff --git a/queries/subsquid/ksm/nftListWithSearch.graphql b/queries/subsquid/ksm/nftListWithSearch.graphql
index dce09e27e6..76f2e6da6f 100644
--- a/queries/subsquid/ksm/nftListWithSearch.graphql
+++ b/queries/subsquid/ksm/nftListWithSearch.graphql
@@ -27,6 +27,7 @@ query nftListWithSearch(
     collection {
       id
       name
+      floor
     }
     meta {
       ...baseMeta
diff --git a/queries/subsquid/rmrk/nftListWithSearch.graphql b/queries/subsquid/rmrk/nftListWithSearch.graphql
index ccbc0e9a7f..60cecdc814 100644
--- a/queries/subsquid/rmrk/nftListWithSearch.graphql
+++ b/queries/subsquid/rmrk/nftListWithSearch.graphql
@@ -22,10 +22,11 @@ query nftListWithSearch(
   ) {
     ...nft
     ...nftDetails
-  
+
     collection {
       id
       name
+      floor
     }
     meta {
       ...baseMeta

From 6a3a4084303a750e3a6e37a30e7cc555d52aaa4b Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Fri, 1 Sep 2023 23:56:40 +0800
Subject: [PATCH 12/51] feat: can now set fixedPrice

---
 .../common/listingCart/ListingCartItem.vue    | 12 +++++------
 .../common/listingCart/ListingCartModal.vue   | 12 ++++++++++-
 .../listingCart/ListingCartPriceInput.vue     | 14 ++++++++++---
 stores/listingCart.ts                         | 20 ++++++++++++++++---
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index 2d7cdf46d7..dd2ae53827 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -23,9 +23,8 @@
       </div>
 
       <NeoButton
-        class="has-text-grey pt-5"
+        class="has-text-grey pt-4"
         variant="text"
-        size="medium"
         no-shadow
         icon="trash"
         icon-pack="far"
@@ -38,7 +37,9 @@
       </div>
 
       <div class="is-flex is-align-items-end pt-2">
-        <ListingCartPriceInput style="height: 100%" />
+        <ListingCartPriceInput
+          v-model="listingCartStore.getItem(nft.id).listPrice"
+          style="height: 100%" />
       </div>
     </div>
   </div>
@@ -49,15 +50,14 @@ import { parseNftAvatar } from '@/utils/nft'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
 import ListingCartPriceInput from '~/components/common/listingCart/ListingCartPriceInput.vue'
 import { NeoButton } from '~/libs/ui'
-import { useListingCartStore } from '~/stores/listingCart'
-import { ShoppingCartItem } from '../shoppingCart/types'
+import { ListCartItem, useListingCartStore } from '~/stores/listingCart'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 const listingCartStore = useListingCartStore()
 
 const avatar = ref<string>()
 
 const props = defineProps<{
-  nft: ShoppingCartItem
+  nft: ListCartItem
 }>()
 
 const getAvatar = async () => {
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index bb76deffa5..6e3dfe11be 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -40,7 +40,11 @@
         </div>
         <div class="pt-3 has-text-grey">-Or-</div>
         <div class="pt-3">Fixed Price</div>
-        <ListingCartPriceInput check class="pt-2" />
+        <ListingCartPriceInput
+          v-model="fixedPrice"
+          check
+          class="pt-2"
+          @confirm="setFixedPrice" />
       </div>
       <div class="py-2">
         <ListingCartItem
@@ -91,6 +95,12 @@ const confirm = () => {
   console.log('confirm')
 }
 
+const fixedPrice = ref()
+function setFixedPrice() {
+  listingCartStore.setFixedPrice(fixedPrice.value)
+  fixedPrice.value = undefined
+}
+
 const priceUSD = computed(() => {
   const { nfts, royalties } = totalPriceUsd(listingCartStore.items)
   return (nfts + royalties).toFixed(2)
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index 83c0db129a..14d443aaa9 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="is-flex">
-    <input type="text" class="price-input height-40" placeholder="Price" />
+    <input
+      v-model="model"
+      type="text"
+      class="price-input height-40"
+      placeholder="Price" />
     <div
       class="border-top border-right border-bottom shade-border-color px-5 is-flex is-align-items-center">
       KSM
@@ -9,12 +13,16 @@
       v-if="check"
       no-shadow
       class="check-btn ml-2 shade-border-color height-40"
-      icon="check" />
+      icon="check"
+      @click.native="emit('confirm')" />
   </div>
 </template>
 <script setup lang="ts">
 import { NeoButton } from '@/libs/ui'
-defineProps<{ check?: boolean }>()
+import { useVModel } from '@vueuse/core'
+const props = defineProps<{ value?: number; check?: boolean }>()
+const emit = defineEmits(['confirm', 'input'])
+const model = useVModel(props, 'value', emit, { eventName: 'input' })
 </script>
 
 <style scoped lang="scss">
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 60cfc50c04..9ac2528402 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -1,10 +1,19 @@
 import { defineStore } from 'pinia'
-import { ShoppingCartItem } from '@/components/common/shoppingCart/types'
+import { EntityWithId } from '~/components/rmrk/service/scheme'
+
+export type ListCartItem = {
+  id: string
+  name: string
+  urlPrefix: string
+  price: string
+  listPrice?: string
+  collection: EntityWithId
+}
 
 type ID = string
 
 interface State {
-  items: ShoppingCartItem[]
+  items: ListCartItem[]
 }
 
 const localStorage = useLocalStorage<ShoppingCartItem[]>('listingCart', [])
@@ -31,7 +40,7 @@ export const useListingCartStore = defineStore('listingCart', {
     setItem(payload: ShoppingCartItem) {
       const existInItemIndex = this.existInItemIndex(payload.id)
       if (existInItemIndex === -1) {
-        this.items.push(payload)
+        this.items.push({ ...payload, listPrice: undefined })
         localStorage.value = this.items
       } else {
         this.items[existInItemIndex] = payload
@@ -48,6 +57,11 @@ export const useListingCartStore = defineStore('listingCart', {
         localStorage.value = this.items
       }
     },
+    setFixedPrice(price) {
+      for (const item of this.items) {
+        item.listPrice = price
+      }
+    },
     removeItem(id: ID) {
       const existInItemIndex = this.existInItemIndex(id)
       if (existInItemIndex !== -1) {

From c7f1ab3e628795e2f605615a5ccae1df5f9b5daa Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 00:49:34 +0800
Subject: [PATCH 13/51] feat: set all floor price

---
 .../common/listingCart/ListingCartModal.vue   | 20 +++++++++--
 .../listingCart/ListingCartPriceInput.vue     |  4 +--
 stores/listingCart.ts                         | 33 ++++++++++++-------
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 6e3dfe11be..a873d2c2be 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -34,9 +34,23 @@
         <div class="pt-4"><b>Set All To</b></div>
         <div class="pt-4">Collection Floor Price</div>
         <div class="py-2 is-flex is-justify-content-start is-flex-grow-1">
-          <NeoButton class="mr-2" label="-5%" rounded no-shadow />
-          <NeoButton class="mr-2" label="Floor Price" rounded no-shadow />
-          <NeoButton label="+5%" rounded no-shadow />
+          <NeoButton
+            class="mr-2"
+            label="-5%"
+            rounded
+            no-shadow
+            @click.native="listingCartStore.setFloorPrice(0.95)" />
+          <NeoButton
+            class="mr-2"
+            label="Floor Price"
+            rounded
+            no-shadow
+            @click.native="listingCartStore.setFloorPrice(1)" />
+          <NeoButton
+            label="+5%"
+            rounded
+            no-shadow
+            @click.native="listingCartStore.setFloorPrice(1.05)" />
         </div>
         <div class="pt-3 has-text-grey">-Or-</div>
         <div class="pt-3">Fixed Price</div>
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index 14d443aaa9..52d609a4c6 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -3,7 +3,7 @@
     <input
       v-model="model"
       type="text"
-      class="price-input height-40"
+      class="price-input height-40 theme-background-color shade-border-color has-text-color"
       placeholder="Price" />
     <div
       class="border-top border-right border-bottom shade-border-color px-5 is-flex is-align-items-center">
@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { NeoButton } from '@/libs/ui'
 import { useVModel } from '@vueuse/core'
-const props = defineProps<{ value?: number; check?: boolean }>()
+const props = defineProps<{ value?: number | string; check?: boolean }>()
 const emit = defineEmits(['confirm', 'input'])
 const model = useVModel(props, 'value', emit, { eventName: 'input' })
 </script>
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 9ac2528402..9a1cb67b3a 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia'
 import { EntityWithId } from '~/components/rmrk/service/scheme'
-
+import { set } from 'vue'
 export type ListCartItem = {
   id: string
   name: string
   urlPrefix: string
-  price: string
-  listPrice?: string
+  price: number
+  listPrice?: number
   collection: EntityWithId
 }
 
@@ -16,7 +16,7 @@ interface State {
   items: ListCartItem[]
 }
 
-const localStorage = useLocalStorage<ShoppingCartItem[]>('listingCart', [])
+const localStorage = useLocalStorage<ListCartItem[]>('listingCart', [])
 export const useListingCartStore = defineStore('listingCart', {
   state: (): State => ({
     items: localStorage.value,
@@ -37,17 +37,16 @@ export const useListingCartStore = defineStore('listingCart', {
     existInItemIndex(id: string) {
       return this.items.findIndex((item) => item.id === id)
     },
-    setItem(payload: ShoppingCartItem) {
+    setItem(payload: ListCartItem) {
       const existInItemIndex = this.existInItemIndex(payload.id)
       if (existInItemIndex === -1) {
-        this.items.push({ ...payload, listPrice: undefined })
+        this.items.push(payload)
         localStorage.value = this.items
       } else {
-        this.items[existInItemIndex] = payload
-        localStorage.value = this.items
+        this.updateItem(payload)
       }
     },
-    updateItem(payload: ShoppingCartItem) {
+    updateItem(payload: ListCartItem) {
       const existInItemIndex = this.existInItemIndex(payload.id)
       if (existInItemIndex !== -1) {
         this.items[existInItemIndex] = {
@@ -59,9 +58,21 @@ export const useListingCartStore = defineStore('listingCart', {
     },
     setFixedPrice(price) {
       for (const item of this.items) {
-        item.listPrice = price
+        set(item, 'listPrice', price)
+      }
+    },
+    setFloorPrice(adjust = 1) {
+      for (const item of this.items) {
+        set(
+          item,
+          'listPrice',
+          this.round(Number(item.collection.floor ?? 0) * adjust)
+        )
       }
     },
+    round(number) {
+      return +(+number / 1000000000000).toFixed(12)
+    },
     removeItem(id: ID) {
       const existInItemIndex = this.existInItemIndex(id)
       if (existInItemIndex !== -1) {
@@ -73,7 +84,7 @@ export const useListingCartStore = defineStore('listingCart', {
       this.items = []
       localStorage.value = []
     },
-    setItems(payload: ShoppingCartItem[]) {
+    setItems(payload: ListCartItem[]) {
       this.items = payload
       localStorage.value = this.items
     },

From 7881a8d55b48cbf2302545141aa6ce1849f6dcdf Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 02:08:03 +0800
Subject: [PATCH 14/51] feat: recording on chain and code cleanup

---
 .../common/listingCart/ListingCartItem.vue    |  3 -
 .../common/listingCart/ListingCartMini.vue    |  2 +-
 .../common/listingCart/ListingCartModal.vue   | 74 ++++++++++---------
 .../listingCart/ListingCartPriceInput.vue     |  1 +
 stores/listingCart.ts                         |  4 +-
 5 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index dd2ae53827..b5d6ed4da5 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -70,10 +70,7 @@ onMounted(() => {
   getAvatar()
 })
 </script>
-
 <style scoped lang="scss">
-@import '@/styles/abstracts/variables';
-
 .listing-border {
   border-top: 1px solid #ccc;
 }
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 6275bec736..eaf77e2f28 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="slide">
+  <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">
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index a873d2c2be..f734d22228 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -77,6 +77,7 @@
 
       <div class="is-flex is-justify-content-space-between pb-5 px-6">
         <NeoButton
+          :disabled="!!listingCartStore.incompleteListPrices"
           :label="confirmListingLabel"
           variant="k-accent"
           no-shadow
@@ -87,17 +88,18 @@
   </NeoModal>
 </template>
 <script setup lang="ts">
+import { Interaction } from '@kodadot1/minimark/v1'
 import ListingCartPriceInput from '~/components/common/listingCart/ListingCartPriceInput.vue'
 import { totalPriceUsd } from '~/components/common/shoppingCart/utils'
 import IdentityItem from '~/components/identity/IdentityItem.vue'
 import CommonTokenMoney from '~/components/shared/CommonTokenMoney.vue'
-import { TokenToBuy } from '~/composables/transaction/types'
 import { NeoButton, NeoModal } from '@/libs/ui'
 import { usePreferencesStore } from '@/stores/preferences'
+import { TokenToList } from '~/composables/transaction/types'
 import { useListingCartStore } from '~/stores/listingCart'
+import { calculateBalance } from '~/utils/format/balance'
 import { sum } from '~/utils/math'
 import { warningMessage } from '~/utils/notification'
-import { ShoppingActions } from '~/utils/shoppingActions'
 const { isLogIn, accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
@@ -105,10 +107,6 @@ const listingCartStore = useListingCartStore()
 const { transaction } = useTransaction()
 const { $i18n } = useNuxtApp()
 
-const confirm = () => {
-  console.log('confirm')
-}
-
 const fixedPrice = ref()
 function setFixedPrice() {
   listingCartStore.setFixedPrice(fixedPrice.value)
@@ -124,40 +122,49 @@ const totalNFTsPrice = computed(() =>
   sum(listingCartStore.items.map((nft) => Number(nft.price)))
 )
 
-const handleBuy = async (nfts: TokenToBuy | TokenToBuy[]) => {
+const confirmListingLabel = computed(() => {
+  switch (listingCartStore.incompleteListPrices) {
+    case 0:
+      return 'Complete Listing'
+    case 1:
+      return '1 Item Is Missing Price'
+    default:
+      return `${listingCartStore.incompleteListPrices} Items Are Missing Price`
+  }
+})
+async function confirm() {
+  const updateItems = {} as { [urlPrefix: string]: TokenToList[] }
+  for (const item of listingCartStore.items) {
+    if (item.listPrice) {
+      if (!updateItems[item.urlPrefix]) {
+        updateItems[item.urlPrefix] = []
+      }
+      updateItems[item.urlPrefix].push({
+        price: String(calculateBalance(item.listPrice)),
+        nftId: item.id,
+      })
+    }
+  }
   try {
-    await transaction({
-      interaction: ShoppingActions.BUY,
-      nfts,
-      urlPrefix: urlPrefix.value,
-      successMessage: $i18n.t('mint.successNewNfts'),
-      errorMessage: $i18n.t('transaction.buy.error'),
-    })
+    for (const [urlPrefix, token] of Object.entries(updateItems)) {
+      await transaction({
+        interaction: Interaction.LIST,
+        urlPrefix,
+        token,
+        successMessage: $i18n.t('transaction.price.success'),
+        errorMessage: $i18n.t('transaction.price.error'),
+      })
+    }
+    listingCartStore.clear()
+    preferencesStore.listingCartModalOpen = false
   } catch (error) {
     warningMessage(error)
   }
 }
-const confirmListingLabel = computed(() => 'Complete Listing')
-// const onConfirm = () => {
-//   if (preferencesStore.getCompletePurchaseModal.mode === 'shopping-cart') {
-//     handleBuy(listingCartStore.items.map(ShoppingCartItemToTokenToBuy))
-//   } else {
-//     handleBuy(
-//       ShoppingCartItemToTokenToBuy(
-//         shoppingCartStore.getItemToBuy as ShoppingCartItem
-//       )
-//     )
-//     shoppingCartStore.removeItemToBuy()
-//   }
-// }
 </script>
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
 
-.check-btn {
-  height: 3rem;
-}
-
 .height-100 {
   height: 100%;
 }
@@ -165,6 +172,7 @@ const confirmListingLabel = computed(() => 'Complete Listing')
 .top {
   z-index: 1000;
 }
+
 .shade-border-color {
   @include ktheme() {
     border-color: theme('k-shade');
@@ -187,8 +195,4 @@ const confirmListingLabel = computed(() => 'Complete Listing')
     font-weight: unset !important;
   }
 }
-
-.pointer {
-  cursor: pointer;
-}
 </style>
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index 52d609a4c6..d6d6a2762f 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -31,6 +31,7 @@ const model = useVModel(props, 'value', emit, { eventName: 'input' })
   border-right: none;
   outline: none;
   width: 5em;
+  text-indent: 10px;
 }
 
 .height-40 {
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 9a1cb67b3a..a34bc4a634 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -23,6 +23,8 @@ export const useListingCartStore = defineStore('listingCart', {
   }),
   getters: {
     count: (state) => state.items.length,
+    incompleteListPrices: (state) =>
+      state.items.filter((item) => !item.listPrice).length,
   },
   actions: {
     getItemsByPrefix(prefix: string) {
@@ -56,7 +58,7 @@ export const useListingCartStore = defineStore('listingCart', {
         localStorage.value = this.items
       }
     },
-    setFixedPrice(price) {
+    setFixedPrice(price: number) {
       for (const item of this.items) {
         set(item, 'listPrice', price)
       }

From b2e6d013cbf826de23928436e5da36b916dabcf6 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 02:52:16 +0800
Subject: [PATCH 15/51] feat: added loading indicator while saving on chain

---
 .../common/listingCart/ListingCartModal.vue   | 171 +++++++++---------
 components/common/shoppingCart/utils.ts       |   3 +-
 stores/listingCart.ts                         |   2 +-
 3 files changed, 90 insertions(+), 86 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index f734d22228..3881824e01 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -1,91 +1,94 @@
 <template>
-  <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>
+  <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</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="listingCartStore.setFloorPrice(0.95)" />
           <NeoButton
-            class="mr-2"
-            label="Floor Price"
-            rounded
+            variant="text"
             no-shadow
-            @click.native="listingCartStore.setFloorPrice(1)" />
-          <NeoButton
-            label="+5%"
-            rounded
-            no-shadow
-            @click.native="listingCartStore.setFloorPrice(1.05)" />
+            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</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="listingCartStore.setFloorPrice(0.95)" />
+            <NeoButton
+              class="mr-2"
+              label="Floor Price"
+              rounded
+              no-shadow
+              @click.native="listingCartStore.setFloorPrice(1)" />
+            <NeoButton
+              label="+5%"
+              rounded
+              no-shadow
+              @click.native="listingCartStore.setFloorPrice(1.05)" />
+          </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="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.items"
-          :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">
-          <CommonTokenMoney :value="totalNFTsPrice" class="has-text-grey" />
-          <span class="has-text-weight-bold ml-2"> ${{ priceUSD }} </span>
+        <div class="py-2">
+          <ListingCartItem
+            v-for="nft in listingCartStore.items"
+            :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">
+            <CommonTokenMoney :value="totalNFTsPrice" class="has-text-grey" />
+            <span class="has-text-weight-bold ml-2"> ${{ priceUSD }} </span>
+          </div>
         </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 btn-height"
-          @click.native="confirm" />
+        <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 btn-height"
+            @click.native="confirm" />
+        </div>
       </div>
-    </div>
-  </NeoModal>
+    </NeoModal>
+  </div>
 </template>
 <script setup lang="ts">
 import { Interaction } from '@kodadot1/minimark/v1'
@@ -104,7 +107,7 @@ const { isLogIn, accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
 const listingCartStore = useListingCartStore()
-const { transaction } = useTransaction()
+const { transaction, isLoading, status } = useTransaction()
 const { $i18n } = useNuxtApp()
 
 const fixedPrice = ref()
@@ -150,9 +153,9 @@ async function confirm() {
       await transaction({
         interaction: Interaction.LIST,
         urlPrefix,
-        token,
-        successMessage: $i18n.t('transaction.price.success'),
-        errorMessage: $i18n.t('transaction.price.error'),
+        token: token[0],
+        successMessage: $i18n.t('transaction.price.success') as string,
+        errorMessage: $i18n.t('transaction.price.error') as string,
       })
     }
     listingCartStore.clear()
diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index e5972999f3..0b1590bb9b 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -1,4 +1,5 @@
 import { calculateExactUsdFromToken } from '@/utils/calculation'
+import { ListCartItem } from '~/stores/listingCart'
 import { ShoppingCartItem } from './types'
 import { useFiatStore } from '@/stores/fiat'
 import { sum } from '@/utils/math'
@@ -20,7 +21,7 @@ const getTokenDecimal = (item: ShoppingCartItem) => {
   return chainPropListOf(token.toLowerCase()).tokenDecimals
 }
 
-export const totalPriceUsd = (items: ShoppingCartItem[]) => {
+export const totalPriceUsd = (items: ShoppingCartItem[] | ListCartItem[]) => {
   const fiatStore = useFiatStore()
 
   const nftSPrice = items.map((item) =>
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index a34bc4a634..ae49df6e89 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -5,7 +5,7 @@ export type ListCartItem = {
   id: string
   name: string
   urlPrefix: string
-  price: number
+  price: string
   listPrice?: number
   collection: EntityWithId
 }

From 3569225884f15a4a87a6fa8a5bcb80da1dc81567 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 03:03:44 +0800
Subject: [PATCH 16/51] feat: add all not listed to cart

---
 components/common/listingCart/ListingCartMini.vue | 5 ++++-
 components/items/ItemsGrid/ItemsGrid.vue          | 9 +++++++++
 stores/listingCart.ts                             | 7 +++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index eaf77e2f28..16a9e1f209 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -16,7 +16,10 @@
               Clear All
             </NeoButton>
             <div class="bar mx-4" />
-            <NeoButton variant="text" no-shadow @click.native="list">
+            <NeoButton
+              variant="text"
+              no-shadow
+              @click.native="listingCartStore.addAllToCart">
               Select All
             </NeoButton>
           </div>
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 43c1c4b0f6..debe34d146 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -44,6 +44,8 @@
 <script setup lang="ts">
 import { NeoNftCard } from '@kodadot1/brick'
 import DynamicGrid from '@/components/shared/DynamicGrid.vue'
+import { nftToShoppingCardItem } from '~/components/common/shoppingCart/utils'
+import { useListingCartStore } from '~/stores/listingCart'
 import ItemsGridImage from './ItemsGridImage.vue'
 import { useFetchSearch } from './useItemsGrid'
 import isEqual from 'lodash/isEqual'
@@ -54,6 +56,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['total', 'loading'])
+const listingCartStore = useListingCartStore()
 
 const isLoading = ref(true)
 const gotoPage = (page: number) => {
@@ -103,6 +106,12 @@ const { nfts, fetchSearch, refetch } = useFetchSearch({
   resetSearch: resetPage,
 })
 
+watch(nfts, () => {
+  listingCartStore.owned = nfts.value
+    .filter((nft) => +(nft?.price ?? 0) === 0)
+    .map((nft) => nftToShoppingCardItem(nft))
+})
+
 watch(total, () => {
   prefetchNextPage()
   emit('total', total.value)
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index ae49df6e89..4e32864387 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -14,12 +14,14 @@ type ID = string
 
 interface State {
   items: ListCartItem[]
+  owned: ListCartItem[]
 }
 
 const localStorage = useLocalStorage<ListCartItem[]>('listingCart', [])
 export const useListingCartStore = defineStore('listingCart', {
   state: (): State => ({
     items: localStorage.value,
+    owned: [],
   }),
   getters: {
     count: (state) => state.items.length,
@@ -48,6 +50,11 @@ export const useListingCartStore = defineStore('listingCart', {
         this.updateItem(payload)
       }
     },
+    addAllToCart() {
+      for (const item of this.owned) {
+        this.setItem(item)
+      }
+    },
     updateItem(payload: ListCartItem) {
       const existInItemIndex = this.existInItemIndex(payload.id)
       if (existInItemIndex !== -1) {

From 8e1a8499845f44cd7dfa538d4e51571cc70abff6 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 03:09:33 +0800
Subject: [PATCH 17/51] fix: only first nft get's updated

---
 components/common/listingCart/ListingCartModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 3881824e01..6afcb585e2 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -153,7 +153,7 @@ async function confirm() {
       await transaction({
         interaction: Interaction.LIST,
         urlPrefix,
-        token: token[0],
+        token,
         successMessage: $i18n.t('transaction.price.success') as string,
         errorMessage: $i18n.t('transaction.price.error') as string,
       })

From e55bfea3b36628a948ad1ad4a2e7e3125e0e3461 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 11:46:05 +0800
Subject: [PATCH 18/51] fix: floor value incorrectly being returned by graphql,
 use useCollectionDetails instead

---
 components/items/ItemsGrid/ItemsGridImage.vue      | 9 ++++++++-
 queries/subsquid/general/nftListWithSearch.graphql | 1 -
 queries/subsquid/ksm/nftListWithSearch.graphql     | 1 -
 queries/subsquid/rmrk/nftListWithSearch.graphql    | 1 -
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index db9a51109a..7fdea0c534 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -56,6 +56,7 @@ import { useListingCartStore } from '@/stores/listingCart'
 import { usePreferencesStore } from '@/stores/preferences'
 import { nftToShoppingCardItem } from '@/components/common/shoppingCart/utils'
 import { isOwner as checkOwner } from '@/utils/account'
+import { useCollectionDetails } from '~/components/collection/utils/useCollectionDetails'
 
 const { urlPrefix } = usePrefix()
 const { placeholder } = useTheme()
@@ -72,6 +73,10 @@ const props = defineProps<{
   variant?: NftCardVariant
 }>()
 
+let { stats } = useCollectionDetails({
+  collectionId: props.nft?.collection?.id || props.nft?.collectionId,
+})
+
 const showActionSection = computed(() => {
   return !isLogIn.value && shoppingCartStore.getItemToBuy?.id === nft.value.id
 })
@@ -132,7 +137,9 @@ const onClickListingCart = () => {
   if (listingCartStore.isItemInCart(props.nft.id)) {
     listingCartStore.removeItem(props.nft.id)
   } else {
-    listingCartStore.setItem(nftToShoppingCardItem(props.nft))
+    const item = nftToShoppingCardItem(props.nft)
+    item.collection.floor = String(stats.value.collectionFloorPrice ?? '')
+    listingCartStore.setItem(item)
   }
 }
 </script>
diff --git a/queries/subsquid/general/nftListWithSearch.graphql b/queries/subsquid/general/nftListWithSearch.graphql
index 7bf375a3b1..eb247a3619 100644
--- a/queries/subsquid/general/nftListWithSearch.graphql
+++ b/queries/subsquid/general/nftListWithSearch.graphql
@@ -27,7 +27,6 @@ query nftListWithSearch(
     collection {
       id
       name
-      floor
     }
     meta {
       ...baseMeta
diff --git a/queries/subsquid/ksm/nftListWithSearch.graphql b/queries/subsquid/ksm/nftListWithSearch.graphql
index 76f2e6da6f..dce09e27e6 100644
--- a/queries/subsquid/ksm/nftListWithSearch.graphql
+++ b/queries/subsquid/ksm/nftListWithSearch.graphql
@@ -27,7 +27,6 @@ query nftListWithSearch(
     collection {
       id
       name
-      floor
     }
     meta {
       ...baseMeta
diff --git a/queries/subsquid/rmrk/nftListWithSearch.graphql b/queries/subsquid/rmrk/nftListWithSearch.graphql
index 60cecdc814..deeb24c1b5 100644
--- a/queries/subsquid/rmrk/nftListWithSearch.graphql
+++ b/queries/subsquid/rmrk/nftListWithSearch.graphql
@@ -26,7 +26,6 @@ query nftListWithSearch(
     collection {
       id
       name
-      floor
     }
     meta {
       ...baseMeta

From be7304610bade22be23ea07505a672bf52fbb369 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 12:06:37 +0800
Subject: [PATCH 19/51] feat: multichain segregation

---
 .../common/listingCart/ListingCartModal.vue   |  8 +++---
 stores/listingCart.ts                         | 26 ++++++++++---------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 6afcb585e2..cd233568a8 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -64,7 +64,7 @@
         </div>
         <div class="py-2">
           <ListingCartItem
-            v-for="nft in listingCartStore.items"
+            v-for="nft in listingCartStore.itemsInChain"
             :key="nft.id"
             :nft="nft" />
         </div>
@@ -117,12 +117,12 @@ function setFixedPrice() {
 }
 
 const priceUSD = computed(() => {
-  const { nfts, royalties } = totalPriceUsd(listingCartStore.items)
+  const { nfts, royalties } = totalPriceUsd(listingCartStore.itemsInChain)
   return (nfts + royalties).toFixed(2)
 })
 
 const totalNFTsPrice = computed(() =>
-  sum(listingCartStore.items.map((nft) => Number(nft.price)))
+  sum(listingCartStore.itemsInChain.map((nft) => Number(nft.price)))
 )
 
 const confirmListingLabel = computed(() => {
@@ -137,7 +137,7 @@ const confirmListingLabel = computed(() => {
 })
 async function confirm() {
   const updateItems = {} as { [urlPrefix: string]: TokenToList[] }
-  for (const item of listingCartStore.items) {
+  for (const item of listingCartStore.itemsInChain) {
     if (item.listPrice) {
       if (!updateItems[item.urlPrefix]) {
         updateItems[item.urlPrefix] = []
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 4e32864387..81784abc31 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import { EntityWithId } from '~/components/rmrk/service/scheme'
 import { set } from 'vue'
+import type { Prefix } from '@kodadot1/static'
+
 export type ListCartItem = {
   id: string
   name: string
@@ -15,6 +17,7 @@ type ID = string
 interface State {
   items: ListCartItem[]
   owned: ListCartItem[]
+  chain: ComputedRef<Prefix>
 }
 
 const localStorage = useLocalStorage<ListCartItem[]>('listingCart', [])
@@ -22,16 +25,18 @@ export const useListingCartStore = defineStore('listingCart', {
   state: (): State => ({
     items: localStorage.value,
     owned: [],
+    chain: usePrefix().urlPrefix,
   }),
   getters: {
-    count: (state) => state.items.length,
+    itemsInChain: (state): ListCartItem[] =>
+      state.items.filter((item) => item.urlPrefix === state.chain),
+    count() {
+      return this.itemsInChain.length
+    },
     incompleteListPrices: (state) =>
       state.items.filter((item) => !item.listPrice).length,
   },
   actions: {
-    getItemsByPrefix(prefix: string) {
-      this.items.filter((item) => item.urlPrefix === prefix)
-    },
     getItem(id: ID) {
       return this.items.find((item) => item.id === id)
     },
@@ -66,12 +71,12 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     setFixedPrice(price: number) {
-      for (const item of this.items) {
+      for (const item of this.itemsInChain) {
         set(item, 'listPrice', price)
       }
     },
     setFloorPrice(adjust = 1) {
-      for (const item of this.items) {
+      for (const item of this.itemsInChain) {
         set(
           item,
           'listPrice',
@@ -90,12 +95,9 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     clear() {
-      this.items = []
-      localStorage.value = []
-    },
-    setItems(payload: ListCartItem[]) {
-      this.items = payload
-      localStorage.value = this.items
+      for (const item of this.itemsInChain) {
+        this.removeItem(item.id)
+      }
     },
   },
 })

From 32fbf99ddaaad97241d1ad8774b0984eec439443 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 12:11:55 +0800
Subject: [PATCH 20/51] refactor: transaction cleanup

---
 .../common/listingCart/ListingCartModal.vue   | 23 ++++++++-----------
 stores/listingCart.ts                         |  2 +-
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index cd233568a8..e605c485dc 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -136,28 +136,23 @@ const confirmListingLabel = computed(() => {
   }
 })
 async function confirm() {
-  const updateItems = {} as { [urlPrefix: string]: TokenToList[] }
+  const token = {} as TokenToList[]
   for (const item of listingCartStore.itemsInChain) {
     if (item.listPrice) {
-      if (!updateItems[item.urlPrefix]) {
-        updateItems[item.urlPrefix] = []
-      }
-      updateItems[item.urlPrefix].push({
+      token.push({
         price: String(calculateBalance(item.listPrice)),
         nftId: item.id,
       })
     }
   }
   try {
-    for (const [urlPrefix, token] of Object.entries(updateItems)) {
-      await transaction({
-        interaction: Interaction.LIST,
-        urlPrefix,
-        token,
-        successMessage: $i18n.t('transaction.price.success') as string,
-        errorMessage: $i18n.t('transaction.price.error') as string,
-      })
-    }
+    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) {
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 81784abc31..181e790ca1 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { EntityWithId } from '~/components/rmrk/service/scheme'
-import { set } from 'vue'
+import { ComputedRef, set } from 'vue'
 import type { Prefix } from '@kodadot1/static'
 
 export type ListCartItem = {

From f9a4f5f6bb2968403dea1cbe75e694709de55397 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 12:13:01 +0800
Subject: [PATCH 21/51] fix: token object to array initializer

---
 components/common/listingCart/ListingCartModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index e605c485dc..b827cf997c 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -136,7 +136,7 @@ const confirmListingLabel = computed(() => {
   }
 })
 async function confirm() {
-  const token = {} as TokenToList[]
+  const token = [] as TokenToList[]
   for (const item of listingCartStore.itemsInChain) {
     if (item.listPrice) {
       token.push({

From 4136875c6c49c34ca3b0756ddc1bf8a37f817401 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sat, 2 Sep 2023 14:02:21 +0800
Subject: [PATCH 22/51] refactor: import alias from ~ to @

---
 .../common/listingCart/ListingCartItem.vue     |  6 +++---
 .../common/listingCart/ListingCartMini.vue     |  2 +-
 .../common/listingCart/ListingCartModal.vue    | 18 +++++++++---------
 components/common/shoppingCart/utils.ts        |  2 +-
 components/items/ItemsGrid/ItemsGrid.vue       |  4 ++--
 components/items/ItemsGrid/ItemsGridImage.vue  |  2 +-
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index b5d6ed4da5..3c3be4b877 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -48,9 +48,9 @@
 <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 '~/libs/ui'
-import { ListCartItem, useListingCartStore } from '~/stores/listingCart'
+import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPriceInput.vue'
+import { NeoButton } from '@/libs/ui'
+import { ListCartItem, useListingCartStore } from '@/stores/listingCart'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 const listingCartStore = useListingCartStore()
 
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 16a9e1f209..a8164f4d2d 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { NeoButton } from '@kodadot1/brick'
 import { useListingCartStore } from '@/stores/listingCart'
-import { usePreferencesStore } from '~/stores/preferences'
+import { usePreferencesStore } from '@/stores/preferences'
 const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
 
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index b827cf997c..fa93976e44 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -92,17 +92,17 @@
 </template>
 <script setup lang="ts">
 import { Interaction } from '@kodadot1/minimark/v1'
-import ListingCartPriceInput from '~/components/common/listingCart/ListingCartPriceInput.vue'
-import { totalPriceUsd } from '~/components/common/shoppingCart/utils'
-import IdentityItem from '~/components/identity/IdentityItem.vue'
-import CommonTokenMoney from '~/components/shared/CommonTokenMoney.vue'
+import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPriceInput.vue'
+import { totalPriceUsd } from '@/components/common/shoppingCart/utils'
+import IdentityItem from '@/components/identity/IdentityItem.vue'
+import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 import { NeoButton, NeoModal } from '@/libs/ui'
 import { usePreferencesStore } from '@/stores/preferences'
-import { TokenToList } from '~/composables/transaction/types'
-import { useListingCartStore } from '~/stores/listingCart'
-import { calculateBalance } from '~/utils/format/balance'
-import { sum } from '~/utils/math'
-import { warningMessage } from '~/utils/notification'
+import { TokenToList } from '@/composables/transaction/types'
+import { useListingCartStore } from '@/stores/listingCart'
+import { calculateBalance } from '@/utils/format/balance'
+import { sum } from '@/utils/math'
+import { warningMessage } from '@/utils/notification'
 const { isLogIn, accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 0b1590bb9b..8a512c53fa 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -1,5 +1,5 @@
 import { calculateExactUsdFromToken } from '@/utils/calculation'
-import { ListCartItem } from '~/stores/listingCart'
+import { ListCartItem } from '@/stores/listingCart'
 import { ShoppingCartItem } from './types'
 import { useFiatStore } from '@/stores/fiat'
 import { sum } from '@/utils/math'
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index debe34d146..18f6fa7467 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -44,8 +44,8 @@
 <script setup lang="ts">
 import { NeoNftCard } from '@kodadot1/brick'
 import DynamicGrid from '@/components/shared/DynamicGrid.vue'
-import { nftToShoppingCardItem } from '~/components/common/shoppingCart/utils'
-import { useListingCartStore } from '~/stores/listingCart'
+import { nftToShoppingCardItem } from '@/components/common/shoppingCart/utils'
+import { useListingCartStore } from '@/stores/listingCart'
 import ItemsGridImage from './ItemsGridImage.vue'
 import { useFetchSearch } from './useItemsGrid'
 import isEqual from 'lodash/isEqual'
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 7fdea0c534..839b368b2d 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -56,7 +56,7 @@ import { useListingCartStore } from '@/stores/listingCart'
 import { usePreferencesStore } from '@/stores/preferences'
 import { nftToShoppingCardItem } from '@/components/common/shoppingCart/utils'
 import { isOwner as checkOwner } from '@/utils/account'
-import { useCollectionDetails } from '~/components/collection/utils/useCollectionDetails'
+import { useCollectionDetails } from '@/components/collection/utils/useCollectionDetails'
 
 const { urlPrefix } = usePrefix()
 const { placeholder } = useTheme()

From 03fec9104af65ffacf064006ebbb5705bc92843f Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 00:13:26 +0800
Subject: [PATCH 23/51] Update
 components/common/listingCart/ListingCartItem.vue

Co-authored-by: roiLeo <medina.leo42@gmail.com>
---
 components/common/listingCart/ListingCartItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index 3c3be4b877..b2dc4ac160 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -49,7 +49,7 @@
 import { parseNftAvatar } from '@/utils/nft'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
 import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPriceInput.vue'
-import { NeoButton } from '@/libs/ui'
+import { NeoButton } from '@kodadot1/brick'
 import { ListCartItem, useListingCartStore } from '@/stores/listingCart'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 const listingCartStore = useListingCartStore()

From b43c1c014fcbf535ad7bc98c3d00511d5d393d61 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 13:43:54 +0800
Subject: [PATCH 24/51] refactor: minor code cleanup

---
 .../common/listingCart/ListingCartItem.vue     |  8 ++------
 .../common/listingCart/ListingCartMini.vue     | 16 ++++------------
 .../common/listingCart/ListingCartModal.vue    | 17 +++++------------
 .../listingCart/ListingCartPriceInput.vue      |  2 +-
 components/items/ItemsGrid/ItemsGridImage.vue  |  2 +-
 stores/listingCart.ts                          | 18 +++++++++---------
 6 files changed, 22 insertions(+), 41 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index b2dc4ac160..c57e7f5cb8 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -13,10 +13,10 @@
         <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 ellipsis">
+            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 ellipsis">
+          <div class="line-height-1 no-wrap is-clipped is-ellipsis">
             {{ nft.collection?.name || nft.collection.id }}
           </div>
         </div>
@@ -78,10 +78,6 @@ onMounted(() => {
   max-width: 170px;
 }
 
-.ellipsis {
-  text-overflow: ellipsis;
-}
-
 .line-height-1 {
   line-height: 1;
 }
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index a8164f4d2d..78adf4e10d 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -5,7 +5,7 @@
         <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> items
+              <b>{{ listingCartStore.count }}</b> {{ $t('items') }}
             </div>
             <div class="bar mx-4" />
             <NeoButton
@@ -13,7 +13,7 @@
               variant="text"
               no-shadow
               @click.native="listingCartStore.clear">
-              Clear All
+              {{ $t('sort.ClearAll') }}
             </NeoButton>
             <div class="bar mx-4" />
             <NeoButton
@@ -25,9 +25,9 @@
           </div>
         </div>
         <NeoButton
-          class="height-100"
+          class="h-full"
           :variant="'k-accent'"
-          @click.native="list">
+          @click.native="preferencesStore.listingCartModalOpen = true">
           List Items
         </NeoButton>
       </div>
@@ -40,10 +40,6 @@ import { useListingCartStore } from '@/stores/listingCart'
 import { usePreferencesStore } from '@/stores/preferences'
 const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
-
-function list() {
-  preferencesStore.listingCartModalOpen = true
-}
 </script>
 <style scoped lang="scss">
 .listing-container {
@@ -52,8 +48,4 @@ function list() {
   bottom: 50px;
   z-index: 998;
 }
-
-.height-100 {
-  height: 100%;
-}
 </style>
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index fa93976e44..90484acc95 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -83,7 +83,7 @@
             :label="confirmListingLabel"
             variant="k-accent"
             no-shadow
-            class="is-flex is-flex-grow-1 btn-height"
+            class="is-flex is-flex-grow-1 py-5"
             @click.native="confirm" />
         </div>
       </div>
@@ -96,7 +96,7 @@ import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPr
 import { totalPriceUsd } from '@/components/common/shoppingCart/utils'
 import IdentityItem from '@/components/identity/IdentityItem.vue'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
-import { NeoButton, NeoModal } from '@/libs/ui'
+import { NeoButton, NeoModal } from '@kodadot1/brick'
 import { usePreferencesStore } from '@/stores/preferences'
 import { TokenToList } from '@/composables/transaction/types'
 import { useListingCartStore } from '@/stores/listingCart'
@@ -137,14 +137,14 @@ const confirmListingLabel = computed(() => {
 })
 async function confirm() {
   const token = [] as TokenToList[]
-  for (const item of listingCartStore.itemsInChain) {
+  listingCartStore.itemsInChain.forEach((item) => {
     if (item.listPrice) {
       token.push({
         price: String(calculateBalance(item.listPrice)),
         nftId: item.id,
       })
     }
-  }
+  })
   try {
     await transaction({
       interaction: Interaction.LIST,
@@ -163,10 +163,6 @@ async function confirm() {
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
 
-.height-100 {
-  height: 100%;
-}
-
 .top {
   z-index: 1000;
 }
@@ -182,10 +178,7 @@ async function confirm() {
 }
 
 .modal-width {
-  width: 25rem;
-}
-.btn-height {
-  height: 3.5rem;
+  max-width: 25rem;
 }
 
 :deep .identity-name-font-weight-regular {
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index d6d6a2762f..de7e4bc364 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -18,7 +18,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { NeoButton } from '@/libs/ui'
+import { NeoButton } from '@kodadot1/brick'
 import { useVModel } from '@vueuse/core'
 const props = defineProps<{ value?: number | string; check?: boolean }>()
 const emit = defineEmits(['confirm', 'input'])
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 839b368b2d..3e7e9df910 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -73,7 +73,7 @@ const props = defineProps<{
   variant?: NftCardVariant
 }>()
 
-let { stats } = useCollectionDetails({
+const { stats } = useCollectionDetails({
   collectionId: props.nft?.collection?.id || props.nft?.collectionId,
 })
 
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 181e790ca1..6d5a7f0216 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -71,21 +71,21 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     setFixedPrice(price: number) {
-      for (const item of this.itemsInChain) {
+      this.itemsInChain.forEach((item) => {
         set(item, 'listPrice', price)
-      }
+      })
     },
     setFloorPrice(adjust = 1) {
-      for (const item of this.itemsInChain) {
+      this.itemsInChain.forEach((item) => {
         set(
           item,
           'listPrice',
-          this.round(Number(item.collection.floor ?? 0) * adjust)
+          this.inTrillions(Number(item.collection.floor ?? 0) * adjust)
         )
-      }
+      })
     },
-    round(number) {
-      return +(+number / 1000000000000).toFixed(12)
+    inTrillions(number: number) {
+      return +(+number / 1e12).toFixed(2)
     },
     removeItem(id: ID) {
       const existInItemIndex = this.existInItemIndex(id)
@@ -95,9 +95,9 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     clear() {
-      for (const item of this.itemsInChain) {
+      this.itemsInChain.forEach((item) => {
         this.removeItem(item.id)
-      }
+      })
     },
   },
 })

From 85070bc1b9bbe5ed6d2fa9393d5031843c01ef38 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 13:51:12 +0800
Subject: [PATCH 25/51] feat: close listing cart modal when empty

---
 components/common/listingCart/ListingCartModal.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 90484acc95..92cc46b719 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -159,6 +159,15 @@ async function confirm() {
     warningMessage(error)
   }
 }
+
+watch(
+  () => listingCartStore.count,
+  () => {
+    if (listingCartStore.count === 0) {
+      preferencesStore.listingCartModalOpen = false
+    }
+  }
+)
 </script>
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';

From d6b3a4f0b8a454859d6891c38b4d2ef41dc2c8c1 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 14:02:09 +0800
Subject: [PATCH 26/51] revert: h-full not being applied properly

---
 components/common/listingCart/ListingCartMini.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 78adf4e10d..8b3682d969 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -25,7 +25,7 @@
           </div>
         </div>
         <NeoButton
-          class="h-full"
+          class="height-100"
           :variant="'k-accent'"
           @click.native="preferencesStore.listingCartModalOpen = true">
           List Items
@@ -48,4 +48,8 @@ const preferencesStore = usePreferencesStore()
   bottom: 50px;
   z-index: 998;
 }
+
+.height-100 {
+  height: 100%;
+}
 </style>

From 9e5fbbaf776c0f90d4502a7cc41ae62456d89133 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 14:36:12 +0800
Subject: [PATCH 27/51] fix: potential earnings not calculating correctly

---
 .../common/listingCart/ListingCartModal.vue   | 25 +++++++++++++------
 components/common/shoppingCart/utils.ts       | 20 +++++++++++++++
 components/items/ItemsGrid/ItemsGridImage.vue | 13 ++++------
 stores/listingCart.ts                         | 10 +++-----
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 92cc46b719..363704983b 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -72,7 +72,7 @@
           class="is-flex border-top is-justify-content-space-between py-4 px-6">
           Potential Earnings
           <div class="is-flex">
-            <CommonTokenMoney :value="totalNFTsPrice" class="has-text-grey" />
+            <span class="ml-2 has-text-grey">{{ totalNFTsPrice }} KSM</span>
             <span class="has-text-weight-bold ml-2"> ${{ priceUSD }} </span>
           </div>
         </div>
@@ -93,7 +93,10 @@
 <script setup lang="ts">
 import { Interaction } from '@kodadot1/minimark/v1'
 import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPriceInput.vue'
-import { totalPriceUsd } from '@/components/common/shoppingCart/utils'
+import {
+  prefixToToken,
+  totalPriceUsd,
+} from '@/components/common/shoppingCart/utils'
 import IdentityItem from '@/components/identity/IdentityItem.vue'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 import { NeoButton, NeoModal } from '@kodadot1/brick'
@@ -103,6 +106,8 @@ import { useListingCartStore } from '@/stores/listingCart'
 import { calculateBalance } from '@/utils/format/balance'
 import { sum } from '@/utils/math'
 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()
@@ -115,14 +120,18 @@ function setFixedPrice() {
   listingCartStore.setFixedPrice(fixedPrice.value)
   fixedPrice.value = undefined
 }
-
-const priceUSD = computed(() => {
-  const { nfts, royalties } = totalPriceUsd(listingCartStore.itemsInChain)
-  return (nfts + royalties).toFixed(2)
-})
+const fiatStore = useFiatStore()
+const priceUSD = computed(() =>
+  calculateExactUsdFromToken(
+    totalNFTsPrice.value,
+    Number(fiatStore.getCurrentTokenValue(prefixToToken[urlPrefix.value]))
+  )
+)
 
 const totalNFTsPrice = computed(() =>
-  sum(listingCartStore.itemsInChain.map((nft) => Number(nft.price)))
+  listingCartStore.itemsInChain.reduce((acc, nft) => {
+    return acc + Number(nft.listPrice ?? 0)
+  }, 0)
 )
 
 const confirmListingLabel = computed(() => {
diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 8a512c53fa..3d416ad6e2 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -1,5 +1,6 @@
 import { calculateExactUsdFromToken } from '@/utils/calculation'
 import { ListCartItem } from '@/stores/listingCart'
+import { useCollectionDetails } from '~/components/collection/utils/useCollectionDetails'
 import { ShoppingCartItem } from './types'
 import { useFiatStore } from '@/stores/fiat'
 import { sum } from '@/utils/math'
@@ -63,3 +64,22 @@ export const nftToShoppingCardItem = (nft: NFT): ShoppingCartItem => {
     meta: nft.meta,
   }
 }
+
+export const nftToListingCartItem = (nft: NFT): ListCartItem => {
+  const { urlPrefix } = usePrefix()
+  const { stats } = useCollectionDetails({
+    collectionId: nft?.collection?.id || nft?.collectionId,
+  })
+
+  return {
+    id: nft.id,
+    name: nft.name,
+    price: nft.price ?? '0',
+    urlPrefix: urlPrefix.value,
+    collection: {
+      ...nft.collection,
+      floor: String(stats.value.collectionFloorPrice ?? ''),
+    },
+    listPrice: undefined,
+  }
+}
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 3e7e9df910..af0a98c6f9 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -54,7 +54,10 @@ import type { NFTWithMetadata } from '@/composables/useNft'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 import { useListingCartStore } from '@/stores/listingCart'
 import { usePreferencesStore } from '@/stores/preferences'
-import { nftToShoppingCardItem } from '@/components/common/shoppingCart/utils'
+import {
+  nftToListingCartItem,
+  nftToShoppingCardItem,
+} from '@/components/common/shoppingCart/utils'
 import { isOwner as checkOwner } from '@/utils/account'
 import { useCollectionDetails } from '@/components/collection/utils/useCollectionDetails'
 
@@ -73,10 +76,6 @@ const props = defineProps<{
   variant?: NftCardVariant
 }>()
 
-const { stats } = useCollectionDetails({
-  collectionId: props.nft?.collection?.id || props.nft?.collectionId,
-})
-
 const showActionSection = computed(() => {
   return !isLogIn.value && shoppingCartStore.getItemToBuy?.id === nft.value.id
 })
@@ -137,9 +136,7 @@ const onClickListingCart = () => {
   if (listingCartStore.isItemInCart(props.nft.id)) {
     listingCartStore.removeItem(props.nft.id)
   } else {
-    const item = nftToShoppingCardItem(props.nft)
-    item.collection.floor = String(stats.value.collectionFloorPrice ?? '')
-    listingCartStore.setItem(item)
+    listingCartStore.setItem(nftToListingCartItem(props.nft))
   }
 }
 </script>
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 6d5a7f0216..d79a467f88 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { EntityWithId } from '~/components/rmrk/service/scheme'
-import { ComputedRef, set } from 'vue'
+import { ComputedRef } from 'vue'
 import type { Prefix } from '@kodadot1/static'
 
 export type ListCartItem = {
@@ -72,15 +72,13 @@ export const useListingCartStore = defineStore('listingCart', {
     },
     setFixedPrice(price: number) {
       this.itemsInChain.forEach((item) => {
-        set(item, 'listPrice', price)
+        item.listPrice = price
       })
     },
     setFloorPrice(adjust = 1) {
       this.itemsInChain.forEach((item) => {
-        set(
-          item,
-          'listPrice',
-          this.inTrillions(Number(item.collection.floor ?? 0) * adjust)
+        item.listPrice = this.inTrillions(
+          Number(item.collection.floor ?? 0) * adjust
         )
       })
     },

From 875185bb3e1100ead81cef6af6f9323c2618aac8 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 14:53:54 +0800
Subject: [PATCH 28/51] style: listing cart price input active state

---
 .../listingCart/ListingCartPriceInput.vue     | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index de7e4bc364..8e2b1d0f65 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="is-flex">
-    <input
-      v-model="model"
-      type="text"
-      class="price-input height-40 theme-background-color shade-border-color has-text-color"
-      placeholder="Price" />
-    <div
-      class="border-top border-right border-bottom shade-border-color px-5 is-flex is-align-items-center">
-      KSM
+    <div class="is-flex price-input">
+      <input
+        v-model="model"
+        type="text"
+        class="price-input height-40 theme-background-color has-text-color"
+        placeholder="Price" />
+      <div class="px-5 is-flex is-align-items-center">KSM</div>
     </div>
     <NeoButton
       v-if="check"
@@ -26,22 +25,35 @@ const model = useVModel(props, 'value', emit, { eventName: 'input' })
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
 .price-input {
-  border: 1px solid #ccc;
-  border-right: none;
-  outline: none;
-  width: 5em;
-  text-indent: 10px;
+  border: 1px solid;
+  @include ktheme() {
+    border-color: theme('k-shade');
+    &:focus-within {
+      border-color: theme('border-color');
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    width: 5em;
+    text-indent: 10px;
+  }
 }
 
 .height-40 {
   height: 40px;
 }
-@import '@/styles/abstracts/variables';
 
 .shade-border-color {
   @include ktheme() {
     border-color: theme('k-shade');
+    &:hover {
+      border-color: theme('border-color');
+    }
   }
 }
 </style>

From fe0b7129664d066956131431b39e94e76104a40c Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 15:36:39 +0800
Subject: [PATCH 29/51] fix: list price and meta not storing on
 listingCartStore

---
 components/common/listingCart/ListingCartMini.vue |  2 +-
 components/common/shoppingCart/utils.ts           |  8 +++-----
 components/items/ItemsGrid/ItemsGridImage.vue     | 11 ++++++++++-
 stores/listingCart.ts                             |  3 ++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 8b3682d969..120b772554 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -13,7 +13,7 @@
               variant="text"
               no-shadow
               @click.native="listingCartStore.clear">
-              {{ $t('sort.ClearAll') }}
+              {{ $t('sort.clearAll') }}
             </NeoButton>
             <div class="bar mx-4" />
             <NeoButton
diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 3d416ad6e2..864ee12dd5 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -65,11 +65,8 @@ export const nftToShoppingCardItem = (nft: NFT): ShoppingCartItem => {
   }
 }
 
-export const nftToListingCartItem = (nft: NFT): ListCartItem => {
+export const nftToListingCartItem = (nft: NFT, floor = ''): ListCartItem => {
   const { urlPrefix } = usePrefix()
-  const { stats } = useCollectionDetails({
-    collectionId: nft?.collection?.id || nft?.collectionId,
-  })
 
   return {
     id: nft.id,
@@ -78,8 +75,9 @@ export const nftToListingCartItem = (nft: NFT): ListCartItem => {
     urlPrefix: urlPrefix.value,
     collection: {
       ...nft.collection,
-      floor: String(stats.value.collectionFloorPrice ?? ''),
+      floor,
     },
     listPrice: undefined,
+    meta: nft.meta,
   }
 }
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index af0a98c6f9..a284bd7e98 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -76,6 +76,10 @@ const props = defineProps<{
   variant?: NftCardVariant
 }>()
 
+const { stats } = useCollectionDetails({
+  collectionId: props.nft?.collection?.id || props.nft?.collectionId,
+})
+
 const showActionSection = computed(() => {
   return !isLogIn.value && shoppingCartStore.getItemToBuy?.id === nft.value.id
 })
@@ -136,7 +140,12 @@ const onClickListingCart = () => {
   if (listingCartStore.isItemInCart(props.nft.id)) {
     listingCartStore.removeItem(props.nft.id)
   } else {
-    listingCartStore.setItem(nftToListingCartItem(props.nft))
+    listingCartStore.setItem(
+      nftToListingCartItem(
+        props.nft,
+        String(stats.value.collectionFloorPrice ?? '')
+      )
+    )
   }
 }
 </script>
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index d79a467f88..2328f275f5 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { EntityWithId } from '~/components/rmrk/service/scheme'
+import { EntityWithId, NFTMetadata } from '~/components/rmrk/service/scheme'
 import { ComputedRef } from 'vue'
 import type { Prefix } from '@kodadot1/static'
 
@@ -10,6 +10,7 @@ export type ListCartItem = {
   price: string
   listPrice?: number
   collection: EntityWithId
+  meta?: NFTMetadata
 }
 
 type ID = string

From 6bd6fa346c49a31d90bca7ff1db428bd123f1eea Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 15:48:28 +0800
Subject: [PATCH 30/51] feat: recursive list price floor adjustment

---
 .../common/listingCart/ListingCartModal.vue   | 30 ++++++++++++-------
 components/common/shoppingCart/utils.ts       |  2 +-
 stores/listingCart.ts                         |  2 +-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 363704983b..f1666c83eb 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -34,25 +34,39 @@
               data-cy="item-creator" />
           </div>
           <div class="pt-4"><b>Set All To</b></div>
-          <div class="pt-4">Collection Floor Price</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="listingCartStore.setFloorPrice(0.95)" />
+              @click.native="
+                floorPricePercentAdjustment -= 0.05
+                listingCartStore.setFloorPrice(floorPricePercentAdjustment)
+              " />
             <NeoButton
               class="mr-2"
               label="Floor Price"
               rounded
               no-shadow
-              @click.native="listingCartStore.setFloorPrice(1)" />
+              @click.native="
+                floorPricePercentAdjustment = 1
+                listingCartStore.setFloorPrice(floorPricePercentAdjustment)
+              " />
             <NeoButton
               label="+5%"
               rounded
               no-shadow
-              @click.native="listingCartStore.setFloorPrice(1.05)" />
+              @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>
@@ -93,18 +107,13 @@
 <script setup lang="ts">
 import { Interaction } from '@kodadot1/minimark/v1'
 import ListingCartPriceInput from '@/components/common/listingCart/ListingCartPriceInput.vue'
-import {
-  prefixToToken,
-  totalPriceUsd,
-} from '@/components/common/shoppingCart/utils'
+import { prefixToToken } from '@/components/common/shoppingCart/utils'
 import IdentityItem from '@/components/identity/IdentityItem.vue'
-import CommonTokenMoney from '@/components/shared/CommonTokenMoney.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 { sum } from '@/utils/math'
 import { warningMessage } from '@/utils/notification'
 import { useFiatStore } from '~/stores/fiat'
 import { calculateExactUsdFromToken } from '~/utils/calculation'
@@ -116,6 +125,7 @@ const { transaction, isLoading, status } = useTransaction()
 const { $i18n } = useNuxtApp()
 
 const fixedPrice = ref()
+const floorPricePercentAdjustment = ref(1)
 function setFixedPrice() {
   listingCartStore.setFixedPrice(fixedPrice.value)
   fixedPrice.value = undefined
diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 864ee12dd5..837dbcd755 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -77,7 +77,7 @@ export const nftToListingCartItem = (nft: NFT, floor = ''): ListCartItem => {
       ...nft.collection,
       floor,
     },
-    listPrice: undefined,
+    listPrice: null,
     meta: nft.meta,
   }
 }
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 2328f275f5..04b7539f43 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -8,7 +8,7 @@ export type ListCartItem = {
   name: string
   urlPrefix: string
   price: string
-  listPrice?: number
+  listPrice: number | null
   collection: EntityWithId
   meta?: NFTMetadata
 }

From cbfe25c55d9aca960c5c11f77826c82bcdfa7596 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 16:04:49 +0800
Subject: [PATCH 31/51] refactor: added more translations

---
 components/common/listingCart/ListingCartModal.vue | 8 +++++---
 locales/en.json                                    | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index f1666c83eb..d371cd6a24 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -147,11 +147,13 @@ const totalNFTsPrice = computed(() =>
 const confirmListingLabel = computed(() => {
   switch (listingCartStore.incompleteListPrices) {
     case 0:
-      return 'Complete Listing'
+      return $i18n.t('listingCart.complete')
     case 1:
-      return '1 Item Is Missing Price'
+      return $i18n.t('listingCart.missing1')
     default:
-      return `${listingCartStore.incompleteListPrices} Items Are Missing Price`
+      return `${listingCartStore.incompleteListPrices} ${$i18n.t(
+        'listingCart.missingMultiple'
+      )}`
   }
 })
 async function confirm() {
diff --git a/locales/en.json b/locales/en.json
index e4577d24da..ed1c0ffadd 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1255,5 +1255,10 @@
     "gotToCart": "Go To Cart",
     "buyNow": "Buy Now",
     "wallet": "Wallet"
+  },
+  "listingCart": {
+    "complete": "Complete Listing",
+    "missing1": "1 Item Is Missing Price",
+    "missingMultiple": "Items Are Missing Price"
   }
 }

From aee55f6f0ab579d864a216e0908ac74849451699 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 16:22:27 +0800
Subject: [PATCH 32/51] fix: round to 2 decimals also some minor bug fix

---
 components/common/listingCart/ListingCartItem.vue  | 2 +-
 components/common/listingCart/ListingCartModal.vue | 7 +++++--
 stores/listingCart.ts                              | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index c57e7f5cb8..f28c33bc76 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -33,7 +33,7 @@
     <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>
-        <CommonTokenMoney :value="nft.collection.floor" />
+        <CommonTokenMoney round="2" :value="nft.collection.floor" />
       </div>
 
       <div class="is-flex is-align-items-end pt-2">
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index d371cd6a24..851c0e1f97 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -86,7 +86,9 @@
           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 }} KSM</span>
+            <span class="ml-2 has-text-grey"
+              >{{ totalNFTsPrice.toFixed(2) }} KSM</span
+            >
             <span class="has-text-weight-bold ml-2"> ${{ priceUSD }} </span>
           </div>
         </div>
@@ -208,7 +210,8 @@ watch(
 }
 
 .modal-width {
-  max-width: 25rem;
+  width: 25rem;
+  max-width: 30rem;
 }
 
 :deep .identity-name-font-weight-regular {
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 04b7539f43..25b2018622 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -79,7 +79,7 @@ export const useListingCartStore = defineStore('listingCart', {
     setFloorPrice(adjust = 1) {
       this.itemsInChain.forEach((item) => {
         item.listPrice = this.inTrillions(
-          Number(item.collection.floor ?? 0) * adjust
+          (+item.collection.floor || 0) * adjust
         )
       })
     },

From 6d44d9927ecd963818d6a49af0e056e930df7c33 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 17:32:04 +0800
Subject: [PATCH 33/51] refactor: used the existing composable to determine
 chainSymbol & formatBalance

---
 .../common/listingCart/ListingCartItem.vue    | 13 +++++++++++--
 .../common/listingCart/ListingCartModal.vue   |  3 ++-
 .../listingCart/ListingCartPriceInput.vue     |  3 ++-
 stores/listingCart.ts                         | 19 ++++++++++++-------
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index f28c33bc76..bbef1b07c4 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -33,7 +33,7 @@
     <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>
-        <CommonTokenMoney round="2" :value="nft.collection.floor" />
+        <span>{{ floor }}</span>
       </div>
 
       <div class="is-flex is-align-items-end pt-2">
@@ -51,7 +51,9 @@ 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 CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
+import { formatBalance } from '@polkadot/util'
+const { decimals, chainSymbol } = useChain()
+
 const listingCartStore = useListingCartStore()
 
 const avatar = ref<string>()
@@ -66,6 +68,13 @@ const getAvatar = async () => {
   }
 }
 
+const floor = computed(() =>
+  formatBalance(props.nft.collection.floor, {
+    decimals: decimals.value,
+    withUnit: chainSymbol.value,
+  })
+)
+
 onMounted(() => {
   getAvatar()
 })
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 851c0e1f97..18af35f3f5 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -87,7 +87,7 @@
           Potential Earnings
           <div class="is-flex">
             <span class="ml-2 has-text-grey"
-              >{{ totalNFTsPrice.toFixed(2) }} KSM</span
+              >{{ totalNFTsPrice.toFixed(4) }} {{ chainSymbol }}</span
             >
             <span class="has-text-weight-bold ml-2"> ${{ priceUSD }} </span>
           </div>
@@ -126,6 +126,7 @@ const listingCartStore = useListingCartStore()
 const { transaction, isLoading, status } = useTransaction()
 const { $i18n } = useNuxtApp()
 
+const { chainSymbol } = useChain()
 const fixedPrice = ref()
 const floorPricePercentAdjustment = ref(1)
 function setFixedPrice() {
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index 8e2b1d0f65..fbcd88e297 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -6,7 +6,7 @@
         type="text"
         class="price-input height-40 theme-background-color has-text-color"
         placeholder="Price" />
-      <div class="px-5 is-flex is-align-items-center">KSM</div>
+      <div class="px-5 is-flex is-align-items-center">{{ chainSymbol }}</div>
     </div>
     <NeoButton
       v-if="check"
@@ -22,6 +22,7 @@ import { useVModel } from '@vueuse/core'
 const props = defineProps<{ value?: number | string; check?: boolean }>()
 const emit = defineEmits(['confirm', 'input'])
 const model = useVModel(props, 'value', emit, { eventName: 'input' })
+const { chainSymbol } = useChain()
 </script>
 
 <style scoped lang="scss">
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 25b2018622..8ca556455f 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { EntityWithId, NFTMetadata } from '~/components/rmrk/service/scheme'
 import { ComputedRef } from 'vue'
 import type { Prefix } from '@kodadot1/static'
+import { formatBalance } from '@polkadot/util'
 
 export type ListCartItem = {
   id: string
@@ -19,6 +20,7 @@ interface State {
   items: ListCartItem[]
   owned: ListCartItem[]
   chain: ComputedRef<Prefix>
+  decimals: ComputedRef<number>
 }
 
 const localStorage = useLocalStorage<ListCartItem[]>('listingCart', [])
@@ -27,6 +29,7 @@ export const useListingCartStore = defineStore('listingCart', {
     items: localStorage.value,
     owned: [],
     chain: usePrefix().urlPrefix,
+    decimals: useChain().decimals,
   }),
   getters: {
     itemsInChain: (state): ListCartItem[] =>
@@ -73,19 +76,21 @@ export const useListingCartStore = defineStore('listingCart', {
     },
     setFixedPrice(price: number) {
       this.itemsInChain.forEach((item) => {
-        item.listPrice = price
+        item.listPrice = +formatBalance(price, {
+          decimals: this.decimals,
+          withUnit: false,
+        })
       })
     },
     setFloorPrice(adjust = 1) {
       this.itemsInChain.forEach((item) => {
-        item.listPrice = this.inTrillions(
-          (+item.collection.floor || 0) * adjust
-        )
+        const floor = (+item.collection.floor || 0) * adjust
+        item.listPrice = +formatBalance(floor, {
+          decimals: this.decimals,
+          withUnit: false,
+        })
       })
     },
-    inTrillions(number: number) {
-      return +(+number / 1e12).toFixed(2)
-    },
     removeItem(id: ID) {
       const existInItemIndex = this.existInItemIndex(id)
       if (existInItemIndex !== -1) {

From 05764c1e018903ea8f540c092b08385d2ac0015f Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 17:40:04 +0800
Subject: [PATCH 34/51] refactor: removed unnecessary formatting in set fixed
 price

---
 stores/listingCart.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 8ca556455f..2ab5486b76 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -76,10 +76,7 @@ export const useListingCartStore = defineStore('listingCart', {
     },
     setFixedPrice(price: number) {
       this.itemsInChain.forEach((item) => {
-        item.listPrice = +formatBalance(price, {
-          decimals: this.decimals,
-          withUnit: false,
-        })
+        item.listPrice = price
       })
     },
     setFloorPrice(adjust = 1) {

From 9614716e73b5932b63e8ccc04e20509e6328a00b Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 17:55:56 +0800
Subject: [PATCH 35/51] fix: removed @polkadot/util formatBalance as it was
 causing NaN on some circumstances

---
 components/common/listingCart/ListingCartModal.vue | 3 ++-
 stores/listingCart.ts                              | 8 ++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 18af35f3f5..84ff4cce19 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -47,7 +47,8 @@
               rounded
               no-shadow
               @click.native="
-                floorPricePercentAdjustment -= 0.05
+                floorPricePercentAdjustment > 0.05 &&
+                  (floorPricePercentAdjustment -= 0.05)
                 listingCartStore.setFloorPrice(floorPricePercentAdjustment)
               " />
             <NeoButton
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 2ab5486b76..53a228cb89 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 import { EntityWithId, NFTMetadata } from '~/components/rmrk/service/scheme'
 import { ComputedRef } from 'vue'
 import type { Prefix } from '@kodadot1/static'
-import { formatBalance } from '@polkadot/util'
 
 export type ListCartItem = {
   id: string
@@ -81,11 +80,8 @@ export const useListingCartStore = defineStore('listingCart', {
     },
     setFloorPrice(adjust = 1) {
       this.itemsInChain.forEach((item) => {
-        const floor = (+item.collection.floor || 0) * adjust
-        item.listPrice = +formatBalance(floor, {
-          decimals: this.decimals,
-          withUnit: false,
-        })
+        const floor = (+item.collection.floor || 0) * +adjust.toFixed(2)
+        item.listPrice = floor / Math.pow(10, this.decimals)
       })
     },
     removeItem(id: ID) {

From 08563cb0ceca1d462a14a5915926d9e06a16cfb3 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Sun, 3 Sep 2023 18:01:32 +0800
Subject: [PATCH 36/51] fix: set a 4 decimal cap on setFloorPrice via
 percentage

---
 stores/listingCart.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 53a228cb89..f118a1d4c0 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -81,7 +81,7 @@ export const useListingCartStore = defineStore('listingCart', {
     setFloorPrice(adjust = 1) {
       this.itemsInChain.forEach((item) => {
         const floor = (+item.collection.floor || 0) * +adjust.toFixed(2)
-        item.listPrice = floor / Math.pow(10, this.decimals)
+        item.listPrice = +(floor / Math.pow(10, this.decimals)).toFixed(4)
       })
     },
     removeItem(id: ID) {

From 9bea8e0e01cfa51864fedfb33e6dcd12574e694c Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Mon, 4 Sep 2023 02:01:37 +0800
Subject: [PATCH 37/51] feat: prevent non-numeric on listing cart price input

---
 components/common/listingCart/ListingCartModal.vue      | 2 +-
 components/common/listingCart/ListingCartPriceInput.vue | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 84ff4cce19..f23f859883 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -144,7 +144,7 @@ const priceUSD = computed(() =>
 
 const totalNFTsPrice = computed(() =>
   listingCartStore.itemsInChain.reduce((acc, nft) => {
-    return acc + Number(nft.listPrice ?? 0)
+    return +(acc + Number(nft.listPrice || 0)).toFixed(4)
   }, 0)
 )
 
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index fbcd88e297..91449b5b58 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -23,6 +23,12 @@ const props = defineProps<{ value?: number | string; check?: boolean }>()
 const emit = defineEmits(['confirm', 'input'])
 const model = useVModel(props, 'value', emit, { eventName: 'input' })
 const { chainSymbol } = useChain()
+watch(model, (newValue) => {
+  const sanitizedValue = (newValue?.toString() ?? '').replace(/[^0-9]/g, '')
+  if (sanitizedValue !== newValue) {
+    model.value = sanitizedValue
+  }
+})
 </script>
 
 <style scoped lang="scss">

From 533a18c21b4baf8fbf68bf21d8505e3856dd5597 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Mon, 4 Sep 2023 02:07:19 +0800
Subject: [PATCH 38/51] fix: include decimals in listing cart price input

---
 components/common/listingCart/ListingCartPriceInput.vue | 2 +-
 stores/listingCart.ts                                   | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index 91449b5b58..e225e6d15b 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -24,7 +24,7 @@ const emit = defineEmits(['confirm', 'input'])
 const model = useVModel(props, 'value', emit, { eventName: 'input' })
 const { chainSymbol } = useChain()
 watch(model, (newValue) => {
-  const sanitizedValue = (newValue?.toString() ?? '').replace(/[^0-9]/g, '')
+  const sanitizedValue = (newValue?.toString() ?? '').replace(/[^0-9.]/g, '')
   if (sanitizedValue !== newValue) {
     model.value = sanitizedValue
   }
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index f118a1d4c0..930c1cadd7 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -81,6 +81,8 @@ export const useListingCartStore = defineStore('listingCart', {
     setFloorPrice(adjust = 1) {
       this.itemsInChain.forEach((item) => {
         const floor = (+item.collection.floor || 0) * +adjust.toFixed(2)
+        console.log(this.decimals, floor, floor / Math.pow(10, this.decimals))
+
         item.listPrice = +(floor / Math.pow(10, this.decimals)).toFixed(4)
       })
     },

From b95a807f0fe250f742e4f94e116799cd0d3345c9 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Mon, 4 Sep 2023 02:08:10 +0800
Subject: [PATCH 39/51] refactor(cleanup): remove console.log

---
 stores/listingCart.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 930c1cadd7..f118a1d4c0 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -81,8 +81,6 @@ export const useListingCartStore = defineStore('listingCart', {
     setFloorPrice(adjust = 1) {
       this.itemsInChain.forEach((item) => {
         const floor = (+item.collection.floor || 0) * +adjust.toFixed(2)
-        console.log(this.decimals, floor, floor / Math.pow(10, this.decimals))
-
         item.listPrice = +(floor / Math.pow(10, this.decimals)).toFixed(4)
       })
     },

From db23f29a7b2e81098a3cf3f4de743996dc71963f Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Mon, 4 Sep 2023 11:02:55 +0800
Subject: [PATCH 40/51] refactor: remove unused import

---
 components/common/shoppingCart/utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 837dbcd755..92769a5541 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -1,6 +1,5 @@
 import { calculateExactUsdFromToken } from '@/utils/calculation'
 import { ListCartItem } from '@/stores/listingCart'
-import { useCollectionDetails } from '~/components/collection/utils/useCollectionDetails'
 import { ShoppingCartItem } from './types'
 import { useFiatStore } from '@/stores/fiat'
 import { sum } from '@/utils/math'

From e5926f3ae9aac066382ad90c3649736548c4f45e Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Mon, 4 Sep 2023 15:17:08 +0800
Subject: [PATCH 41/51] style: removed unused styles & opted to use bulma
 styles

---
 components/common/listingCart/ListingCartItem.vue | 10 +++-------
 components/common/listingCart/ListingCartMini.vue |  4 ++--
 stores/listingCart.ts                             |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index bbef1b07c4..434656efc4 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-2 px-6">
-    <div class="py-2 listing-border" />
+    <div class="py-2 border-top border-k-shade" />
     <div class="is-flex is-justify-content-space-between">
       <div class="is-flex">
         <div>
@@ -32,14 +32,13 @@
     </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>
+        <div class="has-text-grey is-size-7">Floor</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%" />
+          v-model="listingCartStore.getItem(nft.id).listPrice" />
       </div>
     </div>
   </div>
@@ -80,9 +79,6 @@ onMounted(() => {
 })
 </script>
 <style scoped lang="scss">
-.listing-border {
-  border-top: 1px solid #ccc;
-}
 .limit-width {
   max-width: 170px;
 }
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 120b772554..4e26089b42 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -7,7 +7,7 @@
             <div>
               <b>{{ listingCartStore.count }}</b> {{ $t('items') }}
             </div>
-            <div class="bar mx-4" />
+            <div class="mx-4" />
             <NeoButton
               :disabled="!listingCartStore.count"
               variant="text"
@@ -15,7 +15,7 @@
               @click.native="listingCartStore.clear">
               {{ $t('sort.clearAll') }}
             </NeoButton>
-            <div class="bar mx-4" />
+            <div class="mx-4" />
             <NeoButton
               variant="text"
               no-shadow
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index f118a1d4c0..a50e698a5f 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { EntityWithId, NFTMetadata } from '~/components/rmrk/service/scheme'
+import { EntityWithId, NFTMetadata } from '@/components/rmrk/service/scheme'
 import { ComputedRef } from 'vue'
 import type { Prefix } from '@kodadot1/static'
 

From e4ebc6e57eeb2dc3717eafb71791230af690a6a1 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 00:38:49 +0800
Subject: [PATCH 42/51] refactor: storing of unlisted owned

---
 .../common/listingCart/ListingCartModal.vue   | 19 +++--------
 .../listingCart/ListingCartPriceInput.vue     |  6 ++--
 components/items/ItemsGrid/ItemsGridImage.vue | 12 ++++++-
 stores/listingCart.ts                         | 34 +++++++------------
 4 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index f23f859883..dd4a0f6584 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -5,7 +5,6 @@
       v-model="preferencesStore.listingCartModalOpen"
       :can-cancel="['outside', 'escape']"
       scroll="clip"
-      class="top"
       @close="preferencesStore.listingCartModalOpen = false">
       <div class="modal-width">
         <header
@@ -22,7 +21,7 @@
         </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">
+            class="rounded border border-k-shade is-flex is-justify-content-start is-flex-grow-1 pl-3">
             <IdentityItem
               v-if="isLogIn"
               :label="$t('confirmPurchase.connectedWith')"
@@ -96,7 +95,7 @@
 
         <div class="is-flex is-justify-content-space-between pb-5 px-6">
           <NeoButton
-            :disabled="!!listingCartStore.incompleteListPrices"
+            :disabled="Boolean(listingCartStore.incompleteListPrices)"
             :label="confirmListingLabel"
             variant="k-accent"
             no-shadow
@@ -118,8 +117,8 @@ 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'
+import { useFiatStore } from '@/stores/fiat'
+import { calculateExactUsdFromToken } from '@/utils/calculation'
 const { isLogIn, accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
@@ -197,16 +196,6 @@ watch(
 <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;
 }
diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index e225e6d15b..de51f8ccd4 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="is-flex">
-    <div class="is-flex price-input">
+    <div class="is-flex price-input border border-k-shade">
       <input
         v-model="model"
         type="text"
@@ -11,7 +11,7 @@
     <NeoButton
       v-if="check"
       no-shadow
-      class="check-btn ml-2 shade-border-color height-40"
+      class="shade-border-color ml-2 height-40"
       icon="check"
       @click.native="emit('confirm')" />
   </div>
@@ -35,9 +35,7 @@ watch(model, (newValue) => {
 @import '@/styles/abstracts/variables';
 
 .price-input {
-  border: 1px solid;
   @include ktheme() {
-    border-color: theme('k-shade');
     &:focus-within {
       border-color: theme('border-color');
     }
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index a284bd7e98..a167d25f99 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -81,7 +81,7 @@ const { stats } = useCollectionDetails({
 })
 
 const showActionSection = computed(() => {
-  return !isLogIn.value && shoppingCartStore.getItemToBuy?.id === nft.value.id
+  return !isLogIn.value && shoppingCartStore.getItemToBuy?.id === props.nft.id
 })
 
 const buyLabel = computed(function () {
@@ -128,6 +128,16 @@ const onClickBuy = () => {
   })
 }
 
+// Set unlisted owned nft to the store
+if (+(props.nft?.price || 0) === 0 && isOwner.value) {
+  listingCartStore.setItem(
+    nftToListingCartItem(
+      props.nft,
+      String(stats.value.collectionFloorPrice ?? '')
+    ),
+    true
+  )
+}
 const onClickShoppingCart = () => {
   if (shoppingCartStore.isItemInCart(props.nft.id)) {
     shoppingCartStore.removeItem(props.nft.id)
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index a50e698a5f..b2c6aa817d 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -17,7 +17,7 @@ type ID = string
 
 interface State {
   items: ListCartItem[]
-  owned: ListCartItem[]
+  unlistedOwned: ListCartItem[]
   chain: ComputedRef<Prefix>
   decimals: ComputedRef<number>
 }
@@ -26,7 +26,7 @@ const localStorage = useLocalStorage<ListCartItem[]>('listingCart', [])
 export const useListingCartStore = defineStore('listingCart', {
   state: (): State => ({
     items: localStorage.value,
-    owned: [],
+    unlistedOwned: [],
     chain: usePrefix().urlPrefix,
     decimals: useChain().decimals,
   }),
@@ -46,33 +46,25 @@ export const useListingCartStore = defineStore('listingCart', {
     isItemInCart(id: ID) {
       return this.existInItemIndex(id) !== -1
     },
-    existInItemIndex(id: string) {
-      return this.items.findIndex((item) => item.id === id)
+    existInItemIndex(id: string, items?: ListCartItem[]) {
+      return (items ?? this.items).findIndex((item) => item.id === id)
     },
-    setItem(payload: ListCartItem) {
-      const existInItemIndex = this.existInItemIndex(payload.id)
+    setItem(payload: ListCartItem, toUnlistedOwned = false) {
+      const items = toUnlistedOwned ? this.unlistedOwned : this.items
+      const existInItemIndex = this.existInItemIndex(payload.id, items)
+
       if (existInItemIndex === -1) {
-        this.items.push(payload)
-        localStorage.value = this.items
-      } else {
-        this.updateItem(payload)
+        items.push(payload)
+        if (!toUnlistedOwned) {
+          localStorage.value = items
+        }
       }
     },
     addAllToCart() {
-      for (const item of this.owned) {
+      for (const item of this.unlistedOwned) {
         this.setItem(item)
       }
     },
-    updateItem(payload: ListCartItem) {
-      const existInItemIndex = this.existInItemIndex(payload.id)
-      if (existInItemIndex !== -1) {
-        this.items[existInItemIndex] = {
-          ...this.items[existInItemIndex],
-          ...payload,
-        }
-        localStorage.value = this.items
-      }
-    },
     setFixedPrice(price: number) {
       this.itemsInChain.forEach((item) => {
         item.listPrice = price

From 311e06dddca3ff8db097ac077d7cd719a81325dd Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 00:53:10 +0800
Subject: [PATCH 43/51] refactor: stylistic changes

---
 .../common/listingCart/ListingCartModal.vue    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index dd4a0f6584..10f824faf6 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -32,7 +32,7 @@
               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 has-text-weight-bold">Set All To</div>
           <div class="pt-4">
             Collection Floor Price
             <span v-if="floorPricePercentAdjustment !== 1" class="has-text-grey"
@@ -160,15 +160,13 @@ const confirmListingLabel = computed(() => {
   }
 })
 async function confirm() {
-  const token = [] as TokenToList[]
-  listingCartStore.itemsInChain.forEach((item) => {
-    if (item.listPrice) {
-      token.push({
-        price: String(calculateBalance(item.listPrice)),
-        nftId: item.id,
-      })
-    }
-  })
+  const token = listingCartStore.itemsInChain
+    .filter((item) => item.listPrice)
+    .map((item) => ({
+      price: String(calculateBalance(item.listPrice ?? 0)),
+      nftId: item.id,
+    })) as TokenToList[]
+
   try {
     await transaction({
       interaction: Interaction.LIST,

From 6f9449e5d04ae793b21f1bd83dfc31e32ffa57bd Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 16:20:41 +0800
Subject: [PATCH 44/51] refactor: minor code style changes

---
 components/common/listingCart/ListingCartMini.vue  |  6 +-----
 components/common/listingCart/ListingCartModal.vue |  7 +++----
 queries/subsquid/general/nftListWithSearch.graphql |  1 +
 stores/listingCart.ts                              |  2 +-
 styles/global.scss                                 | 10 ++++------
 5 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 4e26089b42..6c626aa9ed 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -25,7 +25,7 @@
           </div>
         </div>
         <NeoButton
-          class="height-100"
+          class="h-full"
           :variant="'k-accent'"
           @click.native="preferencesStore.listingCartModalOpen = true">
           List Items
@@ -48,8 +48,4 @@ const preferencesStore = usePreferencesStore()
   bottom: 50px;
   z-index: 998;
 }
-
-.height-100 {
-  height: 100%;
-}
 </style>
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 10f824faf6..e26ad61dc7 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -3,7 +3,6 @@
     <Loader v-model="isLoading" :status="status" />
     <NeoModal
       v-model="preferencesStore.listingCartModalOpen"
-      :can-cancel="['outside', 'escape']"
       scroll="clip"
       @close="preferencesStore.listingCartModalOpen = false">
       <div class="modal-width">
@@ -127,11 +126,11 @@ const { transaction, isLoading, status } = useTransaction()
 const { $i18n } = useNuxtApp()
 
 const { chainSymbol } = useChain()
-const fixedPrice = ref()
+const fixedPrice = ref<number | null>(null)
 const floorPricePercentAdjustment = ref(1)
 function setFixedPrice() {
   listingCartStore.setFixedPrice(fixedPrice.value)
-  fixedPrice.value = undefined
+  fixedPrice.value = null
 }
 const fiatStore = useFiatStore()
 const priceUSD = computed(() =>
@@ -143,7 +142,7 @@ const priceUSD = computed(() =>
 
 const totalNFTsPrice = computed(() =>
   listingCartStore.itemsInChain.reduce((acc, nft) => {
-    return +(acc + Number(nft.listPrice || 0)).toFixed(4)
+    return Number((acc + Number(nft.listPrice || 0)).toFixed(4))
   }, 0)
 )
 
diff --git a/queries/subsquid/general/nftListWithSearch.graphql b/queries/subsquid/general/nftListWithSearch.graphql
index eb247a3619..7bf375a3b1 100644
--- a/queries/subsquid/general/nftListWithSearch.graphql
+++ b/queries/subsquid/general/nftListWithSearch.graphql
@@ -27,6 +27,7 @@ query nftListWithSearch(
     collection {
       id
       name
+      floor
     }
     meta {
       ...baseMeta
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index b2c6aa817d..909c7a6caa 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -65,7 +65,7 @@ export const useListingCartStore = defineStore('listingCart', {
         this.setItem(item)
       }
     },
-    setFixedPrice(price: number) {
+    setFixedPrice(price: number | null) {
       this.itemsInChain.forEach((item) => {
         item.listPrice = price
       })
diff --git a/styles/global.scss b/styles/global.scss
index 4a6b5f8f2a..3fee3de6ab 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -204,7 +204,7 @@ body {
 }
 
 .h-full {
-  height: 100%;
+  height: 100% !important;
 }
 
 .w-full {
@@ -309,24 +309,22 @@ a.has-text-grey {
 
 .card-border-color {
   @include ktheme() {
-    border-color:theme('card-border-color');
+    border-color: theme('card-border-color');
   }
 }
 
 .border-k-shade {
   @include ktheme() {
-    border-color:  theme('k-shade');
+    border-color: theme('k-shade');
   }
 }
 
 .has-text-k-shade {
   @include ktheme() {
     color: theme('k-shade');
-  }  
+  }
 }
 
-
-
 //colors
 
 .has-text-k-green {

From 054cc8b60314165dfcc2674f4618d70067816935 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 16:41:54 +0800
Subject: [PATCH 45/51] feat: added missing translations

---
 components/common/listingCart/ListingCartItem.vue  | 2 +-
 components/common/listingCart/ListingCartMini.vue  | 4 ++--
 components/common/listingCart/ListingCartModal.vue | 4 ++--
 components/common/shoppingCart/utils.ts            | 1 +
 locales/en.json                                    | 6 +++++-
 stores/listingCart.ts                              | 1 +
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/common/listingCart/ListingCartItem.vue b/components/common/listingCart/ListingCartItem.vue
index 434656efc4..7d58f08b94 100644
--- a/components/common/listingCart/ListingCartItem.vue
+++ b/components/common/listingCart/ListingCartItem.vue
@@ -32,7 +32,7 @@
     </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 is-size-7">Floor</div>
+        <div class="has-text-grey is-size-7">{{ $t('activity.floor') }}</div>
         <span>{{ floor }}</span>
       </div>
 
diff --git a/components/common/listingCart/ListingCartMini.vue b/components/common/listingCart/ListingCartMini.vue
index 6c626aa9ed..55b5226f25 100644
--- a/components/common/listingCart/ListingCartMini.vue
+++ b/components/common/listingCart/ListingCartMini.vue
@@ -20,7 +20,7 @@
               variant="text"
               no-shadow
               @click.native="listingCartStore.addAllToCart">
-              Select All
+              {{ $t('listingCart.selectAll') }}
             </NeoButton>
           </div>
         </div>
@@ -28,7 +28,7 @@
           class="h-full"
           :variant="'k-accent'"
           @click.native="preferencesStore.listingCartModalOpen = true">
-          List Items
+          {{ $t('listingCart.listItem') }}
         </NeoButton>
       </div>
     </div>
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index e26ad61dc7..c99cfc0b3e 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -33,7 +33,7 @@
           </div>
           <div class="pt-4 has-text-weight-bold">Set All To</div>
           <div class="pt-4">
-            Collection Floor Price
+            {{ $t('listingCart.collectionFloorPrice') }}
             <span v-if="floorPricePercentAdjustment !== 1" class="has-text-grey"
               >{{ (floorPricePercentAdjustment * 100 - 100).toFixed(0) }}%</span
             >
@@ -68,7 +68,7 @@
               " />
           </div>
           <div class="pt-3 has-text-grey">-Or-</div>
-          <div class="pt-3">Fixed Price</div>
+          <div class="pt-3">{{ $t('listingCart.fixedPrice') }}</div>
           <ListingCartPriceInput
             v-model="fixedPrice"
             check
diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 92769a5541..80fa901b78 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -77,6 +77,7 @@ export const nftToListingCartItem = (nft: NFT, floor = ''): ListCartItem => {
       floor,
     },
     listPrice: null,
+    metadata: nft.metadata,
     meta: nft.meta,
   }
 }
diff --git a/locales/en.json b/locales/en.json
index f1809cf0e3..ea60a7886f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1261,6 +1261,10 @@
   "listingCart": {
     "complete": "Complete Listing",
     "missing1": "1 Item Is Missing Price",
-    "missingMultiple": "Items Are Missing Price"
+    "missingMultiple": "Items Are Missing Price",
+    "selectAll": "Select All",
+    "listItem": "List Item",
+    "fixedPrice": "Fixed Price",
+    "collectionFloorPrice": "Collection Floor Price"
   }
 }
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 909c7a6caa..db1b8dc568 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -11,6 +11,7 @@ export type ListCartItem = {
   listPrice: number | null
   collection: EntityWithId
   meta?: NFTMetadata
+  metadata?: string
 }
 
 type ID = string

From f34cbe270eff892044c25c05ce74bd07635fee23 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 16:48:59 +0800
Subject: [PATCH 46/51] feat: added last missing translations

---
 components/common/listingCart/ListingCartModal.vue | 6 +++---
 locales/en.json                                    | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index c99cfc0b3e..f9c3841b76 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -9,7 +9,7 @@
         <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
+            List {{ listingCartStore.count }} {{ $t('items') }}
           </span>
 
           <NeoButton
@@ -51,7 +51,7 @@
               " />
             <NeoButton
               class="mr-2"
-              label="Floor Price"
+              :label="$t('statsOverview.floorPrice')"
               rounded
               no-shadow
               @click.native="
@@ -83,7 +83,7 @@
         </div>
         <div
           class="is-flex border-top is-justify-content-space-between py-4 px-6">
-          Potential Earnings
+          {{ $t('listingCart.potentialEarnings') }}
           <div class="is-flex">
             <span class="ml-2 has-text-grey"
               >{{ totalNFTsPrice.toFixed(4) }} {{ chainSymbol }}</span
diff --git a/locales/en.json b/locales/en.json
index ea60a7886f..b1af46fa1a 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1265,6 +1265,7 @@
     "selectAll": "Select All",
     "listItem": "List Item",
     "fixedPrice": "Fixed Price",
-    "collectionFloorPrice": "Collection Floor Price"
+    "collectionFloorPrice": "Collection Floor Price",
+    "potentialEarnings": "Potential Earnings"
   }
 }

From db51eca141b1843a08e0cc6aa5f2ff4d2ea74a53 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 16:54:55 +0800
Subject: [PATCH 47/51] refactor: converted last for of loop to es6 forEach

---
 components/common/listingCart/ListingCartPriceInput.vue | 2 +-
 components/items/ItemsGrid/ItemsGridImage.vue           | 4 ++--
 locales/en.json                                         | 3 ++-
 stores/listingCart.ts                                   | 4 +---
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index de51f8ccd4..4480406a70 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -5,7 +5,7 @@
         v-model="model"
         type="text"
         class="price-input height-40 theme-background-color has-text-color"
-        placeholder="Price" />
+        placeholder="{{ $t('offer.price') }}" />
       <div class="px-5 is-flex is-align-items-center">{{ chainSymbol }}</div>
     </div>
     <NeoButton
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index a167d25f99..86dc0d08df 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -96,8 +96,8 @@ const buyLabel = computed(function () {
 
 const listLabel = computed(() => {
   const label = Boolean(Number(props.nft.price))
-    ? 'Change Price'
-    : 'List For Sale'
+    ? $i18n.t('transaction.price.change')
+    : $i18n.t('listingCart.listForSale')
   return label + (listingCartStore.isItemInCart(props.nft.id) ? ' ✓' : '')
 })
 
diff --git a/locales/en.json b/locales/en.json
index b1af46fa1a..e09ac70d1d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1266,6 +1266,7 @@
     "listItem": "List Item",
     "fixedPrice": "Fixed Price",
     "collectionFloorPrice": "Collection Floor Price",
-    "potentialEarnings": "Potential Earnings"
+    "potentialEarnings": "Potential Earnings",
+    "listForSale": "List For Sale"
   }
 }
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index db1b8dc568..3084a6d3a5 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -62,9 +62,7 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     addAllToCart() {
-      for (const item of this.unlistedOwned) {
-        this.setItem(item)
-      }
+      this.unlistedOwned.forEach((item) => this.setItem(item))
     },
     setFixedPrice(price: number | null) {
       this.itemsInChain.forEach((item) => {

From cdf091a891b7f92febe54c7e2ee730865dc1b507 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 16:56:07 +0800
Subject: [PATCH 48/51] fix: typo

---
 components/common/listingCart/ListingCartPriceInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/common/listingCart/ListingCartPriceInput.vue b/components/common/listingCart/ListingCartPriceInput.vue
index 4480406a70..acc5d210b4 100644
--- a/components/common/listingCart/ListingCartPriceInput.vue
+++ b/components/common/listingCart/ListingCartPriceInput.vue
@@ -5,7 +5,7 @@
         v-model="model"
         type="text"
         class="price-input height-40 theme-background-color has-text-color"
-        placeholder="{{ $t('offer.price') }}" />
+        :placeholder="$t('offer.price')" />
       <div class="px-5 is-flex is-align-items-center">{{ chainSymbol }}</div>
     </div>
     <NeoButton

From a680522fef23a80b5a7faa61c2f9618b76d9d20c Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 21:40:15 +0800
Subject: [PATCH 49/51] refactor: for better code readability

---
 .../common/listingCart/ListingCartModal.vue   | 11 +++--
 components/items/ItemsGrid/ItemsGrid.vue      |  6 ---
 components/items/ItemsGrid/ItemsGridImage.vue |  7 ++-
 stores/listingCart.ts                         | 47 ++++++++++---------
 4 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index f9c3841b76..7e7cd8391b 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -118,6 +118,7 @@ import { calculateBalance } from '@/utils/format/balance'
 import { warningMessage } from '@/utils/notification'
 import { useFiatStore } from '@/stores/fiat'
 import { calculateExactUsdFromToken } from '@/utils/calculation'
+import { sum } from '@/utils/math'
 const { isLogIn, accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
@@ -141,9 +142,11 @@ const priceUSD = computed(() =>
 )
 
 const totalNFTsPrice = computed(() =>
-  listingCartStore.itemsInChain.reduce((acc, nft) => {
-    return Number((acc + Number(nft.listPrice || 0)).toFixed(4))
-  }, 0)
+  Number(
+    sum(
+      listingCartStore.itemsInChain.map((nft) => Number(nft.listPrice))
+    ).toFixed(4)
+  )
 )
 
 const confirmListingLabel = computed(() => {
@@ -160,7 +163,7 @@ const confirmListingLabel = computed(() => {
 })
 async function confirm() {
   const token = listingCartStore.itemsInChain
-    .filter((item) => item.listPrice)
+    .filter((item) => Boolean(item.listPrice))
     .map((item) => ({
       price: String(calculateBalance(item.listPrice ?? 0)),
       nftId: item.id,
diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 18f6fa7467..2b117aa6f4 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -106,12 +106,6 @@ const { nfts, fetchSearch, refetch } = useFetchSearch({
   resetSearch: resetPage,
 })
 
-watch(nfts, () => {
-  listingCartStore.owned = nfts.value
-    .filter((nft) => +(nft?.price ?? 0) === 0)
-    .map((nft) => nftToShoppingCardItem(nft))
-})
-
 watch(total, () => {
   prefetchNextPage()
   emit('total', total.value)
diff --git a/components/items/ItemsGrid/ItemsGridImage.vue b/components/items/ItemsGrid/ItemsGridImage.vue
index 86dc0d08df..94e684a0a7 100644
--- a/components/items/ItemsGrid/ItemsGridImage.vue
+++ b/components/items/ItemsGrid/ItemsGridImage.vue
@@ -129,13 +129,12 @@ const onClickBuy = () => {
 }
 
 // Set unlisted owned nft to the store
-if (+(props.nft?.price || 0) === 0 && isOwner.value) {
-  listingCartStore.setItem(
+if (!Number(props.nft?.price) && isOwner.value) {
+  listingCartStore.setUnlistedItem(
     nftToListingCartItem(
       props.nft,
       String(stats.value.collectionFloorPrice ?? '')
-    ),
-    true
+    )
   )
 }
 const onClickShoppingCart = () => {
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 3084a6d3a5..265dd0987e 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -18,7 +18,7 @@ type ID = string
 
 interface State {
   items: ListCartItem[]
-  unlistedOwned: ListCartItem[]
+  allUnlisted: ListCartItem[]
   chain: ComputedRef<Prefix>
   decimals: ComputedRef<number>
 }
@@ -27,7 +27,7 @@ const localStorage = useLocalStorage<ListCartItem[]>('listingCart', [])
 export const useListingCartStore = defineStore('listingCart', {
   state: (): State => ({
     items: localStorage.value,
-    unlistedOwned: [],
+    allUnlisted: [],
     chain: usePrefix().urlPrefix,
     decimals: useChain().decimals,
   }),
@@ -45,40 +45,41 @@ export const useListingCartStore = defineStore('listingCart', {
       return this.items.find((item) => item.id === id)
     },
     isItemInCart(id: ID) {
-      return this.existInItemIndex(id) !== -1
+      return existInItemIndex(id, this.items) !== -1
     },
-    existInItemIndex(id: string, items?: ListCartItem[]) {
-      return (items ?? this.items).findIndex((item) => item.id === id)
+    setItem(payload: ListCartItem) {
+      const itemIndex = existInItemIndex(payload.id, this.items)
+      if (itemIndex === -1) {
+        this.items.push(payload)
+        localStorage.value = this.items
+      }
     },
-    setItem(payload: ListCartItem, toUnlistedOwned = false) {
-      const items = toUnlistedOwned ? this.unlistedOwned : this.items
-      const existInItemIndex = this.existInItemIndex(payload.id, items)
-
-      if (existInItemIndex === -1) {
-        items.push(payload)
-        if (!toUnlistedOwned) {
-          localStorage.value = items
-        }
+    setUnlistedItem(payload: ListCartItem) {
+      const itemIndex = existInItemIndex(payload.id, this.allUnlisted)
+      if (itemIndex === -1) {
+        this.allUnlisted.push(payload)
       }
     },
     addAllToCart() {
-      this.unlistedOwned.forEach((item) => this.setItem(item))
+      this.allUnlisted.forEach((item) => this.setItem(item))
     },
     setFixedPrice(price: number | null) {
       this.itemsInChain.forEach((item) => {
         item.listPrice = price
       })
     },
-    setFloorPrice(adjust = 1) {
+    setFloorPrice(rate = 1) {
       this.itemsInChain.forEach((item) => {
-        const floor = (+item.collection.floor || 0) * +adjust.toFixed(2)
-        item.listPrice = +(floor / Math.pow(10, this.decimals)).toFixed(4)
+        const floor = (Number(item.collection.floor) || 0) * +rate.toFixed(2)
+        item.listPrice = Number(
+          (floor / Math.pow(10, this.decimals)).toFixed(4)
+        )
       })
     },
     removeItem(id: ID) {
-      const existInItemIndex = this.existInItemIndex(id)
-      if (existInItemIndex !== -1) {
-        this.items.splice(existInItemIndex, 1)
+      const itemIndex = existInItemIndex(id, this.items)
+      if (itemIndex !== -1) {
+        this.items.splice(itemIndex, 1)
         localStorage.value = this.items
       }
     },
@@ -89,3 +90,7 @@ export const useListingCartStore = defineStore('listingCart', {
     },
   },
 })
+
+function existInItemIndex(id: string, items: ListCartItem[]) {
+  return items.findIndex((item) => item.id === id)
+}

From 1f508e76c4002e03ddffcd670ed739d1337227db Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 22:41:14 +0800
Subject: [PATCH 50/51] revert: shoppingCart/utils totalPriceUsd

---
 components/common/shoppingCart/utils.ts |  2 +-
 stores/listingCart.ts                   | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/common/shoppingCart/utils.ts b/components/common/shoppingCart/utils.ts
index 80fa901b78..c5dfdfcc6e 100644
--- a/components/common/shoppingCart/utils.ts
+++ b/components/common/shoppingCart/utils.ts
@@ -21,7 +21,7 @@ const getTokenDecimal = (item: ShoppingCartItem) => {
   return chainPropListOf(token.toLowerCase()).tokenDecimals
 }
 
-export const totalPriceUsd = (items: ShoppingCartItem[] | ListCartItem[]) => {
+export const totalPriceUsd = (items: ShoppingCartItem[]) => {
   const fiatStore = useFiatStore()
 
   const nftSPrice = items.map((item) =>
diff --git a/stores/listingCart.ts b/stores/listingCart.ts
index 265dd0987e..1c81b823a3 100644
--- a/stores/listingCart.ts
+++ b/stores/listingCart.ts
@@ -18,7 +18,7 @@ type ID = string
 
 interface State {
   items: ListCartItem[]
-  allUnlisted: ListCartItem[]
+  allUnlistedItems: ListCartItem[]
   chain: ComputedRef<Prefix>
   decimals: ComputedRef<number>
 }
@@ -27,7 +27,7 @@ const localStorage = useLocalStorage<ListCartItem[]>('listingCart', [])
 export const useListingCartStore = defineStore('listingCart', {
   state: (): State => ({
     items: localStorage.value,
-    allUnlisted: [],
+    allUnlistedItems: [],
     chain: usePrefix().urlPrefix,
     decimals: useChain().decimals,
   }),
@@ -55,13 +55,13 @@ export const useListingCartStore = defineStore('listingCart', {
       }
     },
     setUnlistedItem(payload: ListCartItem) {
-      const itemIndex = existInItemIndex(payload.id, this.allUnlisted)
+      const itemIndex = existInItemIndex(payload.id, this.allUnlistedItems)
       if (itemIndex === -1) {
-        this.allUnlisted.push(payload)
+        this.allUnlistedItems.push(payload)
       }
     },
     addAllToCart() {
-      this.allUnlisted.forEach((item) => this.setItem(item))
+      this.allUnlistedItems.forEach((item) => this.setItem(item))
     },
     setFixedPrice(price: number | null) {
       this.itemsInChain.forEach((item) => {

From edd67df1176899c7da7f714907fccb9f1c422618 Mon Sep 17 00:00:00 2001
From: Stephen Jason Wang <stephenjasonwang@gmail.com>
Date: Tue, 5 Sep 2023 22:47:08 +0800
Subject: [PATCH 51/51] type: asserted the type of token instead of doing a
 nullish coalescing

---
 components/common/listingCart/ListingCartModal.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 7e7cd8391b..584e53b2c4 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -113,7 +113,7 @@ 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 { ListCartItem, useListingCartStore } from '@/stores/listingCart'
 import { calculateBalance } from '@/utils/format/balance'
 import { warningMessage } from '@/utils/notification'
 import { useFiatStore } from '@/stores/fiat'
@@ -163,9 +163,11 @@ const confirmListingLabel = computed(() => {
 })
 async function confirm() {
   const token = listingCartStore.itemsInChain
-    .filter((item) => Boolean(item.listPrice))
+    .filter((item): item is ListCartItem & { listPrice: number } =>
+      Boolean(item.listPrice)
+    )
     .map((item) => ({
-      price: String(calculateBalance(item.listPrice ?? 0)),
+      price: String(calculateBalance(item.listPrice)),
       nftId: item.id,
     })) as TokenToList[]