Fixes part 2

frontend/marketplace/.env.dev

@@ -2,6 +2,7 @@ VITE_API_ENDPOINT="https://testnet.empowerchain.io:3000/"
 VITE_HTTPS_FILE_URL="https://testnet.empowerchain.io:8080/ipfs/"
 VITE_MARKETPLACE_CONTRACT="empower14hj2tavq8fpesdwxxcu44rty3hh90vhujrvcmstl4zr3txmfvw9sfg4umu"
 VITE_CHAIN_ID="circulus-1"
+VITE_CHAIN_NAME="Empowerchain Testnet"
 VITE_RPC_ENDPOINT="https://testnet.empowerchain.io:26659"
-VITE_DEFAULT_CREDIT_TYPE="PCRD"
-VITE_GOOGLE_MAPS_API_KEY="AIzaSyBezM4SJJO5t2bS5j2CPOdWJm_kHsdN4n0"
+VITE_REST_ENDPOINT="https://testnet.empowerchain.io:1319"
+VITE_DEFAULT_CREDIT_TYPE="PCRD"

frontend/marketplace/package.json

@@ -29,7 +29,8 @@
     "vue-multiselect": "^3.0.0-beta.2",
     "vue-router": "^4.1.6",
     "vue3-carousel": "^0.3.1",
-    "vue3-google-map": "^0.15.0"
+    "vue3-google-map": "^0.15.0",
+    "vue3-toastify": "^0.1.11"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

frontend/marketplace/src/components/AuctionCard.vue

@@ -9,7 +9,7 @@ defineProps<AuctionCardProps>()
 </script>
 <template>
   <div class="bg-lightBlack rounded-lg md:rounded-sm">
-    <img :src="convertIPFStoHTTPS(auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles?.nodes[0].url) || auctionCard">
+    <img class="max-h-[250px] w-full rounded-lg" :src="convertIPFStoHTTPS(auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles?.nodes[0].url) || auctionCard">
     <div class="grid grid-cols-2 p-3 gap-4">
       <div>
         <div>

frontend/marketplace/src/components/AuctionResultsCard.vue

@@ -16,7 +16,7 @@ defineProps<AuctionResultsCardProps>()
 <template>
   <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" :src="getDetailsList(cardData.creditCollection.creditData.nodes).thumbnailUrl || auctionCard">
+    <img class="h-full col-span-1 rounded-sm" :src="getDetailsList(cardData.creditCollection.creditData.nodes).thumbnailUrl || auctionCard">
 
     <!--      Details for Mobile UI-->
     <div class="grid grid-cols-2 p-5 gap-4 md:hidden">

frontend/marketplace/src/components/AuctionSection.vue

@@ -15,7 +15,7 @@ defineProps<AuctionSectionProps>()
     <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
       <AuctionCard v-for="auction in auctionArray" :key="auction" :auction-data="auction"/>
       <div
-          class="grid grid-rows-3 p-4 bg-greenPrimary h-[346px] md:h-full w-full rounded-sm font-Inter text-title32 text-white font-bold cursor-pointer" @click="router.push('/auction')">
+          class="grid grid-rows-3 p-4 bg-greenPrimary h-[346px] md: md:min-h-[346px] md:h-full w-full rounded-sm font-Inter text-title32 text-white font-bold cursor-pointer" @click="router.push('/auction')">
         <div class="row-start-2 flex flex-row justify-center items-center">
           View all auctions
         </div>

frontend/marketplace/src/components/CustomGoogleMap.vue

@@ -1,26 +1,64 @@
 <script setup lang="ts">
 import { GOOGLE_MAPS_API_KEY } from "@/config/config";
 import {GoogleMap, Marker} from "vue3-google-map"
+import {onMounted, ref} from "vue";
 
 export interface CustomGoogleMapProps {
   locations: {
     lat: number;
     lng: number
   }[]
 }
