5800 plastic credit v2 market place related issues

frontend/marketplace/src/components/AuctionCard.vue

@@ -4,6 +4,7 @@ import { convertIPFStoHTTPS } from "@/utils/utils";
 import auctionCard from "@/assets/auctionCard.png";
 import { formatDenom } from "@/utils/wallet-utils";
 import { onMounted, ref } from "vue";
+import CustomImage from "@/components/CustomImage.vue";
 export interface AuctionCardProps {
   auctionData: any;
 }
@@ -16,12 +17,12 @@ onMounted(async () => {
 </script>
 <template>
   <div class="bg-lightBlack rounded-lg md:rounded-sm">
-    <img
-      class="max-h-[250px] w-full rounded-lg"
+    <CustomImage
+      image-class="max-h-[250px] w-full rounded-lg"
       :src="
         convertIPFStoHTTPS(
           auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
-            ?.nodes[0].url
+            ?.nodes[0].url,
         ) || auctionCard
       "
     />

frontend/marketplace/src/components/AuctionResultsCard.vue

@@ -5,6 +5,7 @@ import auctionCard from "@/assets/auctionCard.png";
 import { getDetailsList } from "@/utils/utils";
 import { formatDenom } from "@/utils/wallet-utils";
 import { onMounted, ref } from "vue";
+import CustomImage from "@/components/CustomImage.vue";
 
 export interface AuctionResultsCardProps {
   cardData: MarketplaceListing & {
@@ -23,12 +24,12 @@ onMounted(async () => {
   <div
     class="bg-auctionBackground md:bg-lightBlack rounded-lg font-Inter text-white my-5 md:p-3 md:grid md:grid-cols-5 min-h-[180px]"
   >
-    <img
-      class="h-full col-span-1 rounded-sm"
+    <CustomImage
       :src="
         getDetailsList(cardData.creditCollection.creditData.nodes)
           .thumbnailUrl || auctionCard
       "
+      image-class="max-h-[200px] w-full rounded-sm"
     />
 
     <!--      Details for Mobile UI-->
@@ -73,7 +74,7 @@ onMounted(async () => {
         <ul class="list-disc ml-6">
           <li
             v-for="material in getDetailsList(
-              cardData.creditCollection.creditData.nodes
+              cardData.creditCollection.creditData.nodes,
             ).material"
             :key="material.key"
           >
@@ -87,7 +88,7 @@ onMounted(async () => {
         <ul class="list-disc ml-6">
           <li
             v-for="location in getDetailsList(
-              cardData.creditCollection.creditData.nodes
+              cardData.creditCollection.creditData.nodes,
             ).location"
             :key="location"
           >
@@ -100,7 +101,7 @@ onMounted(async () => {
         <ul class="list-disc ml-6">
           <li
             v-for="applicant in getDetailsList(
-              cardData.creditCollection.creditData.nodes
+              cardData.creditCollection.creditData.nodes,
             ).applicant"
             :key="applicant"
           >

frontend/marketplace/src/components/BuyButton.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useAuth } from "@/stores/auth";
+import { isValidCreditAmount } from "@/utils/utils";
 export interface BuyButtonProps {
   showButtonSpinner: boolean;
   insufficientBalance: boolean;
   coinFormatted: string;
   handleCardPayment: () => void;
   handleBuyCredits: () => void;
   isWalletConnected: boolean;
+  availableCredits: number;
+  buyingCreditAmount: number;
 }
 const props = defineProps<BuyButtonProps>();
 
@@ -19,13 +22,18 @@ enum BuyButtonState {
   ENABLED_CARD = "enabled_card",
   ENABLED_WALLET = "enabled_wallet",
   LOADING = "loading",
+  INVALID_CREDIT = "invalid_credit",
 }
 
 const buttonState = computed<BuyButtonState>(() => {
   if (props.showButtonSpinner) {
     return BuyButtonState.LOADING;
   }
 
+  if (!isValidCreditAmount(props.buyingCreditAmount, props.availableCredits)) {
+    return BuyButtonState.INVALID_CREDIT;
+  }
+
   if (isAuthenticated.value) {
     return BuyButtonState.ENABLED_CARD;
   }
@@ -53,6 +61,8 @@ const buttonText = computed(() => {
       return "Log in to pay";
     case BuyButtonState.DISABLED:
       return "Insufficient balance";
+    case BuyButtonState.INVALID_CREDIT:
+      return "Invalid credit";
     default:
       return "Unknown state";
   }
@@ -74,7 +84,8 @@ const buttonHandler = computed<(() => void) | undefined>(() => {
 const isDisabled = computed(
   () =>
     buttonState.value === BuyButtonState.DISABLED ||
-    buttonState.value === BuyButtonState.LOADING,
+    buttonState.value === BuyButtonState.LOADING ||
+    buttonState.value === BuyButtonState.INVALID_CREDIT,
 );
 
 const buttonsCssClasses = `

frontend/marketplace/src/components/BuyCredits.vue

@@ -238,6 +238,8 @@ const handleCardPayment = async () => {
         :handle-buy-credits="handleBuyCredits"
         :handle-card-payment="handleCardPayment"
         :is-wallet-connected="isWalletConnected"
+        :available-credits="availableCredits"
+        :buying-credit-amount="amount"
       ></BuyButton>
     </div>
   </div>

frontend/marketplace/src/components/CustomImage.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import AuctionCard from "../assets/auctionCard.png";
+export interface CustomImageProps {
+  src: string;
+  imageClass: string;
+  fallbackImageSrc?: string;
+}
+
+const props = defineProps<CustomImageProps>();
+const emits = defineEmits(["onImageClick"]);
+const defaultImage = AuctionCard;
+const handleClick = () => {
+  emits("onImageClick");
+};
+
+const handleError = (event: Event) => {
+  const img = event.target as HTMLImageElement;
+
+  if (props.fallbackImageSrc) {
+    img.src = props.fallbackImageSrc;
+  } else {
+    img.src = defaultImage;
+  }
+};
+</script>
+<template>
+  <img
+    :class="imageClass || 'rounded-sm h-[200px] w-[200px]'"
+    v-bind="props"
+    @click="handleClick"
+    @error="handleError"
+  />
+</template>

frontend/marketplace/src/components/ImageCarousel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Carousel, Slide, Navigation } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
+import CustomImage from "@/components/CustomImage.vue";
 
 export interface ImageCarouselProps {
   imageArray: string[];
@@ -11,7 +12,10 @@ defineProps<ImageCarouselProps>();
 <template>
   <Carousel>
     <Slide v-for="url in imageArray" :key="url">
-      <img class="min-h-48 max-h-[200px] w-full rounded-lg" :src="url" />
+      <CustomImage
+        :src="url"
+        image-class="min-h-48 max-h-[200px] w-full rounded-lg"
+      />
     </Slide>
     <template #addons>
       <Navigation />

frontend/marketplace/src/components/ImageGallery.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import "vue3-carousel/dist/carousel.css";
 import { ref, watch } from "vue";
+import CustomImage from "@/components/CustomImage.vue";
 
 export interface ImageGalleryProps {
   imageArray: string[];
@@ -13,7 +14,7 @@ watch(
   () => props.imageArray,
   (newValue) => {
     activeImageURL.value = newValue[0];
-  }
+  },
 );
 
 const handleActiveImage = (url: string) => {
@@ -23,9 +24,9 @@ const handleActiveImage = (url: string) => {
 <template>
   <div class="grid grid-cols-6 gap-5 max-h-[500px] my-5 w-full">
     <div class="col-span-4 w-full">
-      <img
-        class="rounded-sm h-[500px] w-full object-none"
+      <CustomImage
         :src="activeImageURL"
+        image-class="rounded-sm h-[500px] w-full object-none"
       />
     </div>
     <div class="max-h-[500px] px-3 col-span-2 overflow-auto">
@@ -36,12 +37,12 @@ const handleActiveImage = (url: string) => {
         <img src="../assets/scrollBottomIcon.svg" />
       </button>
       <div class="grid grid-cols-2 gap-5">
-        <img
-          class="rounded-sm h-[150px] w-[200px] cursor-pointer"
+        <CustomImage
+          @on-image-click="handleActiveImage(url)"
           :src="url"
+          image-class="rounded-sm h-[150px] w-[200px] cursor-pointer"
           v-for="url in imageArray"
           :id="url"
-          @click="handleActiveImage(url)"
           :key="url"
         />
       </div>

frontend/marketplace/src/utils/utils.ts

@@ -49,7 +49,7 @@ export const getDetailsList = (data: any) => {
   const uniqueMaterialArray = materialArray.filter(
     (obj, index, self) =>
       index ===
-      self.findIndex((o) => o.key === obj.key && o.value === obj.value)
+      self.findIndex((o) => o.key === obj.key && o.value === obj.value),
   );
 
   return {
@@ -68,7 +68,7 @@ export const addTextWithSpacing = (
   text: string,
   x: number,
   y: number,
-  spacing: number
+  spacing: number,
 ) => {
   for (let i = 0; i < text.length; i++) {
     const currentLetter = text[i];
@@ -84,12 +84,12 @@ export const addTextWithSpacing = (
 export const calculateTextProperties = (
   name: string,
   baseXPos: number = 163,
-  baseFontSize: number = 50
+  baseFontSize: number = 50,
 ): { xPos: number; fontSize: number } => {
   const nameLength = name.length;
 
   let stepSize = 0;
-  let charsPerStep = 1;
+  const charsPerStep = 1;
   let fontSize = baseFontSize;
   if (nameLength < 15) {
     stepSize = 4;
@@ -105,16 +105,16 @@ export const calculateTextProperties = (
   }
   const steps = Math.floor((nameLength - 3) / charsPerStep);
 
-  let xPos = baseXPos - steps * stepSize;
+  const xPos = baseXPos - steps * stepSize;
 
   return { xPos, fontSize };
-}
+};
 export const calculateXPosition = (
   text: string,
   basePosition: number = 179,
   capitalStep: number = 1.5,
   otherStep: number = 1,
-  numberStep: number = 1.4
+  numberStep: number = 1.4,
 ): number => {
   let currentPosition = basePosition;
 
@@ -130,8 +130,15 @@ export const calculateXPosition = (
   }
 
   return currentPosition;
-}
+};
 
 export const ipfsToHttpsProtocol = (url: string) => {
   return url.replace("ipfs://", "https://ipfs.empowerchain.io/ipfs/");
 };
+
+export const isValidCreditAmount = (
+  amount: number,
+  available: number,
+): boolean => {
+  return amount > 0 && Number.isInteger(amount) && amount <= available;
+};