feat: use new stamp url format for space cover and avatar (#858)

* feat: add support for offchain testnet space avatar and cover

* fix: move all remaining stamp url to new format

---------

Co-authored-by: Less <[email protected]>

apps/ui/src/components/FormSpaceProfile.vue

@@ -171,9 +171,7 @@ onMounted(() => {
         type: 'string',
         format: 'stamp',
         title: 'Avatar',
-        default:
-          props.id ||
-          '0x2121212121212121212121212121212121212121212121212121212121212121'
+        default: `${space?.network || 'eth'}:${props.id || '0x2121212121212121212121212121212121212121212121212121212121212121'}`
       }"
     />
     <h4 class="eyebrow mb-2 font-medium">Profile</h4>

apps/ui/src/components/Layout/App.vue

@@ -138,7 +138,7 @@ watch(
 
     const faviconUrl = getStampUrl(
       'space',
-      whiteLabelSpace.value.id,
+      `${whiteLabelSpace.value.network}:${whiteLabelSpace.value.id}`,
       16,
       getCacheHash(whiteLabelSpace.value.avatar)
     );

apps/ui/src/components/SpaceAvatar.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { getCacheHash } from '@/helpers/utils';
-import { offchainNetworks } from '@/networks';
 import { NetworkID } from '@/types';
 
 const props = withDefaults(
@@ -18,10 +17,10 @@ const cb = computed(() => getCacheHash(props.space.avatar));
 
 <template>
   <UiStamp
-    :id="space.id"
+    :id="`${space.network}:${space.id}`"
     :size="size"
     :cb="cb"
     class="!bg-skin-bg"
-    :type="offchainNetworks.includes(space.network) ? 'space' : 'space-sx'"
+    type="space"
   />
 </template>

apps/ui/src/components/SpaceCover.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { getCacheHash, getStampUrl } from '@/helpers/utils';
-import { offchainNetworks } from '@/networks';
 import { NetworkID } from '@/types';
 
 const props = withDefaults(
@@ -20,24 +19,20 @@ const cb = computed(() => getCacheHash(props.space.cover));
 <template>
   <UiStamp
     v-if="space.cover"
-    :id="space.id"
+    :id="`${space.network}:${space.id}`"
     :width="width"
     :height="height"
     :cb="cb"
-    :type="
-      offchainNetworks.includes(space.network)
-        ? 'space-cover'
-        : 'space-cover-sx'
-    "
+    type="space-cover"
     class="object-cover !rounded-none size-full"
   />
   <div
     v-else
     class="bg-cover bg-center w-full h-full"
     :style="{
       'background-image': `url(${getStampUrl(
-        offchainNetworks.includes(space.network) ? 'space' : 'space-sx',
-        space.id,
+        'space',
+        `${space.network}:${space.id}`,
         50,
         getCacheHash(space.avatar)
       )}`,

apps/ui/src/components/Ui/InputStamp.vue

@@ -64,7 +64,7 @@ async function handleFileChange(e: Event) {
       :id="definition.default"
       :size="80"
       class="pointer-events-none !rounded-none group-hover:opacity-80"
-      type="space-sx"
+      type="space"
       :class="{
         'opacity-80': isUploadingImage
       }"

apps/ui/src/components/Ui/Stamp.vue

@@ -3,14 +3,7 @@ import { getStampUrl } from '@/helpers/utils';
 
 withDefaults(
   defineProps<{
-    type?:
-      | 'avatar'
-      | 'user-cover'
-      | 'space'
-      | 'space-cover'
-      | 'space-sx'
-      | 'space-cover-sx'
-      | 'token';
+    type?: 'avatar' | 'user-cover' | 'space' | 'space-cover' | 'token';
     id: string;
     size?: number;
     width?: number;

apps/ui/src/helpers/utils.ts

@@ -13,8 +13,9 @@ import {
   validateAndParseAddress
 } from 'starknet';
 import { RouteParamsRaw } from 'vue-router';
+import { offchainNetworks } from '@/networks';
 import { VotingPowerItem } from '@/stores/votingPowers';
-import { Choice, Proposal, SpaceMetadata } from '@/types';
+import { Choice, NetworkID, Proposal, SpaceMetadata } from '@/types';
 import { MAX_SYMBOL_LENGTH } from './constants';
 import pkg from '@/../package.json';
 import ICCoingecko from '~icons/c/coingecko';
@@ -475,14 +476,7 @@ export function getCacheHash(value?: string) {
 }
 
 export function getStampUrl(
-  type:
-    | 'avatar'
-    | 'user-cover'
-    | 'space'
-    | 'space-cover'
-    | 'space-sx'
-    | 'space-cover-sx'
-    | 'token',
+  type: 'avatar' | 'user-cover' | 'space' | 'space-cover' | 'token',
   id: string,
   size: number | { width: number; height: number },
   hash?: string
@@ -495,10 +489,12 @@ export function getStampUrl(
   }
 
   const cacheParam = hash ? `&cb=${hash}` : '';
-
-  const formattedId = ['avatar', 'space-sx', 'space-cover-sx'].includes(type)
-    ? formatAddress(id)
-    : id;
+  const [entryNetwork] = id.split(':') as [NetworkID, string];
+  const isAddress =
+    type === 'avatar' ||
+    (['space', 'space-cover'].includes(type) &&
+      !offchainNetworks.includes(entryNetwork));
+  const formattedId = isAddress ? formatAddress(id) : id;
 
   return `https://cdn.stamp.fyi/${type}/${formattedId}${sizeParam}${cacheParam}`;
 }

apps/ui/src/views/Space.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { getCacheHash, getStampUrl } from '@/helpers/utils';
-import { offchainNetworks } from '@/networks';
 
 const { setFavicon } = useFavicon();
 const { param } = useRouteParser('space');
@@ -44,8 +43,8 @@ watchEffect(() => {
   }
 
   const faviconUrl = getStampUrl(
-    offchainNetworks.includes(space.value.network) ? 'space' : 'space-sx',
-    space.value.id,
+    'space',
+    `${space.value.network}:${space.value.id}`,
     16,
     getCacheHash(space.value.avatar)
   );