fix: handle inscription type svg, ref #4727

leather-io · Dec 19, 2023 · b713c70 · b713c70
1 parent faae457
commit b713c70
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx
@@ -40,6 +40,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
         />
       );
     case 'html':
+    case 'svg':
     case 'video':
       return (
         <CollectibleIframe

diff --git a/src/app/query/bitcoin/ordinals/inscription.hooks.ts b/src/app/query/bitcoin/ordinals/inscription.hooks.ts
@@ -11,7 +11,7 @@ export function createInscriptionInfoUrl(id: string) {
   return `https://ordinals.hiro.so/inscription/${id}`;
 }
 
-function createHtmlPreviewUrl(id: string) {
+function createIframePreviewUrl(id: string) {
   return `https://ordinals.com/preview/${id}`;
 }
 
@@ -20,14 +20,14 @@ export function convertInscriptionToSupportedInscriptionType(inscription: Inscri
   return whenInscriptionType<SupportedInscription>(inscription.content_type, {
     audio: () => ({
       infoUrl: createInscriptionInfoUrl(inscription.id),
-      src: createHtmlPreviewUrl(inscription.id),
+      src: createIframePreviewUrl(inscription.id),
       title,
       type: 'audio',
       ...inscription,
     }),
     html: () => ({
       infoUrl: createInscriptionInfoUrl(inscription.id),
-      src: createHtmlPreviewUrl(inscription.id),
+      src: createIframePreviewUrl(inscription.id),
       title,
       type: 'html',
       ...inscription,
@@ -39,6 +39,13 @@ export function convertInscriptionToSupportedInscriptionType(inscription: Inscri
       type: 'image',
       ...inscription,
     }),
+    svg: () => ({
+      infoUrl: createInscriptionInfoUrl(inscription.id),
+      src: createIframePreviewUrl(inscription.id),
+      title,
+      type: 'svg',
+      ...inscription,
+    }),
     text: () => ({
       contentSrc: `${HIRO_INSCRIPTIONS_API_URL}/${inscription.id}/content`,
       infoUrl: createInscriptionInfoUrl(inscription.id),
@@ -48,7 +55,7 @@ export function convertInscriptionToSupportedInscriptionType(inscription: Inscri
     }),
     video: () => ({
       infoUrl: createInscriptionInfoUrl(inscription.id),
-      src: createHtmlPreviewUrl(inscription.id),
+      src: createIframePreviewUrl(inscription.id),
       title,
       type: 'video',
       ...inscription,

diff --git a/src/shared/models/inscription.model.ts b/src/shared/models/inscription.model.ts
@@ -35,7 +35,15 @@ export interface Inscription extends InscriptionResponseItem {
  * appropriately and securely. Inscriptions of types not ready to be handled by the
  * app should be classified as "other".
  */
-const supportedInscriptionTypes = ['audio', 'html', 'image', 'text', 'video', 'other'] as const;
+const supportedInscriptionTypes = [
+  'audio',
+  'html',
+  'image',
+  'svg',
+  'text',
+  'video',
+  'other',
+] as const;
 
 type SupportedInscriptionType = (typeof supportedInscriptionTypes)[number];
 
@@ -64,6 +72,11 @@ interface ImageInscription extends BaseSupportedInscription {
   src: string;
 }
 
+interface SvgInscription extends BaseSupportedInscription {
+  type: 'svg';
+  src: string;
+}
+
 interface TextInscription extends BaseSupportedInscription {
   type: 'text';
   contentSrc: string;
@@ -87,6 +100,7 @@ export type SupportedInscription =
   | AudioInscription
   | HtmlInscription
   | ImageInscription
+  | SvgInscription
   | TextInscription
   | VideoInscription
   | OtherInscription;
@@ -107,6 +121,10 @@ export function whenInscriptionType<T>(
     return branches.image();
   }
 
+  if (mimeType.startsWith('image/svg') && branches.svg) {
+    return branches.svg();
+  }
+
   if (mimeType.startsWith('text') && branches.text) {
     return branches.text();
   }