Merge branch 'main' of github.com:kodadot/nft-gallery

Dockerfile

@@ -1,7 +1,10 @@
 # Dockerfile
 FROM node:18
 
-RUN npm i -g pnpm
+# Set the same pnpm version as the version in the package.json
+ENV PNPM_VERSION 8.6.0
+
+RUN npm i -g pnpm@$PNPM_VERSION
 WORKDIR /app
 
 COPY . .

README.md

@@ -41,7 +41,7 @@ You'll find our goals for KodaDot upcoming future!
 - Read on the ever-evolving states of our [data storage](https://medium.com/kodadot/on-the-past-present-and-future-of-data-storage-at-kodadot-7634a0c32530)
 - Read up on our efforts to be a [public good](https://medium.com/kodadot/on-sustaining-open-source-as-a-public-good-a3e8c36e67d6)
 - Get a glimpse into our [contributor culture](https://medium.com/kodadot/contributor-culture-at-kodadot-665243d3d6a6)
-
+- Read about [keyboard shortcuts](https://medium.com/@ashutoshrishi844101/quick-guide-for-using-keyboard-shortcuts-on-kodadot-83b427d60145)
 # Support KodaDot
 
 #### Please ⭐️ **star** and **share** this repository! This exposes us to other builders and creators in the space.
@@ -54,3 +54,4 @@ You'll find our goals for KodaDot upcoming future!
 - Follow us on [Twitter](https://twitter.com/KodaDot), [Youtube](https://www.youtube.com/channel/UCEULduld5NrqOL49k1KVjoA), [SubStack](https://kodadot.substack.com/) and [Medium](https://blog.kodadot.xyz), [Instagram](https://instagram.com/kodadot.xyz),
 - Join our [Telegram KodaDot Ecosystem](https://t.me/kodadot_eco), [Discord](https://discord.gg/u6ymnbz4PR)
 - [Pick your T-shirt in KodaDot Swag Shop](https://shop.kodadot.xyz), use voucher `readme100` to get 100% OFF, first 10 redemptions only.
+

components/Navbar.vue

@@ -144,6 +144,10 @@
             :show-label="isMobile"
             @closeBurgerMenu="showMobileNavbar" />
 
+          <ShoppingCartButton
+            :show-label="isMobile"
+            @closeBurgerMenu="showMobileNavbar" />
+
           <template v-if="isMobile">
             <template v-if="!account">
               <MobileLanguageOption @closeLanguageOption="showMobileNavbar" />
@@ -204,6 +208,7 @@ import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
 import { useIdentityStore } from '@/stores/identity'
 import { getChainNameByPrefix } from '@/utils/chain'
 import { createVisible, explorerVisible } from '@/utils/config/permision.config'
+import ShoppingCartButton from './navbar/ShoppingCartButton.vue'
 
 const { $buefy, $nextTick } = useNuxtApp()
 const instance = getCurrentInstance()

components/buy/Buy.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <ConfirmPurchaseModal @confirm="onConfirm" />
+    <Loader v-model="isLoading" :status="status" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ShoppingActions } from '@/utils/shoppingActions'
+import { useShoppingCartStore } from '@/stores/shoppingCart'
+import { usePreferencesStore } from '@/stores/preferences'
+import { useFiatStore } from '@/stores/fiat'
+
+import { warningMessage } from '@/utils/notification'
+import ConfirmPurchaseModal from '@/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue'
+import Loader from '@/components/shared/Loader.vue'
+import { TokenToBuy } from '@/composables/transaction/types'
+import { ShoppingCartItem } from '@/components/common/shoppingCart/types'
+const { urlPrefix } = usePrefix()
+const shoppingCartStore = useShoppingCartStore()
+const preferencesStore = usePreferencesStore()
+const fiatStore = useFiatStore()
+
+const items = computed(() =>
+  shoppingCartStore.getItemsByPrefix(urlPrefix.value)
+)
+
+onMounted(async () => {
+  if (
+    fiatStore.getCurrentKSMValue === null ||
+    fiatStore.getCurrentDOTValue === null ||
+    fiatStore.getCurrentBSXValue === null
+  ) {
+    fiatStore.fetchFiatPrice()
+  }
+})
+
+const { transaction, status, isLoading } = useTransaction()
+const { $i18n } = useNuxtApp()
+
+const ShoppingCartItemToTokenToBuy = (item: ShoppingCartItem): TokenToBuy => {
+  return {
+    currentOwner: item.currentOwner,
+    price: item.price,
+    id: item.id,
+    royalty: item.royalty,
+  }
+}
+
+watchEffect(() => {
+  if (isLoading.value === false && status.value === 'loader.finalized') {
+    preferencesStore.setTriggerBuySuccess(true)
+    shoppingCartStore.clear()
+  }
+})
+
+const onConfirm = () => {
+  if (preferencesStore.getCompletePurchaseModal.mode === 'shopping-cart') {
+    handleBuy(items.value.map(ShoppingCartItemToTokenToBuy))
+  } else {
+    handleBuy(
+      ShoppingCartItemToTokenToBuy(
+        shoppingCartStore.getItemToBuy as ShoppingCartItem
+      )
+    )
+    shoppingCartStore.removeItemToBuy()
+  }
+}
+
+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)
+  }
+}
+</script>

components/collection/activity/events/eventRow/common.ts

@@ -4,9 +4,7 @@ import {
   Offer,
   OfferInteraction,
 } from '@/composables/collectionActivity/types'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import { processSingleMetadata } from '@/utils/cachingStrategy'
-import { NFTMetadata } from '@/components/rmrk/service/scheme'
+import { parseNftAvatar } from '@/utils/nft'
 import { mintInteraction } from '@/composables/collectionActivity/helpers'
 
 export const interactionNameMap = {
@@ -68,15 +66,6 @@ export const getToAddress = (event: InteractionWithNFT | Offer): string => {
   }
   return blank
 }
-export const getNFTAvatar = async (
+export const getNFTAvatar = (
   event: InteractionWithNFT | Offer
-): Promise<string> => {
-  if (event.nft.meta?.image) {
-    return sanitizeIpfsUrl(event.nft.meta.image)
-  } else {
-    const meta = (await processSingleMetadata(
-      event.nft.metadata
-    )) as NFTMetadata
-    return sanitizeIpfsUrl(meta?.image)
-  }
-}
+): Promise<string> => parseNftAvatar(event.nft)

components/common/ConnectWallet/WalletAssetIdentity.vue

@@ -20,9 +20,11 @@
 <script setup lang="ts">
 import { NeoIcon } from '@kodadot1/brick'
 import { useIdentityStore } from '@/stores/identity'
+import { useShoppingCartStore } from '@/stores/shoppingCart'
 import useIdentity from '@/components/identity/utils/useIdentity'
 
 const identityStore = useIdentityStore()
+const shoppingCartStore = useShoppingCartStore()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 const { display, shortenedAddress } = useIdentity({
@@ -35,5 +37,6 @@ const logout = () => {
   identityStore.resetAuth()
   sessionStorage.clear()
   localStorage.clear()
+  shoppingCartStore.clear()
 }
 </script>

components/common/ConnectWallet/useConnectWallet.ts

@@ -1,8 +1,22 @@
 import ConnectWalletModal from './ConnectWalletModal.vue'
-
+import { ModalProgrammatic as Modal } from 'buefy'
+import { BModalComponent, BModalConfig } from 'buefy/types/components'
 export const ConnectWalletModalConfig = {
   component: ConnectWalletModal,
   canCancel: ['escape', 'outside'],
   customClass: 'connect-wallet-modal',
   autoFocus: false,
 }
+
+export const openConnectWalletModal = (instance) => {
+  const modal = ref<BModalComponent | null>()
+
+  modal.value = Modal.open({
+    parent: instance?.proxy,
+    onCancel: () => {
+      modal.value = null
+      document.body.classList.remove('is-clipped')
+    },
+    ...ConnectWalletModalConfig,
+  } as unknown as BModalConfig)
+}

components/common/confirmPurchaseModal/ConfirmPurchaseItemRow.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="is-flex is-justify-content-space-between">
+    <div class="is-flex pr-2">
+      <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>
+</template>
+
+<script setup lang="ts">
+import { parseNftAvatar } from '@/utils/nft'
+import BasicImage from '@/components/shared/view/BasicImage.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';
+
+.limit-width {
+  max-width: 170px;
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+</style>