From 461efb1a6580274eab6d3443273c30db5df9bc89 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Wed, 13 Dec 2023 12:29:52 +0530
Subject: [PATCH 1/6] custom component to handle ivalid image

---
 .../src/components/AuctionCard.vue            |  5 +--
 .../src/components/AuctionResultsCard.vue     | 11 +++---
 .../src/components/CustomImage.vue            | 36 +++++++++++++++++++
 .../src/components/ImageCarousel.vue          |  6 +++-
 .../src/components/ImageGallery.vue           | 13 +++----
 5 files changed, 57 insertions(+), 14 deletions(-)
 create mode 100644 frontend/marketplace/src/components/CustomImage.vue

diff --git a/frontend/marketplace/src/components/AuctionCard.vue b/frontend/marketplace/src/components/AuctionCard.vue
index 41fa6488c..89b96fc5c 100644
--- a/frontend/marketplace/src/components/AuctionCard.vue
+++ b/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
+    <CustomImage
       class="max-h-[250px] w-full rounded-lg"
       :src="
         convertIPFStoHTTPS(
           auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
-            ?.nodes[0].url
+            ?.nodes[0].url,
         ) || auctionCard
       "
     />
diff --git a/frontend/marketplace/src/components/AuctionResultsCard.vue b/frontend/marketplace/src/components/AuctionResultsCard.vue
index 472651031..7c7bab1d1 100644
--- a/frontend/marketplace/src/components/AuctionResultsCard.vue
+++ b/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
       "
+      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"
           >
