feat: adds component to contain LogoPtr image resolution and fallback…

… process

app/src/components/GrantCard.vue

@@ -15,9 +15,10 @@
     <div class="relative">
       <!--img-->
       <div class="aspect-w-16 aspect-h-9 shadow-light">
-        <img
+        <LogoPtrImage
+          :logoPtr="logoPtr"
           class="w-full h-full object-center object-cover group-hover:opacity-90"
-          :src="(logoPtr?.protocol !== 0 && ptrToURI(logoPtr)) || '/placeholder_grant.svg'"
+          placeholder="/placeholder_grant.svg"
         />
       </div>
 
@@ -57,12 +58,14 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { MetaPtr } from '@dgrants/types';
+// --- Components ---
+import LogoPtrImage from 'src/components/LogoPtrImage.vue';
 // --- Store ---
 import useCartStore from 'src/store/cart';
 import useDataStore from 'src/store/data';
 // --- Methods and Data ---
 import { filterContributionsByGrantId } from 'src/utils/data/contributions';
-import { formatNumber, formatAddress, getEtherscanUrl, ptrToURI, pushRoute } from 'src/utils/utils';
+import { formatNumber, formatAddress, getEtherscanUrl, pushRoute } from 'src/utils/utils';
 // --- Icons ---
 import { Cart2Icon as CartIcon } from '@fusion-icons/vue/interface';
 