-defineProps<CustomGoogleMapProps>()
+
+const props = defineProps<CustomGoogleMapProps>()
+
+const center = ref()
+const zoomLevel = ref()
+
+const getMapCenter = () => {
+  const locations = [...props.locations];
+
+// Find the minimum and maximum latitude and longitude values
+  const minLat = Math.min(...locations.map(location => location.lat));
+  const maxLat = Math.max(...locations.map(location => location.lat));
+  const minLng = Math.min(...locations.map(location => location.lng));
+  const maxLng = Math.max(...locations.map(location => location.lng));
+
+// Calculate the center point
+  const centerLat = (minLat + maxLat) / 2;
+  const centerLng = (minLng + maxLng) / 2;
+
+// Calculate the zoom level
+  let zoom = 12; // Initial zoom level
+  const maxDistance = Math.max(maxLat - minLat, maxLng - minLng);
+
+// Adjust the zoom level based on the maximum distance
+  if (maxDistance !== 0) {
+    zoom = Math.floor(Math.log2(360 / maxDistance));
+  }
+
+  center.value = {
+    lat: centerLat,
+    lng: centerLng
+  }
+  zoomLevel.value = zoom
+}
+
+onMounted(() => {
+  getMapCenter()
+})
 
 </script>
 <template>
   <GoogleMap
       class="google-map"
       :api-key="GOOGLE_MAPS_API_KEY"
       style="width: 100%; height:100%;overflow: hidden"
-      :center="locations[0]"
-      :zoom="15"
+      :center="center"
+      :zoom="zoomLevel"
   >
     <MarkerCluster>
-      <Marker v-for="(location, i) in locations" :options="{ position: location }" :key="i" />
+      <Marker v-for="(location, i) in locations" :options="{ position: location }" :key="i"/>
     </MarkerCluster>
   </GoogleMap>
 </template>

frontend/marketplace/src/components/ImageGallery.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import 'vue3-carousel/dist/carousel.css';
-import {ref, watch} from "vue";
+import {onMounted, ref} from "vue";
 
 export interface ImageGalleryProps {
   imageArray: string[]
@@ -9,11 +9,9 @@ export interface ImageGalleryProps {
 const props = defineProps<ImageGalleryProps>()
 const activeImageURL = ref(props.imageArray[0])
 
-// TODO probably not the best way to do it
-watch(() => props.imageArray, (newValue) => {
-      activeImageURL.value = newValue[0];
-    });
-
+onMounted(()=>{
+  activeImageURL.value = props.imageArray[0];
+})
 const handleActiveImage = (url: string) => {
   activeImageURL.value = url
 }

frontend/marketplace/src/components/MainFooter.vue

@@ -21,29 +21,29 @@
     <div class="flex flex-col justify-end gap-8 md:gap-28 w-full md:flex-row text-center font-Inter mb-10">
       <ul>
         <p class="font-bold text-title18 mb-4">Quick Links</p>
+<!--        <li class="text-title14 text-textLightGray mb-2">-->
+<!--          Get MPWR-->
+<!--        </li>-->
         <li class="text-title14 text-textLightGray mb-2">
-          Get MPWR
-        </li>
-        <li class="text-title14 text-textLightGray mb-2">
-          FAQ
+          <a href="/faq">FAQ</a>
         </li>
       </ul>
       <ul>
         <p class="font-bold text-title18 mb-4">Social</p>
         <li class="text-title14 text-textLightGray mb-2">
-          Twitter
+          <a target="_blank" href="https://twitter.com/empowerchain_io">Twitter</a>
         </li>
         <li class="text-title14 text-textLightGray mb-2">
-          Discord
+          <a target="_blank" href="https://discord.gg/UTxEzFzHVX">Discord</a>
         </li>
         <li class="text-title14 text-textLightGray mb-2">
-          Telegram
+          <a target="_blank" href="https://t.me/empowerchain">Telegram</a>
         </li>
       </ul>
       <ul>
         <p class="font-bold text-title18 mb-4">Company</p>
         <li class="text-title14 text-textLightGray mb-2">
-          Empower.eco
+          <a target="_blank" href="https://www.empower.eco/">Empower.eco</a>
         </li>
       </ul>
     </div>