diff --git a/frontend/marketplace/src/components/CustomImage.vue b/frontend/marketplace/src/components/CustomImage.vue
new file mode 100644
index 000000000..4a94a45dd
--- /dev/null
+++ b/frontend/marketplace/src/components/CustomImage.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import AuctionCard from "../assets/auctionCard.png";
+export interface CustomImageProps {
+  src: string;
+  imageClass: {
+    type: String;
+    default: "rounded-sm h-[200px] w-[200px]";
+  };
+  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"
+    v-bind="props"
+    @click="handleClick"
+    @error="handleError"
+  />
+</template>
diff --git a/frontend/marketplace/src/components/ImageCarousel.vue b/frontend/marketplace/src/components/ImageCarousel.vue
index aabe6209b..42f636f03 100644
--- a/frontend/marketplace/src/components/ImageCarousel.vue
+++ b/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 />
diff --git a/frontend/marketplace/src/components/ImageGallery.vue b/frontend/marketplace/src/components/ImageGallery.vue
index c7b6ab379..0a5d3275d 100644
--- a/frontend/marketplace/src/components/ImageGallery.vue
+++ b/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>

From 132b931745e78aff8d8d5d8b3e7f79849471d4c5 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Thu, 14 Dec 2023 00:38:37 +0530
Subject: [PATCH 2/6] handle invalid credit amount

---
 .../marketplace/src/components/BuyButton.vue  | 13 ++++++++++-
 .../marketplace/src/components/BuyCredits.vue |  2 ++
 frontend/marketplace/src/utils/utils.ts       | 23 ++++++++++++-------
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/marketplace/src/components/BuyButton.vue b/frontend/marketplace/src/components/BuyButton.vue
index 3f33d1a49..92c8be4e8 100644
--- a/frontend/marketplace/src/components/BuyButton.vue
+++ b/frontend/marketplace/src/components/BuyButton.vue
@@ -1,6 +1,7 @@
 <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;
@@ -8,6 +9,8 @@ export interface BuyButtonProps {
   handleCardPayment: () => void;
   handleBuyCredits: () => void;
   walletConnected: () => boolean;
+  availableCredits: number;
+  buyingCreditAmount: number;
 }
 const props = defineProps<BuyButtonProps>();
 
@@ -19,6 +22,7 @@ enum BuyButtonState {
   ENABLED_CARD = "enabled_card",
   ENABLED_WALLET = "enabled_wallet",
   LOADING = "loading",
+  INVALID_CREDIT = "invalid_credit",
 }
 
 const buttonState = computed<BuyButtonState>(() => {
@@ -26,6 +30,10 @@ const buttonState = computed<BuyButtonState>(() => {
     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 = `
diff --git a/frontend/marketplace/src/components/BuyCredits.vue b/frontend/marketplace/src/components/BuyCredits.vue
index 4ce1c3eb1..44036777b 100644
--- a/frontend/marketplace/src/components/BuyCredits.vue
+++ b/frontend/marketplace/src/components/BuyCredits.vue
@@ -226,6 +226,8 @@ const handleCardPayment = async () => {
         :handle-buy-credits="handleBuyCredits"
         :handle-card-payment="handleCardPayment"
         :wallet-connected="walletConnected"
+        :available-credits="availableCredits"
+        :buying-credit-amount="amount"
       ></BuyButton>
     </div>
   </div>
diff --git a/frontend/marketplace/src/utils/utils.ts b/frontend/marketplace/src/utils/utils.ts
index 1f0c020a3..a335013ba 100644
--- a/frontend/marketplace/src/utils/utils.ts
+++ b/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;
+};

From ffcbde5d4e57f39745eee3c4966f766ec792105f Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Thu, 14 Dec 2023 01:00:42 +0530
Subject: [PATCH 3/6] build issue fix

---
 frontend/marketplace/src/components/AuctionCard.vue        | 2 +-
 frontend/marketplace/src/components/AuctionResultsCard.vue | 2 +-
 frontend/marketplace/src/components/CustomImage.vue        | 7 ++-----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/frontend/marketplace/src/components/AuctionCard.vue b/frontend/marketplace/src/components/AuctionCard.vue
index 89b96fc5c..58b8350e7 100644
--- a/frontend/marketplace/src/components/AuctionCard.vue
+++ b/frontend/marketplace/src/components/AuctionCard.vue
@@ -18,7 +18,7 @@ onMounted(async () => {
 <template>
   <div class="bg-lightBlack rounded-lg md:rounded-sm">
     <CustomImage
-      class="max-h-[250px] w-full rounded-lg"
+      image-class="max-h-[250px] w-full rounded-lg"
       :src="
         convertIPFStoHTTPS(
           auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
diff --git a/frontend/marketplace/src/components/AuctionResultsCard.vue b/frontend/marketplace/src/components/AuctionResultsCard.vue
index 7c7bab1d1..3e70745d9 100644
--- a/frontend/marketplace/src/components/AuctionResultsCard.vue
+++ b/frontend/marketplace/src/components/AuctionResultsCard.vue
@@ -29,7 +29,7 @@ onMounted(async () => {
         getDetailsList(cardData.creditCollection.creditData.nodes)
           .thumbnailUrl || auctionCard
       "
-      class="max-h-[200px] w-full rounded-sm"
+      image-class="max-h-[200px] w-full rounded-sm"
     />
 
     <!--      Details for Mobile UI-->
diff --git a/frontend/marketplace/src/components/CustomImage.vue b/frontend/marketplace/src/components/CustomImage.vue
index 4a94a45dd..84d0f7b3a 100644
--- a/frontend/marketplace/src/components/CustomImage.vue
+++ b/frontend/marketplace/src/components/CustomImage.vue
@@ -2,10 +2,7 @@
 import AuctionCard from "../assets/auctionCard.png";
 export interface CustomImageProps {
   src: string;
-  imageClass: {
-    type: String;
-    default: "rounded-sm h-[200px] w-[200px]";
-  };
+  imageClass: string;
   fallbackImageSrc?: string;
 }
 
@@ -28,7 +25,7 @@ const handleError = (event: Event) => {
 </script>
 <template>
   <img
-    :class="imageClass"
+    :class="imageClass || 'rounded-sm h-[200px] w-[200px]'"
     v-bind="props"
     @click="handleClick"
     @error="handleError"

From 15a0e2016bbaaf797ff5634e71359144cac05586 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Thu, 14 Dec 2023 12:31:16 +0530
Subject: [PATCH 4/6] review changes

---
 .../marketplace/src/components/CustomImage.vue  | 17 +++++++++--------
 .../marketplace/src/components/ImageGallery.vue |  4 ++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/marketplace/src/components/CustomImage.vue b/frontend/marketplace/src/components/CustomImage.vue
index 84d0f7b3a..e5916a08b 100644
--- a/frontend/marketplace/src/components/CustomImage.vue
+++ b/frontend/marketplace/src/components/CustomImage.vue
@@ -7,10 +7,10 @@ export interface CustomImageProps {
 }
 
 const props = defineProps<CustomImageProps>();
-const emits = defineEmits(["onImageClick"]);
+const emits = defineEmits(["click"]);
 const defaultImage = AuctionCard;
 const handleClick = () => {
-  emits("onImageClick");
+  emits("click");
 };
 
 const handleError = (event: Event) => {
@@ -24,10 +24,11 @@ const handleError = (event: Event) => {
 };
 </script>
 <template>
-  <img
-    :class="imageClass || 'rounded-sm h-[200px] w-[200px]'"
-    v-bind="props"
-    @click="handleClick"
-    @error="handleError"
-  />
+  <button @click="handleClick" class="h-full w-full p-0 bg-transparent m-0">
+    <img
+      :class="imageClass || 'rounded-sm h-[200px] w-[200px]'"
+      v-bind="props"
+      @error="handleError"
+    />
+  </button>
 </template>
diff --git a/frontend/marketplace/src/components/ImageGallery.vue b/frontend/marketplace/src/components/ImageGallery.vue
index 0a5d3275d..9b5c75bd7 100644
--- a/frontend/marketplace/src/components/ImageGallery.vue
+++ b/frontend/marketplace/src/components/ImageGallery.vue
@@ -38,9 +38,9 @@ const handleActiveImage = (url: string) => {
       </button>
       <div class="grid grid-cols-2 gap-5">
         <CustomImage
-          @on-image-click="handleActiveImage(url)"
+          @click="handleActiveImage(url)"
           :src="url"
-          image-class="rounded-sm h-[150px] w-[200px] cursor-pointer"
+          image-class="rounded-sm h-[150px] w-full cursor-pointer"
           v-for="url in imageArray"
           :id="url"
           :key="url"

From eeec25ad2c650cc69d72a9ef29d3a18d8d1f8cf8 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Thu, 14 Dec 2023 13:05:57 +0530
Subject: [PATCH 5/6] github verify test

---
 frontend/marketplace/src/components/CustomImage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/marketplace/src/components/CustomImage.vue b/frontend/marketplace/src/components/CustomImage.vue
index e5916a08b..4badb3a10 100644
--- a/frontend/marketplace/src/components/CustomImage.vue
+++ b/frontend/marketplace/src/components/CustomImage.vue
@@ -12,7 +12,7 @@ const defaultImage = AuctionCard;
 const handleClick = () => {
   emits("click");
 };
-
+//Verify checking
 const handleError = (event: Event) => {
   const img = event.target as HTMLImageElement;
 

From 25aeb54bd0707340d82471d956f93f814c36fe56 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Thu, 14 Dec 2023 13:08:23 +0530
Subject: [PATCH 6/6] comment removed

---
 frontend/marketplace/src/components/CustomImage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/marketplace/src/components/CustomImage.vue b/frontend/marketplace/src/components/CustomImage.vue
index 4badb3a10..780afdaee 100644
--- a/frontend/marketplace/src/components/CustomImage.vue
+++ b/frontend/marketplace/src/components/CustomImage.vue
@@ -12,7 +12,6 @@ const defaultImage = AuctionCard;
 const handleClick = () => {
   emits("click");
 };
-//Verify checking
 const handleError = (event: Event) => {
   const img = event.target as HTMLImageElement;