@@ -86,7 +89,7 @@ export default defineComponent({
     roundAddress: { type: String, default: '' },
     roundName: { type: String, default: '' },
   },
-  components: { CartIcon },
+  components: { CartIcon, LogoPtrImage },
   setup(props) {
     const grantId = ref<number>(props.id);
     const raised = computed(() => getTotalRaised(grantId.value));
@@ -98,7 +101,6 @@ export default defineComponent({
       isInCart,
       formatAddress,
       getEtherscanUrl,
-      ptrToURI,
       pushRoute,
       raised,
     };

app/src/components/GrantDetailsRow.vue

@@ -3,9 +3,10 @@
   <section class="border-b border-grey-100 grid grid-cols-1 md:grid-cols-2">
     <!--grid:left (img)-->
     <figure class="aspect-w-16 aspect-h-9 shadow-light">
-      <img
+      <LogoPtrImage
         class="w-full h-full object-center object-cover"
-        :src="(logoPtr?.protocol !== 0 && ptrToURI(logoPtr)) || '/placeholder_grant.svg'"
+        :logoPtr="logoPtr"
+        placeholder="/placeholder_grant.svg"
       />
     </figure>
 
@@ -75,13 +76,14 @@ import useCartStore from 'src/store/cart';
 // --- Types ---
 import { Grant, GrantsRoundDetails, MetaPtr } from '@dgrants/types';
 // --- Utils/helper ---
-import { formatAddress, getEtherscanUrl, ptrToURI } from 'src/utils/utils';
+import { formatAddress, getEtherscanUrl } from 'src/utils/utils';
 // --- Components/icons ---
 import { Cart2Icon as CartIcon } from '@fusion-icons/vue/interface';
+import LogoPtrImage from 'src/components/LogoPtrImage.vue';
 
 export default defineComponent({
   name: 'GrantDetailsRow',
-  components: { CartIcon },
+  components: { CartIcon, LogoPtrImage },
   props: {
     grant: { type: Object as PropType<Grant>, required: true },
     roundDetails: { type: Array as PropType<GrantsRoundDetails[]>, required: true },
@@ -91,7 +93,7 @@ export default defineComponent({
   },
   setup() {
     const { addToCart, isInCart, removeFromCart } = useCartStore();
-    return { addToCart, isInCart, removeFromCart, formatAddress, getEtherscanUrl, ptrToURI };
+    return { addToCart, isInCart, removeFromCart, formatAddress, getEtherscanUrl };
   },
 });
 </script>

app/src/components/GrantOwnerCard.vue

@@ -7,7 +7,11 @@
         class="aspect-w-16 aspect-h-9 shadow-light cursor-pointer"
         @click="pushRoute({ name: 'dgrants-id', params: { id: id.toString() } })"
       >
-        <img class="w-full h-full object-center object-cover" :src="ptrToURI(logoPtr) || '/placeholder_grant.svg'" />
+        <LogoPtrImage
+          class="w-full h-full object-center object-cover"
+          :logoPtr="logoPtr"
+          placeholder="/placeholder_grant.svg"
+        />
       </figure>
 
       <!--grid:right (txt)-->
@@ -75,14 +79,18 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue';
+
+// --- Types ---
+import { MetaPtr } from '@dgrants/types';
+
 // --- Methods and Data ---
+import useDataStore from 'src/store/data';
 import { filterContributionsByGrantId } from 'src/utils/data/contributions';
-import { formatNumber, ptrToURI, pushRoute } from 'src/utils/utils';
+import { formatNumber, pushRoute } from 'src/utils/utils';
 
 // --- Components/icons ---
-import useDataStore from 'src/store/data';
+import LogoPtrImage from 'src/components/LogoPtrImage.vue';
 import { Edit3Icon as EditIcon } from '@fusion-icons/vue/interface';
-import { MetaPtr } from '@dgrants/types';
 
 function useGrantInfo(id: number) {
   const { grantRounds, grantContributions, approvedGrantsPk } = useDataStore();
@@ -115,7 +123,7 @@ function useGrantInfo(id: number) {
 
 export default defineComponent({
   name: 'GrantOwnerCard',
-  components: { EditIcon },
+  components: { EditIcon, LogoPtrImage },
   props: {
     id: { type: Number, required: true },
     name: { type: String, required: true },
@@ -125,7 +133,7 @@ export default defineComponent({
     lastUpdated: { type: String, requred: true },
   },
   setup(props) {
-    return { pushRoute, ptrToURI, ...useGrantInfo(props.id) };
+    return { pushRoute, ...useGrantInfo(props.id) };
   },
 });
 </script>

app/src/components/GrantRoundCard.vue

@@ -3,9 +3,10 @@
   <figure class="group cursor-pointer" @click="pushRoute({ name: 'dgrants-round', params: { address: address } })">
     <!--img-->
     <div class="aspect-w-16 aspect-h-9 shadow-light">
-      <img
+      <LogoPtrImage
         class="w-full h-full object-center object-cover group-hover:opacity-90"
-        :src="(logoPtr?.protocol !== 0 && ptrToURI(logoPtr)) || '/placeholder_round.svg'"
+        :logoPtr="logoPtr"
+        placeholder="/placeholder_round.svg"
       />
     </div>
 
@@ -42,11 +43,16 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { formatAddress, getEtherscanUrl, pushRoute, ptrToURI } from 'src/utils/utils';
+// --- Types ---
 import { MetaPtr } from '@dgrants/types';
+// --- Utils/helper ---
+import { formatAddress, getEtherscanUrl, pushRoute } from 'src/utils/utils';
+// --- Components/icons ---
+import LogoPtrImage from 'src/components/LogoPtrImage.vue';
 
 export default defineComponent({
   name: 'GrantRoundCard',
+  components: { LogoPtrImage },
   props: {
     id: { type: Number, required: true },
     name: { type: String, required: true },
@@ -56,7 +62,7 @@ export default defineComponent({
     grantsTotal: { type: Number, required: true },
   },
   setup() {
-    return { formatAddress, getEtherscanUrl, pushRoute, ptrToURI };
+    return { formatAddress, getEtherscanUrl, pushRoute };
   },
 });
 </script>

app/src/components/GrantRoundDetailsRow.vue

@@ -2,9 +2,10 @@
   <div class="border-b border-grey-100 grid grid-cols-1 md:grid-cols-2 gap-x-14">
     <!--grid:left (img)-->
     <figure class="aspect-w-16 aspect-h-9 shadow-light">
-      <img
+      <LogoPtrImage
         class="w-full h-full object-center object-cover"
-        :src="ptrToURI(grantRoundMetadata?.logoPtr) || '/placeholder_grant.svg'"
+        :logoPtr="grantRoundMetadata?.logoPtr"
+        placeholder="/placeholder_round.svg"
       />
     </figure>
 
@@ -96,18 +97,21 @@ import { defineComponent, PropType } from 'vue';
 // --- Types ---
 import { GrantRound, GrantRoundMetadata } from '@dgrants/types';
 // --- Utils/helper ---
-import { pushRoute, formatAddress, getEtherscanUrl, ptrToURI } from 'src/utils/utils';
+import { pushRoute, formatAddress, getEtherscanUrl } from 'src/utils/utils';
 // --- Methods ---
 import { BigNumber } from 'src/utils/ethers';
+// --- Components/icons ---
+import LogoPtrImage from 'src/components/LogoPtrImage.vue';
 
 export default defineComponent({
   name: 'GrantRoundDetailsRow',
+  components: { LogoPtrImage },
   props: {
     grantRound: { type: Object as PropType<GrantRound>, required: true },
     grantRoundMetadata: { type: Object as PropType<GrantRoundMetadata>, required: true },
   },
   setup() {
-    return { BigNumber, pushRoute, formatAddress, getEtherscanUrl, ptrToURI };
+    return { BigNumber, pushRoute, formatAddress, getEtherscanUrl };
   },
 });
 </script>

app/src/components/LogoPtrImage.vue

@@ -0,0 +1,30 @@
+<template>
+  <img :class="classStr" :src="logoUrl" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+// --- Types ---
+import { MetaPtr } from '@dgrants/types';
+// --- Utils ---
+import { ptrToURI } from 'src/utils/utils';
+
+export default defineComponent({
+  name: 'LogoPtrImage',
+  props: {
+    class: { type: String, require: false, default: 'w-full h-full object-center object-cover' },
+    logoPtr: { type: Object as PropType<MetaPtr> | undefined, required: false, default: undefined },
+    placeholder: { type: String, require: false, default: '/placeholder_grant.svg' },
+  },
+  setup(props) {
+    // watch for changes on provided props
+    const classStr = computed(() => props.class);
+    const logoUrl = computed(() => (props.logoPtr ? ptrToURI(props.logoPtr) : false) || props.placeholder);
+
+    return {
+      logoUrl,
+      classStr,
+    };
+  },
+});
+</script>

app/src/utils/data/contributions.ts

@@ -445,7 +445,7 @@ export function filterContributionGrantData(
     if (grantData && grantMetaData && Object.keys(grantMetaData).length) {
       const metaDataVersionId = metadataId(grantData.metaPtr);
       const { logoPtr, name } = grantMetaData[metaDataVersionId];
-      grantLogo = ptrToURI(logoPtr, grantLogo);
+      grantLogo = (logoPtr && logoPtr.protocol === 1 ? ptrToURI(logoPtr) : false) || grantLogo;
       grantName = name || grantName;
     }
 

app/src/utils/utils.ts

@@ -100,18 +100,11 @@ export function decodeMetadataId(id: string): MetaPtr {
 }
 
 // Given a logoPtr, resolve it to a URI that we can fetch
-export function ptrToURI(logoPtr: MetaPtr | undefined | null, fallbackURI = '/placeholder_grant.svg') {
-  // Handle the null and undefined cases
-  if (!logoPtr) {
-    console.warn(`Received empty logoPtr, using fallback URI of ${fallbackURI}`);
-    return fallbackURI;
-  }
-
+export function ptrToURI(logoPtr: MetaPtr) {
   // Parse the pointer
   const { protocol, pointer } = logoPtr;
   if (protocol === 1) return getMetaPtr({ cid: pointer });
-  console.warn(`Unsupported protocol ID ${1}, using fallback URI of ${fallbackURI}`);
-  return fallbackURI;
+  return null;
 }
 
 // --- Validation ---

app/src/views/Cart.vue

@@ -64,9 +64,10 @@
               <!--image-->
               <div>
                 <figure class="aspect-w-16 aspect-h-9 shadow-light">
-                  <img
+                  <LogoPtrImage
                     class="w-full h-full object-center object-cover group-hover:opacity-90"
-                    :src="ptrToURI(grantMetadata[metadataId(item.metaPtr)]?.logoPtr) || '/placeholder_grant.svg'"
+                    :logoPtr="grantMetadata[metadataId(item.metaPtr)]?.logoPtr"
+                    placeholder="/placeholder_grant.svg"
                   />
                 </figure>
               </div>
@@ -224,13 +225,14 @@ import BaseInput from 'src/components/BaseInput.vue';
 import BaseSelect from 'src/components/BaseSelect.vue';
 import TransactionStatus from 'src/components/TransactionStatus.vue';
 import LoadingSpinner from 'src/components/LoadingSpinner.vue';
+import LogoPtrImage from 'src/components/LogoPtrImage.vue';
 // --- Store ---
 import useCartStore from 'src/store/cart';
 import useDataStore from 'src/store/data';
 // --- Methods and Data ---
 import { BigNumber } from 'src/utils/ethers';
 import { SUPPORTED_TOKENS } from 'src/utils/chains';
-import { formatNumber, isValidAmount, metadataId, ptrToURI, pushRoute, watchTransaction } from 'src/utils/utils';
+import { formatNumber, isValidAmount, metadataId, pushRoute, watchTransaction } from 'src/utils/utils';
 import useWalletStore from 'src/store/wallet';
 
 function useCart() {
@@ -363,6 +365,7 @@ export default defineComponent({
     BaseHeader,
     BaseInput,
     BaseSelect,
+    LogoPtrImage,
     LoadingSpinner,
     TransactionStatus,
     CloseIcon,
@@ -371,7 +374,7 @@ export default defineComponent({
   },
   setup() {
     const NOT_IMPLEMENTED = (msg: string) => window.alert(`NOT IMPLEMENTED: ${msg}`);
-    return { ...useCart(), pushRoute, SUPPORTED_TOKENS, NOT_IMPLEMENTED, formatNumber, metadataId, ptrToURI };
+    return { ...useCart(), pushRoute, SUPPORTED_TOKENS, NOT_IMPLEMENTED, formatNumber, metadataId };
   },
 });
 </script>

app/src/views/MyGrants.vue

@@ -42,7 +42,7 @@ import LoadingSpinner from 'src/components/LoadingSpinner.vue';
 import useDataStore from 'src/store/data';
 import useWalletStore from 'src/store/wallet';
 
-import { formatDate, metadataId, ptrToURI } from 'src/utils/utils';
+import { formatDate, metadataId } from 'src/utils/utils';
 
 const { grantMetadata } = useDataStore();
 
@@ -69,7 +69,6 @@ export default defineComponent({
     return {
       metadataId,
       grantMetadata,
-      ptrToURI,
       formatDate,
       ...filterMyGrants(),
     };